Fixes #32 Should fix the scrolling issue and clean up console messages

public/assets/scaffolding-min.js

@@ -3187,13 +3187,8 @@ module.exports = {
 
 /***/ }),
 /* 10 */
-/***/ (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 */ });
 /*  DS2 core (c) 2024 Alexander McIlwraith 
 	Released under Creative Commons Attribution-ShareAlike 4.0 International
  */
@@ -3223,109 +3218,114 @@ var waitForElement = function waitForElement(selector) {
     });
   });
 };
+var chooseTab = function chooseTab(tab) {
+  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);
+  tabPanels.forEach(function (panel) {
+    return panel.classList.remove("open");
+  });
+  var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+  document.getElementById(tabPanelId).classList.add("open");
+};
+var pushState = 0;
 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) {
-        // 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();
-
-          // 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 += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
-        } else {
-          child.classList.add("tab-hidden");
+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 ul = document.createElement('ul');
-      ul.setAttribute("role", "tablist");
-      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 (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 tabgroup = tabGroup.getAttribute("id");
+        var tablist = "";
+        Array.from(tabGroup.children).forEach(function (child) {
+          // is details? 
+          var dtls = child.nodeName == "DETAILS" ? true : false;
 
-          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();
-          if (e.which == 32 || e.which == 13) {
-            e.currentTarget.dispatchEvent(click);
+          // 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();
+
+            // 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 += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
+          } else {
+            child.classList.add("tab-hidden");
           }
         });
-      });
-    }
-    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)
-  });
-}
+        var ul = document.createElement('ul');
+        ul.setAttribute("role", "tablist");
+        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 (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);
+            window.history.pushState({
+              rand: Math.random(),
+              pushState: pushState,
+              tab: tab.getAttribute("id")
+            }, "", "#".concat(tab.getAttribute("id")));
+            pushState++;
+          });
+          tab.addEventListener("keypress", function (e) {
+            e.preventDefault();
+            if (e.which == 32 || e.which == 13) {
+              e.currentTarget.dispatchEvent(click);
+            }
+          });
+        });
+      }
+      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,6 +3432,7 @@ __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
 
 

public/download.php

@@ -24,7 +24,7 @@
 		return $result;
 	}
 
-	$allowed_types = ["scss", "js"];
+	$allowed_types = ['js','pug','scss'];
 	$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
 
 

public/index.html

@@ -76,8 +76,8 @@
           <h1 class="status-complete"><span>Header
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints" style="height: 100vh">
-          <h1 class="status-complete"><span>Breakpoints
+        <article id="layouts-breakpoint" data-name="breakpoint" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoint" style="height: 100vh">
+          <h1 class="status-complete"><span>Breakpoint
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
         <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh">

public/patterns/core/breakpoint/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
@@ -14,8 +21,8 @@
     <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. </p>
     <tabset id="breakpoints">
       <div tab="scss">
-        <pre class="language-sass">@import "[path-to]/breakpoints";
-@include break([breakpoint]) {
+        <pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
+@include breapoint.break([breakpoint]) {
 	// css here
 }</pre>
         <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
@@ -24,12 +31,13 @@
 // 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;	
 		content: "bigger than extra large";
 		display: grid;
+		font-family: sans-serif;
 		font-size: 25px;
 		grid-template-columns: auto;
 		padding: 25px;

public/patterns/core/colours/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>

public/patterns/core/header/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
@@ -44,7 +51,7 @@ header
 </pre>
       <pre class="language-css" tab="css">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}</pre>
       <div class="language-sass" tab="scss">
-        <pre class="language-sass">@import "scss/core/header/header;
+        <pre class="language-sass">@use "scss/core/header/header;
 </pre>
         <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 

public/patterns/core/status/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <div class="tab-group" id="status-report">
@@ -52,7 +59,7 @@
                 <td><span class="status-complete">Complete</span></td>
               </tr>
               <tr>
-                <td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td>
+                <td><a href="./?p=layouts/breakpoint"> Breakpoint</a></td>
                 <td><span class="status-complete">Complete</span></td>
               </tr>
               <tr>
@@ -83,7 +90,7 @@
               <td colspan="2"><span class="status-complete">Complete (10)</span></td>
             </tr>
             <tr> 
-              <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
+              <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
               <td>Layouts</td>
             </tr>
             <tr> 
@@ -136,7 +143,7 @@
         <table role="presentation">
           <tbody> 
             <tr> 
-              <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
+              <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
               <td><span><span class="status-complete">Complete</span></span></td>
               <td>Layouts</td>
             </tr>

public/patterns/core/sticky-note/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
@@ -22,7 +29,7 @@
       <pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");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(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 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}</pre>
       <div tab="scss"> 
         <pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] );
-@import "scss/core/switch/_sticky-note";
+@use "scss/core/switch/_sticky-note";
 @include sticky-note;
 </pre>
         <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
@@ -279,38 +286,40 @@ 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);
+			});
+		}
 	}
 }</pre>
       </div>

