Build CSS, JS and Docs

docs/css/pico.docs.css

@@ -180,7 +180,10 @@ main > aside details[open] > summary:not(:focus) {
 /**
  * Docs: Documentation
  */
-#themes button i {
+#themes button.theme-switcher:first-of-type {
+  --font-weight: bold;
+}
+#themes button.theme-switcher i {
   font-style: normal;
 }
 
@@ -271,6 +274,10 @@ main > aside details[open] > summary:not(:focus) {
   grid-row-gap: 0;
 }
 
+#modal button {
+  --font-weight: bold;
+}
+
 /**
  * Docs: Typography
  */
@@ -352,6 +359,37 @@ section > pre {
   content: "Great";
 }
 
+/**
+ * Docs: Modal
+ */
+dialog.example {
+  display: block;
+  z-index: inherit;
+  position: relative;
+  top: inherit;
+  right: inherit;
+  bottom: inherit;
+  left: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: inherit;
+  min-width: inherit;
+  height: inherit;
+  min-height: inherit;
+  padding: 0;
+  background-color: inherit;
+}
+dialog.example article {
+  max-width: inherit;
+}
+dialog.example:not([open]), dialog.example[open=false] {
+  display: none;
+}
+
+.dialog-is-open body > button {
+  filter: blur(0.125rem);
+}
+
 /**
  * Docs: Navs
  */

docs/js/commons.min.js

@@ -1 +1 @@
-"use strict";!function(){var t={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(t){t.addEventListener("click",function(t){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(t){var e=document.createElement(t.tag);e.className=t.class,document.querySelector(t.target).appendChild(e)},set scheme(t){"auto"==t?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=t&&"light"!=t||(this._scheme=t),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}},e={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){this.toggleLink.addEventListener("click",function(t){t.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)}.bind(this),!1)},applyState:function(){},get state(){return this._state},set state(t){this._state=t}};t.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.init(),e.init()}();
+"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",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(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()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.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()}();

docs/js/grid.min.js

@@ -1 +1 @@
-"use strict";({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:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=document.createElement("P");t.innerHTML='\n      <button class="secondary add">\n        <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">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <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">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grid button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}}).init();
+"use strict";var 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:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n      <button class="secondary add">\n        <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">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <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">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();

docs/js/modal.js

@@ -0,0 +1,63 @@
+/*
+ * Modal
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Config
+const isOpenClass = 'modal-is-open';
+const openingClass = 'modal-is-opening';
+const closingClass = 'modal-is-closing';
+let visibleModal = null;
+
+// Toggle modal
+const toggleModal = event => {
+  event.preventDefault();
+  const modal = document.getElementById(event.target.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 => {
+  setTimeout(() => {
+    visibleModal = modal;
+  }, 100);
+  document.documentElement.classList.add(isOpenClass, openingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(openingClass);
+  }, 200);
+  modal.setAttribute('open', true);
+}
+
+// Close modal
+const closeModal = modal => {
+  visibleModal = null;
+  document.documentElement.classList.add(closingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(closingClass, isOpenClass);
+    modal.removeAttribute('open');
+  }, 200);
+}
+
+// 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);
+  }
+});

docs/js/modal.min.js

@@ -0,0 +1 @@
+"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){setTimeout(function(){visibleModal=e},100),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});