From cfd23cd1a37604686380b4b53f06f763a62a7774 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 23 Dec 2025 09:12:49 -0500 Subject: [PATCH] Reprocess CSS to be not minimised. --- public/assets/scaffolding-min.js | 187 +++++++------ public/assets/scaffolding.css | 2 +- public/patterns/core/breakpoint/index.html | 20 +- public/patterns/core/colours/index.html | 4 +- public/patterns/core/header/index.html | 54 +++- public/patterns/core/status/index.html | 81 ++++-- public/patterns/core/sticky-note/index.html | 128 ++++++++- public/patterns/core/switch/index.html | 33 ++- public/patterns/core/tabs/index.html | 251 +++++++++++------- public/patterns/core/tooltip/index.html | 159 ++++++++++- src/pg/core/_colour-samples.pug | 2 +- src/pg/patterns/core/breakpoint/index.pug | 2 +- src/pg/patterns/core/header/header.css | 54 +++- src/pg/patterns/core/header/index.pug | 2 +- src/pg/patterns/core/status/index.pug | 2 +- src/pg/patterns/core/sticky-note/index.pug | 2 +- .../patterns/core/sticky-note/sticky-note.css | 126 ++++++++- src/pg/patterns/core/switch/index.pug | 2 +- src/pg/patterns/core/switch/switch.css | 27 +- src/pg/patterns/core/tooltip/index.pug | 2 +- src/pg/patterns/core/tooltip/tooltip.css | 158 ++++++++++- 21 files changed, 1071 insertions(+), 227 deletions(-) diff --git a/public/assets/scaffolding-min.js b/public/assets/scaffolding-min.js index 78ffd23..cce41e9 100644 --- a/public/assets/scaffolding-min.js +++ b/public/assets/scaffolding-min.js @@ -3187,8 +3187,13 @@ module.exports = { /***/ }), /* 10 */ -/***/ (function(module) { +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ init: function() { return /* binding */ init; } +/* harmony export */ }); /* DS2 core (c) 2024 Alexander McIlwraith Released under Creative Commons Attribution-ShareAlike 4.0 International */ @@ -3233,99 +3238,116 @@ var chooseTab = function chooseTab(tab) { }; var pushState = 0; var tabsetCount = 0; -module.exports = { - "init": function init() { - var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document; - var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; - var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) { - if (tabGroup.querySelector("[role=tablist]") === null) { - if (tabGroup.getAttribute("id") == null) { - tabGroup.setAttribute("id", "tab-group-" + tabsetCount); - tabsetCount++; - } - var tabgroup = tabGroup.getAttribute("id"); - var tablist = ""; - Array.from(tabGroup.children).forEach(function (child) { - // is details? - var dtls = child.nodeName == "DETAILS" ? true : false; +function init() { + var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document; + var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) { + if (tabGroup.querySelector("[role=tablist]") === null) { + if (tabGroup.getAttribute("id") == null) { + tabGroup.setAttribute("id", "tab-group-" + tabsetCount); + tabsetCount++; + } + var tabgroup = tabGroup.getAttribute("id"); + var tablist = ""; + Array.from(tabGroup.children).forEach(function (child) { + // is details? + var dtls = child.nodeName == "DETAILS" ? true : false; - // get the tab text - var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab"); + // get the tab text + var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab"); - // if the tab text is not blank - if (tab !== null) { - var tabID = tab.replace(/\W+/g, "-").toLowerCase(); + // if the tab text is not blank + if (tab !== null) { + var tabID = tab.replace(/\W+/g, "-").toLowerCase(); - // define the tab panel content - var tabPanel = null; - if (dtls) { - tabPanel = child; - tabPanel.setAttribute("open", ""); - } else { - tabPanel = document.createElement('div'); - tabPanel.appendChild(child.cloneNode(true)); - } - tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID); - tabPanel.className = tablist === "" ? "open" : ""; - tabPanel.setAttribute("role", "tabpanel"); - tabPanel.setAttribute("tabindex", "0"); - tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID)); - child.parentNode.replaceChild(tabPanel, child); - var cls = tablist === "" ? "class='selected'" : ""; - tablist += "
  • ").concat(tab, "
    • "); + // define the tab panel content + var tabPanel = null; + if (dtls) { + tabPanel = child; + tabPanel.setAttribute("open", ""); } else { - child.classList.add("tab-hidden"); + tabPanel = document.createElement('div'); + tabPanel.appendChild(child.cloneNode(true)); } + tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID); + tabPanel.className = tablist === "" ? "open" : ""; + tabPanel.setAttribute("role", "tabpanel"); + tabPanel.setAttribute("tabindex", "0"); + tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID)); + child.parentNode.replaceChild(tabPanel, child); + tablist += "
  • ").concat(tab, "
    • "); + } else { + child.classList.add("tab-hidden"); + } + }); + var ul = document.createElement('ul'); + ul.setAttribute("role", "tablist"); + tabGroup.insertBefore(ul, tabGroup.firstChild); + ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "
  • "); + if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) { + var order = (tabGroup.getAttribute("order") || tabGroup.getAttribute("data-order")).split(","); + var items = Array.from(ul.getElementsByTagName("li")); + items.sort(function (a, b) { + console.log("here"); + var aa = order.indexOf(a.textContent.trim()); + var bb = order.indexOf(b.textContent.trim()); + + // Check if both items exist in orderArray + if (aa === -1) return 1; // Move to the end if not found + if (bb === -1) return -1; // Move to the end if not found + + return aa - bb; // Sort based on the defined order }); - var ul = document.createElement('ul'); - ul.setAttribute("role", "tablist"); - ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "
  • "); - tabGroup.insertBefore(ul, tabGroup.firstChild); - tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) { - tab.addEventListener("click", function (evt) { - if (pushState == 0) { - window.history.pushState({ - rand: Math.random(), - pushState: pushState, - tab: tab.parentNode.firstChild.getAttribute("id") - }, "", "#".concat(tab.parentNode.firstChild.getAttribute("id"))); - pushState++; - } - chooseTab(evt.currentTarget); + ul.innerHTML = ''; + items.forEach(function (item) { + return ul.appendChild(item); + }); + } + tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) { + tab.addEventListener("click", function (evt) { + if (pushState == 0) { window.history.pushState({ rand: Math.random(), pushState: pushState, - tab: tab.getAttribute("id") - }, "", "#".concat(tab.getAttribute("id"))); + tab: tab.parentNode.firstChild.getAttribute("id") + }, "", "#".concat(tab.parentNode.firstChild.getAttribute("id"))); pushState++; - }); - tab.addEventListener("keypress", function (e) { - e.preventDefault(); - if (e.which == 32 || e.which == 13) { - e.currentTarget.dispatchEvent(click); - } - }); + } + chooseTab(evt.currentTarget); + window.history.pushState({ + rand: Math.random(), + pushState: pushState, + tab: tab.getAttribute("id") + }, "", "#".concat(tab.getAttribute("id"))); + pushState++; }); - } - if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") { - waitForElement(document.location.hash).then(function (el) { - el.scrollIntoView(); - el.focus(); - el.dispatchEvent(click); + tab.addEventListener("keypress", function (e) { + e.preventDefault(); + if (e.which == 32 || e.which == 13) { + e.currentTarget.dispatchEvent(click); + } }); - } - }); - window.addEventListener("popstate", function (e) { - e.preventDefault(); - if (e.state != null) { - chooseTab(document.querySelector("#".concat(e.state.tab))); - } else { - history.go(-1); - } - }); - } -}; + }); + ul.querySelector("li").classList.add("selected"); + } + if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") { + waitForElement(document.location.hash).then(function (el) { + //el.scrollIntoView(); + el.focus(); + el.dispatchEvent(click); + }); + } + }); + window.addEventListener("popstate", function (e) { + e.preventDefault(); + if (e.state != null) { + chooseTab(document.querySelector("#".concat(e.state.tab))); + } else { + history.go(-1); + } + }); +} /***/ }) /******/ ]); @@ -3432,7 +3454,6 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9); /* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10); -/* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__); // core and prism diff --git a/public/assets/scaffolding.css b/public/assets/scaffolding.css index ce7c683..c2cdd36 100644 --- a/public/assets/scaffolding.css +++ b/public/assets/scaffolding.css @@ -1 +1 @@ -:root{--colour-blue:#2e51a1;--colour-blue-l:#5c7abf;--colour-blue-xl:#b2c3ec;--colour-blue-d:#133176;--colour-blue-xd:#031235;--colour-grey:#7f7f7f;--colour-grey-l:#b2b2b2;--colour-grey-xl:#d8d8d8;--colour-grey-xxl:#f0f0f0;--colour-white:#fff;--colour-page:#fff;--colour-light:#fff;--colour-grey-d:#4c4c4c;--colour-grey-xd:#4c4c4c;--colour-black:#000;--colour-dark:#000}h1[class^=status]:after,h2[class^=status]:after,span[class^=status]:after{border-radius:50%;border:1px solid #CCC;content:" ";display:inline-block;height:1.5rem;margin-left:0.5rem;position:relative;top:2px;width:1.5rem}.status-not-started:after{background-color:transparent}.status-in-progress:after{background-color:#f0b031}.status-complete:after{background-color:#2e51a1}.status-deprecated:after{background-color:#da2c5b}code[class*=language-],pre[class*=language-]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:0.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:slategray}.token.punctuation{color:#999}.token.namespace{opacity:0.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:0.8em;padding:0 0.5em;background:#f5f2f0;background:rgba(224,224,224,0.2);-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:0.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}#copystatus{left:50%;position:absolute;z-index:100}#copystatus div{border-radius:1rem;border:1px solid green;left:-50%;padding:1rem;position:relative;white-space:nowrap}#copystatus div:after{clear:both;content:" ";display:block}#copystatus div.succeeded{background-color:white;border-color:black;color:black}#copystatus div.failed{background-color:white;border-color:#f00;color:#f00}color-samples{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}@media (max-width:992px){color-samples{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);max-width:100%;width:100%}}@media (max-width:576px){color-samples{-ms-grid-columns:auto;grid-template-columns:auto;width:100%;max-width:100%}}color-samples color-sample{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;border:1px solid #CCC;display:-ms-grid;display:grid;font-family:inherit;gap:0.5rem;grid-template-areas:"name name name hex hex hex" "name name name rgb rgb rgb" "acc acc acc acc acc acc" "lighter lighter lighter darker darker darker" "notes notes notes notes notes notes";-ms-grid-columns:1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;grid-template-columns:repeat(6,1fr);-ms-grid-rows:1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,-webkit-max-content);grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,max-content);padding:1rem;width:20rem;max-width:318px}@media (max-width:992px){color-samples color-sample{width:100%;max-width:100%}}color-samples color-sample name{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:5;-ms-grid-row-align:start;align-self:start;font-size:1.25rem;grid-area:name}color-samples color-sample name span{cursor:pointer}color-samples color-sample rgb{-ms-grid-row:3;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:rgb;white-space:nowrap}color-samples color-sample hex{-ms-grid-row:1;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:hex;white-space:nowrap}color-samples color-sample>accessibility{border-bottom:1px solid #ccc;border-top:1px solid #ccc}color-samples color-sample accessibility{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:11;grid-area:acc;-ms-grid-row:3;grid-row:3;padding:0.5rem 0;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:2.5rem (-webkit-max-content)[2];-ms-grid-rows:2.5rem (max-content)[2];grid-template-rows:2.5rem repeat(2,-webkit-max-content);grid-template-rows:2.5rem repeat(2,max-content)}color-samples color-sample accessibility .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample accessibility .result.accwaa,color-samples color-sample accessibility .result.accwaaa{background-color:white;color:black}color-samples color-sample accessibility .result.accbaa,color-samples color-sample accessibility .result.accbaaa{background-color:black;color:white}color-samples color-sample accessibility .result span:nth-child(2){font-size:2rem}color-samples color-sample accessibility .aa,color-samples color-sample accessibility .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample accessibility .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample accessibility .acchb,color-samples color-sample accessibility .acchw{display:-ms-grid;display:grid;grid-tempate-columns:auto;-ms-grid-rows:(-webkit-max-content)[2];-ms-grid-rows:(max-content)[2];grid-template-rows:repeat(2,-webkit-max-content);grid-template-rows:repeat(2,max-content);-ms-grid-row-align:start;align-self:start;text-align:center;padding:0}color-samples color-sample accessibility .acchb span,color-samples color-sample accessibility .acchw span{-ms-grid-row:1;grid-row:1;grid-column:1/-1;font-size:0.9rem}color-samples color-sample accessibility .acchb small,color-samples color-sample accessibility .acchw small{text-align:center;-ms-grid-row:2;grid-row:2;grid-column:1/-1;font-size:0.75rem}color-samples color-sample sample-block{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:3;grid-column:span 3;-ms-grid-row:4;grid-row:4}color-samples color-sample sample-block color-pill{display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:20px -webkit-max-content auto;-ms-grid-columns:20px max-content auto;grid-template-columns:20px -webkit-max-content auto;grid-template-columns:20px max-content auto}color-samples color-sample sample-block color-pill :first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-radius:5px;border:1px solid #CCC;display:inline-block;height:10px;width:20px}color-samples color-sample sample-block color-pill span{cursor:pointer}color-samples color-sample sample-block color-pill span .tooltip-tc{padding:0.5rem;width:20rem;max-width:318px;height:10.5rem;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample sample-block color-pill span .tooltip-tc .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa{background-color:white;color:black}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa{background-color:black;color:white}color-samples color-sample sample-block color-pill span .tooltip-tc .result span{border:none}color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2){font-size:2rem}color-samples color-sample sample-block color-pill span .tooltip-tc .aa,color-samples color-sample sample-block color-pill span .tooltip-tc .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw{border:none;display:block;width:100%;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span{border:none;font-size:0.9rem;width:100%}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:before,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:before{display:none}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small{font-size:0.75rem;text-align:center}color-samples color-sample notes{border-top:1px solid #ccc;grid-column:1/-1;padding-top:0.5rem}[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(255,255,221.2)),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,rgb(255,255,200.8)),to(rgb(255,255,185.5)));background:linear-gradient(180deg,rgb(255,255,221.2) 0%,#ffffd3 2%,#ffffd3 12%,rgb(255,255,200.8) 75%,rgb(255,255,185.5) 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(156.5265625,220.9484375,235.6734375)),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,rgb(139.4734375,215.0515625,232.3265625)),to(rgb(126.68359375,210.62890625,229.81640625)));background:linear-gradient(180deg,rgb(156.5265625,220.9484375,235.6734375) 0%,#94daea 2%,#94daea 12%,rgb(139.4734375,215.0515625,232.3265625) 75%,rgb(126.68359375,210.62890625,229.81640625) 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(250.3493150685,123.8506849315,147.104109589)),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,rgb(249.6506849315,104.1493150685,130.895890411)),to(rgb(249.1267123288,89.3732876712,118.7397260274)));background:linear-gradient(180deg,rgb(250.3493150685,123.8506849315,147.104109589) 0%,#fa728b 2%,#fa728b 12%,rgb(249.6506849315,104.1493150685,130.895890411) 75%,rgb(249.1267123288,89.3732876712,118.7397260274) 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(196.6333333333,251.5666666667,200.925)),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,rgb(177.3666666667,250.4333333333,183.075)),to(rgb(162.9166666667,249.5833333333,169.6875)));background:linear-gradient(180deg,rgb(196.6333333333,251.5666666667,200.925) 0%,#bbfbc0 2%,#bbfbc0 12%,rgb(177.3666666667,250.4333333333,183.075) 75%,rgb(162.9166666667,249.5833333333,169.6875) 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}div.status-report p.heading,div.status-report td[colspan="2"]{font-size:1.125rem;font-weight:bolder!important;grid-column:1/-1;margin:2rem 0 0.5rem 0;padding-top:1.5rem!important}div.status-report td:not([colspan="2"]) span{display:-ms-grid;display:grid;-ms-grid-columns:auto 1rem;grid-template-columns:auto 1rem;margin:0 1rem 0 0}div.status-report td:not([colspan="2"]) span span[class^=status]:after{height:1rem!important;width:1rem!important;margin-right:1rem}div.status-report td:not([colspan="2"]) a{margin:0 1rem 0 0}div.status-report td:not([colspan="2"]).indent a{margin:0 1rem 0 1.5rem}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:Helvetica,Arial,sans-serif;font-size:14pt}@media (max-width:768px){html{font-size:16pt}}html.show-breakpoints body:after,html.show-breakpoints body:before{background-color:#555;color:white;content:"bigger than extra large";display:-ms-grid;display:grid;font-family:sans-serif;font-size:25px;-ms-grid-columns:auto;grid-template-columns:auto;padding:25px;place-content:center}@media (max-width:1200px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"extra large"}}@media (max-width:992px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"large"}}@media (max-width:768px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"medium"}}@media (max-width:576px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"small"}}article[data-status=deprecated]:not(.show-deprecated){display:none}body{margin:0;padding:0}body a.skip{position:absolute;left:-9999px}body .container{display:-ms-grid;display:grid;-ms-grid-columns:auto (22rem)[2] auto;grid-template-columns:auto repeat(2,22rem) auto;margin:0 auto;width:100vw}body .container header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}body .container header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}body .container header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}body .container header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}body .container header>div .header-title h1{margin:0;padding:0 1rem}body .container header>div .header-title h1 a,body .container header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}body .container nav{background-color:var(--colour-blue);-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;display:none}body .container nav ul{margin:1rem 0}body .container nav ul li{display:inline-block;margin-right:1rem}body .container nav a{color:var(--colour-white);text-decoration:none}@media (min-width:768px){body .container nav{display:initial}}body .container p.info-switches{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;gap:0.25rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;-ms-grid-columns:auto (-webkit-max-content)[2];-ms-grid-columns:auto (max-content)[2];grid-template-columns:auto repeat(2,-webkit-max-content);grid-template-columns:auto repeat(2,max-content);text-align:right}body .container p.info-switches [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.info-switches [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}body .container p.info-switches label{text-align:left}body .container main{display:block;grid-column:1/-1;-ms-grid-row:4;grid-row:4}@media (max-width:768px){body .container main{-ms-grid-row:3;grid-row:3;padding:0}}@supports (grid-area:auto){body .container main{display:grid;grid-template-columns:1rem repeat(2,auto) 1rem}@media (min-width:768px){body .container main{grid-template-columns:auto repeat(2,22rem) auto}}}body .container main h1,body .container main h2,body .container main h3,body .container main h4,body .container main h5,body .container main h6{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4}body .container main article{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;margin-top:2rem;min-width:0}body .container main article.status-deprecated{display:none}body .container main article .tab-group,body .container main article tabset{margin:2rem 0 1rem 0}body .container main article .tab-group [role=tablist],body .container main article tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}body .container main article .tab-group [role=tablist] li.separator,body .container main article tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}body .container main article .tab-group [role=tablist] li[role=tab],body .container main article tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}body .container main article .tab-group [role=tablist] li[role=tab]:last-of-type,body .container main article tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}body .container main article .tab-group [role=tablist] li[role=tab]:not(.selected),body .container main article tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}body .container main article .tab-group [role=tablist] li[role=tab] span,body .container main article tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}body .container main article .tab-group .tab-hidden,body .container main article tabset .tab-hidden{display:none}body .container main article .tab-group [role=tabpanel],body .container main article tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}body .container main article .tab-group [role=tabpanel]:not(.open),body .container main article tabset [role=tabpanel]:not(.open){display:none}body .container main article .tab-group pre,body .container main article tabset pre{background-color:var(--colour-black-5);font-size:0.8rem}body .container main article .tab-group pre code:not(.inline),body .container main article tabset pre code:not(.inline){display:block;width:100%}body .container main article p.switch{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:-webkit-max-content auto;-ms-grid-columns:max-content auto;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto}body .container main article p.switch [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container main article p.switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)} \ No newline at end of file +:root{--colour-blue:#2e51a1;--colour-blue-l:#5c7abf;--colour-blue-xl:#b2c3ec;--colour-blue-d:#133176;--colour-blue-xd:#031235;--colour-grey:#7f7f7f;--colour-grey-l:#b2b2b2;--colour-grey-xl:#d8d8d8;--colour-grey-xxl:#f0f0f0;--colour-white:#fff;--colour-page:#fff;--colour-light:#fff;--colour-grey-d:#4c4c4c;--colour-grey-xd:#4c4c4c;--colour-black:#000;--colour-dark:#000}h1[class^=status]:after,h2[class^=status]:after,span[class^=status]:after{border-radius:50%;border:1px solid #CCC;content:" ";display:inline-block;height:1.5rem;margin-left:0.5rem;position:relative;top:2px;width:1.5rem}.status-not-started:after{background-color:transparent}.status-in-progress:after{background-color:#f0b031}.status-complete:after{background-color:#2e51a1}.status-deprecated:after{background-color:#da2c5b}code[class*=language-],pre[class*=language-]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:0.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:0.1em;border-radius:0.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:slategray}.token.punctuation{color:#999}.token.namespace{opacity:0.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:0.8em;padding:0 0.5em;background:#f5f2f0;background:rgba(224,224,224,0.2);-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2);box-shadow:0 2px 0 0 rgba(0,0,0,0.2);border-radius:0.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right}#copystatus{left:50%;position:absolute;z-index:100}#copystatus div{border-radius:1rem;border:1px solid green;left:-50%;padding:1rem;position:relative;white-space:nowrap}#copystatus div:after{clear:both;content:" ";display:block}#copystatus div.succeeded{background-color:white;border-color:black;color:black}#copystatus div.failed{background-color:white;border-color:#f00;color:#f00}color-samples{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}@media (max-width:992px){color-samples{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);max-width:100%;width:100%}}@media (max-width:576px){color-samples{-ms-grid-columns:auto;grid-template-columns:auto;width:100%;max-width:100%}}color-samples color-sample{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;border:1px solid #CCC;display:-ms-grid;display:grid;font-family:inherit;gap:0.5rem;grid-template-areas:"name name name hex hex hex" "name name name rgb rgb rgb" "acc acc acc acc acc acc" "lighter lighter lighter darker darker darker" "notes notes notes notes notes notes";-ms-grid-columns:1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;grid-template-columns:repeat(6,1fr);-ms-grid-rows:1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,-webkit-max-content);grid-template-rows:repeat(2,1.5rem) 10rem repeat(3,max-content);padding:1rem;width:20rem;max-width:318px}@media (max-width:992px){color-samples color-sample{width:100%;max-width:100%}}color-samples color-sample name{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:5;-ms-grid-row-align:start;align-self:start;font-size:1.25rem;grid-area:name}color-samples color-sample name span{cursor:pointer}color-samples color-sample rgb{-ms-grid-row:3;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:rgb;white-space:nowrap}color-samples color-sample hex{-ms-grid-row:1;-ms-grid-column:7;-ms-grid-column-span:5;grid-area:hex;white-space:nowrap}color-samples color-sample>accessibility{border-bottom:1px solid #ccc;border-top:1px solid #ccc}color-samples color-sample accessibility{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:11;grid-area:acc;-ms-grid-row:3;grid-row:3;padding:0.5rem 0;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample accessibility .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample accessibility .result.accwaa,color-samples color-sample accessibility .result.accwaaa{background-color:white;color:black}color-samples color-sample accessibility .result.accbaa,color-samples color-sample accessibility .result.accbaaa{background-color:black;color:white}color-samples color-sample accessibility .result span:nth-child(2){font-size:2rem}color-samples color-sample accessibility .aa,color-samples color-sample accessibility .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample accessibility .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample accessibility .acchb,color-samples color-sample accessibility .acchw{display:-ms-grid;display:grid;grid-tempate-columns:auto;-ms-grid-rows:(-webkit-max-content)[2];-ms-grid-rows:(max-content)[2];grid-template-rows:repeat(2,-webkit-max-content);grid-template-rows:repeat(2,max-content);-ms-grid-row-align:start;align-self:start;text-align:center;padding:0}color-samples color-sample accessibility .acchb span,color-samples color-sample accessibility .acchw span{-ms-grid-row:1;grid-row:1;grid-column:1/-1;font-size:0.9rem}color-samples color-sample accessibility .acchb small,color-samples color-sample accessibility .acchw small{text-align:center;-ms-grid-row:2;grid-row:2;grid-column:1/-1;font-size:0.75rem}color-samples color-sample sample-block{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:3;grid-column:span 3;-ms-grid-row:4;grid-row:4}color-samples color-sample sample-block color-pill{display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:20px -webkit-max-content auto;-ms-grid-columns:20px max-content auto;grid-template-columns:20px -webkit-max-content auto;grid-template-columns:20px max-content auto}color-samples color-sample sample-block color-pill :first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;border-radius:5px;border:1px solid #CCC;display:inline-block;height:10px;width:20px}color-samples color-sample sample-block color-pill span{cursor:pointer}color-samples color-sample sample-block color-pill span .tooltip-tc{padding:0.5rem;width:20rem;max-width:318px;height:10.5rem;display:-ms-grid;display:grid;gap:0.5rem;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:(-webkit-max-content)[3];-ms-grid-rows:(max-content)[3];grid-template-rows:repeat(3,-webkit-max-content);grid-template-rows:repeat(3,max-content)}color-samples color-sample sample-block color-pill span .tooltip-tc .result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.5rem;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);border:1px solid #ccc;padding:0 1rem;text-align:center}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa{background-color:white;color:black}color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa,color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa{background-color:black;color:white}color-samples color-sample sample-block color-pill span .tooltip-tc .result span{border:none}color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2){font-size:2rem}color-samples color-sample sample-block color-pill span .tooltip-tc .aa,color-samples color-sample sample-block color-pill span .tooltip-tc .aaa{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;display:block;font-size:0.75rem}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb{-ms-grid-column:2;grid-column:2}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw{border:none;display:block;width:100%;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span{border:none;font-size:0.9rem;width:100%}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span:before,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:after,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span:before{display:none}color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small,color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small{font-size:0.75rem;text-align:center}color-samples color-sample notes{border-top:1px solid #ccc;grid-column:1/-1;padding-top:0.5rem}[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(255,255,221.2)),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,rgb(255,255,200.8)),to(rgb(255,255,185.5)));background:linear-gradient(180deg,rgb(255,255,221.2) 0%,#ffffd3 2%,#ffffd3 12%,rgb(255,255,200.8) 75%,rgb(255,255,185.5) 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(156.5265625,220.9484375,235.6734375)),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,rgb(139.4734375,215.0515625,232.3265625)),to(rgb(126.68359375,210.62890625,229.81640625)));background:linear-gradient(180deg,rgb(156.5265625,220.9484375,235.6734375) 0%,#94daea 2%,#94daea 12%,rgb(139.4734375,215.0515625,232.3265625) 75%,rgb(126.68359375,210.62890625,229.81640625) 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(250.3493150685,123.8506849315,147.104109589)),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,rgb(249.6506849315,104.1493150685,130.895890411)),to(rgb(249.1267123288,89.3732876712,118.7397260274)));background:linear-gradient(180deg,rgb(250.3493150685,123.8506849315,147.104109589) 0%,#fa728b 2%,#fa728b 12%,rgb(249.6506849315,104.1493150685,130.895890411) 75%,rgb(249.1267123288,89.3732876712,118.7397260274) 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(196.6333333333,251.5666666667,200.925)),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,rgb(177.3666666667,250.4333333333,183.075)),to(rgb(162.9166666667,249.5833333333,169.6875)));background:linear-gradient(180deg,rgb(196.6333333333,251.5666666667,200.925) 0%,#bbfbc0 2%,#bbfbc0 12%,rgb(177.3666666667,250.4333333333,183.075) 75%,rgb(162.9166666667,249.5833333333,169.6875) 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}div.status-report p.heading,div.status-report td[colspan="2"]{font-size:1.125rem;font-weight:bolder!important;grid-column:1/-1;margin:2rem 0 0.5rem 0;padding-top:1.5rem!important}div.status-report td:not([colspan="2"]) span{display:-ms-grid;display:grid;-ms-grid-columns:auto 1rem;grid-template-columns:auto 1rem;margin:0 1rem 0 0}div.status-report td:not([colspan="2"]) span span[class^=status]:after{height:1rem!important;width:1rem!important;margin-right:1rem}div.status-report td:not([colspan="2"]) a{margin:0 1rem 0 0}div.status-report td:not([colspan="2"]).indent a{margin:0 1rem 0 1.5rem}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:Helvetica,Arial,sans-serif;font-size:14pt}@media (max-width:768px){html{font-size:16pt}}html.show-breakpoints body:after,html.show-breakpoints body:before{background-color:#555;color:white;content:"bigger than extra large";display:-ms-grid;display:grid;font-family:sans-serif;font-size:25px;-ms-grid-columns:auto;grid-template-columns:auto;padding:25px;place-content:center}@media (max-width:1200px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"extra large"}}@media (max-width:992px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"large"}}@media (max-width:768px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"medium"}}@media (max-width:576px){html.show-breakpoints body:after,html.show-breakpoints body:before{content:"small"}}article[data-status=deprecated]:not(.show-deprecated){display:none}body{margin:0;padding:0}body a.skip{position:absolute;left:-9999px}body .container{display:-ms-grid;display:grid;-ms-grid-columns:auto (22rem)[2] auto;grid-template-columns:auto repeat(2,22rem) auto;margin:0 auto;width:100vw}body .container header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}body .container header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}body .container header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}body .container header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}body .container header>div .header-title h1{margin:0;padding:0 1rem}body .container header>div .header-title h1 a,body .container header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}body .container nav{background-color:var(--colour-blue);-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;display:none}body .container nav ul{margin:1rem 0}body .container nav ul li{display:inline-block;margin-right:1rem}body .container nav a{color:var(--colour-white);text-decoration:none}@media (min-width:768px){body .container nav{display:initial}}body .container p.info-switches{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;gap:0.25rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;grid-row:3;-ms-grid-columns:auto (-webkit-max-content)[2];-ms-grid-columns:auto (max-content)[2];grid-template-columns:auto repeat(2,-webkit-max-content);grid-template-columns:auto repeat(2,max-content);text-align:right}body .container p.info-switches [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container p.info-switches [role=switch][aria-checked=true]{background-color:#2e51a1}body .container p.info-switches [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}body .container p.info-switches label{text-align:left}body .container main{display:block;grid-column:1/-1;-ms-grid-row:4;grid-row:4}@media (max-width:768px){body .container main{-ms-grid-row:3;grid-row:3;padding:0}}@supports (grid-area:auto){body .container main{display:grid;grid-template-columns:1rem repeat(2,auto) 1rem}@media (min-width:768px){body .container main{grid-template-columns:auto repeat(2,22rem) auto}}}body .container main h1,body .container main h2,body .container main h3,body .container main h4,body .container main h5,body .container main h6{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4}body .container main article{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;margin-top:2rem;min-width:0}body .container main article.status-deprecated{display:none}body .container main article .tab-group,body .container main article tabset{margin:2rem 0 1rem 0}body .container main article .tab-group [role=tablist],body .container main article tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}body .container main article .tab-group [role=tablist] li.separator,body .container main article tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}body .container main article .tab-group [role=tablist] li[role=tab],body .container main article tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}body .container main article .tab-group [role=tablist] li[role=tab]:last-of-type,body .container main article tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}body .container main article .tab-group [role=tablist] li[role=tab]:not(.selected),body .container main article tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}body .container main article .tab-group [role=tablist] li[role=tab] span,body .container main article tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}body .container main article .tab-group .tab-hidden,body .container main article tabset .tab-hidden{display:none}body .container main article .tab-group [role=tabpanel],body .container main article tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}body .container main article .tab-group [role=tabpanel]:not(.open),body .container main article tabset [role=tabpanel]:not(.open){display:none}body .container main article .tab-group pre,body .container main article tabset pre{background-color:var(--colour-black-5);font-size:0.8rem}body .container main article .tab-group pre code:not(.inline),body .container main article tabset pre code:not(.inline){display:block;width:100%}body .container main article p.switch{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-ms-grid;display:grid;grid-gap:0.5rem;-ms-grid-columns:-webkit-max-content auto;-ms-grid-columns:max-content auto;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto}body .container main article p.switch [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}body .container main article p.switch [role=switch][aria-checked=true]{background-color:#2e51a1}body .container main article p.switch [role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)} \ No newline at end of file diff --git a/public/patterns/core/breakpoint/index.html b/public/patterns/core/breakpoint/index.html index c0fab6f..a702f5c 100644 --- a/public/patterns/core/breakpoint/index.html +++ b/public/patterns/core/breakpoint/index.html @@ -21,6 +21,7 @@

    When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.

    +

    Example

    @use "scss/core/breakpoint/breakpoint";
 @include breapoint.break([breakpoint]) {
 	// css here
@@ -28,6 +29,9 @@
         
    //-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
 
+@use 'sass:map';
+@use 'sass:string';
+
 // default breakpoints match bootstrap 5 breakpoints.
 $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
 
@@ -65,30 +69,30 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 14
 		$min: 0;
 		$max: 0;
 
-		@if str-length($bp) == 2 {
+		@if string.length($bp) == 2 {
 
 			// only a single break point was received
-			$min: map-get($points, $bp);
-			$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
+			$min: map.get($points, $bp);
+			$max: map.get($points, nth(map.keys($points), index(map.keys($points), $bp) + 1));
 		
 		} @else {
 
 			
-			@if str-slice($bp, 0, 1) == "-" {
+			@if string.slice($bp, 0, 1) == "-" {
 				// no lower breakpoint was received
 				$min: null;
-				$max: map-get($points, str-slice($bp, 2, 3));
+				$max: map.get($points, string.slice($bp, 2, 3));
 				
 			} @else {
 				
-				$min: map-get($points, unquote(str-slice($bp, 0, 2)));
+				$min: map.get($points, string.unquote(string.slice($bp, 0, 2)));
 				
 				
-				@if str-length($bp) == 3 {		
+				@if string.length($bp) == 3 {		
 					// no upper break point was received 
 					$max: null;
 				} @else {
-					$max: map-get($points, str-slice($bp, 4, 5));
+					$max: map.get($points, string.slice($bp, 4, 5));
 				}
 			}
 		}
diff --git a/public/patterns/core/colours/index.html b/public/patterns/core/colours/index.html
index ba3336d..1f30fe9 100644
--- a/public/patterns/core/colours/index.html
+++ b/public/patterns/core/colours/index.html
@@ -291,7 +291,7 @@
             
           
         
-        
    
+        
           
    
             
    :root {
 	--colour-blue: #2e51a1;
@@ -339,6 +339,6 @@
 	}
 }
    
           
    
-        
    
+        
   
 
\ No newline at end of file
diff --git a/public/patterns/core/header/index.html b/public/patterns/core/header/index.html
index 33a9ae0..4a377c9 100644
--- a/public/patterns/core/header/index.html
+++ b/public/patterns/core/header/index.html
@@ -49,7 +49,59 @@ header
 				a(href="./")= site
 		// Other sections can go here, such as search and directory
 
    
-      
    header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
    
+      
    header {
+	display: -ms-grid;
+	display: grid;
+	-ms-grid-rows: 1.75rem 3.5rem;
+	grid-template-rows: 1.75rem 3.5rem;
+	-ms-grid-column: 2;
+	-ms-grid-column-span: 2;
+	grid-column: 2/4;
+	overflow: hidden;
+}
+header svg {
+	grid-column: 1/-1;
+	grid-row: 1/-1;
+	-ms-grid-row-align: stretch;
+	-ms-grid-column-align: stretch;
+	place-self: stretch;
+}
+header svg text {
+	-webkit-transform: translate(-1rem, 7.25rem);
+	    -ms-transform: translate(-1rem, 7.25rem);
+	        transform: translate(-1rem, 7.25rem);
+	font-size: 10rem;
+	font-weight: 1000;
+	font-family: sans-serif;
+	fill: var(--colour-grey-xxl);
+}
+header > div {
+	-ms-grid-row: 2;
+	grid-row: 2;
+	grid-column: 1/-1;
+	display: -ms-grid;
+	display: grid;
+	grid-column-gap: 1rem;
+	-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
+	-ms-grid-columns: auto max-content max-content;
+	grid-template-columns: auto -webkit-max-content -webkit-max-content;
+	grid-template-columns: auto max-content max-content;
+}
+header > div .header-title h1 {
+	margin: 0;
+	padding: 0 1rem;
+}
+header > div .header-title h1 a, header > div .header-title h1 a:visited {
+	border-bottom: none;
+	color: var(--colour-black);
+	font-family: sans-serif;
+	font-size: 2.5rem;
+	font-size: 32px;
+	font-weight: 700;
+	margin: 0;
+	padding: 0;
+	text-decoration: none;
+}
    
       
    
         
    @use "scss/core/header/header;
 
    
diff --git a/public/patterns/core/status/index.html b/public/patterns/core/status/index.html
index 2ec66a5..6922a82 100644
--- a/public/patterns/core/status/index.html
+++ b/public/patterns/core/status/index.html
@@ -11,7 +11,7 @@
     
   
   
-    
    
+    
       
    
          
@@ -20,32 +20,38 @@
             
-              
+              
-              
+              
-              
+              
-                
+                
-                
+                
-                
+                
@@ -53,18 +59,22 @@
             
-              
+              
-                
+                
-                
+                
-                
+                
@@ -72,7 +82,8 @@
             
-              
+              
@@ -91,42 +102,62 @@
             
              
                Breakpoint
+              (core)
+              
               Layouts
             
              
                Colours
+              (core)
+              
               
             
              
                Components
+              
+              
               
             
              
                Header
+              (core)
+              
               Layouts
             
              
                Layouts
+              (core)
+              
               
             
              
                Status
+              (core)
+              
               
             
              
                Sticky note
+              (core)
+              
               Components
             
              
                Switch
+              (core)
+              
               Components
             
              
                Tabs
+              (core)
+              
               Layouts
             
              
                Tooltip
+              (core)
+              
               Components
             
              
@@ -134,6 +165,8 @@
             
              
                This pattern doesn't exist
+              
+              
               
             
           
@@ -144,62 +177,62 @@
            
              
                Breakpoint
-              Complete
+               Complete (Core)
               Layouts
             
              
                Colours
-              Complete
+               Complete (Core)
               
             
              
                Components
-              Complete
+               Complete
               
             
              
                Header
-              Complete
+               Complete (Core)
               Layouts
             
              
                Layouts
-              Complete
+               Complete (Core)
               
             
              
                Status
-              Complete
+               Complete (Core)
               
             
              
                Sticky note
-              Complete
+               Complete (Core)
               Components
             
              
                Switch
-              Complete
+               Complete (Core)
               Components
             
              
                Tabs
-              Complete
+               Complete (Core)
               Layouts
             
              
                This pattern doesn't exist
-              Deprecated
+               Deprecated
               
             
              
                Tooltip
-              Complete
+               Complete (Core)
               Components
             
           
         
       
    
-    
    
+    
   
 
\ No newline at end of file
diff --git a/public/patterns/core/sticky-note/index.html b/public/patterns/core/sticky-note/index.html
index d1e86e4..fec66d3 100644
--- a/public/patterns/core/sticky-note/index.html
+++ b/public/patterns/core/sticky-note/index.html
@@ -26,8 +26,133 @@
         This is a sample sticky. You can drag it out of the way if you need to see the content under it.
    sticky-note(float="right").blue This #[strong is] a sample sticky. 
 	| You can drag it out of the way if you need to see the content under it.
    - 
     sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(255,255,221.2)),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,rgb(255,255,200.8)),to(rgb(255,255,185.5)));background:linear-gradient(180deg,rgb(255,255,221.2) 0%,#ffffd3 2%,#ffffd3 12%,rgb(255,255,200.8) 75%,rgb(255,255,185.5) 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(156.5265625,220.9484375,235.6734375)),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,rgb(139.4734375,215.0515625,232.3265625)),to(rgb(126.68359375,210.62890625,229.81640625)));background:linear-gradient(180deg,rgb(156.5265625,220.9484375,235.6734375) 0%,#94daea 2%,#94daea 12%,rgb(139.4734375,215.0515625,232.3265625) 75%,rgb(126.68359375,210.62890625,229.81640625) 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(250.3493150685,123.8506849315,147.104109589)),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,rgb(249.6506849315,104.1493150685,130.895890411)),to(rgb(249.1267123288,89.3732876712,118.7397260274)));background:linear-gradient(180deg,rgb(250.3493150685,123.8506849315,147.104109589) 0%,#fa728b 2%,#fa728b 12%,rgb(249.6506849315,104.1493150685,130.895890411) 75%,rgb(249.1267123288,89.3732876712,118.7397260274) 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(196.6333333333,251.5666666667,200.925)),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,rgb(177.3666666667,250.4333333333,183.075)),to(rgb(162.9166666667,249.5833333333,169.6875)));background:linear-gradient(180deg,rgb(196.6333333333,251.5666666667,200.925) 0%,#bbfbc0 2%,#bbfbc0 12%,rgb(177.3666666667,250.4333333333,183.075) 75%,rgb(162.9166666667,249.5833333333,169.6875) 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}
    + 
     sticky-note-wrapper {
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+	border: 1px solid transparent;
+	border-radius: 50%;
+	display: inline-block;
+	height: 0.5rem;
+	position: relative;
+	width: 0.5rem;
+}
+sticky-note-wrapper * {
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+sticky-note-wrapper sticky-note {
+	cursor: -webkit-grab;
+	cursor: grab;
+	display: -ms-grid;
+	display: grid;
+	float: left;
+	font-size: 1rem;
+	height: 13rem;
+	left: 0;
+	place-items: stretch;
+	position: absolute;
+	top: 0;
+	width: 13rem;
+	z-index: 100;
+}
+sticky-note-wrapper sticky-note:active {
+	cursor: -webkit-grabbing;
+	cursor: grabbing;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+}
+sticky-note-wrapper sticky-note.right {
+	float: right;
+}
+sticky-note-wrapper sticky-note > div {
+	-ms-grid-row: 1;
+	grid-row: 1;
+	-ms-grid-column: 1;
+	grid-column: 1;
+}
+sticky-note-wrapper sticky-note > div:nth-child(1) {
+	background-color: rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
+	        box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
+	display: -ms-grid;
+	display: grid;
+	margin: 2rem 1rem 0.25rem 0.36rem;
+	width: calc(100% - 1rem);
+}
+sticky-note-wrapper sticky-note > div:nth-child(2) {
+	clip-path: url(#stickyClip);
+	display: -ms-grid;
+	display: grid;
+	font-family: "Kalam", cursive;
+	font-style: 1rem;
+	font-weight: 300;
+	line-height: 1.25rem;
+	padding: 1rem;
+	place-items: center;
+	text-align: center;
+}
+sticky-note-wrapper sticky-note > div:nth-child(2) > * {
+	font-family: "Kalam", cursive !important;
+	font-style: normal !important;
+	font-weight: 300 !important;
+}
+@media screen and (max-width: 1024px) {
+	sticky-note-wrapper sticky-note > div:nth-child(2) {
+		max-width: 13rem;
+		min-width: 13rem;
+		width: 1rem;
+	}
+}
+@media screen and (max-width: 768px) {
+	sticky-note-wrapper sticky-note > div:nth-child(2) {
+		font-size: 1.75rem;
+		max-width: 21rem;
+		min-height: 21rem;
+	}
+}
+@media screen and (max-width: 640px) {
+	sticky-note-wrapper sticky-note > div:nth-child(2) {
+		font-size: 2.5rem;
+		max-width: 26rem;
+		min-height: 26rem;
+	}
+}
+sticky-note-wrapper sticky-note > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 221.2)), color-stop(2%, #ffffd3), color-stop(12%, #ffffd3), color-stop(75%, rgb(255, 255, 200.8)), to(rgb(255, 255, 185.5)));
+	background: linear-gradient(180deg, rgb(255, 255, 221.2) 0%, #ffffd3 2%, #ffffd3 12%, rgb(255, 255, 200.8) 75%, rgb(255, 255, 185.5) 100%);
+}
+sticky-note-wrapper sticky-note.blue > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(156.5265625, 220.9484375, 235.6734375)), color-stop(2%, #94daea), color-stop(12%, #94daea), color-stop(75%, rgb(139.4734375, 215.0515625, 232.3265625)), to(rgb(126.68359375, 210.62890625, 229.81640625)));
+	background: linear-gradient(180deg, rgb(156.5265625, 220.9484375, 235.6734375) 0%, #94daea 2%, #94daea 12%, rgb(139.4734375, 215.0515625, 232.3265625) 75%, rgb(126.68359375, 210.62890625, 229.81640625) 100%);
+}
+sticky-note-wrapper sticky-note.pink > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(250.3493150685, 123.8506849315, 147.104109589)), color-stop(2%, #fa728b), color-stop(12%, #fa728b), color-stop(75%, rgb(249.6506849315, 104.1493150685, 130.895890411)), to(rgb(249.1267123288, 89.3732876712, 118.7397260274)));
+	background: linear-gradient(180deg, rgb(250.3493150685, 123.8506849315, 147.104109589) 0%, #fa728b 2%, #fa728b 12%, rgb(249.6506849315, 104.1493150685, 130.895890411) 75%, rgb(249.1267123288, 89.3732876712, 118.7397260274) 100%);
+}
+sticky-note-wrapper sticky-note.green > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(196.6333333333, 251.5666666667, 200.925)), color-stop(2%, #bbfbc0), color-stop(12%, #bbfbc0), color-stop(75%, rgb(177.3666666667, 250.4333333333, 183.075)), to(rgb(162.9166666667, 249.5833333333, 169.6875)));
+	background: linear-gradient(180deg, rgb(196.6333333333, 251.5666666667, 200.925) 0%, #bbfbc0 2%, #bbfbc0 12%, rgb(177.3666666667, 250.4333333333, 183.075) 75%, rgb(162.9166666667, 249.5833333333, 169.6875) 100%);
+}
+sticky-note-wrapper:has(sticky-note:hover) {
+	background-color: #ffffd3;
+	border: 1px solid black;
+}
+sticky-note-wrapper:has(sticky-note.yellow:hover) {
+	background-color: #ffffd3;
+}
+sticky-note-wrapper:has(sticky-note.blue:hover) {
+	background-color: #94daea;
+}
+sticky-note-wrapper:has(sticky-note.pink:hover) {
+	background-color: #fa728b;
+}
+sticky-note-wrapper:has(sticky-note.green:hover) {
+	background-color: #bbfbc0;
+}
    +

    Example

    $sticky-colors: ( [sass map with your own defined colours] );
 @use "scss/core/switch/_sticky-note";
 @include sticky-note;
@@ -204,6 +329,7 @@ $sticky-colors: (
 }
    +

    Example

    import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
 stickynote.init()
    diff --git a/public/patterns/core/switch/index.html b/public/patterns/core/switch/index.html index 8e76e6d..e981c4d 100644 --- a/public/patterns/core/switch/index.html +++ b/public/patterns/core/switch/index.html @@ -22,11 +22,37 @@

    -
    + 
    span#example-id(role="switch")
    - 
    [role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
    + 
    [role=switch] {
+	display: -ms-inline-grid;
+	display: inline-grid;
+	border: 1px solid #2e51a1;
+	background-color: #d8d8d8;
+	border-radius: 0.75rem;
+	height: 1.5rem;
+	width: 3rem;
+	-webkit-transition: all 500ms;
+	transition: all 500ms;
+}
+[role=switch] > span {
+	display: inline-block;
+	background-color: white;
+	border-radius: 50%;
+	margin: 2%;
+	width: calc(1.5rem - 2%);
+	-webkit-transition: all 500ms;
+	transition: all 500ms;
+}
+[role=switch][aria-checked=true] {
+	background-color: #2e51a1;
+}
+[role=switch][aria-checked=true] > span {
+	margin-left: calc(1.5rem - 5%);
+}
    +

    Example

    @use "scss/core/switch/_switch"; 
 @include switch;
    @@ -68,6 +94,7 @@ $switch-height: 1.5rem !default; }
    +

    Example

    // Note that switch is a reserved word. 
 import * as swtch from "./js/core/switch/_switch.js";
 swtch.init();
@@ -104,6 +131,6 @@ module.exports = {
 }
    -
    + \ No newline at end of file diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html index 5519002..9bb9f5b 100644 --- a/public/patterns/core/tabs/index.html +++ b/public/patterns/core/tabs/index.html @@ -23,27 +23,76 @@

    Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content.

    How to use it

    -

    The structure of the tab set is defined in html. There are two forms supported. Adding a class of .tab-group to the container element will work in place of the tabset tag, and the tab panels can be defined using either tab="" or data-tab="". Passing an optional element to the init function will initialise tabs within that element.

    -

    The tab initalize function now takes a new function parameter in the form of an third argument is an object that can take the following callbacks:

    -
      -
    • altModifer (When the altKey is used)
      • -
    • shiftModifier (When the shift key is used)
      • -
    • metaModifier (When the Windows key or Apple key is used)
      • -
    -

    You can use these callbacks to create a custom event to get the tab information.

    -

    Note: There is a new core function (core.getTabPath) that will generate the query string and url hash for use in DS2 Core. You may wish to update your scaffolding.js file to make use of this functionality.

    +

    The structure of the tab set is defined in html. There are two forms supported. Adding a class of .tab-group to the container element will work in place of the tabset tag, and the tab panels can be defined using either tab="" or data-tab="". Passing an optional element to the init function will initialise tabs within that element. Adding a order="" or data-order="" element to the tabset you can have the tabs sorted in a consistent order across tabsets.

    +

    Example

    + 
    tabset(order="tab2, tab1")
+	div(tab="tab1")
+	div(tab="tab2")
+
    -        
-          
    
-          
    
+        
+          
    
+
    - 
    tabset#uniqueID
-	div(tab="[tab title]")
-	div(tab="[tab title]")
+      
    tabset#uniqueID(order="tab title 2,tab title 1")
+	div(tab="[tab title 1]")
+	div(tab="[tab title 2]")
 		
    
-      
    .tab-group,tabset{margin:2rem 0 1rem 0}.tab-group [role=tablist],tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group [role=tablist] li.separator,tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group [role=tablist] li[role=tab],tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tablist] li[role=tab]:last-of-type,tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab]:not(.selected),tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab] span,tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}
    
+      
    tabset, .tab-group {
+	margin: 2rem 0 1rem 0;
+}
+tabset [role=tablist], .tab-group [role=tablist] {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	margin: 0;
+	padding: 0;
+}
+tabset [role=tablist] li.separator, .tab-group [role=tablist] li.separator {
+	border-bottom: 1px solid #7f7f7f;
+	display: inline-block;
+	margin: 0.45rem 0 0 0;
+	width: 100%;
+}
+tabset [role=tablist] li[role=tab], .tab-group [role=tablist] li[role=tab] {
+	background-color: #FFF;
+	border-left: 1px solid #7f7f7f;
+	border-right: 1px solid #7f7f7f;
+	border-radius: 0.5rem 0.5rem 0 0;
+	border-top: 1px solid #7f7f7f;
+	cursor: pointer;
+	display: inline;
+	margin: 0;
+	padding: 1rem 1.5rem 0.14rem 1.5rem;
+	z-index: 2;
+}
+tabset [role=tablist] li[role=tab]:last-of-type, .tab-group [role=tablist] li[role=tab]:last-of-type {
+	border-right: 1px solid #7f7f7f;
+}
+tabset [role=tablist] li[role=tab]:not(.selected), .tab-group [role=tablist] li[role=tab]:not(.selected) {
+	background-color: #f0f0f0;
+	border-bottom: 1px solid #7f7f7f;
+}
+tabset [role=tablist] li[role=tab] span, .tab-group [role=tablist] li[role=tab] span {
+	display: block;
+	margin: 0 0 0.5rem 0;
+}
+tabset .tab-hidden, .tab-group .tab-hidden {
+	display: none;
+}
+tabset [role=tabpanel], .tab-group [role=tabpanel] {
+	background-color: #FFF;
+	border: 1px solid #7f7f7f;
+	border-top: none;
+	padding: 1rem;
+	z-index: 1;
+}
+tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
+	display: none;
+}
    
       
    
+        
    Example
    
         
    @use "scss/core/tabs/_tabs";
 @include tabs{ 
 	// optional content block
@@ -129,6 +178,7 @@ $tab-notselected-text: #000 !default;
 }
    
       
    
       
    
+        
    Example
    
         
    import * as tabs from "./js/core/tabs/_tabs.js";
 tabs.init();
    
         
    /*  DS2 core (c) 2024 Alexander McIlwraith 
@@ -177,101 +227,118 @@ const chooseTab = (tab) => {
 
 let pushState = 0;
 let tabsetCount = 0;
-module.exports = {
-	"init": (container = document, spacer = true, args = {}) => { 
-		container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
-			if (tabGroup.querySelector("[role=tablist]") === null) {
-				if (tabGroup.getAttribute("id") == null) {
-					tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
-					tabsetCount++;
-				}
 
-				const tabgroup = tabGroup.getAttribute("id");
-				let tablist = "";
+export function init(container = document, spacer = true, args = {}) {
+	container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
+		if (tabGroup.querySelector("[role=tablist]") === null) {
+			if (tabGroup.getAttribute("id") == null) {
+				tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
+				tabsetCount++;
+			}
 
-				Array.from(tabGroup.children).forEach(child => {
+			const tabgroup = tabGroup.getAttribute("id");
+			let tablist = "";
 
-					// is details? 
-					let dtls = child.nodeName == "DETAILS" ? true : false;
+			Array.from(tabGroup.children).forEach(child => {
 
-					// get the tab text 
-					let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+				// is details? 
+				let dtls = child.nodeName == "DETAILS" ? true : false;
 
-					// if the tab text is not blank 
-					if (tab !== null) {
-						const tabID = tab.replace(/\W+/g, "-").toLowerCase();
-						
+				// get the tab text 
+				let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
 
-						// define the tab panel content
-						let tabPanel = null;
-						if (dtls) { 
-							tabPanel = child;
-							tabPanel.setAttribute("open", "");
-						} else {
-							tabPanel = document.createElement('div');
-							tabPanel.appendChild(child.cloneNode(true));
-						}
+				// if the tab text is not blank 
+				if (tab !== null) {
+					const tabID = tab.replace(/\W+/g, "-").toLowerCase();
+					
 
-						tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
-						tabPanel.className = tablist === "" ? "open" : "";
-						tabPanel.setAttribute("role", "tabpanel");
-						tabPanel.setAttribute("tabindex", "0");
-						tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
-						child.parentNode.replaceChild(tabPanel, child);
-						let cls = tablist === "" ? "class='selected'" : "";
-						tablist += ``;
+					// define the tab panel content
+					let tabPanel = null;
+					if (dtls) { 
+						tabPanel = child;
+						tabPanel.setAttribute("open", "");
 					} else {
-						child.classList.add("tab-hidden");
+						tabPanel = document.createElement('div');
+						tabPanel.appendChild(child.cloneNode(true));
 					}
+
+					tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
+					tabPanel.className = tablist === "" ? "open" : "";
+					tabPanel.setAttribute("role", "tabpanel");
+					tabPanel.setAttribute("tabindex", "0");
+					tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
+					child.parentNode.replaceChild(tabPanel, child);
+					tablist += ``;
+				} else {
+					child.classList.add("tab-hidden");
+				}
+			});
+
+			const ul = document.createElement('ul');
+			ul.setAttribute("role", "tablist");
+			tabGroup.insertBefore(ul, tabGroup.firstChild);
+			ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}`;
+
+			if ( tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order") ) {
+				let order = (tabGroup.getAttribute("order") || tabGroup.getAttribute("data-order")).split(",");
+
+				const items = Array.from(ul.getElementsByTagName("li"));
+				items.sort((a, b) => {
+					console.log("here")
+					const aa = order.indexOf(a.textContent.trim());
+					const bb = order.indexOf(b.textContent.trim());
+
+					// Check if both items exist in orderArray
+					if (aa === -1) return 1; // Move to the end if not found
+					if (bb === -1) return -1; // Move to the end if not found
+
+					return aa - bb; // Sort based on the defined order
 				});
 
-				const ul = document.createElement('ul');
-				ul.setAttribute("role", "tablist");
-				ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}`;
-				tabGroup.insertBefore(ul, tabGroup.firstChild);
+				ul.innerHTML = '';
+				items.forEach(item => ul.appendChild(item));
+			}
 
-				tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-					tab.addEventListener("click", (evt) => {
-						if (pushState == 0) {
-							window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
-							pushState++;
-						}
-
-						chooseTab(evt.currentTarget);
-						window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
+			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
+				tab.addEventListener("click", (evt) => {
+					if (pushState == 0) {
+						window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
 						pushState++;
-					});
+					}
 
-					tab.addEventListener("keypress", (e) => {
-						e.preventDefault();
-						if( e.which == 32 || e.which == 13 ) {
-							e.currentTarget.dispatchEvent(click);
-						}
-					})
+					chooseTab(evt.currentTarget);
+					window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
+					pushState++;
 				});
-			}
 
-			if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
-				waitForElement(document.location.hash).then((el) => {
-					el.scrollIntoView();
-					el.focus();
-					el.dispatchEvent(click);
-				});
-			}
-		});
+				tab.addEventListener("keypress", (e) => {
+					e.preventDefault();
+					if( e.which == 32 || e.which == 13 ) {
+						e.currentTarget.dispatchEvent(click);
+					}
+				})
+			});
+			ul.querySelector("li").classList.add("selected");
+		}
 
-		window.addEventListener("popstate", function (e) {
-			e.preventDefault();
-			if (e.state != null) {
-				chooseTab(document.querySelector(`#${e.state.tab}`));
-			} else {
-				history.go(-1);
-			}
-		});
+		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
+			waitForElement(document.location.hash).then((el) => {
+				//el.scrollIntoView();
+				el.focus();
+				el.dispatchEvent(click);
+			});
+		}
+	});
 
-	}
+	window.addEventListener("popstate", function (e) {
+		e.preventDefault();
+		if (e.state != null) {
+			chooseTab(document.querySelector(`#${e.state.tab}`));
+		} else {
+			history.go(-1);
+		}
+	});
 }
-
 
    
       
    
     
diff --git a/public/patterns/core/tooltip/index.html b/public/patterns/core/tooltip/index.html
index e43b7fa..9b9bc2d 100644
--- a/public/patterns/core/tooltip/index.html
+++ b/public/patterns/core/tooltip/index.html
@@ -33,8 +33,165 @@
       
    Link with a tool tipTool tip content
    
       
    a(href="#") Link with a tool tip
 	span(role="tooltip" inert tip-position="right") Tool tip content
    
-      
    [role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}
    
+      
    /* Position Options
+	- top / block-start
+	- right / inline-end
+	- bottom / block-end
+	- left / inline-start
+*/
+[role=tooltip] {
+	background: #fff;
+	border-radius: 0.5rem;
+	color: #000;
+	display: none;
+	-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
+	        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
+	font-size: 1rem;
+	font-weight: 400;
+	inline-size: -webkit-max-content;
+	inline-size: -moz-max-content;
+	inline-size: max-content;
+	line-height: initial;
+	margin: 0;
+	max-inline-size: 25rem;
+	opacity: 0;
+	padding: 0.75rem 1.5rem;
+	pointer-events: none;
+	position: absolute;
+	text-align: start;
+	-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	    -ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	        transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+	transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+	transition: opacity 0.2s ease, transform 0.2s ease;
+	transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	will-change: filter;
+	z-index: 10;
+}
+[role=tooltip]::before {
+	clip-path: inset(50%);
+	clip: rect(1px, 1px, 1px, 1px);
+	content: "; Has tooltip: ";
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+[role=tooltip]::after {
+	background: #fff;
+	content: "";
+	inset: 0;
+	-webkit-mask: var(--tooltip-pointer);
+	        mask: var(--tooltip-pointer);
+	position: absolute;
+	z-index: -1;
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position]),
+[tip-position=bottom],
+[tip-position=block-end]) {
+	text-align: center;
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position])) {
+	inset-inline-start: 50%;
+	inset-block-end: calc(100% + 0.75rem + 1rem);
+	--tooltip-x: calc(50% * -1);
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position]))::after {
+	--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
+	inset-block-end: -1rem;
+	-webkit-border-after: 1rem solid transparent;
+	        border-block-end: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=right],
+[tip-position=inline-end]) {
+	inset-inline-start: calc(100% + 1.5rem + 1rem);
+	inset-block-end: 50%;
+	--tooltip-y: 50%;
+}
+[role=tooltip]:is([tip-position=right],
+[tip-position=inline-end])::after {
+	--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
+	inset-inline-start: -1rem;
+	-webkit-border-start: 1rem solid transparent;
+	        border-inline-start: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=bottom],
+[tip-position=block-end]) {
+	inset-inline-start: 50%;
+	inset-block-start: calc(100% + 0.75rem + 1rem);
+	--tooltip-x: calc(50% * -1);
+}
+[role=tooltip]:is([tip-position=bottom],
+[tip-position=block-end])::after {
+	--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
+	inset-block-start: -1rem;
+	-webkit-border-before: 1rem solid transparent;
+	        border-block-start: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=left],
+[tip-position=inline-start]) {
+	inset-inline-end: calc(100% + 1.5rem + 1rem);
+	inset-block-end: 50%;
+	--tooltip-y: 50%;
+}
+[role=tooltip]:is([tip-position=left],
+[tip-position=inline-start])::after {
+	--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
+	inset-inline-end: -1rem;
+	-webkit-border-end: 1rem solid transparent;
+	border-inline-end: 1rem solid transparent;
+}
+@media (prefers-color-scheme: dark) {
+	[role=tooltip] {
+		background: #1f2127;
+		color: #fff;
+		-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
+		        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
+	}
+	[role=tooltip]::after {
+		background: #1f2127;
+	}
+}
+
+:has(> [role=tooltip]) {
+	position: relative;
+}
+:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
+	display: block;
+	opacity: 1;
+	-webkit-transition-delay: 300ms;
+	        transition-delay: 300ms;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-y: 3px;
+	}
+	:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-x: calc(-1 * -3px * -1);
+	}
+	:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-y: -3px;
+	}
+	:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-x: calc(-1 * 3px * -1);
+	}
+}
    
       
    