public/patterns/core/switch/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
@@ -20,7 +27,7 @@
       <pre class="language-pug" tab="pug">span#example-id(role="switch")</pre>
       <pre class="language-css" tab="css">[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%)}</pre>
       <div tab="scss">
-        <pre class="language-sass">@import "scss/core/switch/_switch"; 
+        <pre class="language-sass">@use "scss/core/switch/_switch"; 
 @include switch;
 </pre>
         <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 

public/patterns/core/tabs/index.html

@@ -44,7 +44,7 @@
 		</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";
+        <pre class="language-sass">@use "scss/core/tabs/_tabs";
 @include tabs{ 
 	// optional content block
 };
@@ -184,120 +184,116 @@ const waitForElement = (selector) => {
     });
 }
 
+const chooseTab = (tab) => {
+	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)
+	tabPanels.forEach(panel => panel.classList.remove("open"));
+
+	const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+	document.getElementById(tabPanelId).classList.add("open");
+}
+
+let pushState = 0;
 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 => {
-
-				// 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();
-					
-
-					// 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}`);
-					child.parentNode.replaceChild(tabPanel, child);
-					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");
+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 ul = document.createElement('ul');
-			ul.setAttribute("role", "tablist");
-			ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
-			tabGroup.insertBefore(ul, tabGroup.firstChild);
+				const tabgroup = tabGroup.getAttribute("id");
+				let tablist = "";
 
-			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-				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");
+				Array.from(tabGroup.children).forEach(child => {
 
+					// is details? 
+					let dtls = child.nodeName == "DETAILS" ? true : false;
 
-					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);
+					// 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 tabPanels = Array.from(tab.parentNode.parentNode.children)
-										   .filter(child => child.getAttribute("role") === "tabpanel");
-					tabPanels.forEach(panel => panel.classList.remove("open"));
+						// 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));
+						}
 
-					const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
-					document.getElementById(tabPanelId).classList.add("open");
-					//}
+						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 += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					} else {
+						child.classList.add("tab-hidden");
+					}
 				});
 
+				const ul = document.createElement('ul');
+				ul.setAttribute("role", "tablist");
+				ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
+				tabGroup.insertBefore(ul, tabGroup.firstChild);
 
-				tab.addEventListener("keypress", (e) => {
-					e.preventDefault();
-					if( e.which == 32 || e.which == 13 ) {
-						e.currentTarget.dispatchEvent(click);
-					}
-				})
-			});
-		}
+				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++;
+						}
 
-		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
-			waitForElement(document.location.hash).then((el) => {
-				el.scrollIntoView();
-				el.focus();
-				el.dispatchEvent(click);
-			});
-		}
-	});
+						chooseTab(evt.currentTarget);
+						window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
+						pushState++;
+					});
 
-	addEventListener("hashchange", (evt) => {
-		document.querySelector(window.location.hash).dispatchEvent(click);
+					tab.addEventListener("keypress", (e) => {
+						e.preventDefault();
+						if( e.which == 32 || e.which == 13 ) {
+							e.currentTarget.dispatchEvent(click);
+						}
+					})
+				});
+			}
 
-		// window.location.hash
-		// console.log(window.location.hash)
-	 })
+			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);
+			}
+		});
 
-}</pre>
+	}
+}
+
+</pre>
       </div>
     </tabset>
   </body>

public/patterns/core/tooltip/index.html

@@ -2,6 +2,13 @@
 <html> 
   <head>
     <title>Pattern</title>
+    <script>
+      let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
+      let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
+      p = p.replace(/\/$|\/index\.html/i, "").substring(9);
+      window.location = u + "?p=" + p;
+      
+    </script>
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
@@ -182,11 +189,12 @@
 	}
 }</pre>
       <div tab="scss">
-        <pre class="language-sass">@import "scss/core/tooltip/_tooltip";
+        <pre class="language-sass">@use "scss/core/tooltip/_tooltip";
 @include tooltip;</pre>
         <pre class="language-sass">//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
 
+$font-body: sans-serif !default;
 $tooltip-border-radius: .5rem !default;
 $tooltip-dark-allow: true !default;
 $tooltip-dark-background: #1f2127 !default;
@@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
 		border-radius: $tooltip-border-radius;
 		color: $tooltip-light-foreground;
 		filter: $tooltip-light-drop-shadow;
+		$font-family: $font-body;
 		font-size: 1rem;
 		font-weight: 400;
 		inline-size: max-content;

src/pg/_config.pug

@@ -2,6 +2,7 @@
 - var lang = "en-uk"
 - var colorpfx =  "colour"
 - var headings = ["What is it", "When to use it", "How to use it"]
+- var downloadExtensions = ["js", "pug", "scss"]
 - var generateColourToken = ["colours"]
 
 - 
@@ -49,7 +50,7 @@
 					core: true,
 				}, 
 				{
-					name: "breakpoints",
+					name: "breakpoint",
 					status: "complete",
 					core: true,
 				},

src/pg/core/download.php.pug

