chore: remove docs and move to yarn

2025-04-25 02:36:15 -04:00 · 2022-10-15 17:23:02 +07:00 · 2022-10-15 17:23:02 +07:00 · 759296f211
commit 759296f211
parent 3052db4bd3
153 changed files with 1366 additions and 13526 deletions
--- a/docs/js/commons.js
+++ b/docs/js/commons.js
@ -1,21 +0,0 @@
-/*
- * Add some magic to Pico docs
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-// Imports
-import themeSwitcher from './src/theme-switcher.js';
-import toggleNavigation from './src/toggle-navigation';
-
-// Theme switcher
-themeSwitcher.addButton({
-  tag: 'BUTTON',
-  class: 'contrast switcher theme-switcher',
-  target: 'body',
-});
-themeSwitcher.init();
-
-// Toggle navigation
-toggleNavigation.init();
--- a/docs/js/commons.min.js
+++ b/docs/js/commons.min.js
@ -1 +0,0 @@
-"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferedColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){document.querySelectorAll(this.buttonsTarget).forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(e=>{var t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
--- a/docs/js/customization.js
+++ b/docs/js/customization.js
@ -1,14 +0,0 @@
-/*
- * Customization
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-// Imports
-import materialDesignColors from './src/material-design-colors.js';
-import colorPicker from './src/color-picker.js';
-
-// Color Picker
-colorPicker.colors = materialDesignColors;
-colorPicker.init();
--- a/docs/js/customization.min.js
+++ b/docs/js/customization.min.js
@ -1,43 +0,0 @@
-"use strict";!function(){var e={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons(){let e="",a="";for(const t in this.colors)e+=`<button data-color="${t}" aria-label="Activate ${t} theme"></button>`,a+=`
-        button[data-color="${t}"] {
-          background-color: ${this.colors[t][600]};
-        }
-        [data-theme="light"] button[data-color="${t}"]:hover,
-        [data-theme="light"] button[data-color="${t}"]:active,
-        [data-theme="light"] button[data-color="${t}"]:focus {
-          background-color: ${this.colors[t][700]}; '
-        }
-        [data-theme="dark"] button[data-color="${t}"]:hover,
-        [data-theme="dark"] button[data-color="${t}"]:active,
-        [data-theme="dark"] button[data-color="${t}"]:focus {
-          background-color: ${this.colors[t][500]};
-        }`;var f=document.createElement("FIGURE"),f=(f.innerHTML=e,document.querySelector(this.buttonsTarget).before(f),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(e=>{e.addEventListener("click",e=>{e=e.target.getAttribute("data-color");this.setActiveButton(e),this.generateTheme(e)},!1)}),document.createElement("STYLE"));f.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(a),f.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(f)},setActiveButton(e){this.buttons.forEach(e=>{e.removeAttribute("class")}),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme(e){var a=e,e=this.colors[e];let f={".name":a.charAt(0).toUpperCase()+a.substring(1)+" ",".c500":e[500],".c600":e[600],".c700":e[700],".c600-outline-light":this.hexToRgbA(e[600],.125),".c600-outline-dark":this.hexToRgbA(e[600],.25),".inverse":e.inverse};Object.keys(f).forEach(a=>{document.querySelectorAll(this.selectorSection+" "+a).forEach(e=>{e.innerHTML=f[a]})});a=`
-    [data-theme="generated"] {
-      --h4-color: ${e[700]};
-      --primary: ${e[600]};
-      --primary-hover: ${e[700]};
-      --primary-focus: ${this.hexToRgbA(e[600],.125)};
-      --primary-inverse: ${e.inverse};
-    }
-    @media only screen and (prefers-color-scheme: dark) {
-      :root:not([data-theme="light"]) [data-theme="generated"] {
-        --h4-color: ${e[400]};
-        --primary: ${e[600]};
-        --primary-hover: ${e[500]};
-        --primary-focus: ${this.hexToRgbA(e[600],.25)};
-        --primary-inverse: ${e.inverse};
-      }
-    }
-    [data-theme="dark"] [data-theme="generated"] {
-      --h4-color: ${e[500]};
-      --primary: ${e[600]};
-      --primary-hover: ${e[500]};
-      --primary-focus: ${this.hexToRgbA(e[600],.25)};
-      --primary-inverse: ${e.inverse};
-    }
-    [data-theme="generated"] {
-      --form-element-active-border-color: var(--primary);
-      --form-element-focus-color: var(--primary-focus);
-      --switch-color: var(--primary-inverse);
-      --switch-checked-background-color: var(--primary);
-    }`;document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(a)},minifyCSS(e){return e.replace(/^ +/gm,"")},hexToRgbA(e,a){let f;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return"rgba("+[(f="0x"+(f=3==(f=e.substring(1).split("")).length?[f[0],f[0],f[1],f[1],f[2],f[2]]:f).join(""))>>16&255,f>>8&255,255&f].join(", ")+", "+a+")";throw new Error("Bad Hex")}};e.colors={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}},e.init()}();
--- a/docs/js/grid.js
+++ b/docs/js/grid.js
@ -1,100 +0,0 @@
-/*
- * Grid
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-const grid = {
-  
-  // Config
-  buttons: {
-    text: {
-      add: 'Add column',
-      remove: 'Remove column',
-    },
-    target: '#grid article',
-  },
-  grid: {
-    current: 4,
-    min: 1,
-    max: 12,
-    gridTarget: '#grid .grid',
-    codeTarget: '#grid pre code',
-  },
-
-  // Init
-  init() {
-    this.addButtons();
-    this.generateGrid();
-  },
-
-  // Add buttons
-  addButtons() {
-    // Insert buttons
-    let buttons = document.createElement('P');
-    buttons.innerHTML = `
-      <button class="secondary add">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="12" y1="5" x2="12" y2="19"></line>
-          <line x1="5" y1="12" x2="19" y2="12">'</line>
-        </svg>
-        ${this.buttons.text.add}
-      </button>
-
-      <button class="secondary remove">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="5" y1="12" x2="19" y2="12"></line>
-        </svg>
-        ${this.buttons.text.remove}
-      </button>`;
-    document.querySelector(this.buttons.target).before(buttons);
-
-    // Add button listener
-    document.querySelector('#grid button.add').addEventListener('click', () => {
-      this.addColumn();
-    }, false);
-
-    // Remove button listener
-    document.querySelector('#grid button.remove').addEventListener('click', () => {
-      this.removeColumn();
-    }, false);
-  },
-
-  // Generate grid
-  generateGrid() {
-    // Config
-    let htmlInner = '';
-    let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
-
-    // Build
-    for (let col = 0; col < this.grid.current; col++) {
-      htmlInner += '<div>' + (col + 1) + '</div>';
-      codeInner += '  &lt;<b>div</b>&gt;' + (col + 1) + '&lt;/<b>div</b>&gt;\n';
-    }
-
-    // Display
-    codeInner += '&lt;/<b>div</b>&gt;';
-    document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
-    document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
-  },
-
-  // Add column
-  addColumn() {
-    if (this.grid.current < this.grid.max) {
-      this.grid.current++;
-      this.generateGrid();
-    }
-  },
-
-  // Remove column
-  removeColumn() {
-    if (this.grid.current > this.grid.min) {
-      this.grid.current--;
-      this.generateGrid();
-    }
-  },
-};
-
-// Init
-grid.init();
--- a/docs/js/grid.min.js
+++ b/docs/js/grid.min.js
@ -1,15 +0,0 @@
-"use strict";const grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init(){this.addButtons(),this.generateGrid()},addButtons(){var t=document.createElement("P");t.innerHTML=`
-      <button class="secondary add">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="12" y1="5" x2="12" y2="19"></line>
-          <line x1="5" y1="12" x2="19" y2="12">'</line>
-        </svg>
-        ${this.buttons.text.add}
-      </button>
-
-      <button class="secondary remove">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="5" y1="12" x2="19" y2="12"></line>
-        </svg>
-        ${this.buttons.text.remove}
-      </button>`,document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+="  &lt;<b>div</b>&gt;"+(t+1)+"&lt;/<b>div</b>&gt;\n";r+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();
--- a/docs/js/modal.js
+++ b/docs/js/modal.js
@ -1,95 +0,0 @@
-/*
- * Modal
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-// Config
-const isOpenClass = 'modal-is-open';
-const openingClass = 'modal-is-opening';
-const closingClass = 'modal-is-closing';
-const animationDuration = 400; // ms
-let visibleModal = null;
-
-
-// Toggle modal
-const toggleModal = event => {
-  event.preventDefault();
-  const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
-  (typeof(modal) != 'undefined' && modal != null)
-    && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
-}
-
-// Is modal open
-const isModalOpen = modal => {
-  return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
-}
-
-// Open modal
-const openModal = modal => {
-  if (isScrollbarVisible()) {
-    document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
-  }
-  document.documentElement.classList.add(isOpenClass, openingClass);
-  setTimeout(() => {
-    visibleModal = modal;
-    document.documentElement.classList.remove(openingClass);
-  }, animationDuration);
-  modal.setAttribute('open', true);
-}
-
-// Close modal
-const closeModal = modal => {
-  visibleModal = null;
-  document.documentElement.classList.add(closingClass);
-  setTimeout(() => {
-    document.documentElement.classList.remove(closingClass, isOpenClass);
-    document.documentElement.style.removeProperty('--scrollbar-width');
-    modal.removeAttribute('open');
-  }, animationDuration);
-}
-
-// Close with a click outside
-document.addEventListener('click', event => {
-  if (visibleModal != null) {
-    const modalContent = visibleModal.querySelector('article');
-    const isClickInside = modalContent.contains(event.target);
-    !isClickInside && closeModal(visibleModal);
-  }
-});
-
-// Close with Esc key
-document.addEventListener('keydown', event => {
-  if (event.key === 'Escape' && visibleModal != null) {
-    closeModal(visibleModal);
-  }
-});
-
-// Get scrollbar width
-const getScrollbarWidth = () => {
-
-  // Creating invisible container
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
-  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
-  document.body.appendChild(outer);
-
-  // Creating inner element and placing it in the container
-  const inner = document.createElement('div');
-  outer.appendChild(inner);
-
-  // Calculating difference between container's full width and the child width
-  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
-
-  // Removing temporary elements from the DOM
-  outer.parentNode.removeChild(outer);
-
-  return scrollbarWidth;
-}
-
-// Is scrollbar visible
-const isScrollbarVisible = () => {
-  return document.body.scrollHeight > screen.height;
-}
--- a/docs/js/modal.min.js
+++ b/docs/js/modal.min.js
@ -1 +0,0 @@
-"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width",getScrollbarWidth()+"px"),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{null==visibleModal||visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal)}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{var e=document.createElement("div"),t=(e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e),document.createElement("div")),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;
--- a/docs/js/src/color-picker.js
+++ b/docs/js/src/color-picker.js
@ -1,173 +0,0 @@
-/*
- * Color Picker
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-export const colorPicker = {
-  
-  // Config
-  colors: null,
-  buttonsTarget: '#customization article[data-theme="generated"]',
-  selectorButton: '#customization button[data-color]',
-  selectorSection: '#customization',
-  buttons: null,
-  generatedStyles: null,
-
-  // Init
-  init() {
-    this.generateButtons();
-    this.setActiveButton('pink');
-    this.generateTheme('pink');
-  },
-
-  // Generate Buttons
-  generateButtons() {
-    // Init
-    let innerButtons = '';
-    let innerStyles = '';
-
-    // Loop colors
-    for (const color in this.colors) {
-      // Buttons
-      innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
-
-      // Styles
-      innerStyles += `
-        button[data-color="${color}"] {
-          background-color: ${this.colors[color]['600']};
-        }
-        [data-theme="light"] button[data-color="${color}"]:hover,
-        [data-theme="light"] button[data-color="${color}"]:active,
-        [data-theme="light"] button[data-color="${color}"]:focus {
-          background-color: ${this.colors[color]['700']}; '
-        }
-        [data-theme="dark"] button[data-color="${color}"]:hover,
-        [data-theme="dark"] button[data-color="${color}"]:active,
-        [data-theme="dark"] button[data-color="${color}"]:focus {
-          background-color: ${this.colors[color]['500']};
-        }`;
-    }
-
-    // Insert buttons
-    let containerButtons = document.createElement('FIGURE');
-    containerButtons.innerHTML = innerButtons;
-    document.querySelector(this.buttonsTarget).before(containerButtons);
-
-    // Buttons listeners
-    this.buttons = document.querySelectorAll(this.selectorButton);
-    this.buttons.forEach( button => { 
-      button.addEventListener('click', event => {
-        let color = event.target.getAttribute('data-color');
-        this.setActiveButton(color);
-        this.generateTheme(color);
-      }, false);
-    });
-
-    // Insert CSS Styles
-    let containerStyles = document.createElement('STYLE');
-    containerStyles.setAttribute('title', 'color-picker');
-    this.generatedStyles = this.minifyCSS(innerStyles);
-    containerStyles.innerHTML = this.generatedStyles;
-    document.querySelector('head').appendChild(containerStyles);
-  },
-
-  // Set active button
-  setActiveButton(color) {
-    // Remove all active states
-    this.buttons.forEach( button => {
-      button.removeAttribute('class');
-    });
-
-    // Set active state
-    let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
-    buttonPicked.setAttribute('class', 'picked');
-  },
-
-  // Set active button
-  generateTheme(color) {
-    let name = color;
-    let data = this.colors[color];
-
-    // 1. Update name and colors in demo code
-    let swaps = {
-      '.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ',
-      '.c500': data[500],
-      '.c600': data[600],
-      '.c700': data[700],
-      '.c600-outline-light': this.hexToRgbA(data[600], 0.125),
-      '.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
-      '.inverse': data['inverse'],
-    };
-
-    Object.keys(swaps).forEach( swap => {
-      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
-      targets.forEach( target => {
-        target.innerHTML = swaps[swap];
-      });
-    });
-
-    // 2. Update CSS Styles
-    const innerStyles = `
-    [data-theme="generated"] {
-      --h4-color: ${data[700]};
-      --primary: ${data[600]};
-      --primary-hover: ${data[700]};
-      --primary-focus: ${this.hexToRgbA(data[600], 0.125)};
-      --primary-inverse: ${data['inverse']};
-    }
-    @media only screen and (prefers-color-scheme: dark) {
-      :root:not([data-theme="light"]) [data-theme="generated"] {
-        --h4-color: ${data[400]};
-        --primary: ${data[600]};
-        --primary-hover: ${data[500]};
-        --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
-        --primary-inverse: ${data['inverse']};
-      }
-    }
-    [data-theme="dark"] [data-theme="generated"] {
-      --h4-color: ${data[500]};
-      --primary: ${data[600]};
-      --primary-hover: ${data[500]};
-      --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
-      --primary-inverse: ${data['inverse']};
-    }
-    [data-theme="generated"] {
-      --form-element-active-border-color: var(--primary);
-      --form-element-focus-color: var(--primary-focus);
-      --switch-color: var(--primary-inverse);
-      --switch-checked-background-color: var(--primary);
-    }`;
-
-    document.querySelector('style[title="color-picker"]').innerHTML =
-      this.generatedStyles + this.minifyCSS(innerStyles);
-  },
-
-  // Minify CSS
-  minifyCSS(css) {
-    return css.replace(/^ +/gm, '');
-  },
-
-  // Hexadecimal to Rgba
-  hexToRgbA(hex, alpha) {
-    let c;
-    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-      c = hex.substring(1).split('');
-      if (c.length == 3) {
-        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-      }
-      c = '0x' + c.join('');
-      return (
-        'rgba(' +
-        [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
-        ', ' +
-        alpha +
-        ')'
-      );
-    }
-    throw new Error('Bad Hex');
-  },
-};
-
-export default colorPicker;
--- a/docs/js/src/material-design-colors.js
+++ b/docs/js/src/material-design-colors.js
@ -1,303 +0,0 @@
-// Source: https://material.io/design/color/the-color-system.html
-export const materialDesignColors = {
-  red: {
-    50: '#ffebee',
-    100: '#ffcdd2',
-    200: '#ef9a9a',
-    300: '#e57373',
-    400: '#ef5350',
-    500: '#f44336',
-    600: '#e53935',
-    700: '#d32f2f',
-    800: '#c62828',
-    900: '#b71c1c',
-    a100: '#ff8a80',
-    a200: '#ff5252',
-    a400: '#ff1744',
-    a700: '#d50000',
-    inverse: '#FFF',
-  },
-  pink: {
-    50: '#fce4ec',
-    100: '#f8bbd0',
-    200: '#f48fb1',
-    300: '#f06292',
-    400: '#ec407a',
-    500: '#e91e63',
-    600: '#d81b60',
-    700: '#c2185b',
-    800: '#ad1457',
-    900: '#880e4f',
-    a100: '#ff80ab',
-    a200: '#ff4081',
-    a400: '#f50057',
-    a700: '#c51162',
-    inverse: '#FFF',
-  },
-  purple: {
-    50: '#f3e5f5',
-    100: '#e1bee7',
-    200: '#ce93d8',
-    300: '#ba68c8',
-    400: '#ab47bc',
-    500: '#9c27b0',
-    600: '#8e24aa',
-    700: '#7b1fa2',
-    800: '#6a1b9a',
-    900: '#4a148c',
-    a100: '#ea80fc',
-    a200: '#e040fb',
-    a400: '#d500f9',
-    a700: '#aa00ff',
-    inverse: '#FFF',
-  },
-  'deep-purple': {
-    50: '#ede7f6',
-    100: '#d1c4e9',
-    200: '#b39ddb',
-    300: '#9575cd',
-    400: '#7e57c2',
-    500: '#673ab7',
-    600: '#5e35b1',
-    700: '#512da8',
-    800: '#4527a0',
-    900: '#311b92',
-    a100: '#b388ff',
-    a200: '#7c4dff',
-    a400: '#651fff',
-    a700: '#6200ea',
-    inverse: '#FFF',
-  },
-  indigo: {
-    50: '#e8eaf6',
-    100: '#c5cae9',
-    200: '#9fa8da',
-    300: '#7986cb',
-    400: '#5c6bc0',
-    500: '#3f51b5',
-    600: '#3949ab',
-    700: '#303f9f',
-    800: '#283593',
-    900: '#1a237e',
-    a100: '#8c9eff',
-    a200: '#536dfe',
-    a400: '#3d5afe',
-    a700: '#304ffe',
-    inverse: '#FFF',
-  },
-  blue: {
-    50: '#e3f2fd',
-    100: '#bbdefb',
-    200: '#90caf9',
-    300: '#64b5f6',
-    400: '#42a5f5',
-    500: '#2196f3',
-    600: '#1e88e5',
-    700: '#1976d2',
-    800: '#1565c0',
-    900: '#0d47a1',
-    a100: '#82b1ff',
-    a200: '#448aff',
-    a400: '#2979ff',
-    a700: '#2962ff',
-    inverse: '#FFF',
-  },
-  'light-blue': {
-    50: '#e1f5fe',
-    100: '#b3e5fc',
-    200: '#81d4fa',
-    300: '#4fc3f7',
-    400: '#29b6f6',
-    500: '#03a9f4',
-    600: '#039be5',
-    700: '#0288d1',
-    800: '#0277bd',
-    900: '#01579b',
-    a100: '#80d8ff',
-    a200: '#40c4ff',
-    a400: '#00b0ff',
-    a700: '#0091ea',
-    inverse: '#FFF',
-  },
-  cyan: {
-    50: '#e0f7fa',
-    100: '#b2ebf2',
-    200: '#80deea',
-    300: '#4dd0e1',
-    400: '#26c6da',
-    500: '#00bcd4',
-    600: '#00acc1',
-    700: '#0097a7',
-    800: '#00838f',
-    900: '#006064',
-    a100: '#84ffff',
-    a200: '#18ffff',
-    a400: '#00e5ff',
-    a700: '#00b8d4',
-    inverse: '#FFF',
-  },
-  teal: {
-    50: '#e0f2f1',
-    100: '#b2dfdb',
-    200: '#80cbc4',
-    300: '#4db6ac',
-    400: '#26a69a',
-    500: '#009688',
-    600: '#00897b',
-    700: '#00796b',
-    800: '#00695c',
-    900: '#004d40',
-    a100: '#a7ffeb',
-    a200: '#64ffda',
-    a400: '#1de9b6',
-    a700: '#00bfa5',
-    inverse: '#FFF',
-  },
-  green: {
-    50: '#e8f5e9',
-    100: '#c8e6c9',
-    200: '#a5d6a7',
-    300: '#81c784',
-    400: '#66bb6a',
-    500: '#4caf50',
-    600: '#43a047',
-    700: '#388e3c',
-    800: '#2e7d32',
-    900: '#1b5e20',
-    a100: '#b9f6ca',
-    a200: '#69f0ae',
-    a400: '#00e676',
-    a700: '#00c853',
-    inverse: '#FFF',
-  },
-  'light-green': {
-    50: '#f1f8e9',
-    100: '#dcedc8',
-    200: '#c5e1a5',
-    300: '#aed581',
-    400: '#9ccc65',
-    500: '#8bc34a',
-    600: '#7cb342',
-    700: '#689f38',
-    800: '#558b2f',
-    900: '#33691e',
-    a100: '#ccff90',
-    a200: '#b2ff59',
-    a400: '#76ff03',
-    a700: '#64dd17',
-    inverse: '#FFF',
-  },
-  lime: {
-    50: '#f9fbe7',
-    100: '#f0f4c3',
-    200: '#e6ee9c',
-    300: '#dce775',
-    400: '#d4e157',
-    500: '#cddc39',
-    600: '#c0ca33',
-    700: '#afb42b',
-    800: '#9e9d24',
-    900: '#827717',
-    a100: '#f4ff81',
-    a200: '#eeff41',
-    a400: '#c6ff00',
-    a700: '#aeea00',
-    inverse: 'rgba(0, 0, 0, 0.75)',
-  },
-  yellow: {
-    50: '#fffde7',
-    100: '#fff9c4',
-    200: '#fff59d',
-    300: '#fff176',
-    400: '#ffee58',
-    500: '#ffeb3b',
-    600: '#fdd835',
-    700: '#fbc02d',
-    800: '#f9a825',
-    900: '#f57f17',
-    a100: '#ffff8d',
-    a200: '#ffff00',
-    a400: '#ffea00',
-    a700: '#ffd600',
-    inverse: 'rgba(0, 0, 0, 0.75)',
-  },
-  amber: {
-    50: '#fff8e1',
-    100: '#ffecb3',
-    200: '#ffe082',
-    300: '#ffd54f',
-    400: '#ffca28',
-    500: '#ffc107',
-    600: '#ffb300',
-    700: '#ffa000',
-    800: '#ff8f00',
-    900: '#ff6f00',
-    a100: '#ffe57f',
-    a200: '#ffd740',
-    a400: '#ffc400',
-    a700: '#ffab00',
-    inverse: 'rgba(0, 0, 0, 0.75)',
-  },
-  orange: {
-    50: '#fff3e0',
-    100: '#ffe0b2',
-    200: '#ffcc80',
-    300: '#ffb74d',
-    400: '#ffa726',
-    500: '#ff9800',
-    600: '#fb8c00',
-    700: '#f57c00',
-    800: '#ef6c00',
-    900: '#e65100',
-    a100: '#ffd180',
-    a200: '#ffab40',
-    a400: '#ff9100',
-    a700: '#ff6d00',
-    inverse: '#FFF',
-  },
-  'deep-orange': {
-    50: '#fbe9e7',
-    100: '#ffccbc',
-    200: '#ffab91',
-    300: '#ff8a65',
-    400: '#ff7043',
-    500: '#ff5722',
-    600: '#f4511e',
-    700: '#e64a19',
-    800: '#d84315',
-    900: '#bf360c',
-    a100: '#ff9e80',
-    a200: '#ff6e40',
-    a400: '#ff3d00',
-    a700: '#dd2c00',
-    inverse: '#FFF',
-  },
-  grey: {
-    50: '#fafafa',
-    100: '#f5f5f5',
-    200: '#eeeeee',
-    300: '#e0e0e0',
-    400: '#bdbdbd',
-    500: '#9e9e9e',
-    600: '#757575',
-    700: '#616161',
-    800: '#424242',
-    900: '#212121',
-    inverse: '#FFF',
-  },
-  'blue-grey': {
-    50: '#eceff1',
-    100: '#cfd8dc',
-    200: '#b0bec5',
-    300: '#90a4ae',
-    400: '#78909c',
-    500: '#607d8b',
-    600: '#546e7a',
-    700: '#455a64',
-    800: '#37474f',
-    900: '#263238',
-    inverse: '#FFF',
-  },
-};
-
-export default materialDesignColors;
--- a/docs/js/src/theme-switcher.js
+++ b/docs/js/src/theme-switcher.js
@ -1,95 +0,0 @@
-/*
- * Theme switcher
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-export const themeSwitcher = {
-  
-  // Config
-  _scheme: 'auto',
-  change: {
-    light: '<i>Turn on dark mode</i>',
-    dark: '<i>Turn off dark mode</i>',
-  },
-  buttonsTarget: '.theme-switcher',
-  localStorageKey: 'picoPreferedColorScheme',
-
-  // Init
-  init() {
-    this.scheme = this.schemeFromLocalStorage;
-    this.initSwitchers();
-  },
-
-  // Get color scheme from local storage
-  get schemeFromLocalStorage() {
-    if (typeof window.localStorage !== 'undefined') {
-      if (window.localStorage.getItem(this.localStorageKey) !== null) {
-        return window.localStorage.getItem(this.localStorageKey);
-      }
-    }
-    return this._scheme;
-  },
-
-  // Prefered color scheme
-  get preferedColorScheme() {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  },
-
-  // Init switchers
-  initSwitchers() {
-    const buttons = document.querySelectorAll(this.buttonsTarget);
-    buttons.forEach(button => {
-      button.addEventListener('click', () => {
-        this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
-      }, false);
-    });
-  },
-
-  // Add new button
-  addButton(config) {
-    let button = document.createElement(config.tag);
-    button.className = config.class;
-    document.querySelector(config.target).appendChild(button);
-  },
-
-  // Set scheme
-  set scheme(scheme) {
-    if (scheme == 'auto') {
-      this.preferedColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
-    }
-    else if (scheme == 'dark' || scheme == 'light') {
-      this._scheme = scheme;
-    }
-    this.applyScheme();
-    this.schemeToLocalStorage();
-  },
-
-  // Get scheme
-  get scheme() {
-    return this._scheme;
-  },
-
-  // Apply scheme
-  applyScheme() {
-    document.querySelector('html').setAttribute('data-theme', this.scheme);
-    const buttons = document.querySelectorAll(this.buttonsTarget);
-    buttons.forEach(
-      button => {
-        const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
-        button.innerHTML = text;
-        button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
-      }
-    );
-  },
-
-  // Store scheme to local storage
-  schemeToLocalStorage() {
-    if (typeof window.localStorage !== 'undefined') {
-      window.localStorage.setItem(this.localStorageKey, this.scheme);
-    }
-  },
-};
-
-export default themeSwitcher;
--- a/docs/js/src/toggle-navigation.js
+++ b/docs/js/src/toggle-navigation.js
@ -1,42 +0,0 @@
-/*
- * Toggle navigation
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2022 - Licensed under MIT
- */
-
-export const toggleNavigation = {
-  
-  // Config
-  _state: 'closed-on-mobile',
-  toggleLink: document.getElementById('toggle-docs-navigation'),
-  nav: document.querySelector('main > aside > nav'),
-
-  // Init
-  init() {
-    this.onToggleClick()
-  },
-
-  onToggleClick() {
-    this.toggleLink.addEventListener('click', event => {
-      event.preventDefault();
-      this.state == 'closed-on-mobile' 
-        ? this.state = 'open' 
-        : this.state = 'closed-on-mobile';
-      this.nav.removeAttribute('class');
-      this.nav.classList.add(this.state);
-    }, false);
-  },
-
-  // Get state
-  get state() {
-    return this._state;
-  },
-
-  // Set state
-  set state(state) {
-    this._state = state;
-  },
-};
-
-export default toggleNavigation;
				`@ -1 +0,0 @@`
				"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferedColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){document.querySelectorAll(this.buttonsTarget).forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e\|\|(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(e=>{var t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
				`@ -1 +0,0 @@`
				"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")\|\|"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width",getScrollbarWidth()+"px"),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{null==visibleModal\|\|visibleModal.querySelector("article").contains(e.target)\|\|closeModal(visibleModal)}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{var e=document.createElement("div"),t=(e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e),document.createElement("div")),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;