+        
    Example
    
         
    @use "scss/core/tooltip/_tooltip";
 @include tooltip;
    
         
    //-		DS2 core (c) 2024 Alexander McIlwraith 
diff --git a/src/pg/core/_colour-samples.pug b/src/pg/core/_colour-samples.pug
index 4acc72d..c525f50 100644
--- a/src/pg/core/_colour-samples.pug
+++ b/src/pg/core/_colour-samples.pug
@@ -240,7 +240,7 @@ mixin colour-samples(colors, theid)
 					notes= colors[i].note
 		- }
 
-	div.tab-group(id= theid )
+	tabset(id= theid order= taborder)
 		-  csstab = csstab == undefined ? "css" : csstab
 		-  scsstab = scsstab == undefined ? "scss" : scsstab
 
diff --git a/src/pg/patterns/core/breakpoint/index.pug b/src/pg/patterns/core/breakpoint/index.pug
index 7edc73e..07c45a8 100644
--- a/src/pg/patterns/core/breakpoint/index.pug
+++ b/src/pg/patterns/core/breakpoint/index.pug
@@ -17,7 +17,7 @@ block content
 
 	p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. 
 
-	tabset#breakpoints
+	tabset#breakpoints(order= taborder)
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
diff --git a/src/pg/patterns/core/header/header.css b/src/pg/patterns/core/header/header.css
index f1164e4..2b5ebc0 100644
--- a/src/pg/patterns/core/header/header.css
+++ b/src/pg/patterns/core/header/header.css
@@ -1 +1,53 @@
-header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
\ No newline at end of file
+header {
+	display: -ms-grid;
+	display: grid;
+	-ms-grid-rows: 1.75rem 3.5rem;
+	grid-template-rows: 1.75rem 3.5rem;
+	-ms-grid-column: 2;
+	-ms-grid-column-span: 2;
+	grid-column: 2/4;
+	overflow: hidden;
+}
+header svg {
+	grid-column: 1/-1;
+	grid-row: 1/-1;
+	-ms-grid-row-align: stretch;
+	-ms-grid-column-align: stretch;
+	place-self: stretch;
+}
+header svg text {
+	-webkit-transform: translate(-1rem, 7.25rem);
+	    -ms-transform: translate(-1rem, 7.25rem);
+	        transform: translate(-1rem, 7.25rem);
+	font-size: 10rem;
+	font-weight: 1000;
+	font-family: sans-serif;
+	fill: var(--colour-grey-xxl);
+}
+header > div {
+	-ms-grid-row: 2;
+	grid-row: 2;
+	grid-column: 1/-1;
+	display: -ms-grid;
+	display: grid;
+	grid-column-gap: 1rem;
+	-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
+	-ms-grid-columns: auto max-content max-content;
+	grid-template-columns: auto -webkit-max-content -webkit-max-content;
+	grid-template-columns: auto max-content max-content;
+}
+header > div .header-title h1 {
+	margin: 0;
+	padding: 0 1rem;
+}
+header > div .header-title h1 a, header > div .header-title h1 a:visited {
+	border-bottom: none;
+	color: var(--colour-black);
+	font-family: sans-serif;
+	font-size: 2.5rem;
+	font-size: 32px;
+	font-weight: 700;
+	margin: 0;
+	padding: 0;
+	text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/pg/patterns/core/header/index.pug b/src/pg/patterns/core/header/index.pug
index aeaa0fc..9772aac 100644
--- a/src/pg/patterns/core/header/index.pug
+++ b/src/pg/patterns/core/header/index.pug
@@ -12,7 +12,7 @@ block content
 	+h(2)
 	p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[code.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system. 
 
-	tabset#header
+	tabset#header(order= taborder)
 		pre.language-html(tab="html")
 			// create temp variables and store the design system values
 			- var tmpsite= site
diff --git a/src/pg/patterns/core/status/index.pug b/src/pg/patterns/core/status/index.pug
index 5d9d6ff..0977221 100644
--- a/src/pg/patterns/core/status/index.pug
+++ b/src/pg/patterns/core/status/index.pug
@@ -49,7 +49,7 @@ block content
 	-	return count;
 	- }
 
-	div.tab-group#status-report
+	tabset#status-report(order= taborder)
 		div.status-report.status-report-structure(data-tab="by structure")
 			table.custom(role="presentation")
 				tbody 
diff --git a/src/pg/patterns/core/sticky-note/index.pug b/src/pg/patterns/core/sticky-note/index.pug
index f632892..c4a1804 100644
--- a/src/pg/patterns/core/sticky-note/index.pug
+++ b/src/pg/patterns/core/sticky-note/index.pug
@@ -15,7 +15,7 @@ block content
 	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	
 
 
-	tabset#sticky-note
+	tabset#sticky-note(order= taborder)
 		pre.language-html(tab="html")
 			include _sticky-note.pug
 		pre.language-pug(tab="pug")
diff --git a/src/pg/patterns/core/sticky-note/sticky-note.css b/src/pg/patterns/core/sticky-note/sticky-note.css
index 5976be1..b0a5962 100644
--- a/src/pg/patterns/core/sticky-note/sticky-note.css
+++ b/src/pg/patterns/core/sticky-note/sticky-note.css
@@ -1 +1,125 @@
-sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(255,255,221.2)),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,rgb(255,255,200.8)),to(rgb(255,255,185.5)));background:linear-gradient(180deg,rgb(255,255,221.2) 0%,#ffffd3 2%,#ffffd3 12%,rgb(255,255,200.8) 75%,rgb(255,255,185.5) 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(156.5265625,220.9484375,235.6734375)),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,rgb(139.4734375,215.0515625,232.3265625)),to(rgb(126.68359375,210.62890625,229.81640625)));background:linear-gradient(180deg,rgb(156.5265625,220.9484375,235.6734375) 0%,#94daea 2%,#94daea 12%,rgb(139.4734375,215.0515625,232.3265625) 75%,rgb(126.68359375,210.62890625,229.81640625) 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(250.3493150685,123.8506849315,147.104109589)),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,rgb(249.6506849315,104.1493150685,130.895890411)),to(rgb(249.1267123288,89.3732876712,118.7397260274)));background:linear-gradient(180deg,rgb(250.3493150685,123.8506849315,147.104109589) 0%,#fa728b 2%,#fa728b 12%,rgb(249.6506849315,104.1493150685,130.895890411) 75%,rgb(249.1267123288,89.3732876712,118.7397260274) 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(196.6333333333,251.5666666667,200.925)),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,rgb(177.3666666667,250.4333333333,183.075)),to(rgb(162.9166666667,249.5833333333,169.6875)));background:linear-gradient(180deg,rgb(196.6333333333,251.5666666667,200.925) 0%,#bbfbc0 2%,#bbfbc0 12%,rgb(177.3666666667,250.4333333333,183.075) 75%,rgb(162.9166666667,249.5833333333,169.6875) 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}
\ No newline at end of file
+sticky-note-wrapper {
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+	border: 1px solid transparent;
+	border-radius: 50%;
+	display: inline-block;
+	height: 0.5rem;
+	position: relative;
+	width: 0.5rem;
+}
+sticky-note-wrapper * {
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+sticky-note-wrapper sticky-note {
+	cursor: -webkit-grab;
+	cursor: grab;
+	display: -ms-grid;
+	display: grid;
+	float: left;
+	font-size: 1rem;
+	height: 13rem;
+	left: 0;
+	place-items: stretch;
+	position: absolute;
+	top: 0;
+	width: 13rem;
+	z-index: 100;
+}
+sticky-note-wrapper sticky-note:active {
+	cursor: -webkit-grabbing;
+	cursor: grabbing;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+}
+sticky-note-wrapper sticky-note.right {
+	float: right;
+}
+sticky-note-wrapper sticky-note > div {
+	-ms-grid-row: 1;
+	grid-row: 1;
+	-ms-grid-column: 1;
+	grid-column: 1;
+}
+sticky-note-wrapper sticky-note > div:nth-child(1) {
+	background-color: rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
+	        box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
+	display: -ms-grid;
+	display: grid;
+	margin: 2rem 1rem 0.25rem 0.36rem;
+	width: calc(100% - 1rem);
+}
+sticky-note-wrapper sticky-note > div:nth-child(2) {
+	clip-path: url(#stickyClip);
+	display: -ms-grid;
+	display: grid;
+	font-family: "Kalam", cursive;
+	font-style: 1rem;
+	font-weight: 300;
+	line-height: 1.25rem;
+	padding: 1rem;
+	place-items: center;
+	text-align: center;
+}
+sticky-note-wrapper sticky-note > div:nth-child(2) > * {
+	font-family: "Kalam", cursive !important;
+	font-style: normal !important;
+	font-weight: 300 !important;
+}
+@media screen and (max-width: 1024px) {
+	sticky-note-wrapper sticky-note > div:nth-child(2) {
+		max-width: 13rem;
+		min-width: 13rem;
+		width: 1rem;
+	}
+}
+@media screen and (max-width: 768px) {
+	sticky-note-wrapper sticky-note > div:nth-child(2) {
+		font-size: 1.75rem;
+		max-width: 21rem;
+		min-height: 21rem;
+	}
+}
+@media screen and (max-width: 640px) {
+	sticky-note-wrapper sticky-note > div:nth-child(2) {
+		font-size: 2.5rem;
+		max-width: 26rem;
+		min-height: 26rem;
+	}
+}
+sticky-note-wrapper sticky-note > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 221.2)), color-stop(2%, #ffffd3), color-stop(12%, #ffffd3), color-stop(75%, rgb(255, 255, 200.8)), to(rgb(255, 255, 185.5)));
+	background: linear-gradient(180deg, rgb(255, 255, 221.2) 0%, #ffffd3 2%, #ffffd3 12%, rgb(255, 255, 200.8) 75%, rgb(255, 255, 185.5) 100%);
+}
+sticky-note-wrapper sticky-note.blue > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(156.5265625, 220.9484375, 235.6734375)), color-stop(2%, #94daea), color-stop(12%, #94daea), color-stop(75%, rgb(139.4734375, 215.0515625, 232.3265625)), to(rgb(126.68359375, 210.62890625, 229.81640625)));
+	background: linear-gradient(180deg, rgb(156.5265625, 220.9484375, 235.6734375) 0%, #94daea 2%, #94daea 12%, rgb(139.4734375, 215.0515625, 232.3265625) 75%, rgb(126.68359375, 210.62890625, 229.81640625) 100%);
+}
+sticky-note-wrapper sticky-note.pink > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(250.3493150685, 123.8506849315, 147.104109589)), color-stop(2%, #fa728b), color-stop(12%, #fa728b), color-stop(75%, rgb(249.6506849315, 104.1493150685, 130.895890411)), to(rgb(249.1267123288, 89.3732876712, 118.7397260274)));
+	background: linear-gradient(180deg, rgb(250.3493150685, 123.8506849315, 147.104109589) 0%, #fa728b 2%, #fa728b 12%, rgb(249.6506849315, 104.1493150685, 130.895890411) 75%, rgb(249.1267123288, 89.3732876712, 118.7397260274) 100%);
+}
+sticky-note-wrapper sticky-note.green > div:nth-child(2) {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(196.6333333333, 251.5666666667, 200.925)), color-stop(2%, #bbfbc0), color-stop(12%, #bbfbc0), color-stop(75%, rgb(177.3666666667, 250.4333333333, 183.075)), to(rgb(162.9166666667, 249.5833333333, 169.6875)));
+	background: linear-gradient(180deg, rgb(196.6333333333, 251.5666666667, 200.925) 0%, #bbfbc0 2%, #bbfbc0 12%, rgb(177.3666666667, 250.4333333333, 183.075) 75%, rgb(162.9166666667, 249.5833333333, 169.6875) 100%);
+}
+sticky-note-wrapper:has(sticky-note:hover) {
+	background-color: #ffffd3;
+	border: 1px solid black;
+}
+sticky-note-wrapper:has(sticky-note.yellow:hover) {
+	background-color: #ffffd3;
+}
+sticky-note-wrapper:has(sticky-note.blue:hover) {
+	background-color: #94daea;
+}
+sticky-note-wrapper:has(sticky-note.pink:hover) {
+	background-color: #fa728b;
+}
+sticky-note-wrapper:has(sticky-note.green:hover) {
+	background-color: #bbfbc0;
+}
\ No newline at end of file
diff --git a/src/pg/patterns/core/switch/index.pug b/src/pg/patterns/core/switch/index.pug
index ff0cea5..85d3ef0 100644
--- a/src/pg/patterns/core/switch/index.pug
+++ b/src/pg/patterns/core/switch/index.pug
@@ -20,7 +20,7 @@ block content
 		label(for="example-switch") Switch label (states the on state)
 		span#example-switch(role="switch")
 
-	div#switches.tab-group
+	tabset#switches(order= taborder)
 		pre.language-html(tab="html")
 			include _switch.pug
 		pre.language-pug(tab="pug")
diff --git a/src/pg/patterns/core/switch/switch.css b/src/pg/patterns/core/switch/switch.css
index 71109dd..f71e867 100644
--- a/src/pg/patterns/core/switch/switch.css
+++ b/src/pg/patterns/core/switch/switch.css
@@ -1 +1,26 @@
-[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
\ No newline at end of file
+[role=switch] {
+	display: -ms-inline-grid;
+	display: inline-grid;
+	border: 1px solid #2e51a1;
+	background-color: #d8d8d8;
+	border-radius: 0.75rem;
+	height: 1.5rem;
+	width: 3rem;
+	-webkit-transition: all 500ms;
+	transition: all 500ms;
+}
+[role=switch] > span {
+	display: inline-block;
+	background-color: white;
+	border-radius: 50%;
+	margin: 2%;
+	width: calc(1.5rem - 2%);
+	-webkit-transition: all 500ms;
+	transition: all 500ms;
+}
+[role=switch][aria-checked=true] {
+	background-color: #2e51a1;
+}
+[role=switch][aria-checked=true] > span {
+	margin-left: calc(1.5rem - 5%);
+}
\ No newline at end of file
diff --git a/src/pg/patterns/core/tooltip/index.pug b/src/pg/patterns/core/tooltip/index.pug
index 0c92466..8ab42f3 100644
--- a/src/pg/patterns/core/tooltip/index.pug
+++ b/src/pg/patterns/core/tooltip/index.pug
@@ -33,7 +33,7 @@ block content
 		include _tooltip.pug
 
 
-	tabset#tooltip
+	tabset#tooltip(order= taborder)
 		pre.language-html(tab="html")
 			include _tooltip.pug
 		pre.language-pug(tab="pug")
diff --git a/src/pg/patterns/core/tooltip/tooltip.css b/src/pg/patterns/core/tooltip/tooltip.css
index ff1d855..75bbf5b 100644
--- a/src/pg/patterns/core/tooltip/tooltip.css
+++ b/src/pg/patterns/core/tooltip/tooltip.css
@@ -1 +1,157 @@
-[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}
\ No newline at end of file
+/* Position Options
+	- top / block-start
+	- right / inline-end
+	- bottom / block-end
+	- left / inline-start
+*/
+[role=tooltip] {
+	background: #fff;
+	border-radius: 0.5rem;
+	color: #000;
+	display: none;
+	-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
+	        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
+	font-size: 1rem;
+	font-weight: 400;
+	inline-size: -webkit-max-content;
+	inline-size: -moz-max-content;
+	inline-size: max-content;
+	line-height: initial;
+	margin: 0;
+	max-inline-size: 25rem;
+	opacity: 0;
+	padding: 0.75rem 1.5rem;
+	pointer-events: none;
+	position: absolute;
+	text-align: start;
+	-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	    -ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	        transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+	transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+	transition: opacity 0.2s ease, transform 0.2s ease;
+	transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	will-change: filter;
+	z-index: 10;
+}
+[role=tooltip]::before {
+	clip-path: inset(50%);
+	clip: rect(1px, 1px, 1px, 1px);
+	content: "; Has tooltip: ";
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+[role=tooltip]::after {
+	background: #fff;
+	content: "";
+	inset: 0;
+	-webkit-mask: var(--tooltip-pointer);
+	        mask: var(--tooltip-pointer);
+	position: absolute;
+	z-index: -1;
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position]),
+[tip-position=bottom],
+[tip-position=block-end]) {
+	text-align: center;
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position])) {
+	inset-inline-start: 50%;
+	inset-block-end: calc(100% + 0.75rem + 1rem);
+	--tooltip-x: calc(50% * -1);
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position]))::after {
+	--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
+	inset-block-end: -1rem;
+	-webkit-border-after: 1rem solid transparent;
+	        border-block-end: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=right],
+[tip-position=inline-end]) {
+	inset-inline-start: calc(100% + 1.5rem + 1rem);
+	inset-block-end: 50%;
+	--tooltip-y: 50%;
+}
+[role=tooltip]:is([tip-position=right],
+[tip-position=inline-end])::after {
+	--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
+	inset-inline-start: -1rem;
+	-webkit-border-start: 1rem solid transparent;
+	        border-inline-start: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=bottom],
+[tip-position=block-end]) {
+	inset-inline-start: 50%;
+	inset-block-start: calc(100% + 0.75rem + 1rem);
+	--tooltip-x: calc(50% * -1);
+}
+[role=tooltip]:is([tip-position=bottom],
+[tip-position=block-end])::after {
+	--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
+	inset-block-start: -1rem;
+	-webkit-border-before: 1rem solid transparent;
+	        border-block-start: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=left],
+[tip-position=inline-start]) {
+	inset-inline-end: calc(100% + 1.5rem + 1rem);
+	inset-block-end: 50%;
+	--tooltip-y: 50%;
+}
+[role=tooltip]:is([tip-position=left],
+[tip-position=inline-start])::after {
+	--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
+	inset-inline-end: -1rem;
+	-webkit-border-end: 1rem solid transparent;
+	border-inline-end: 1rem solid transparent;
+}
+@media (prefers-color-scheme: dark) {
+	[role=tooltip] {
+		background: #1f2127;
+		color: #fff;
+		-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
+		        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
+	}
+	[role=tooltip]::after {
+		background: #1f2127;
+	}
+}
+
+:has(> [role=tooltip]) {
+	position: relative;
+}
+:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
+	display: block;
+	opacity: 1;
+	-webkit-transition-delay: 300ms;
+	        transition-delay: 300ms;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-y: 3px;
+	}
+	:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-x: calc(-1 * -3px * -1);
+	}
+	:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-y: -3px;
+	}
+	:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-x: calc(-1 * 3px * -1);
+	}
+}
\ No newline at end of file