Move breakpoints to breakpoint for easier @use

Fixes #4 , #29 , #32 Creates links as tabs in history, fixed tab error line.
Fix colours(fixes #31 )
2025-06-09 20:44:21 -04:00 · 2025-06-09 19:16:59 -04:00 · 2025-05-14 19:21:01 -04:00 · 2025-05-14 18:04:28 -04:00 · 2025-05-14 17:53:11 -04:00 · 2025-04-22 15:25:41 -04:00
14 changed files with 433 additions and 606 deletions
--- a/Readme.md
+++ b/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).
--- a/public/assets/scaffolding-min.js
+++ b/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,35 +3117,37 @@ var calculateStickyPosition = function calculateStickyPosition(s) {
    });
  }
 };
-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) {
-    if (s.querySelectorAll("svg").length == 0) {
-      var wrapper = document.createElement("sticky-note-wrapper");
-      s.parentNode.insertBefore(wrapper, s);
-      wrapper.appendChild(s);
-      s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
-      s.innerHTML = "<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>".concat(s.innerHTML, "</div></div>");
-    }
-    calculateStickyPosition(s);
-    drag(s);
-    s.ondblclick = function (e) {
-      if (e.ctrlKey) {
-        calculateStickyPosition(s);
-      } else {
-        // add one click select
-      }
-    };
-  });
-  window.onresize = function () {
+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", ""));
-    var stickies = p.querySelectorAll("sticky-note");
-    stickies.forEach(function (s) {
+    p.querySelectorAll("sticky-note").forEach(function (s) {
+      if (s.querySelectorAll("svg").length == 0) {
+        var wrapper = document.createElement("sticky-note-wrapper");
+        s.parentNode.insertBefore(wrapper, s);
+        wrapper.appendChild(s);
+        s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+        s.innerHTML = "<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>".concat(s.innerHTML, "</div></div>");
+      }
      calculateStickyPosition(s);
+      drag(s);
+      s.ondblclick = function (e) {
+        if (e.ctrlKey) {
+          calculateStickyPosition(s);
+        } else {
+          // add one click select
+        }
+      };
    });
-  };
-}
+    window.onresize = function () {
+      font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
+      var stickies = p.querySelectorAll("sticky-note");
+      stickies.forEach(function (s) {
+        calculateStickyPosition(s);
+      });
+    };
+  }
+};

 /***/ }),
 /* 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,28 +3273,35 @@ 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) {
-          if (e.altKey && typeof args.altModifier == "function") {
-            args.altModifier(tab);
-          } else if (e.shiftKey && typeof args.shiftModifier == "function") {
-            args.shiftModifier(tab);
-          } else if (e.metaKey && typeof args.metaModifier == "function") {
-            args.metaModifier(tab);
-          } else {
-            var siblings = Array.from(tab.parentNode.children);
-            siblings.forEach(function (sibling) {
-              return sibling.classList.remove("selected");
-            });
-            tab.classList.add("selected");
-            var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
-              return child.getAttribute("role") === "tabpanel";
-            });
-            tabPanels.forEach(function (panel) {
-              return panel.classList.remove("open");
-            });
-            var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
-            document.getElementById(tabPanelId).classList.add("open");
-          }
+        tab.addEventListener("click", function (evt) {
+          // if (evt.altKey && typeof args.altModifier == "function") {
+          // 	args.altModifier(tab, evt);
+          // } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
+          // 	args.shiftModifier(tab, evt);
+          // } else if (evt.metaKey && typeof args.metaModifier == "function") {
+          // 	args.metaModifier(tab, evt);
+          // } 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";
+          });
+          tabPanels.forEach(function (panel) {
+            return panel.classList.remove("open");
+          });
+          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);
--- a/public/assets/scaffolding.css
+++ b/public/assets/scaffolding.css
--- a/public/patterns/core/tabs/index.html
+++ b/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 {
-	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>
+      <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>
      <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 {
-		margin: 2rem 0 1rem 0;
+		@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;

-			&:not(.open) {
-				display: none;
+			@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) => {
-					if (e.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab);
-					} else if (e.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab);
-					} else if (e.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab);
-					} else {
-						const siblings = Array.from(tab.parentNode.children);
-						siblings.forEach(sibling => sibling.classList.remove("selected"));
-						tab.classList.add("selected");
+				tab.addEventListener("click", (evt) => {
+					// if (evt.altKey && typeof args.altModifier == "function") {
+					// 	args.altModifier(tab, evt);
+					// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
+					// 	args.shiftModifier(tab, evt);
+					// } else if (evt.metaKey && typeof args.metaModifier == "function") {
+					// 	args.metaModifier(tab, evt);
+					// } else {
+					const siblings = Array.from(tab.parentNode.children);
+					siblings.forEach(sibling => sibling.classList.remove("selected"));
+					tab.classList.add("selected");

-						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");
-					}
+					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>
--- a/src/pg/core/_core-colour-samples.scss
+++ b/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%;
 			}
--- a/src/pg/core/core.scss.pug
+++ b/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 +=`@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}: (`
+- out = `\n\n//colour tokens\n$${colorpfx}: (`

 each val in generateColourToken
 	- out += generateSCSS(eval(val), colorpfx)

-
-
-
 //- var scss = $colors
 	| !{generateSCSS(eval(val), colorpfx)}

--- a/src/pg/patterns/core/breakpoints/_breakpoints.scss
+++ b/src/pg/patterns/core/breakpoints/_breakpoints.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;	
--- a/src/pg/patterns/core/breakpoints/index.pug
+++ b/src/pg/patterns/core/breakpoints/index.pug
--- a/src/pg/patterns/core/sticky-note/_sticky-note.js
+++ b/src/pg/patterns/core/sticky-note/_sticky-note.js
@@ -95,37 +95,39 @@ const calculateStickyPosition = (s) => {
 	}
 }

-export function init(p = document){
-	font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-
-	p.querySelectorAll("sticky-note").forEach((s) => {
-		if (s.querySelectorAll("svg").length == 0) {
-			
-			let wrapper = document.createElement("sticky-note-wrapper");
-
-			s.parentNode.insertBefore(wrapper, s);
-    		wrapper.appendChild(s);
-
-			s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
-			s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
-		}
-		calculateStickyPosition(s);
-		drag(s);
-		s.ondblclick = (e) => {
-			if (e.ctrlKey) {
-				calculateStickyPosition(s);
-			} else {
-				// add one click select
-			}
-		}
-	})
-
-
-	window.onresize = () => {
+module.exports = {
+	init: (p = document) => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-		let stickies = p.querySelectorAll("sticky-note");
-		stickies.forEach((s) => {
+
+		p.querySelectorAll("sticky-note").forEach((s) => {
+			if (s.querySelectorAll("svg").length == 0) {
+				
+				let wrapper = document.createElement("sticky-note-wrapper");
+
+				s.parentNode.insertBefore(wrapper, s);
+	    		wrapper.appendChild(s);
+
+				s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+				s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
+			}
 			calculateStickyPosition(s);
-		});
+			drag(s);
+			s.ondblclick = (e) => {
+				if (e.ctrlKey) {
+					calculateStickyPosition(s);
+				} else {
+					// add one click select
+				}
+			}
+		})
+
+
+		window.onresize = () => {
+			font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
+			let stickies = p.querySelectorAll("sticky-note");
+			stickies.forEach((s) => {
+				calculateStickyPosition(s);
+			});
+		}
 	}
 }
--- a/src/pg/patterns/core/tabs/_tabs.js
+++ b/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) => {
-					if (e.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab);
-					} else if (e.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab);
-					} else if (e.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab);
-					} else {
-						const siblings = Array.from(tab.parentNode.children);
-						siblings.forEach(sibling => sibling.classList.remove("selected"));
-						tab.classList.add("selected");
+				tab.addEventListener("click", (evt) => {
+					// if (evt.altKey && typeof args.altModifier == "function") {
+					// 	args.altModifier(tab, evt);
+					// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
+					// 	args.shiftModifier(tab, evt);
+					// } else if (evt.metaKey && typeof args.metaModifier == "function") {
+					// 	args.metaModifier(tab, evt);
+					// } else {
+					const siblings = Array.from(tab.parentNode.children);
+					siblings.forEach(sibling => sibling.classList.remove("selected"));
+					tab.classList.add("selected");

-						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");
-					}
+					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)
+	 })
+
+
 }
--- a/src/pg/patterns/core/tabs/_tabs.scss
+++ b/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 {
-		margin: 2rem 0 1rem 0;
+		@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;

-			&:not(.open) {
-				display: none;
+			@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;
+				}
+			}
+
+
+		}
+
 	}
 }
--- a/src/pg/patterns/core/tabs/tabs.css
+++ b/src/pg/patterns/core/tabs/tabs.css
@@ -1,52 +1 @@
-tabset, .tab-group {
-	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;
-}
+@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}}
--- a/src/scss/_core.scss
+++ b/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;
--- a/src/scss/scaffolding.scss
+++ b/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";
+
Author	SHA1	Message	Date
Alexander	8fe6e39440	Move breakpoints to breakpoint for easier @use	2025-06-09 20:44:21 -04:00
Alexander	5f050066e9	Fixes #4 , #29 , #32 Creates links as tabs in history, fixed tab error line.	2025-06-09 19:16:59 -04:00
Alexander	0b5e54faa6	Fix colours(fixes #31 )	2025-05-14 19:21:01 -04:00
Alexander	6d8b9d0e47	switch core to use @use(fixes #31 )	2025-05-14 18:04:28 -04:00
A McIlwraith	9db11f3f97	Fix ending period.	2025-05-14 17:53:11 -04:00
Alexander	df95905fe0	Fix for render issue for tabs	2025-04-22 15:25:41 -04:00
Alexander	89870edaaf	Make module definitions consistent	2025-04-03 07:42:09 -04:00
Alexander	ca3f9970a9	Update tabs to allow for custom color on tab and top bar.	2025-02-04 16:55:15 -05:00
Alexander	d5cbcb5807	Focusing the tab seems to have improved the reliability of the click happening.	2025-02-04 13:06:52 -05:00
Alexander	a204f7fc98	Update core.scss.pug (and associated files)	2025-02-04 10:30:15 -05:00