Move breakpoints to breakpoint for easier @use

Readme.md

@@ -100,4 +100,4 @@ You will now be able to include the .pp file in your pattern's index file while
 
 
 ## Credits 
-This framework includes [PrismJS](https://prismjs.com/) for code syntax highlighting. PrismJS is released under the [MIT license](https://opensource.org/licenses/MIT)>
+This framework includes [PrismJS](https://prismjs.com/) for code syntax highlighting. PrismJS is released under the [MIT license](https://opensource.org/licenses/MIT).

public/assets/scaffolding-min.js

@@ -3014,13 +3014,8 @@ Prism.languages.webmanifest = Prism.languages.json;
 
 /***/ }),
 /* 8 */
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/***/ (function(module) {
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   init: function() { return /* binding */ init; }
-/* harmony export */ });
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -3122,7 +3117,8 @@ var calculateStickyPosition = function calculateStickyPosition(s) {
     });
   }
 };
-function init() {
+module.exports = {
+  init: function init() {
     var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
     font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
     p.querySelectorAll("sticky-note").forEach(function (s) {
@@ -3151,6 +3147,7 @@ function init() {
       });
     };
   }
+};
 
 /***/ }),
 /* 9 */
@@ -3226,27 +3223,47 @@ var waitForElement = function waitForElement(selector) {
     });
   });
 };
+var tabsetCount = 0;
 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) {
-        var tab = child.getAttribute("tab") || child.getAttribute("data-tab");
+        // 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");
+
+        // if the tab text is not blank 
         if (tab !== null) {
           var tabID = tab.replace(/\W+/g, "-").toLowerCase();
-          var tabPanel = document.createElement('div');
+
+          // 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));
-          tabPanel.appendChild(child.cloneNode(true));
           child.parentNode.replaceChild(tabPanel, child);
-          tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(tablist === "" ? "class='selected'" : "", " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
+          var cls = tablist === "" ? "class='selected'" : "";
+          tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
         } else {
           child.classList.add("tab-hidden");
         }
@@ -3256,19 +3273,26 @@ function init() {
       ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
       tabGroup.insertBefore(ul, tabGroup.firstChild);
       tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
-        tab.addEventListener("click", function (e) {
+        tab.addEventListener("click", function (evt) {
-          if (e.altKey && typeof args.altModifier == "function") {
+          // if (evt.altKey && typeof args.altModifier == "function") {
-            args.altModifier(tab);
+          // 	args.altModifier(tab, evt);
-          } else if (e.shiftKey && typeof args.shiftModifier == "function") {
+          // } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
-            args.shiftModifier(tab);
+          // 	args.shiftModifier(tab, evt);
-          } else if (e.metaKey && typeof args.metaModifier == "function") {
+          // } else if (evt.metaKey && typeof args.metaModifier == "function") {
-            args.metaModifier(tab);
+          // 	args.metaModifier(tab, evt);
-          } else {
+          // } else {
           var siblings = Array.from(tab.parentNode.children);
           siblings.forEach(function (sibling) {
             return sibling.classList.remove("selected");
           });
           tab.classList.add("selected");
+          var urlPath = window.location;
+          urlPath.hash = evt.currentTarget.getAttribute("id");
+          window.history.pushState({
+            "pageTitle": window.title + " : " + evt.currentTarget.innerHTML
+          }, "", urlPath.toString());
+          // window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
+
           var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
             return child.getAttribute("role") === "tabpanel";
           });
@@ -3277,7 +3301,7 @@ function init() {
           });
           var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
           document.getElementById(tabPanelId).classList.add("open");
-          }
+          //}
         });
         tab.addEventListener("keypress", function (e) {
           e.preventDefault();
@@ -3290,10 +3314,17 @@ function init() {
     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);
       });
     }
   });
+  addEventListener("hashchange", function (evt) {
+    document.querySelector(window.location.hash).dispatchEvent(click);
+
+    // window.location.hash
+    // console.log(window.location.hash)
+  });
 }
 
 /***/ })