@@ -1,3 +1,13 @@
+include ../_config.pug
+
+if typeof downloadExtensions == "undefined"
+	- var extensions = `["js", "scss", "hello"]`
+else 
+	- var extensions = []
+	each ext in downloadExtensions 
+		- extensions.push("'" + ext + "'")
+	- extensions = "[" + extensions + "]"
+
 -
 	var php = `<?php 
 		function recursor($dir, $type) {
@@ -25,7 +35,7 @@
 			return $result;
 		}
 
-		$allowed_types = ["scss", "js"];
+		$allowed_types = {{extensions}};
 		$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
 
 
@@ -50,5 +60,7 @@
 
 		header('Content-type: application/zip');
 		header(sprintf('Content-Disposition: attachment; filename="%s.zip"', $type));
-		echo(file_get_contents($t)); ?>`
+		echo(file_get_contents($t)); ?>`.replace("{{extensions}}", extensions)
 | !{php}
+
+

src/pg/patterns/core/breakpoint/index.pug

@@ -21,10 +21,10 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/breakpoints/breakpoints";
-				@include break([breakpoint]) {
+				@use "scss/core/breakpoint/breakpoint";
+				@include breapoint.break([breakpoint]) {
 					// css here
 				}
 			+h(4)
 			pre.language-sass
-				include _breakpoints.scss
+				include _breakpoint.scss

src/pg/patterns/core/header/index.pug

@@ -32,7 +32,7 @@ block content
 		div.language-sass(tab="scss")
 			
 			pre.language-sass.
-				@import "scss/core/header/header;
+				@use "scss/core/header/header;
 
 			pre.language-sass
 				include _header.scss

src/pg/patterns/core/sticky-note/index.pug

@@ -26,7 +26,7 @@ block content
 			+h(3)
 			pre.language-sass.
 				$sticky-colors: ( [sass map with your own defined colours] );
-				@import "scss/core/switch/_sticky-note";
+				@use "scss/core/switch/_sticky-note";
 				@include sticky-note;
 
 			+h(4)

src/pg/patterns/core/switch/index.pug

@@ -30,7 +30,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/switch/_switch"; 
+				@use "scss/core/switch/_switch"; 
 				@include switch;
 				
 			+h(4)

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

@@ -30,117 +30,112 @@ const waitForElement = (selector) => {
     });
 }
 
+const chooseTab = (tab) => {
+	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)
+	tabPanels.forEach(panel => panel.classList.remove("open"));
+
+	const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+	document.getElementById(tabPanelId).classList.add("open");
+}
+
+let pushState = 0;
 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 => {
-
-				// 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();
-					
-
-					// 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}`);
-					child.parentNode.replaceChild(tabPanel, child);
-					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");
+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 ul = document.createElement('ul');
-			ul.setAttribute("role", "tablist");
-			ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
-			tabGroup.insertBefore(ul, tabGroup.firstChild);
+				const tabgroup = tabGroup.getAttribute("id");
+				let tablist = "";
 
-			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-				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");
+				Array.from(tabGroup.children).forEach(child => {
 
+					// is details? 
+					let dtls = child.nodeName == "DETAILS" ? true : false;
 
-					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);
+					// 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 tabPanels = Array.from(tab.parentNode.parentNode.children)
-										   .filter(child => child.getAttribute("role") === "tabpanel");
-					tabPanels.forEach(panel => panel.classList.remove("open"));
+						// 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));
+						}
 
-					const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
-					document.getElementById(tabPanelId).classList.add("open");
-					//}
+						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 += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					} else {
+						child.classList.add("tab-hidden");
+					}
 				});
 
+				const ul = document.createElement('ul');
+				ul.setAttribute("role", "tablist");
+				ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
+				tabGroup.insertBefore(ul, tabGroup.firstChild);
 
-				tab.addEventListener("keypress", (e) => {
-					e.preventDefault();
-					if( e.which == 32 || e.which == 13 ) {
-						e.currentTarget.dispatchEvent(click);
-					}
-				})
-			});
-		}
+				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++;
+						}
 
-		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
-			waitForElement(document.location.hash).then((el) => {
-				el.scrollIntoView();
-				el.focus();
-				el.dispatchEvent(click);
-			});
-		}
-	});
+						chooseTab(evt.currentTarget);
+						window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
+						pushState++;
+					});
 
-	addEventListener("hashchange", (evt) => {
-		document.querySelector(window.location.hash).dispatchEvent(click);
+					tab.addEventListener("keypress", (e) => {
+						e.preventDefault();
+						if( e.which == 32 || e.which == 13 ) {
+							e.currentTarget.dispatchEvent(click);
+						}
+					})
+				});
+			}
 
-		// window.location.hash
-		// console.log(window.location.hash)
-	 })
+			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);
+			}
+		});
+
+	}
+}
 
-}

src/pg/patterns/core/tabs/index.pug

@@ -42,7 +42,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/tabs/_tabs";
+				@use "scss/core/tabs/_tabs";
 				@include tabs{ 
 					// optional content block
 				};

src/pg/patterns/core/tooltip/index.pug

@@ -43,7 +43,7 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/tooltip/_tooltip";
+				@use "scss/core/tooltip/_tooltip";
 				@include tooltip;
 			+h(4)
 			pre.language-sass