Fixed bugs and updated structure

Readme.md

@@ -1,6 +1,25 @@
 # DS2 Core
 
+## "Installation"
 
+File                          | Processes to 
+------------------------------|------------------------------
+src/js/scaffolding.js         | public/assets/
+src/scss/scaffolding.scss     | public/assets/
+src/pg/core/core.scss.pug     | src/scss/
+src/pg/core/download.php.pug  | public
+
+All other pug files should compile to from src/pg/ to a relative path of public/*
+
+
+## Running the core
+
+functions
+
+beforeArticleLoad - called before any patterns are started to load 
+success - called when loading a pattern is successful if the result is an HTTP 200
+afterArticleLoad - called after any patterns are started to load 
+done - called when the ajax for any pattern is done, whether successful or not. This is a useful place to load any javascript initializations that pattern. 
 
 
 ## About the content variable
@@ -10,6 +29,7 @@ The content variable in \_config.pug defines your array of patterns. It is made
 - status - this should be one of the statuses from your status array
 - display - (optional) if present this will be displayed, as is, instead of the name
 - template - (optional) [ pug (default) | md ] the file type of a pattern's index file
+- core - (optional ) [ true | false ] if true, it will pull from the core folder
 - files - (optional) an array of patterns under the parent. 
 
 By changing and resaving the \_config.pug file, (our change is often adding or removing a random space) all of the pug patterns will recompile. Note that md templates will not recompile automatically when config is saved and updated as markdown files don't have an include. 

prepros.config

@@ -1191,6 +1191,7 @@
               }
             },
             "minify-js": {
+              "enable": false,
               "options": {
                 "toplevel": true
               }
@@ -1494,16 +1495,6 @@
         "config": {
           "customOutput": "src/scss/_status.scss"
         }
-      },
-      {
-        "file": "src/scss/scaffolding.scss",
-        "config": {
-          "tasks": {
-            "minify-css": {
-              "enable": false
-            }
-          }
-        }
       }
     ]
   }

public/download.php

@@ -0,0 +1,52 @@
+<?php 
+	function recursor($dir, $type) {
+		$result = array();
+
+		// create the pattern to get the type
+		$x = "/_*.";
+		for ($i = 0; $i < strlen($type); $i++){
+			$x .= "[" . strtolower($type[$i]) . strtoupper($type[$i]) ."]";
+		}
+
+		// get the directories
+		foreach(glob($dir . "/*") as $d) {
+			if ( is_dir( $d ) ) {
+
+				// find the files in each directory
+				foreach (glob($d . $x) as $f) {
+					$result[] = $f;
+				}
+				// $more = recursor($d, $type);
+				// $result = array_merge($result, $more);
+				$result = array_merge($result, recursor($d, $type));
+			}
+		}
+		return $result;
+	}
+
+	$allowed_types = ["scss", "js"];
+	$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
+
+
+	if (!isset($_SERVER['QUERY_STRING']) || !in_array($_SERVER['QUERY_STRING'], $allowed_types)) {
+		echo "File extension type is not defined. Ensure that you have added ?[file extension] to the URL. If you have defined a file extension and it is not allowed, you'll need to contact the an administrator to get the requested files.";
+		die();
+	}
+
+	$type = $_SERVER['QUERY_STRING'];
+
+	$file_list = recursor($patterns, $type);
+
+	$f = tmpfile();
+	$t = stream_get_meta_data($f)['uri'];
+	$z = new ZipArchive();
+
+	$zf = $z->open($t, ZipArchive::CREATE);
+	foreach($file_list as $f) {
+		$z->addFile($f, preg_replace('/^.*?patterns\//', '', $f));
+	}
+	$z->close();
+
+	header('Content-type: application/zip');
+	header(sprintf('Content-Disposition: attachment; filename="%s.zip"', $type));
+	echo(file_get_contents($t)); ?>

public/index.html

@@ -8,9 +8,14 @@
     <link rel="icon" href="https://assets.gamv.ca/favicon.svg" media="(prefers-color-scheme:no-preference),(prefers-color-scheme:light)">
     <link rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)">
     <link href="assets/scaffolding.css" rel="stylesheet">
-    <script src="assets/jquery-min.js"></script>
   </head>
-  <body><a class="skip" href="#main">Skip to main content</a>
+  <body>
+    <!--		
+    DS2 core (c) 2024 Alexander McIlwraith 
+    Core licensed under CC BY-SA 4.0 
+    
+    
+    --><a class="skip" href="#main">Skip to main content</a>
     <div class="container">
       <header>
         <!-- The headline banner area -->
@@ -19,15 +24,14 @@
         </svg>
         <div>
           <div class="header-title">
-            <h1> <a>DS2 core</a></h1>
+            <h1> <a href="./">DS2 core</a></h1>
           </div>
           <!-- Other sections can go here, such as search and directory-->
         </div>
       </header>
       <nav>
         <ul>
-          <li> <a href="./">Home</a></li>
+          <li><a href="./?p=this-pattern-doesnt-exist">This pattern doesn't exist</a></li>
-          <li><a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></li>
           <li><a href="./?p=colours">Colours</a></li>
           <li><a href="./?p=components">Components</a></li>
           <li><a href="./?p=layouts">Layouts</a></li>
@@ -39,47 +43,47 @@
       </p>
       <main id="main">
         <h1>DS2 core</h1>
-        <article class="status-deprecated" id="this-pattern-doesn't-exist" data-path="this-pattern-doesn't-exist" data-template="pug" data-pattern="this-pattern-doesn't-exist" data-status="deprecated" data-core="false">
+        <article id="this-pattern-doesnt-exist" data-name="this pattern doesn't exist" data-status="deprecated" data-template="pug" data-core="false" data-path="this-pattern-doesnt-exist">
           <h1 class="status-deprecated"><span>This pattern doesn't exist
               <tool-tip role="tooltip" inert="inert" tip-position="right">Deprecated</tool-tip></span></h1>
         </article>
-        <article id="colours" data-path="colours" data-template="pug" data-pattern="colours" data-status="complete" data-core="true">
+        <article id="colours" data-name="colours" data-status="complete" data-template="pug" data-core="true" data-path="colours">
           <h1 class="status-complete"><span>Colours
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components" data-path="components" data-template="none" data-pattern="components" data-status="complete" data-core="false">
+        <article id="components" data-name="components" data-status="complete" data-template="none" data-core="false" data-path="components">
           <h1 class="status-complete"><span>Components
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components-sticky-note" data-path="components/sticky-note" data-template="pug" data-pattern="sticky-note" data-status="in-progress" data-core="true">
+        <article id="components-sticky-note" data-name="sticky-note" data-status="complete" data-template="pug" data-core="true" data-path="components/sticky-note">
-          <h1 class="status-in-progress"><span>Sticky note
+          <h1 class="status-complete"><span>Sticky note
-              <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
+              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components-switch" data-path="components/switch" data-template="pug" data-pattern="switch" data-status="in-progress" data-core="true">
+        <article id="components-switch" data-name="switch" data-status="in-progress" data-template="pug" data-core="true" data-path="components/switch">
           <h1 class="status-in-progress"><span>Switch
               <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
         </article>
-        <article id="components-tooltip" data-path="components/tooltip" data-template="pug" data-pattern="tooltip" data-status="in-progress" data-core="true">
+        <article id="components-tooltip" data-name="tooltip" data-status="in-progress" data-template="pug" data-core="true" data-path="components/tooltip">
           <h1 class="status-in-progress"><span>Tooltip
               <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
         </article>
-        <article id="layouts" data-path="layouts" data-template="none" data-pattern="layouts" data-status="complete" data-core="true">
+        <article id="layouts" data-name="layouts" data-status="complete" data-template="none" data-core="true" data-path="layouts">
           <h1 class="status-complete"><span>Layouts
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-header" data-path="layouts/header" data-template="pug" data-pattern="header" data-status="in-progress" data-core="true">
+        <article id="layouts-header" data-name="header" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/header">
           <h1 class="status-in-progress"><span>Header
               <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
         </article>
-        <article id="layouts-breakpoints" data-path="layouts/breakpoints" data-template="pug" data-pattern="breakpoints" data-status="in-progress" data-core="true">
+        <article id="layouts-breakpoints" data-name="breakpoints" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/breakpoints">
           <h1 class="status-in-progress"><span>Breakpoints
               <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
         </article>
-        <article id="layouts-tabs" data-path="layouts/tabs" data-template="pug" data-pattern="tabs" data-status="complete" data-core="true">
+        <article id="layouts-tabs" data-name="tabs" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/tabs">
-          <h1 class="status-complete"><span>Tabs
+          <h1 class="status-in-progress"><span>Tabs
-              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
+              <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
         </article>
-        <article id="status" data-path="status" data-template="pug" data-pattern="status" data-status="complete" data-core="true">
+        <article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status">
           <h1 class="status-complete"><span>Status
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>

public/patterns/core/colours/index.html

@@ -4,7 +4,14 @@
     <title>Pattern</title>
   </head>
   <body data-prismjs-copy-timeout="1500">
-    <h2>Primary colours</h2>
+    <h2>What is it</h2>
+    <p>Colours are used to represent your site and are an implementation of your brand's visual identity. </p>
+    <h2>When to use it</h2>
+    <p>Colours are used throughout your patterns. </p>
+    <h2>How to use it</h2>
+    <p>Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. </p>
+    <p>Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option&nbsp;&#8997; key) will copy the colour token, and the meta key (Windows key or Mac command&nbsp;&#8984; key) will copy a CSS colour var. </p>
+    <h3>Primary colours</h3>
         <color-samples>
           <color-sample data-color="rgb( 46,  81, 161)" style="background-color: rgb( 46,  81, 161); color: #FFF"> 
             <name data-hex="#2e51a1" data-rgb="rgb( 46,  81, 161)" data-token="--colour-blue"><span>Blue</span></name>

public/patterns/core/header/index.html

@@ -4,6 +4,9 @@
     <title>Pattern</title>
   </head>
   <body data-prismjs-copy-timeout="1500">
+    <h2>What is it</h2>
+    <h2>When to use it</h2>
+    <h2>How to use it</h2>
     <div class="tab-group" id="header">
       <pre class="language-html" data-tab="html">
         <!-- create temp variables and store the design system values-->
@@ -14,7 +17,7 @@
           </svg>
           <div>
             <div class="header-title">
-              <h1> <a href="[site root]">[site name]</a></h1>
+              <h1> <a href="./">[site name]</a></h1>
             </div>
             <!-- Other sections can go here, such as search and directory-->
           </div>

public/patterns/core/status/index.html

@@ -12,7 +12,7 @@
               <td colspan="2">This pattern doesn't exist (1)</td>
             </tr>
             <tr>
-              <td><a href="./?p=this-pattern-doesn't-exist"> This pattern doesn't exist</a></td>
+              <td><a href="./?p=this pattern doesn't exist"> This pattern doesn't exist</a></td>
               <td><span class="status-deprecated">Deprecated</span></td>
             </tr>
             <tr>
@@ -30,7 +30,7 @@
               <td><span class="status-complete">Complete</span></td>
               <tr>
                 <td><a href="./?p=components/sticky-note"> Sticky note</a></td>
-                <td><span class="status-in-progress">In progress</span></td>
+                <td><span class="status-complete">Complete</span></td>
               </tr>
               <tr>
                 <td><a href="./?p=components/switch"> Switch</a></td>
@@ -57,7 +57,7 @@
               </tr>
               <tr>
                 <td><a href="./?p=layouts/tabs"> Tabs</a></td>
-                <td><span class="status-complete">Complete</span></td>
+                <td><span class="status-in-progress">In progress</span></td>
               </tr>
             </tr>
             <tr>
@@ -88,12 +88,12 @@
               <td>Layouts</td>
             </tr>
             <tr> 
-              <td> <a href="./?p=components/sticky-note">Sticky note</a></td>
+              <td> <a href="./?p=components/switch">Switch</a></td>
               <td>Components</td>
             </tr>
             <tr> 
-              <td> <a href="./?p=components/switch">Switch</a></td>
+              <td> <a href="./?p=layouts/tabs">Tabs</a></td>
-              <td>Components</td>
+              <td>Layouts</td>
             </tr>
             <tr> 
               <td> <a href="./?p=components/tooltip">Tooltip</a></td>
@@ -119,14 +119,14 @@
               <td></td>
             </tr>
             <tr> 
-              <td> <a href="./?p=layouts/tabs">Tabs</a></td>
+              <td> <a href="./?p=components/sticky-note">Sticky note</a></td>
-              <td>Layouts</td>
+              <td>Components</td>
             </tr>
             <tr> 
               <td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
             </tr>
             <tr> 
-              <td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
+              <td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
               <td></td>
             </tr>
           </tbody>
@@ -167,7 +167,7 @@
             </tr>
             <tr> 
               <td> <a href="./?p=components/sticky-note">Sticky note</a></td>
-              <td><span><span class="status-in-progress">In Progress</span></span></td>
+              <td><span><span class="status-complete">Complete</span></span></td>
               <td>Components</td>
             </tr>
             <tr> 
@@ -177,11 +177,11 @@
             </tr>
             <tr> 
               <td> <a href="./?p=layouts/tabs">Tabs</a></td>
-              <td><span><span class="status-complete">Complete</span></span></td>
+              <td><span><span class="status-in-progress">In Progress</span></span></td>
               <td>Layouts</td>
             </tr>
             <tr> 
-              <td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
+              <td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
               <td><span><span class="status-deprecated">Deprecated</span></span></td>
               <td></td>
             </tr>

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

@@ -5,15 +5,20 @@
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
+    <p>Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes. </p>
     <h2>When to use it</h2>
+    <p>Use a sticky when you want to make a note without adding it to the content. </p>
     <h2>How to use it</h2>
     <p>Uses absolute positioning. 
-      <sticky-note class="blue" float="right">This <strong>is</strong> a test</sticky-note>You might need to add relative positioning to it's container. 
+      <sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note>
     </p>
     <p>If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	</p>
-    <sticky-note>another one</sticky-note>
+    <sticky-note>You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).</sticky-note>
-    <p>If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". </p>
+    <tabset id="sticky-note">
-    <div class="tab-group" id="sticky-note">
+      <pre class="language-html" tab="html">
+        <sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
+      <pre class="language-pug" tab="pug">sticky-note(float="right").blue This <strong>is</strong> a sample sticky. 
+	| You can drag it out of the way if you need to see the content under it.</pre>
       <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;
@@ -423,6 +428,6 @@ export function init(p = document){
 		});
 	}
 }</pre>
-    </div>
+    </tabset>
   </body>
 </html>

public/patterns/core/switch/index.html

@@ -5,6 +5,7 @@
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
+    <p>Switches are used to toggle application state between two mutually exlusive values. </p>
     <h2>When to use it</h2>
     <h2>How to use it</h2>
     <h2>Example</h2>
@@ -91,19 +92,18 @@ function flip(e) {
 	}
 };
 
-
+module.exports = {
-function init(callback){
+	init: (p = document) => {
-	let sw = document.querySelectorAll("[role='switch']");
+		p.querySelectorAll("[role='switch']").forEach((sw) => {
-	for (let i=0; i < sw.length; i++) {
+			sw.innerHTML = "<span></span>";
-		sw[i].innerHTML = "<span></span>";
+			sw.setAttribute("aria-checked", "false");
-		sw[i].setAttribute("aria-checked", "false");
+			sw.setAttribute("tabindex", "0");
-		sw[i].setAttribute("tabindex", "0");
+			sw.addEventListener("click", flip, false);
-		sw[i].addEventListener("click", flip, false);
+			sw.addEventListener("keypress", flip, false);
-		sw[i].addEventListener("keypress", flip, false);
+		})
 	}
 }
-
+</pre>
-export {init};</pre>
     </div>
   </body>
 </html>

public/patterns/core/tooltip/index.html

@@ -0,0 +1,361 @@
+
+<html> 
+  <head>
+    <title>Pattern</title>
+  </head>
+  <body data-prismjs-copy-timeout="1500">
+    <h2>What is it</h2>
+    <h2>When to use it</h2>
+    <h2>How to use it</h2>
+    <p>Either form works. Place this inside another element for the tooltip to be "linked to that element."</p>
+    <p>Tool tip positions are: </p>
+    <ul> 
+      <li>top / block-start</li>
+      <li>right / inline-end</li>
+      <li>bottom / block-end</li>
+      <li>left / inline-start</li>
+    </ul>
+    <div class="tab-group" id="tooltip">
+      <pre class="language-html" data-tab="html"><a href="#">Link with a tool tip
+          <div role="tooltip" inert="inert" tip-position="bottom">Tool tip content</div></a><a href="#">Link with a tool tip
+          <tool-tip role="tooltip" inert="inert" tip-position="bottom">Tool tip content</tool-tip></a></pre>
+      <pre class="language-pug" data-tab="pug">a(href="#") Link with a tool tip
+	div(role="tooltip" inert tip-position="bottom") Tool tip content
+
+a(href="#") Link with a tool tip
+	tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content</pre>
+      <pre class="language-css" data-tab="css">/* Position Options
+	- top / block-start
+	- right / inline-end
+	- bottom / block-end
+	- left / inline-start
+*/
+[role=tooltip] {
+	background: #fff;
+	border-radius: 0.5rem;
+	color: #000;
+	-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
+	        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
+	font-size: 1rem;
+	font-weight: 400;
+	inline-size: -webkit-max-content;
+	inline-size: -moz-max-content;
+	inline-size: max-content;
+	line-height: initial;
+	margin: 0;
+	max-inline-size: 25rem;
+	opacity: 0;
+	padding: 0.75rem 1.5rem;
+	pointer-events: none;
+	position: absolute;
+	text-align: start;
+	-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	    -ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	        transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+	-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+	transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
+	transition: opacity 0.2s ease, transform 0.2s ease;
+	transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	will-change: filter;
+	z-index: 10;
+}
+[role=tooltip]::before {
+	clip-path: inset(50%);
+	clip: rect(1px, 1px, 1px, 1px);
+	content: "; Has tooltip: ";
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+[role=tooltip]::after {
+	background: #fff;
+	content: "";
+	inset: 0;
+	-webkit-mask: var(--tooltip-pointer);
+	        mask: var(--tooltip-pointer);
+	position: absolute;
+	z-index: -1;
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position]),
+[tip-position=bottom],
+[tip-position=block-end]) {
+	text-align: center;
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position])) {
+	inset-inline-start: 50%;
+	inset-block-end: calc(100% + 0.75rem + 1rem);
+	--tooltip-x: calc(50% * -1);
+}
+[role=tooltip]:is([tip-position=top],
+[tip-position=block-start],
+:not([tip-position]))::after {
+	--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
+	inset-block-end: -1rem;
+	-webkit-border-after: 1rem solid transparent;
+	        border-block-end: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=right],
+[tip-position=inline-end]) {
+	inset-inline-start: calc(100% + 1.5rem + 1rem);
+	inset-block-end: 50%;
+	--tooltip-y: 50%;
+}
+[role=tooltip]:is([tip-position=right],
+[tip-position=inline-end])::after {
+	--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
+	inset-inline-start: -1rem;
+	-webkit-border-start: 1rem solid transparent;
+	        border-inline-start: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=bottom],
+[tip-position=block-end]) {
+	inset-inline-start: 50%;
+	inset-block-start: calc(100% + 0.75rem + 1rem);
+	--tooltip-x: calc(50% * -1);
+}
+[role=tooltip]:is([tip-position=bottom],
+[tip-position=block-end])::after {
+	--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
+	inset-block-start: -1rem;
+	-webkit-border-before: 1rem solid transparent;
+	        border-block-start: 1rem solid transparent;
+}
+[role=tooltip]:is([tip-position=left],
+[tip-position=inline-start]) {
+	inset-inline-end: calc(100% + 1.5rem + 1rem);
+	inset-block-end: 50%;
+	--tooltip-y: 50%;
+}
+[role=tooltip]:is([tip-position=left],
+[tip-position=inline-start])::after {
+	--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
+	inset-inline-end: -1rem;
+	-webkit-border-end: 1rem solid transparent;
+	border-inline-end: 1rem solid transparent;
+}
+@media (prefers-color-scheme: dark) {
+	[role=tooltip] {
+		background: #1f2127;
+		color: #fff;
+		-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
+		        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
+	}
+	[role=tooltip]::after {
+		background: #1f2127;
+	}
+}
+
+:has(> [role=tooltip]) {
+	position: relative;
+}
+:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
+	opacity: 1;
+	-webkit-transition-delay: 300ms;
+	        transition-delay: 300ms;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-y: 3px;
+	}
+	:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-x: calc(-1 * -3px * -1);
+	}
+	:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-y: -3px;
+	}
+	:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
+		--tooltip-x: calc(-1 * 3px * -1);
+	}
+}</pre>
+      <pre class="language-css" data-tab="scss">//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Licensed under CC BY-SA 4.0 
+
+$tooltip-border-radius: .5rem !default;
+$tooltip-dark-allow: true !default;
+$tooltip-dark-background: #1f2127 !default;
+$tooltip-dark-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 50%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 50%)) !default;
+$tooltip-dark-foreground: #fff !default;
+$tooltip-light-background: #fff !default;
+$tooltip-light-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 15%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 15%)) !default;
+$tooltip-light-foreground: #000 !default;
+$tooltip-padding-sides: 1.5rem !default;
+$tooltip-padding-top-bottom: 0.75rem !default;
+$tooltip-pointer-size: 1rem !default;
+$tooltip-pointer-bottom: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom / 100% 50% no-repeat !default;
+$tooltip-pointer-left: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left / 50% 100% no-repeat !default;
+$tooltip-pointer-right: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right / 50% 100% no-repeat !default;
+$tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top / 100% 50% no-repeat !default;
+/* Position Options
+	- top / block-start
+	- right / inline-end
+	- bottom / block-end
+	- left / inline-start
+*/
+
+@mixin tooltip {
+	[role="tooltip"] {
+		background: $tooltip-light-background;
+		border-radius: $tooltip-border-radius;
+		color: $tooltip-light-foreground;
+		filter: $tooltip-light-drop-shadow;
+		font-size: 1rem;
+		font-weight: 400;
+		inline-size: max-content;
+		line-height: initial;
+		margin: 0;
+		max-inline-size: 25rem;
+		opacity: 0;
+		padding: $tooltip-padding-top-bottom $tooltip-padding-sides;
+		pointer-events: none;
+		position: absolute;
+		text-align: start;
+		transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
+		transition: opacity 0.2s ease, transform 0.2s ease;
+		user-select: none;
+		will-change: filter;
+		z-index: 10;
+	
+		&::before {
+			clip-path: inset(50%);
+			clip: rect(1px, 1px, 1px, 1px);
+			content: "; Has tooltip: ";
+			height: 1px;
+			margin: -1px;
+			overflow: hidden;
+			padding: 0;
+			position: absolute;
+			width: 1px;
+		}
+
+		&::after {
+			background: $tooltip-light-background;
+			content: "";
+			inset: 0;
+			mask: var(--tooltip-pointer);
+			position: absolute;
+			z-index: -1;
+		}
+
+		&:is(	[tip-position="top"], 
+				[tip-position="block-start"], 
+				:not([tip-position]), 
+				[tip-position="bottom"], 
+				[tip-position="block-end"]
+			) {
+				text-align: center;
+		}
+
+		&:is(	[tip-position="top"], 
+				[tip-position="block-start"], 
+				:not([tip-position])
+			) {
+				inset-inline-start: 50%;
+				inset-block-end: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
+				--tooltip-x: calc(50% * -1);
+
+				&::after {
+					--tooltip-pointer: #{$tooltip-pointer-bottom};
+					inset-block-end: calc($tooltip-pointer-size * -1);
+					border-block-end: $tooltip-pointer-size solid transparent;
+				}
+		}
+
+		&:is(	[tip-position="right"], 
+				[tip-position="inline-end"]
+			) {
+				inset-inline-start: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
+				inset-block-end: 50%;
+				--tooltip-y: 50%;
+
+				&::after {
+					--tooltip-pointer: #{$tooltip-pointer-left};
+					inset-inline-start: calc($tooltip-pointer-size * -1);
+					border-inline-start: $tooltip-pointer-size solid transparent;
+				}
+		}
+
+
+		&:is(	[tip-position="bottom"], 
+				[tip-position="block-end"]
+			) {
+				inset-inline-start: 50%;
+				inset-block-start: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
+				--tooltip-x: calc(50% * -1);
+
+				&::after {
+					--tooltip-pointer: #{$tooltip-pointer-top};
+					inset-block-start: calc($tooltip-pointer-size * -1);
+					border-block-start: $tooltip-pointer-size solid transparent;
+				}
+		}
+
+
+		&:is(	[tip-position="left"], 
+				[tip-position="inline-start"]
+			) {
+				inset-inline-end: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
+				inset-block-end: 50%;
+				--tooltip-y: 50%;
+
+				&::after {
+					--tooltip-pointer: #{$tooltip-pointer-right};
+					inset-inline-end: calc($tooltip-pointer-size * -1);
+					-webkit-border-end: $tooltip-pointer-size solid transparent;
+					border-inline-end: $tooltip-pointer-size solid transparent;
+				}
+		}
+		@if ($tooltip-dark-allow == true ) {	
+			@media (prefers-color-scheme: dark) {
+				background: $tooltip-dark-background;
+				color: $tooltip-dark-foreground;
+				filter: $tooltip-dark-drop-shadow;
+				&::after {
+					background: $tooltip-dark-background;
+				}
+			}
+		}
+	}
+
+	:has(> [role="tooltip"]) {
+		position: relative;
+		&:is(:hover, :focus-visible, :active) > [role="tooltip"] {
+			opacity: 1;
+			transition-delay: 300ms;
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+
+		:has(> [role="tooltip"]:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) [role="tooltip"] {
+			--tooltip-y: 3px;
+		}
+
+		:has(> [role="tooltip"]:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) [role="tooltip"] {
+			--tooltip-x: calc(-1 * -3px * -1);
+		}
+
+		:has(> [role="tooltip"]:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) [role="tooltip"] {
+			--tooltip-y: -3px;
+		}
+
+		:has(> [role="tooltip"]:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) [role="tooltip"] {
+			--tooltip-x: calc(-1 * 3px * -1);
+		}
+
+	}
+}</pre>
+    </div>
+  </body>
+</html>

src/js/core/_core.js

@@ -1,16 +1,25 @@
+const getDate = function(){
+	var d = new Date();
+	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
+}
 String.prototype.toTitleCase = function() {
 	return this.replace(/\w\S*/g, function(txt) {
-		return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-	});
+   });
 }