@@ -3397,6 +3428,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
 /* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
+/* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__);
 /* 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);

public/patterns/core/tabs/index.html

@@ -42,58 +42,7 @@
 	div(tab="[tab title]")
 	div(tab="[tab title]")
 		</pre>
-      <pre class="language-css" tab="css">tabset, .tab-group {
+      <pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre>
-	margin: 2rem 0 1rem 0;
-}
-tabset > ul, .tab-group > ul {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	margin: 0;
-	padding: 0;
-}
-tabset > ul li.separator, .tab-group > ul li.separator {
-	border-bottom: 1px solid #7f7f7f;
-	border-left: 1px solid #7f7f7f;
-	display: inline-block;
-	margin: 0.45rem 0 0 0;
-	width: 100%;
-}
-tabset .tab-hidden, .tab-group .tab-hidden {
-	display: none;
-}
-tabset [role=tab], .tab-group [role=tab] {
-	background-color: #FFF;
-	border-left: 1px solid #7f7f7f;
-	border-top: 1px solid #7f7f7f;
-	border-radius: 0.5rem 0.5rem 0 0;
-	cursor: pointer;
-	margin: 0;
-	display: inline;
-	padding: 1rem 1.5rem 0.14rem 1.5rem;
-	z-index: 2;
-}
-tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
-	border-right: 1px solid #7f7f7f;
-}
-tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
-	background-color: #f0f0f0;
-	border-bottom: 1px solid #7f7f7f;
-}
-tabset [role=tab] span, .tab-group [role=tab] span {
-	display: block;
-	margin: 0 0 0.5rem 0;
-}
-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;
-}</pre>
       <div tab="scss">
         <pre class="language-sass">@import "scss/core/tabs/_tabs";
 @include tabs{ 
@@ -103,18 +52,23 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
         <pre class="language-sass">//		DS2 core (c) 2024 Alexander McIlwraith 
 //		Licensed under CC BY-SA 4.0 
 
+
 $tab-border: #7f7f7f !default; 
 $tab-selected: #FFF !default;
 $tab-notselected: #f0f0f0 !default;
+$tab-break: 450px !default;
 
 @mixin tabs {
 	tabset, .tab-group {
+		@media (min-width: $tab-break) {
 			margin: 2rem 0 1rem 0;
+		}
 		> ul {
 			display: flex;
 			margin: 0;
 			padding: 0;
 
+
 			li.separator {	
 				border-bottom: 1px solid $tab-border;
 				border-left: 1px solid $tab-border;
@@ -124,6 +78,8 @@ $tab-notselected: #f0f0f0 !default;
 			}
 		}
 
+
+
 		.tab-hidden {
 			display: none;
 		}
@@ -161,12 +117,35 @@ $tab-notselected: #f0f0f0 !default;
 			padding: 1rem;
 			z-index: 1;
 
+			@media (min-width: $tab-break) {
+				&[open] summary {
+					display: none;
+				}
+			}
+
+			@media (min-width: $tab-break) {
 				&:not(.open) {
 					display: none;
 				}
+			}
 			@content;
 
 		}
+
+		@media (max-width: $tab-break) {
+			&:has(details) {
+				[role="tablist"] {
+					display: none;
+				}
+
+				[role="tabpanel"] {
+					border: none;
+				}
+			}
+
+
+		}
+
 	}
 }</pre>
       </div>
@@ -205,28 +184,53 @@ const waitForElement = (selector) => {
     });
 }
 
+let tabsetCount = 0;
 
 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++;
+			}
+
+
 			const tabgroup = tabGroup.getAttribute("id");
 			let tablist = "";
 
 			Array.from(tabGroup.children).forEach(child => {
-				const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// is details? 
+				let dtls = child.nodeName == "DETAILS" ? true : false;
+
+				// get the tab text 
+				let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// if the tab text is not blank 
 				if (tab !== null) {
 					const tabID = tab.replace(/\W+/g, "-").toLowerCase();
-					const tabPanel = document.createElement('div');
+					
+
+					// 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));
+					}
+
 					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}`);
-					tabPanel.appendChild(child.cloneNode(true));
 					child.parentNode.replaceChild(tabPanel, child);
-					tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					let cls = tablist === "" ? "class='selected'" : "";
+					tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
 				} else {
 					child.classList.add("tab-hidden");
 				}
@@ -238,25 +242,32 @@ export function init(container = document, spacer = true, args = {}) {
 			tabGroup.insertBefore(ul, tabGroup.firstChild);
 
 			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-				tab.addEventListener("click", (e) => {
+				tab.addEventListener("click", (evt) => {
-					if (e.altKey && typeof args.altModifier == "function") {
+					// if (evt.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab);
+					// 	args.altModifier(tab, evt);
-					} else if (e.shiftKey && typeof args.shiftModifier == "function") {
+					// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab);
+					// 	args.shiftModifier(tab, evt);
-					} else if (e.metaKey && typeof args.metaModifier == "function") {
+					// } else if (evt.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab);
+					// 	args.metaModifier(tab, evt);
-					} else {
+					// } else {
 					const siblings = Array.from(tab.parentNode.children);
 					siblings.forEach(sibling => sibling.classList.remove("selected"));
 					tab.classList.add("selected");
 
+
+					let urlPath = window.location;
+					urlPath.hash = evt.currentTarget.getAttribute("id");
+					window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
+					// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
+
+
 					const tabPanels = Array.from(tab.parentNode.parentNode.children)
 										   .filter(child => child.getAttribute("role") === "tabpanel");
 					tabPanels.forEach(panel => panel.classList.remove("open"));
 
 					const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
 					document.getElementById(tabPanelId).classList.add("open");
-					}
+					//}
 				});
 
 
@@ -272,13 +283,21 @@ export function init(container = document, spacer = true, args = {}) {
 		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
 			waitForElement(document.location.hash).then((el) => {
 				el.scrollIntoView();
+				el.focus();
 				el.dispatchEvent(click);
 			});
-
 		}
 	});
-}
+
-</pre>
+	addEventListener("hashchange", (evt) => {
+		document.querySelector(window.location.hash).dispatchEvent(click);
+
+		// window.location.hash
+		// console.log(window.location.hash)
+	 })
+
+
+}</pre>
       </div>
     </tabset>
   </body>

src/pg/core/_core-colour-samples.scss

@@ -1,3 +1,5 @@
+@use "../pg/patterns/core/breakpoint/breakpoint";
+
 @mixin core-colour-samples {	
 
 	#copystatus {
@@ -36,14 +38,14 @@
 		gap: 1rem;
 		margin-bottom: 1rem;
 
-		@include break(-lg) {
+		@include breakpoint.break(-lg) {
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			max-width: 100%;
 			width: 100%;
 		}
 
-		@include break(-sm) {
+		@include breakpoint.break(-sm) {
 			grid-template-columns: auto;
 			width: 100%;
 			max-width: 100%;
@@ -67,7 +69,7 @@
 			width: 20rem;
 			max-width: 318px;
 
-			@include break(-lg) {
+			@include breakpoint.break(-lg) {
 				width: 100%;
 				max-width: 100%;
 			}

src/pg/core/core.scss.pug

@@ -5,271 +5,18 @@
 		This file is generates _core.scss using information in ../pg/_config.pug.
 		Please make your changes in your _config.pug file so that they are not
 		overwritten. \n*/\n\n\n`
+| !{out}
+
 
 include ../_config
 include _colour-samples
+include _core-colour-samples.scss
 
-
+- out = `\n\n//colour tokens\n$${colorpfx}: (`
--
-	out +=`@mixin core-colour-samples {	
-
-		#copystatus {
-			left: 50%;
-			position: absolute;
-			z-index: 100;
-			div {
-				border-radius: 1rem;
-				border: 1px solid green;
-				left: -50%;
-				padding: 1rem;
-				position: relative;
-				white-space: nowrap;
-				&::after {
-					clear: both;
-					content: " ";
-					display: block;
-				}
-				&.succeeded {
-					background-color: white;
-					border-color: black;
-					color: black;
-				}
-				&.failed {
-					background-color: white;
-					border-color: #f00;
-					color: #f00;
-				}
-			}
-		}
-
-		color-samples {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			gap: 1rem;
-			margin-bottom: 1rem;
-
-			@include break(-lg) {
-				display: grid;
-				grid-template-columns: repeat(2, 1fr);
-				max-width: 100%;
-				width: 100%;
-			}
-
-			@include break(-sm) {
-				grid-template-columns: auto;
-				width: 100%;
-				max-width: 100%;
-			}
-
-			color-sample {
-				align-items: center;
-				border-radius: .5rem;
-				border: 1px solid #CCC;
-				display: grid;
-				font-family: inherit;
-				gap: .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";
-				grid-template-columns: repeat(6, 1fr);
-				grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
-				padding: 1rem;
-				width: 20rem;
-				max-width: 318px;
-
-				@include break(-lg) {
-					width: 100%;
-					max-width: 100%;
-				}
-
-				name 	{ 
-					align-self: start;
-					font-size: 1.25rem; 
-					grid-area: name; 
-					span {
-						cursor: pointer;
-					}
-				}
-				rgb { 
-					grid-area: rgb;
-					white-space: nowrap;
-				}
-				hex { 
-					grid-area: hex;
-					white-space: nowrap;
-				}
-
-				> accessibility {
-					border-bottom: 1px solid #ccc;
-					border-top: 1px solid #ccc;
-				}
-
-				accessibility {
-					grid-area: acc;
-					grid-row: 3;
-					padding: .5rem 0;
-
-					display: grid; 
-					gap: .5rem;
-					grid-template-columns: repeat(3, 1fr);
-					grid-template-rows: repeat(3, max-content);
-					.result {
-						align-items: center;
-						border-radius: .5rem;
-						display: grid;
-						grid-template-columns: repeat(2, 1fr);
-						border: 1px solid #ccc;
-						padding: 0 1rem;
-						text-align: center;
-						&.accwaa, &.accwaaa {
-							background-color: white;
-							color: black;
-						}
-						&.accbaa, &.accbaaa {
-							background-color: black;
-							color: white;
-						}
-						span:nth-child(2) {
-							font-size: 2rem;
-						}
-					}
-
-					.aa, .aaa {
-						align-self: center;
-						display: block;
-						font-size: .75rem;
-					}
-					.acchb {
-						grid-column: 2;
-					}
-					.acchb, .acchw {
-						display: grid;
-						grid-tempate-columns: auto;
-						grid-template-rows: repeat(2, max-content);
-						align-self: start;
-						text-align: center;
-						padding: 0;
-						span {
-							grid-row: 1;
-							grid-column: 1 / -1;
-							font-size: .9rem;
-						}
-						small {
-							text-align: center;
-							grid-row: 2;
-							grid-column: 1 / -1;
-							font-size: .75rem;
-						}
-					}
-				}
-
-				sample-block {
-					align-self: start;
-					grid-column: span 3;
-					grid-row: 4;
-					color-pill {				
-						display: grid;
-						grid-gap: .5rem;
-						grid-template-columns: 20px max-content auto;
-						:nth-child(1) {
-							align-self: center;
-							border-radius: 5px;
-							border: 1px solid #CCC;
-							display: inline-block;
-							height: 10px;
-							width: 20px;
-						}
-						span {
-							cursor: pointer;
-							.tooltip-tc {
-								padding: .5rem;
-								width: 20rem;
-								max-width: 318px;
-								height: max-contents;
-
-								display: grid; 
-								gap: .5rem;
-								grid-template-columns: repeat(3, 1fr);
-								grid-template-rows: repeat(3, max-content);
-								.result {
-									align-items: center;
-									border-radius: .5rem;
-									display: grid;
-									grid-template-columns: repeat(2, 1fr);
-									border: 1px solid #ccc;
-									padding: 0 1rem;
-									text-align: center;
-									&.accwaa, &.accwaaa {
-										background-color: white;
-										color: black;
-									}
-									&.accbaa, &.accbaaa {
-										background-color: black;
-										color: white;
-									}
-									span{ border: none;
-										&:nth-child(2) {
-											font-size: 2rem;
-										}
-									}
-								}
-
-								.aa, .aaa {
-									align-self: center;
-									display: block;
-									font-size: .75rem;
-								}
-
-								.acchb {
-									grid-column: 2;
-								}
-								.acchb, .acchw {
-									border: none;
-									display: block;
-									width: 100%;
-									place-self: stretch;
-									text-align: center;
-									span {
-										border: none;
-										font-size: .9rem;
-										width: 100%;
-										&::after, &::before {
-											display: none;
-										}
-									}
-									small {
-										font-size: .75rem;
-										text-align: center;								
-									}
-								}
-							}
-						}
-					}
-				}
-
-				notes {
-					border-top: 1px solid #ccc;
-					grid-column: 1 / -1;
-					padding-top: .5rem;
-				}
-			}
-		}
-	}`
-
-
-
-
-- out += `\n\n//colour tokens\n$${colorpfx}: (`
 
 each val in generateColourToken
 	- out += generateSCSS(eval(val), colorpfx)
 