-
 String.prototype.toSentenceCase = function() {
 	return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
 }
-
 String.prototype.toContent = function() {
 	return this.replace(/-/g, " ");
 }
+String.prototype.toPath = function() {
+	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+}
+
+const font = {
+	size: 0
+}
 
 const copyColourFallback = (copyInfo, attr) => {
 	console.log("fallback")
@@ -50,13 +59,16 @@ const copyColourFallback = (copyInfo, attr) => {
 const showMessage = (m, s) => {
 	s = s == undefined ? true : s;
 	console.log("Copy success (navigator.clipboard)");
-	$("body").prepend("<div id='copystatus' style='display: none;'><div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div></div>");
+	let status = document.createElement("div");
-	$("#copystatus > div").css("top", (window.scrollY + 100)+ "px");
+	status.setAttribute("id", "copystatus");
-	$("#copystatus").fadeIn(1000, function(){
+	// status.style.display = "none";
-		$(this).fadeOut( 1000, function() {
+	status.innerHTML = "<div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div>";
-			$(this).remove();
+	document.querySelector("body").prepend(status)
-		});
+
-	})
+	status.querySelector("div").style.top = (window.scrollY + 100)+ "px";
+	setTimeout( () => {
+		status.remove();
+	}, 1000); 
 }
 
 const oneClickSelect = (e, t = e.currentTarget) => {
@@ -126,9 +138,7 @@ module.exports = {
 		},
 	},
 	colour: {
-		// showMessage: (m, s) => {
+
-		// 	showMessage(m, s);
-		// },
 		copy:  (w, t) => {
 			let c = t.parentNode.getAttribute("data-" + (w=="var" ? "token" : w));
 			c = w == "var" ? `var(${c})` : c;
@@ -143,36 +153,44 @@ module.exports = {
 				copyColourFallback(c, w);
 			}
 		},
+
 		positionTooltip: () => {
-			$("color-pill > span").each(function(){
+			document.querySelectorAll("color-pill > span").forEach((ps) =>  {
-				if ((Number($("p").css('font-size').replace("px","")) * 10)  > $(this).offset().left) {
+				ps.querySelectorAll("div.tooltip-tc").forEach((tip) => {
-					$(this).children("div.tooltip-tc").attr("tip-position", "right");
+					if ( (font.size * 10) > ps.offsetLeft ) {
-				} else {
+						tip.setAttribute("tip-position", "right");
-					$(this).children("div.tooltip-tc").attr("tip-position", "bottom");
+					} else {
-				}
+						tip.setAttribute("tip-position", "bottom");
+					}
+				});
 			})
 		}
 	},
 	init: (args = {}) => {
 		const url = getURLVars();
-
+		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
 		if (url.p !== undefined) {
 			document.querySelectorAll("main article:not([data-path^='" + url.p + "'])").forEach((a) => {
 				a.remove();
 			});
 
 			if (url.p == -1) {
-				document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`;
+				document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${ document.querySelector("title").getAttribute("data-site") }`;
 			} else {
-				document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`
+				document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${ document.querySelector("title").getAttribute("data-site") }`
 			}
 		}
 
-		if (typeof args.page == "function") args.page(a);
+		if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad(a);
 
 		document.querySelectorAll("article").forEach((a) => {
 			if ( a.getAttribute("data-template") != "none" ) {
-				let path = "patterns/" + (a.getAttribute("data-core") == "true" ? "core/" : "") + a.getAttribute("data-path") + "/index.html";
+				let path = a.getAttribute("data-path");
+				path = "patterns/" + 
+				 		(a.getAttribute("data-core") == "true" ? 
+				 		"core/" + path.substring(path.lastIndexOf("/") + 1) : 
+				 		a.getAttribute("data-path")) 
+				 		+ "/index.html";
 				const ASYNC = true;
 				let ajx = new XMLHttpRequest();
 				ajx.onreadystatechange = () => {
@@ -194,6 +212,7 @@ module.exports = {
 								 		})
 								 	break;
 								}
+
 								a.querySelectorAll("code").forEach((c)=> {
 									c.classList.add("line-numbers");
 									c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
@@ -234,17 +253,23 @@ module.exports = {
 							break;
 
 							case 404: 
+
 								if (typeof args.notFound == "function") args.notFound(a, path);
 							break;
 
 							default:
 								console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") });
 						}
+
+						if (typeof args.done == "function") args.done(a);
+
 					}
 				};
 				ajx.open("GET", path, ASYNC);
 				ajx.send();
 			}
 		})
+
+		if (typeof args.afterArticleLoad == "function") args.afterArticleLoad(a);
 	}
 };

src/js/scaffolding.js

@@ -1,16 +1,16 @@
 // core and prism
 import * as core from './core/_core.js';
 import * as Prism from "../../node_modules/prismjs/prism";
+import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
+import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
 import '../../node_modules/prismjs/components/prism-json';
 import '../../node_modules/prismjs/components/prism-pug';
 import '../../node_modules/prismjs/components/prism-sass';
-import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
-import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
 
 // import pattern stuff.
-import * as swtch from "../pg/patterns/core/components/switch/_switch.js";
+import * as stickynote from "../pg/patterns/core/sticky-note/_sticky-note.js";
-import * as stickynote from "../pg/patterns/core/components/sticky-note/_sticky-note.js";
+import * as swtch      from "../pg/patterns/core/switch/_switch.js";
-import * as tabs from "../pg/patterns/core/layouts/tabs/_tabs.js";
+import * as tabs       from "../pg/patterns/core/tabs/_tabs.js";
 
 // init core
 core.init({
@@ -24,30 +24,33 @@ core.init({
 	}
 });
 
-jQuery(document).ready(function($){
-	// show deprecated switch
-	function flipDeprecated() {
-		setTimeout(function(){
-			if ($("#deprecated").attr("aria-checked") == "false") {
-				$(".status-deprecated").closest("article").addClass("status-deprecated");
-				core.cookie.set("show-deprecated", false, 30, "/");
-			} else {
-				$("article.status-deprecated").removeClass("status-deprecated");
-				core.cookie.set("show-deprecated", true, 30, "/");
-			}
-		}, 50);
-	}
 
-	$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
-	setTimeout( function() {
-		if (core.cookie.get("show-deprecated") == "true") {
-			$("#deprecated").attr("aria-checked", "true");
-			flipDeprecated();
-		}
-	}, 200);
-	console.log("hide deprecated", { "type": (typeof core.cookie.get("show-deprecated")), "value": core.cookie.get("show-deprecated") });
-	// /hide deprecated switch
 
-})
+// deprecated switch handler
+const flipDeprecated = (e, s = e.currentTarget) => {
+	core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
+	document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => {
+		a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated")
+	});
+}
 
-	// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
+// create a pure JS mouse click event
+const click = new MouseEvent('click', {
+	view: window,
+	bubbles: false,
+	cancelable: true
+});
+
+// get the switch, initialize it and add the handler
+let deprecated = document.querySelector("#deprecated");
+swtch.init(deprecated.parentNode)
+deprecated.onclick = flipDeprecated;
+deprecated.keypress = flipDeprecated;
+
+// check a cookie to get the switch's state
+if (core.cookie.get("show-deprecated") == "true") {
+	deprecated.dispatchEvent(click);
+}
+
+// just for fun... We'll show deprecated if they match the path
+// document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated");

src/pg/_config.pug

@@ -7,7 +7,7 @@
 - 
 	var content = [ 
 		{
-			name: "this-pattern-doesn't-exist",
+			name: "this pattern doesn't exist",
 			status: "deprecated",
 		},
 		{	
@@ -22,7 +22,7 @@
 			files: [
 				{
 					name: "sticky-note",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 				{
@@ -55,7 +55,7 @@
 				},
 				{
 					name: "tabs",
-					status: "complete",
+					status: "in-progress",
 					core: true,
 				},
 			]

src/pg/core/_master-index.pug

@@ -1,7 +1,8 @@
-include ../_config
+//-		
-block config
+	DS2 core (c) 2024 Alexander McIlwraith 
+	Core licensed under CC BY-SA 4.0 
 
-- var getDate = function(){
+- const getDate = function(){
 -	var d = new Date();
 -	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
 - }
@@ -16,23 +17,27 @@ block config
 - String.prototype.toContent = function() {
 -	return this.replace(/-/g, " ");
 - }
+- String.prototype.toPath = function() {
+-	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+- }
+
+include ../_config
+block config
+
 
 mixin show-content(items, path)
-	- path = (path == "" ? "" : path + "/") + items.name
-	- if (items.status == "deprecated") {
-		- articlestatus = "status-deprecated"
-	- } else {
-		- articlestatus = ""
-	- }
 
-	article(id=path.replace(/\//g, "-")
+	- path = (path == "" ? "" : path +  "/") + items.name.toPath()
-		class=articlestatus 
+
-		data-path=path
+	article(id=path.replace(/\//g, "-").toPath()
-		data-template=(items.template == undefined ? "pug" : items.template) 
+		data-name=items.name
-		data-pattern=items.name
 		data-status=items.status
+		data-display=items.display
+		data-template=(items.template == undefined ? "pug" : items.template) 
 		data-core= (items.core ? "true" : "false")
+		data-path=path
 		)
+
 		h1(class="status-" + items.status )
 			span= items.name.toSentenceCase().toContent()
 				tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
@@ -52,9 +57,13 @@ html(lang= lang )
 
 		block head
 		link( href="assets/scaffolding.css" rel="stylesheet" )
-		script(src="assets/jquery-min.js")
 
 	body
+		//		
+			DS2 core (c) 2024 Alexander McIlwraith 
+			Core licensed under CC BY-SA 4.0 
+
+
 		a.skip(href="#main") Skip to main content
 		div.container
 

src/pg/core/_master-pattern.pug

@@ -1,3 +1,7 @@
+//-		
+	DS2 core (c) 2024 Alexander McIlwraith 
+	Core licensed under CC BY-SA 4.0 
+
 include ../_config
 block config
 
@@ -5,7 +9,7 @@ mixin h(h)
 	if headings[h]
 		h2= headings[h]
 
-- var getDate = function(){
+- const getDate = function(){
 -	var d = new Date();
 -	return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
 - }
@@ -20,6 +24,9 @@ mixin h(h)
 - String.prototype.toContent = function() {
 -	return this.replace(/-/g, " ");
 - }
+- String.prototype.toPath = function() {
+-	return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
+- }
 
 
 html 

src/pg/index.pug

@@ -8,15 +8,13 @@ block head
 	link(rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)")
 
 block header
-	include patterns/core/layouts/header/_header.pug
+	include patterns/core/header/_header.pug
 	
 	nav
 		ul
-			li 
-				a(href="./") Home
 			each first in content
 				li(class= navClass)
-					a(href="./?p=" + first.name )= first.name.toContent().toSentenceCase()
+					a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
 
 	p.deprecated-switch
 		span

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

@@ -1,5 +1,7 @@
-extends ../../../../core/_master-pattern.pug
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 	
 	+h(0)

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

@@ -1,7 +1,20 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
+
 extends ../../../core/_master-pattern
-
-
 block content
+
+	+h(0)
+	p Colours are used to represent your site and are an implementation of your brand's visual identity. 
+
+	+h(1)
+	p Colours are used throughout your patterns. 
+
+	+h(2)
+	p Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. 
+
+	p Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option ⌥ key) will copy the colour token, and the meta key (Windows key or Mac command ⌘ key) will copy a CSS colour var. 
+
 	include ../../../core/_colour-samples
-	h2 Primary colours
+	h3 Primary colours
 	+colour-samples(colours, "colors")

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

@@ -1,24 +0,0 @@
-extends ../../../../core/_master-pattern.pug
-block content
-	+h(0)
-	+h(1)
-	+h(2)
-	p Uses absolute positioning. 
-		sticky-note(float="right").blue This #[strong is] a test
-		| You might need to add relative positioning to it's container. 
-
-	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	
-
-	sticky-note another one
-
-	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 
-
-
-
-	div#sticky-note.tab-group
-		pre.language-css(data-tab="css") 
-			include sticky-note.css
-		pre.language-css(data-tab="scss") 
-			include _sticky-note.scss
-		pre.language-js(data-tab="js") 
-			include _sticky-note.js

src/pg/patterns/core/components/switch/_switch.js

@@ -1,28 +0,0 @@
-//-		DS2 core (c) 2024 Alexander McIlwraith 
-//-		Licensed under CC BY-SA 4.0 
-
-function flip(e) {
-	let sw = e.currentTarget;
-	switch(sw.getAttribute("aria-checked")) {
-		case "true": 
-			sw.setAttribute("aria-checked", "false");
-		break;
-		case "false": 
-			sw.setAttribute("aria-checked", "true");
-		break;
-	}
-};
-
-
-function init(callback){
-	let sw = document.querySelectorAll("[role='switch']");
-	for (let i=0; i < sw.length; i++) {
-		sw[i].innerHTML = "<span></span>";
-		sw[i].setAttribute("aria-checked", "false");
-		sw[i].setAttribute("tabindex", "0");
-		sw[i].addEventListener("click", flip, false);
-		sw[i].addEventListener("keypress", flip, false);
-	}
-}
-
-export {init};

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

@@ -12,5 +12,5 @@ header
 	div
 		div.header-title
 			h1 
-				a(href= root )= site
+				a(href="./")= site
 		// Other sections can go here, such as search and directory

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

@@ -1,8 +1,13 @@
-extends ../../../../core/_master-pattern.pug
+//-		DS2 core (c) 2024 Alexander McIlwraith 
-	
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 
+	+h(0)
+	+h(1)
+	+h(2)
+
 	div.tab-group#header
 		pre.language-html(data-tab="html")
 			// create temp variables and store the design system values

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

@@ -1,5 +1,7 @@
-extends ../../../core/_master-pattern.pug
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 	- 
 	- let list = []

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

@@ -0,0 +1,31 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
+
+extends ../../../core/_master-pattern
+block content
+	+h(0)
+	p Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes. 
+	+h(1)
+	p Use a sticky when you want to make a note without adding it to the content. 
+	+h(2)
+	p Uses absolute positioning. 
+		sticky-note(float="right").blue This #[strong is] a sample sticky. 
+			| You can drag it out of the way if you need to see the content under it.
+
+	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	
+
+	sticky-note You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).
+
+	tabset#sticky-note
+		pre.language-html(tab="html")
+			sticky-note(float="right").blue This #[strong is] a sample sticky. 
+				| You can drag it out of the way if you need to see the content under it.
+		pre.language-pug(tab="pug").
+			sticky-note(float="right").blue This #[strong is] a sample sticky. 
+				| You can drag it out of the way if you need to see the content under it.
+		pre.language-css(data-tab="css") 
+			include sticky-note.css
+		pre.language-css(data-tab="scss") 
+			include _sticky-note.scss
+		pre.language-js(data-tab="js") 
+			include _sticky-note.js

src/pg/patterns/core/switch/_switch.js

@@ -0,0 +1,26 @@
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Licensed under CC BY-SA 4.0 
+
+function flip(e) {
+	let sw = e.currentTarget;
+	switch(sw.getAttribute("aria-checked")) {
+		case "true": 
+			sw.setAttribute("aria-checked", "false");
+		break;
+		case "false": 
+			sw.setAttribute("aria-checked", "true");
+		break;
+	}
+};
+
+module.exports = {
+	init: (p = document) => {
+		p.querySelectorAll("[role='switch']").forEach((sw) => {
+			sw.innerHTML = "<span></span>";
+			sw.setAttribute("aria-checked", "false");
+			sw.setAttribute("tabindex", "0");
+			sw.addEventListener("click", flip, false);
+			sw.addEventListener("keypress", flip, false);
+		})
+	}
+}

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

@@ -1,9 +1,11 @@
-extends ../../../../core/_master-pattern.pug
+//-		DS2 core (c) 2024 Alexander McIlwraith 
-
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 
 	+h(0)
+	p Switches are used to toggle application state between two mutually exlusive values. 
 	+h(1)
 	+h(2)
 

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

@@ -1,9 +1,7 @@
 //-		DS2 core (c) 2024 Alexander McIlwraith 
-//-		Licensed under CC BY-SA 4.0 
+//-		Core licensed under CC BY-SA 4.0 
-
-extends ../../../../core/_master-pattern.pug
-
 
+extends ../../../core/_master-pattern
 block content
 
 	+h(0)

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

@@ -1,5 +1,7 @@
-extends ../../../../core/_master-pattern
+//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Core licensed under CC BY-SA 4.0 
 
+extends ../../../core/_master-pattern
 block content
 
 	+h(0)

src/scss/scaffolding.scss

@@ -12,21 +12,18 @@ $tooltip-dark-allow: false;
 
 @use 'sass:math';
 
-
 // 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";
 
-@import "../pg/patterns/components/sticky-note-core/_sticky-note";
+@import "../pg/patterns/core/sticky-note/_sticky-note";
-@import "../pg/patterns/components/tooltip-core/_tooltip";
+@import "../pg/patterns/core/switch/_switch";
-@import "../pg/patterns/components/switch-core/_switch";
+@import "../pg/patterns/core/tooltip/_tooltip";
-
+@import "../pg/patterns/core/breakpoints/_breakpoints";
-@import "../pg/patterns/layouts/breakpoints-core/_breakpoints";
+@import "../pg/patterns/core/header/_header";
-@import "../pg/patterns/layouts/header-core/_header";
+@import "../pg/patterns/core/tabs/_tabs"; 
-@import "../pg/patterns/layouts/tabs-core/_tabs"; 
+@import "../pg/patterns/core/status/_status";
-
-@import "../pg/patterns/status-core/_status";
 
 * {
 	box-sizing: border-box;
@@ -46,6 +43,10 @@ html {
 @include sticky-note;
 @include status;
 
+article[data-status=deprecated]:not(.show-deprecated) {
+	display: none;
+}
+
 body {
 	margin: 0;
 	padding: 0;
@@ -97,7 +98,6 @@ body {
 			display: block;
 			grid-column: 1 / -1;
 			grid-row: 4;
-			padding: 0 1rem;
 
 			@include break(-md) {
 				grid-row: 3;