-
-
-
 //- var scss = $colors
 	| !{generateSCSS(eval(val), colorpfx)}
 

src/pg/patterns/core/breakpoint/_breakpoint.scss

@@ -4,7 +4,7 @@
 // default breakpoints match bootstrap 5 breakpoints.
 $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
 
-@mixin breakpoint-debug {
+@mixin debug {
 	body::before, body::after {
 		background-color: #555;	
 		color: white;	

src/pg/patterns/core/sticky-note/_sticky-note.js

@@ -95,7 +95,8 @@ const calculateStickyPosition = (s) => {
 	}
 }
 
-export function init(p = document){
+module.exports = {
+	init: (p = document) => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
 
 		p.querySelectorAll("sticky-note").forEach((s) => {
@@ -129,3 +130,4 @@ export function init(p = document){
 			});
 		}
 	}
+}

src/pg/patterns/core/tabs/_tabs.js

@@ -30,28 +30,53 @@ const waitForElement = (selector) => {
     });
 }
 
+let tabsetCount = 0;
 
 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++;
+			}
+
+
 			const tabgroup = tabGroup.getAttribute("id");
 			let tablist = "";
 
 			Array.from(tabGroup.children).forEach(child => {
-				const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// is details? 
+				let dtls = child.nodeName == "DETAILS" ? true : false;
+
+				// get the tab text 
+				let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+
+				// if the tab text is not blank 
 				if (tab !== null) {
 					const tabID = tab.replace(/\W+/g, "-").toLowerCase();
-					const tabPanel = document.createElement('div');
+					
+
+					// 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));
+					}
+
 					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}`);
-					tabPanel.appendChild(child.cloneNode(true));
 					child.parentNode.replaceChild(tabPanel, child);
-					tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					let cls = tablist === "" ? "class='selected'" : "";
+					tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
 				} else {
 					child.classList.add("tab-hidden");
 				}
@@ -63,25 +88,32 @@ export function init(container = document, spacer = true, args = {}) {
 			tabGroup.insertBefore(ul, tabGroup.firstChild);
 
 			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-				tab.addEventListener("click", (e) => {
+				tab.addEventListener("click", (evt) => {
-					if (e.altKey && typeof args.altModifier == "function") {
+					// if (evt.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab);
+					// 	args.altModifier(tab, evt);
-					} else if (e.shiftKey && typeof args.shiftModifier == "function") {
+					// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab);
+					// 	args.shiftModifier(tab, evt);
-					} else if (e.metaKey && typeof args.metaModifier == "function") {
+					// } else if (evt.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab);
+					// 	args.metaModifier(tab, evt);
-					} else {
+					// } else {
 					const siblings = Array.from(tab.parentNode.children);
 					siblings.forEach(sibling => sibling.classList.remove("selected"));
 					tab.classList.add("selected");
 
+
+					let urlPath = window.location;
+					urlPath.hash = evt.currentTarget.getAttribute("id");
+					window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
+					// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
+
+
 					const tabPanels = Array.from(tab.parentNode.parentNode.children)
 										   .filter(child => child.getAttribute("role") === "tabpanel");
 					tabPanels.forEach(panel => panel.classList.remove("open"));
 
 					const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
 					document.getElementById(tabPanelId).classList.add("open");
-					}
+					//}
 				});
 
 
@@ -97,9 +129,18 @@ export function init(container = document, spacer = true, args = {}) {
 		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
 			waitForElement(document.location.hash).then((el) => {
 				el.scrollIntoView();
+				el.focus();
 				el.dispatchEvent(click);
 			});
-
 		}
 	});
+
+	addEventListener("hashchange", (evt) => {
+		document.querySelector(window.location.hash).dispatchEvent(click);
+
+		// window.location.hash
+		// console.log(window.location.hash)
+	 })
+
+
 }

src/pg/patterns/core/tabs/_tabs.scss

@@ -1,18 +1,23 @@
 //		DS2 core (c) 2024 Alexander McIlwraith 
 //		Licensed under CC BY-SA 4.0 
 
+
 $tab-border: #7f7f7f !default; 
 $tab-selected: #FFF !default;
 $tab-notselected: #f0f0f0 !default;
+$tab-break: 450px !default;
 
 @mixin tabs {
 	tabset, .tab-group {
+		@media (min-width: $tab-break) {
 			margin: 2rem 0 1rem 0;
+		}
 		> ul {
 			display: flex;
 			margin: 0;
 			padding: 0;
 
+
 			li.separator {	
 				border-bottom: 1px solid $tab-border;
 				border-left: 1px solid $tab-border;
@@ -22,6 +27,8 @@ $tab-notselected: #f0f0f0 !default;
 			}
 		}
 
+
+
 		.tab-hidden {
 			display: none;
 		}
@@ -59,11 +66,34 @@ $tab-notselected: #f0f0f0 !default;
 			padding: 1rem;
 			z-index: 1;
 
+			@media (min-width: $tab-break) {
+				&[open] summary {
+					display: none;
+				}
+			}
+
+			@media (min-width: $tab-break) {
 				&:not(.open) {
 					display: none;
 				}
+			}
 			@content;
 
 		}
+
+		@media (max-width: $tab-break) {
+			&:has(details) {
+				[role="tablist"] {
+					display: none;
+				}
+
+				[role="tabpanel"] {
+					border: none;
+				}
+			}
+
+
+		}
+
 	}
 }

src/pg/patterns/core/tabs/tabs.css

@@ -1,52 +1 @@
-tabset, .tab-group {
+@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}
-	margin: 2rem 0 1rem 0;
-}
-tabset > ul, .tab-group > ul {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	margin: 0;
-	padding: 0;
-}
-tabset > ul li.separator, .tab-group > ul li.separator {
-	border-bottom: 1px solid #7f7f7f;
-	border-left: 1px solid #7f7f7f;
-	display: inline-block;
-	margin: 0.45rem 0 0 0;
-	width: 100%;
-}
-tabset .tab-hidden, .tab-group .tab-hidden {
-	display: none;
-}
-tabset [role=tab], .tab-group [role=tab] {
-	background-color: #FFF;
-	border-left: 1px solid #7f7f7f;
-	border-top: 1px solid #7f7f7f;
-	border-radius: 0.5rem 0.5rem 0 0;
-	cursor: pointer;
-	margin: 0;
-	display: inline;
-	padding: 1rem 1.5rem 0.14rem 1.5rem;
-	z-index: 2;
-}
-tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
-	border-right: 1px solid #7f7f7f;
-}
-tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
-	background-color: #f0f0f0;
-	border-bottom: 1px solid #7f7f7f;
-}
-tabset [role=tab] span, .tab-group [role=tab] span {
-	display: block;
-	margin: 0 0 0.5rem 0;
-}
-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;
-}

src/scss/_core.scss

@@ -10,6 +10,8 @@
 */
 
 
+@use "../pg/patterns/core/breakpoint/breakpoint";
+
 @mixin core-colour-samples {	
 
 	#copystatus {
@@ -48,14 +50,14 @@
 		gap: 1rem;
 		margin-bottom: 1rem;
 
-		@include break(-lg) {
+		@include breakpoint.break(-lg) {
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			max-width: 100%;
 			width: 100%;
 		}
 
-		@include break(-sm) {
+		@include breakpoint.break(-sm) {
 			grid-template-columns: auto;
 			width: 100%;
 			max-width: 100%;
@@ -74,12 +76,12 @@
 								 "lighter   lighter   lighter  darker    darker    darker"
 								 "notes     notes     notes    notes     notes     notes";
 			grid-template-columns: repeat(6, 1fr);
-			grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
+			grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
 			padding: 1rem;
 			width: 20rem;
 			max-width: 318px;
 
-			@include break(-lg) {
+			@include breakpoint.break(-lg) {
 				width: 100%;
 				max-width: 100%;
 			}
@@ -114,7 +116,7 @@
 				display: grid; 
 				gap: .5rem;
 				grid-template-columns: repeat(3, 1fr);
-				grid-template-rows: repeat(3, max-content);
+				grid-template-rows: 2.5rem repeat(2, max-content);
 				.result {
 					align-items: center;
 					border-radius: .5rem;
@@ -187,7 +189,7 @@
 							padding: .5rem;
 							width: 20rem;
 							max-width: 318px;
-							height: max-content;
+							height: 10.5rem;
 
 							display: grid; 
 							gap: .5rem;
@@ -230,7 +232,6 @@
 								display: block;
 								width: 100%;
 								place-self: stretch;
-								text-align: center;
 								span {
 									border: none;
 									font-size: .9rem;

src/scss/scaffolding.scss

@@ -1,4 +1,4 @@
-/*
+/* ----------------------------------------------------------
  *    Variables
  */
 
@@ -15,15 +15,26 @@ $tooltip-dark-allow: false;
 // We recommend explicitly using the underscore when referring to pattern scss 
 // as you may have also created a version that compiles to css to display in 
 // your pattern. 
-@import "core";
+@use "core";
+@use "../../node_modules/prismjs/themes/prism";
+@use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
+@use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
+
+@use "../pg/patterns/core/sticky-note/_sticky-note";
+@use "../pg/patterns/core/switch/_switch";
+@use "../pg/patterns/core/tooltip/_tooltip";
+@use "../pg/patterns/core/breakpoint/_breakpoint";
+@use "../pg/patterns/core/header/_header";
+@use "../pg/patterns/core/tabs/_tabs"; 
+@use "../pg/patterns/core/status/_status";
+
+
+@include core.core-colour-samples;
+@include tooltip.tooltip;
+@include sticky-note.sticky-note;
+@include status.status;
+
 
-@import "../pg/patterns/core/sticky-note/_sticky-note";
-@import "../pg/patterns/core/switch/_switch";
-@import "../pg/patterns/core/tooltip/_tooltip";
-@import "../pg/patterns/core/breakpoints/_breakpoints";
-@import "../pg/patterns/core/header/_header";
-@import "../pg/patterns/core/tabs/_tabs"; 
-@import "../pg/patterns/core/status/_status";
 
 * {
 	box-sizing: border-box;
@@ -32,19 +43,15 @@ $tooltip-dark-allow: false;
 html {
 	font-family: $font-body;
 	font-size: $font-size;
-	@include break(-md) {
+	@include breakpoint.break(-md) {
 		font-size: calc($font-size + 2pt);
 	}
 	&.show-breakpoints {
-		@include breakpoint-debug;
+		@include breakpoint.debug;
 	}
 }
 
-@include core-colour-samples;
 
-@include tooltip;
-@include sticky-note;
-@include status;
 
 article[data-status=deprecated]:not(.show-deprecated) {
 	display: none;
@@ -65,7 +72,7 @@ body {
 		margin: 0 auto;
 		width: 100vw;
 
-		@include header;
+		@include header.header;
 
 		nav {
 			background-color: var(--colour-blue);
@@ -84,7 +91,7 @@ body {
 				color: var(--colour-white);
 				text-decoration: none;
 			}
-			@include break(md-) {
+			@include breakpoint.break(md-) {
 				display: initial;
 			}
 		}
@@ -98,7 +105,7 @@ body {
 			grid-row: 3;
 			grid-template-columns: auto repeat(2, max-content);
 			text-align: right;
-			@include switch;
+			@include switch.switch;
 			label {
 				text-align: left;;
 			}
@@ -109,7 +116,7 @@ body {
 			grid-column: 1 / -1;
 			grid-row: 4;
 
-			@include break(-md) {
+			@include breakpoint.break(-md) {
 				grid-row: 3;
 				padding: 0;
 			}
@@ -117,7 +124,7 @@ body {
 			@supports(grid-area: auto) {
 				display: grid;
 				grid-template-columns: 1rem repeat(2, auto) 1rem;
-				@include break(md-) {
+				@include breakpoint.break(md-) {
 					grid-template-columns: auto repeat(2, 22rem) auto;
 				}
 			}
@@ -135,7 +142,7 @@ body {
 					display: none;
 				}
 
-				@include tabs {
+				@include tabs.tabs {
 					pre {
 						background-color: var(--colour-black-5);
 						font-size: .8rem;
@@ -150,15 +157,12 @@ body {
 					display: grid;
 					grid-gap: .5rem;
 					grid-template-columns: max-content auto;
-					@include switch;
+					@include switch.switch;
 				}				
 			}
 		}
 	}
 }
 
-// keep your prism modules
+
-@import "../../node_modules/prismjs/themes/prism";
-@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
-@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";