refactor: lint

docs/js/commons.js

@@ -6,16 +6,16 @@
  */
 
 // Imports
-import themeSwitcher from './src/theme-switcher.js';
+import themeSwitcher from "./src/theme-switcher.js"
-import toggleNavigation from './src/toggle-navigation';
+import toggleNavigation from "./src/toggle-navigation"
 
 // Theme switcher
 themeSwitcher.addButton({
-  tag: 'BUTTON',
+  tag: "BUTTON",
-  class: 'contrast switcher theme-switcher',
+  class: "contrast switcher theme-switcher",
-  target: 'body',
+  target: "body",
-});
+})
-themeSwitcher.init();
+themeSwitcher.init()
 
 // Toggle navigation
-toggleNavigation.init();
+toggleNavigation.init()

docs/js/customization.js

@@ -6,9 +6,9 @@
  */
 
 // Imports
-import materialDesignColors from './src/material-design-colors.js';
+import materialDesignColors from "./src/material-design-colors.js"
-import colorPicker from './src/color-picker.js';
+import colorPicker from "./src/color-picker.js"
 
 // Color Picker
-colorPicker.colors = materialDesignColors;
+colorPicker.colors = materialDesignColors
-colorPicker.init();
+colorPicker.init()

docs/js/grid.js

@@ -6,33 +6,32 @@
  */
 
 const grid = {
-  
   // Config
   buttons: {
     text: {
-      add: 'Add column',
+      add: "Add column",
-      remove: 'Remove column',
+      remove: "Remove column",
     },
-    target: '#grid article',
+    target: "#grid article",
   },
   grid: {
     current: 4,
     min: 1,
     max: 12,
-    gridTarget: '#grid .grid',
+    gridTarget: "#grid .grid",
-    codeTarget: '#grid pre code',
+    codeTarget: "#grid pre code",
   },
 
   // Init
   init() {
-    this.addButtons();
+    this.addButtons()
-    this.generateGrid();
+    this.generateGrid()
   },
 
   // Add buttons
   addButtons() {
     // Insert buttons
-    let buttons = document.createElement('P');
+    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">
@@ -47,54 +46,62 @@ const grid = {
           <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg>
         ${this.buttons.text.remove}
-      </button>`;
+      </button>`
-    document.querySelector(this.buttons.target).before(buttons);
+    document.querySelector(this.buttons.target).before(buttons)
 
     // Add button listener
-    document.querySelector('#grid button.add').addEventListener('click', () => {
+    document.querySelector("#grid button.add").addEventListener(
-      this.addColumn();
+      "click",
-    }, false);
+      () => {
+        this.addColumn()
+      },
+      false
+    )
 
     // Remove button listener
-    document.querySelector('#grid button.remove').addEventListener('click', () => {
+    document.querySelector("#grid button.remove").addEventListener(
-      this.removeColumn();
+      "click",
-    }, false);
+      () => {
+        this.removeColumn()
+      },
+      false
+    )
   },
 
   // Generate grid
   generateGrid() {
     // Config
-    let htmlInner = '';
+    let htmlInner = ""
-    let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
+    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>';
+      htmlInner += "<div>" + (col + 1) + "</div>"
-      codeInner += '  &lt;<b>div</b>&gt;' + (col + 1) + '&lt;/<b>div</b>&gt;\n';
+      codeInner += "  &lt;<b>div</b>&gt;" + (col + 1) + "&lt;/<b>div</b>&gt;\n"
     }
 
     // Display
-    codeInner += '&lt;/<b>div</b>&gt;';
+    codeInner += "&lt;/<b>div</b>&gt;"
-    document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
+    document.querySelector(this.grid.gridTarget).innerHTML = htmlInner
-    document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
+    document.querySelector(this.grid.codeTarget).innerHTML = codeInner
   },
 
   // Add column
   addColumn() {
     if (this.grid.current < this.grid.max) {
-      this.grid.current++;
+      this.grid.current++
-      this.generateGrid();
+      this.generateGrid()
     }
   },
 
   // Remove column
   removeColumn() {
     if (this.grid.current > this.grid.min) {
-      this.grid.current--;
+      this.grid.current--
-      this.generateGrid();
+      this.generateGrid()
     }
   },
-};
+}
 
 // Init
-grid.init();
+grid.init()

docs/js/modal.js

@@ -6,90 +6,96 @@
  */
 
 // Config
-const isOpenClass = 'modal-is-open';
+const isOpenClass = "modal-is-open"
-const openingClass = 'modal-is-opening';
+const openingClass = "modal-is-opening"
-const closingClass = 'modal-is-closing';
+const closingClass = "modal-is-closing"
-const animationDuration = 400; // ms
+const animationDuration = 400 // ms
-let visibleModal = null;
+let visibleModal = null
-
 
 // Toggle modal
 const toggleModal = event => {
-  event.preventDefault();
+  event.preventDefault()
-  const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
+  const modal = document.getElementById(
-  (typeof(modal) != 'undefined' && modal != null)
+    event.currentTarget.getAttribute("data-target")
-    && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
+  )
+  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;
+  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.style.setProperty(
+      "--scrollbar-width",
+      `${getScrollbarWidth()}px`
+    )
   }
-  document.documentElement.classList.add(isOpenClass, openingClass);
+  document.documentElement.classList.add(isOpenClass, openingClass)
   setTimeout(() => {
-    visibleModal = modal;
+    visibleModal = modal
-    document.documentElement.classList.remove(openingClass);
+    document.documentElement.classList.remove(openingClass)
-  }, animationDuration);
+  }, animationDuration)
-  modal.setAttribute('open', true);
+  modal.setAttribute("open", true)
 }
 
 // Close modal
 const closeModal = modal => {
-  visibleModal = null;
+  visibleModal = null
-  document.documentElement.classList.add(closingClass);
+  document.documentElement.classList.add(closingClass)
   setTimeout(() => {
-    document.documentElement.classList.remove(closingClass, isOpenClass);
+    document.documentElement.classList.remove(closingClass, isOpenClass)
-    document.documentElement.style.removeProperty('--scrollbar-width');
+    document.documentElement.style.removeProperty("--scrollbar-width")
-    modal.removeAttribute('open');
+    modal.removeAttribute("open")
-  }, animationDuration);
+  }, animationDuration)
 }
 
 // Close with a click outside
-document.addEventListener('click', event => {
+document.addEventListener("click", event => {
   if (visibleModal != null) {
-    const modalContent = visibleModal.querySelector('article');
+    const modalContent = visibleModal.querySelector("article")
-    const isClickInside = modalContent.contains(event.target);
+    const isClickInside = modalContent.contains(event.target)
-    !isClickInside && closeModal(visibleModal);
+    !isClickInside && closeModal(visibleModal)
   }
-});
+})
 
 // Close with Esc key
-document.addEventListener('keydown', event => {
+document.addEventListener("keydown", event => {
-  if (event.key === 'Escape' && visibleModal != null) {
+  if (event.key === "Escape" && visibleModal != null) {
-    closeModal(visibleModal);
+    closeModal(visibleModal)
   }
-});
+})
 
 // Get scrollbar width
 const getScrollbarWidth = () => {
-
   // Creating invisible container
-  const outer = document.createElement('div');
+  const outer = document.createElement("div")
-  outer.style.visibility = 'hidden';
+  outer.style.visibility = "hidden"
-  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+  outer.style.overflow = "scroll" // forcing scrollbar to appear
-  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  outer.style.msOverflowStyle = "scrollbar" // needed for WinJS apps
-  document.body.appendChild(outer);
+  document.body.appendChild(outer)
 
   // Creating inner element and placing it in the container
-  const inner = document.createElement('div');
+  const inner = document.createElement("div")
-  outer.appendChild(inner);
+  outer.appendChild(inner)
 
   // Calculating difference between container's full width and the child width
-  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
 
   // Removing temporary elements from the DOM
-  outer.parentNode.removeChild(outer);
+  outer.parentNode.removeChild(outer)
 
-  return scrollbarWidth;
+  return scrollbarWidth
 }
 
 // Is scrollbar visible
 const isScrollbarVisible = () => {
-  return document.body.scrollHeight > screen.height;
+  return document.body.scrollHeight > screen.height
 }

docs/js/src/color-picker.js

@@ -6,107 +6,112 @@
  */
 
 export const colorPicker = {
-  
   // Config
   colors: null,
   buttonsTarget: '#customization article[data-theme="generated"]',
-  selectorButton: '#customization button[data-color]',
+  selectorButton: "#customization button[data-color]",
-  selectorSection: '#customization',
+  selectorSection: "#customization",
   buttons: null,
   generatedStyles: null,
 
   // Init
   init() {
-    this.generateButtons();
+    this.generateButtons()
-    this.setActiveButton('pink');
+    this.setActiveButton("pink")
-    this.generateTheme('pink');
+    this.generateTheme("pink")
   },
 
   // Generate Buttons
   generateButtons() {
     // Init
-    let innerButtons = '';
+    let innerButtons = ""
-    let innerStyles = '';
+    let innerStyles = ""
 
     // Loop colors
     for (const color in this.colors) {
       // Buttons
-      innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
+      innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`
 
       // Styles
       innerStyles += `
         button[data-color="${color}"] {
-          background-color: ${this.colors[color]['600']};
+          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']}; '
+          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']};
+          background-color: ${this.colors[color]["500"]};
-        }`;
+        }`
     }
 
     // Insert buttons
-    let containerButtons = document.createElement('FIGURE');
+    let containerButtons = document.createElement("FIGURE")
-    containerButtons.innerHTML = innerButtons;
+    containerButtons.innerHTML = innerButtons
-    document.querySelector(this.buttonsTarget).before(containerButtons);
+    document.querySelector(this.buttonsTarget).before(containerButtons)
 
     // Buttons listeners
-    this.buttons = document.querySelectorAll(this.selectorButton);
+    this.buttons = document.querySelectorAll(this.selectorButton)
-    this.buttons.forEach( button => { 
+    this.buttons.forEach(button => {
-      button.addEventListener('click', event => {
+      button.addEventListener(
-        let color = event.target.getAttribute('data-color');
+        "click",
-        this.setActiveButton(color);
+        event => {
-        this.generateTheme(color);
+          let color = event.target.getAttribute("data-color")
-      }, false);
+          this.setActiveButton(color)
-    });
+          this.generateTheme(color)
+        },
+        false
+      )
+    })
 
     // Insert CSS Styles
-    let containerStyles = document.createElement('STYLE');
+    let containerStyles = document.createElement("STYLE")
-    containerStyles.setAttribute('title', 'color-picker');
+    containerStyles.setAttribute("title", "color-picker")
-    this.generatedStyles = this.minifyCSS(innerStyles);
+    this.generatedStyles = this.minifyCSS(innerStyles)
-    containerStyles.innerHTML = this.generatedStyles;
+    containerStyles.innerHTML = this.generatedStyles
-    document.querySelector('head').appendChild(containerStyles);
+    document.querySelector("head").appendChild(containerStyles)
   },
 
   // Set active button
   setActiveButton(color) {
     // Remove all active states
-    this.buttons.forEach( button => {
+    this.buttons.forEach(button => {
-      button.removeAttribute('class');
+      button.removeAttribute("class")
-    });
+    })
 
     // Set active state
-    let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
+    let buttonPicked = document.querySelector(
-    buttonPicked.setAttribute('class', 'picked');
+      this.selectorButton + '[data-color="' + color + '"]'
+    )
+    buttonPicked.setAttribute("class", "picked")
   },
 
   // Set active button
   generateTheme(color) {
-    let name = color;
+    let name = color
-    let data = this.colors[color];
+    let data = this.colors[color]
 
     // 1. Update name and colors in demo code
     let swaps = {
-      '.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ',
+      ".name": name.charAt(0).toUpperCase() + name.substring(1) + " ",
-      '.c500': data[500],
+      ".c500": data[500],
-      '.c600': data[600],
+      ".c600": data[600],
-      '.c700': data[700],
+      ".c700": data[700],
-      '.c600-outline-light': this.hexToRgbA(data[600], 0.125),
+      ".c600-outline-light": this.hexToRgbA(data[600], 0.125),
-      '.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
+      ".c600-outline-dark": this.hexToRgbA(data[600], 0.25),
-      '.inverse': data['inverse'],
+      ".inverse": data["inverse"],
-    };
+    }
 
-    Object.keys(swaps).forEach( swap => {
+    Object.keys(swaps).forEach(swap => {
-      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
+      let targets = document.querySelectorAll(this.selectorSection + " " + swap)
-      targets.forEach( target => {
+      targets.forEach(target => {
-        target.innerHTML = swaps[swap];
+        target.innerHTML = swaps[swap]
-      });
+      })
-    });
+    })
 
     // 2. Update CSS Styles
     const innerStyles = `
@@ -115,7 +120,7 @@ export const colorPicker = {
       --primary: ${data[600]};
       --primary-hover: ${data[700]};
       --primary-focus: ${this.hexToRgbA(data[600], 0.125)};
-      --primary-inverse: ${data['inverse']};
+      --primary-inverse: ${data["inverse"]};
     }
     @media only screen and (prefers-color-scheme: dark) {
       :root:not([data-theme="light"]) [data-theme="generated"] {
@@ -123,7 +128,7 @@ export const colorPicker = {
         --primary: ${data[600]};
         --primary-hover: ${data[500]};
         --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
-        --primary-inverse: ${data['inverse']};
+        --primary-inverse: ${data["inverse"]};
       }
     }
     [data-theme="dark"] [data-theme="generated"] {
@@ -131,43 +136,43 @@ export const colorPicker = {
       --primary: ${data[600]};
       --primary-hover: ${data[500]};
       --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
-      --primary-inverse: ${data['inverse']};
+      --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);
+      this.generatedStyles + this.minifyCSS(innerStyles)
   },
 
   // Minify CSS
   minifyCSS(css) {
-    return css.replace(/^ +/gm, '');
+    return css.replace(/^ +/gm, "")
   },
 
   // Hexadecimal to Rgba
   hexToRgbA(hex, alpha) {
-    let c;
+    let c
     if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-      c = hex.substring(1).split('');
+      c = hex.substring(1).split("")
       if (c.length == 3) {
-        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]]
       }
-      c = '0x' + c.join('');
+      c = "0x" + c.join("")
       return (
-        'rgba(' +
+        "rgba(" +
-        [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
+        [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(", ") +
-        ', ' +
+        ", " +
         alpha +
-        ')'
+        ")"
-      );
+      )
     }
-    throw new Error('Bad Hex');
+    throw new Error("Bad Hex")
   },
-};
+}
 
-export default colorPicker;
+export default colorPicker

docs/js/src/material-design-colors.js

@@ -1,303 +1,303 @@
 // Source: https://material.io/design/color/the-color-system.html
 export const materialDesignColors = {
   red: {
-    50: '#ffebee',
+    50: "#ffebee",
-    100: '#ffcdd2',
+    100: "#ffcdd2",
-    200: '#ef9a9a',
+    200: "#ef9a9a",
-    300: '#e57373',
+    300: "#e57373",
-    400: '#ef5350',
+    400: "#ef5350",
-    500: '#f44336',
+    500: "#f44336",
-    600: '#e53935',
+    600: "#e53935",
-    700: '#d32f2f',
+    700: "#d32f2f",
-    800: '#c62828',
+    800: "#c62828",
-    900: '#b71c1c',
+    900: "#b71c1c",
-    a100: '#ff8a80',
+    a100: "#ff8a80",
-    a200: '#ff5252',
+    a200: "#ff5252",
-    a400: '#ff1744',
+    a400: "#ff1744",
-    a700: '#d50000',
+    a700: "#d50000",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   pink: {
-    50: '#fce4ec',
+    50: "#fce4ec",
-    100: '#f8bbd0',
+    100: "#f8bbd0",
-    200: '#f48fb1',
+    200: "#f48fb1",
-    300: '#f06292',
+    300: "#f06292",
-    400: '#ec407a',
+    400: "#ec407a",
-    500: '#e91e63',
+    500: "#e91e63",
-    600: '#d81b60',
+    600: "#d81b60",
-    700: '#c2185b',
+    700: "#c2185b",
-    800: '#ad1457',
+    800: "#ad1457",
-    900: '#880e4f',
+    900: "#880e4f",
-    a100: '#ff80ab',
+    a100: "#ff80ab",
-    a200: '#ff4081',
+    a200: "#ff4081",
-    a400: '#f50057',
+    a400: "#f50057",
-    a700: '#c51162',
+    a700: "#c51162",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   purple: {
-    50: '#f3e5f5',
+    50: "#f3e5f5",
-    100: '#e1bee7',
+    100: "#e1bee7",
-    200: '#ce93d8',
+    200: "#ce93d8",
-    300: '#ba68c8',
+    300: "#ba68c8",
-    400: '#ab47bc',
+    400: "#ab47bc",
-    500: '#9c27b0',
+    500: "#9c27b0",
-    600: '#8e24aa',
+    600: "#8e24aa",
-    700: '#7b1fa2',
+    700: "#7b1fa2",
-    800: '#6a1b9a',
+    800: "#6a1b9a",
-    900: '#4a148c',
+    900: "#4a148c",
-    a100: '#ea80fc',
+    a100: "#ea80fc",
-    a200: '#e040fb',
+    a200: "#e040fb",
-    a400: '#d500f9',
+    a400: "#d500f9",
-    a700: '#aa00ff',
+    a700: "#aa00ff",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
-  'deep-purple': {
+  "deep-purple": {
-    50: '#ede7f6',
+    50: "#ede7f6",
-    100: '#d1c4e9',
+    100: "#d1c4e9",
-    200: '#b39ddb',
+    200: "#b39ddb",
-    300: '#9575cd',
+    300: "#9575cd",
-    400: '#7e57c2',
+    400: "#7e57c2",
-    500: '#673ab7',
+    500: "#673ab7",
-    600: '#5e35b1',
+    600: "#5e35b1",
-    700: '#512da8',
+    700: "#512da8",
-    800: '#4527a0',
+    800: "#4527a0",
-    900: '#311b92',
+    900: "#311b92",
-    a100: '#b388ff',
+    a100: "#b388ff",
-    a200: '#7c4dff',
+    a200: "#7c4dff",
-    a400: '#651fff',
+    a400: "#651fff",
-    a700: '#6200ea',
+    a700: "#6200ea",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   indigo: {
-    50: '#e8eaf6',
+    50: "#e8eaf6",
-    100: '#c5cae9',
+    100: "#c5cae9",
-    200: '#9fa8da',
+    200: "#9fa8da",
-    300: '#7986cb',
+    300: "#7986cb",
-    400: '#5c6bc0',
+    400: "#5c6bc0",
-    500: '#3f51b5',
+    500: "#3f51b5",
-    600: '#3949ab',
+    600: "#3949ab",
-    700: '#303f9f',
+    700: "#303f9f",
-    800: '#283593',
+    800: "#283593",
-    900: '#1a237e',
+    900: "#1a237e",
-    a100: '#8c9eff',
+    a100: "#8c9eff",
-    a200: '#536dfe',
+    a200: "#536dfe",
-    a400: '#3d5afe',
+    a400: "#3d5afe",
-    a700: '#304ffe',
+    a700: "#304ffe",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   blue: {
-    50: '#e3f2fd',
+    50: "#e3f2fd",
-    100: '#bbdefb',
+    100: "#bbdefb",
-    200: '#90caf9',
+    200: "#90caf9",
-    300: '#64b5f6',
+    300: "#64b5f6",
-    400: '#42a5f5',
+    400: "#42a5f5",
-    500: '#2196f3',
+    500: "#2196f3",
-    600: '#1e88e5',
+    600: "#1e88e5",
-    700: '#1976d2',
+    700: "#1976d2",
-    800: '#1565c0',
+    800: "#1565c0",
-    900: '#0d47a1',
+    900: "#0d47a1",
-    a100: '#82b1ff',
+    a100: "#82b1ff",
-    a200: '#448aff',
+    a200: "#448aff",
-    a400: '#2979ff',
+    a400: "#2979ff",
-    a700: '#2962ff',
+    a700: "#2962ff",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
-  'light-blue': {
+  "light-blue": {
-    50: '#e1f5fe',
+    50: "#e1f5fe",
-    100: '#b3e5fc',
+    100: "#b3e5fc",
-    200: '#81d4fa',
+    200: "#81d4fa",
-    300: '#4fc3f7',
+    300: "#4fc3f7",
-    400: '#29b6f6',
+    400: "#29b6f6",
-    500: '#03a9f4',
+    500: "#03a9f4",
-    600: '#039be5',
+    600: "#039be5",
-    700: '#0288d1',
+    700: "#0288d1",
-    800: '#0277bd',
+    800: "#0277bd",
-    900: '#01579b',
+    900: "#01579b",
-    a100: '#80d8ff',
+    a100: "#80d8ff",
-    a200: '#40c4ff',
+    a200: "#40c4ff",
-    a400: '#00b0ff',
+    a400: "#00b0ff",
-    a700: '#0091ea',
+    a700: "#0091ea",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   cyan: {
-    50: '#e0f7fa',
+    50: "#e0f7fa",
-    100: '#b2ebf2',
+    100: "#b2ebf2",
-    200: '#80deea',
+    200: "#80deea",
-    300: '#4dd0e1',
+    300: "#4dd0e1",
-    400: '#26c6da',
+    400: "#26c6da",
-    500: '#00bcd4',
+    500: "#00bcd4",
-    600: '#00acc1',
+    600: "#00acc1",
-    700: '#0097a7',
+    700: "#0097a7",
-    800: '#00838f',
+    800: "#00838f",
-    900: '#006064',
+    900: "#006064",
-    a100: '#84ffff',
+    a100: "#84ffff",
-    a200: '#18ffff',
+    a200: "#18ffff",
-    a400: '#00e5ff',
+    a400: "#00e5ff",
-    a700: '#00b8d4',
+    a700: "#00b8d4",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   teal: {
-    50: '#e0f2f1',
+    50: "#e0f2f1",
-    100: '#b2dfdb',
+    100: "#b2dfdb",
-    200: '#80cbc4',
+    200: "#80cbc4",
-    300: '#4db6ac',
+    300: "#4db6ac",
-    400: '#26a69a',
+    400: "#26a69a",
-    500: '#009688',
+    500: "#009688",
-    600: '#00897b',
+    600: "#00897b",
-    700: '#00796b',
+    700: "#00796b",
-    800: '#00695c',
+    800: "#00695c",
-    900: '#004d40',
+    900: "#004d40",
-    a100: '#a7ffeb',
+    a100: "#a7ffeb",
-    a200: '#64ffda',
+    a200: "#64ffda",
-    a400: '#1de9b6',
+    a400: "#1de9b6",
-    a700: '#00bfa5',
+    a700: "#00bfa5",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   green: {
-    50: '#e8f5e9',
+    50: "#e8f5e9",
-    100: '#c8e6c9',
+    100: "#c8e6c9",
-    200: '#a5d6a7',
+    200: "#a5d6a7",
-    300: '#81c784',
+    300: "#81c784",
-    400: '#66bb6a',
+    400: "#66bb6a",
-    500: '#4caf50',
+    500: "#4caf50",
-    600: '#43a047',
+    600: "#43a047",
-    700: '#388e3c',
+    700: "#388e3c",
-    800: '#2e7d32',
+    800: "#2e7d32",
-    900: '#1b5e20',
+    900: "#1b5e20",
-    a100: '#b9f6ca',
+    a100: "#b9f6ca",
-    a200: '#69f0ae',
+    a200: "#69f0ae",
-    a400: '#00e676',
+    a400: "#00e676",
-    a700: '#00c853',
+    a700: "#00c853",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
-  'light-green': {
+  "light-green": {
-    50: '#f1f8e9',
+    50: "#f1f8e9",
-    100: '#dcedc8',
+    100: "#dcedc8",
-    200: '#c5e1a5',
+    200: "#c5e1a5",
-    300: '#aed581',
+    300: "#aed581",
-    400: '#9ccc65',
+    400: "#9ccc65",
-    500: '#8bc34a',
+    500: "#8bc34a",
-    600: '#7cb342',
+    600: "#7cb342",
-    700: '#689f38',
+    700: "#689f38",
-    800: '#558b2f',
+    800: "#558b2f",
-    900: '#33691e',
+    900: "#33691e",
-    a100: '#ccff90',
+    a100: "#ccff90",
-    a200: '#b2ff59',
+    a200: "#b2ff59",
-    a400: '#76ff03',
+    a400: "#76ff03",
-    a700: '#64dd17',
+    a700: "#64dd17",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   lime: {
-    50: '#f9fbe7',
+    50: "#f9fbe7",
-    100: '#f0f4c3',
+    100: "#f0f4c3",
-    200: '#e6ee9c',
+    200: "#e6ee9c",
-    300: '#dce775',
+    300: "#dce775",
-    400: '#d4e157',
+    400: "#d4e157",
-    500: '#cddc39',
+    500: "#cddc39",
-    600: '#c0ca33',
+    600: "#c0ca33",
-    700: '#afb42b',
+    700: "#afb42b",
-    800: '#9e9d24',
+    800: "#9e9d24",
-    900: '#827717',
+    900: "#827717",
-    a100: '#f4ff81',
+    a100: "#f4ff81",
-    a200: '#eeff41',
+    a200: "#eeff41",
-    a400: '#c6ff00',
+    a400: "#c6ff00",
-    a700: '#aeea00',
+    a700: "#aeea00",
-    inverse: 'rgba(0, 0, 0, 0.75)',
+    inverse: "rgba(0, 0, 0, 0.75)",
   },
   yellow: {
-    50: '#fffde7',
+    50: "#fffde7",
-    100: '#fff9c4',
+    100: "#fff9c4",
-    200: '#fff59d',
+    200: "#fff59d",
-    300: '#fff176',
+    300: "#fff176",
-    400: '#ffee58',
+    400: "#ffee58",
-    500: '#ffeb3b',
+    500: "#ffeb3b",
-    600: '#fdd835',
+    600: "#fdd835",
-    700: '#fbc02d',
+    700: "#fbc02d",
-    800: '#f9a825',
+    800: "#f9a825",
-    900: '#f57f17',
+    900: "#f57f17",
-    a100: '#ffff8d',
+    a100: "#ffff8d",
-    a200: '#ffff00',
+    a200: "#ffff00",
-    a400: '#ffea00',
+    a400: "#ffea00",
-    a700: '#ffd600',
+    a700: "#ffd600",
-    inverse: 'rgba(0, 0, 0, 0.75)',
+    inverse: "rgba(0, 0, 0, 0.75)",
   },
   amber: {
-    50: '#fff8e1',
+    50: "#fff8e1",
-    100: '#ffecb3',
+    100: "#ffecb3",
-    200: '#ffe082',
+    200: "#ffe082",
-    300: '#ffd54f',
+    300: "#ffd54f",
-    400: '#ffca28',
+    400: "#ffca28",
-    500: '#ffc107',
+    500: "#ffc107",
-    600: '#ffb300',
+    600: "#ffb300",
-    700: '#ffa000',
+    700: "#ffa000",
-    800: '#ff8f00',
+    800: "#ff8f00",
-    900: '#ff6f00',
+    900: "#ff6f00",
-    a100: '#ffe57f',
+    a100: "#ffe57f",
-    a200: '#ffd740',
+    a200: "#ffd740",
-    a400: '#ffc400',
+    a400: "#ffc400",
-    a700: '#ffab00',
+    a700: "#ffab00",
-    inverse: 'rgba(0, 0, 0, 0.75)',
+    inverse: "rgba(0, 0, 0, 0.75)",
   },
   orange: {
-    50: '#fff3e0',
+    50: "#fff3e0",
-    100: '#ffe0b2',
+    100: "#ffe0b2",
-    200: '#ffcc80',
+    200: "#ffcc80",
-    300: '#ffb74d',
+    300: "#ffb74d",
-    400: '#ffa726',
+    400: "#ffa726",
-    500: '#ff9800',
+    500: "#ff9800",
-    600: '#fb8c00',
+    600: "#fb8c00",
-    700: '#f57c00',
+    700: "#f57c00",
-    800: '#ef6c00',
+    800: "#ef6c00",
-    900: '#e65100',
+    900: "#e65100",
-    a100: '#ffd180',
+    a100: "#ffd180",
-    a200: '#ffab40',
+    a200: "#ffab40",
-    a400: '#ff9100',
+    a400: "#ff9100",
-    a700: '#ff6d00',
+    a700: "#ff6d00",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
-  'deep-orange': {
+  "deep-orange": {
-    50: '#fbe9e7',
+    50: "#fbe9e7",
-    100: '#ffccbc',
+    100: "#ffccbc",
-    200: '#ffab91',
+    200: "#ffab91",
-    300: '#ff8a65',
+    300: "#ff8a65",
-    400: '#ff7043',
+    400: "#ff7043",
-    500: '#ff5722',
+    500: "#ff5722",
-    600: '#f4511e',
+    600: "#f4511e",
-    700: '#e64a19',
+    700: "#e64a19",
-    800: '#d84315',
+    800: "#d84315",
-    900: '#bf360c',
+    900: "#bf360c",
-    a100: '#ff9e80',
+    a100: "#ff9e80",
-    a200: '#ff6e40',
+    a200: "#ff6e40",
-    a400: '#ff3d00',
+    a400: "#ff3d00",
-    a700: '#dd2c00',
+    a700: "#dd2c00",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
   grey: {
-    50: '#fafafa',
+    50: "#fafafa",
-    100: '#f5f5f5',
+    100: "#f5f5f5",
-    200: '#eeeeee',
+    200: "#eeeeee",
-    300: '#e0e0e0',
+    300: "#e0e0e0",
-    400: '#bdbdbd',
+    400: "#bdbdbd",
-    500: '#9e9e9e',
+    500: "#9e9e9e",
-    600: '#757575',
+    600: "#757575",
-    700: '#616161',
+    700: "#616161",
-    800: '#424242',
+    800: "#424242",
-    900: '#212121',
+    900: "#212121",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
-  'blue-grey': {
+  "blue-grey": {
-    50: '#eceff1',
+    50: "#eceff1",
-    100: '#cfd8dc',
+    100: "#cfd8dc",
-    200: '#b0bec5',
+    200: "#b0bec5",
-    300: '#90a4ae',
+    300: "#90a4ae",
-    400: '#78909c',
+    400: "#78909c",
-    500: '#607d8b',
+    500: "#607d8b",
-    600: '#546e7a',
+    600: "#546e7a",
-    700: '#455a64',
+    700: "#455a64",
-    800: '#37474f',
+    800: "#37474f",
-    900: '#263238',
+    900: "#263238",
-    inverse: '#FFF',
+    inverse: "#FFF",
   },
-};
+}
 
-export default materialDesignColors;
+export default materialDesignColors

docs/js/src/theme-switcher.js

@@ -6,90 +6,96 @@
  */
 
 export const themeSwitcher = {
-  
   // Config
-  _scheme: 'auto',
+  _scheme: "auto",
   change: {
-    light: '<i>Turn on dark mode</i>',
+    light: "<i>Turn on dark mode</i>",
-    dark: '<i>Turn off dark mode</i>',
+    dark: "<i>Turn off dark mode</i>",
   },
-  buttonsTarget: '.theme-switcher',
+  buttonsTarget: ".theme-switcher",
-  localStorageKey: 'picoPreferredColorScheme',
+  localStorageKey: "picoPreferredColorScheme",
 
   // Init
   init() {
-    this.scheme = this.schemeFromLocalStorage;
+    this.scheme = this.schemeFromLocalStorage
-    this.initSwitchers();
+    this.initSwitchers()
   },
 
   // Get color scheme from local storage
   get schemeFromLocalStorage() {
-    if (typeof window.localStorage !== 'undefined') {
+    if (typeof window.localStorage !== "undefined") {
       if (window.localStorage.getItem(this.localStorageKey) !== null) {
-        return window.localStorage.getItem(this.localStorageKey);
+        return window.localStorage.getItem(this.localStorageKey)
       }
     }
-    return this._scheme;
+    return this._scheme
   },
 
   // Preferred color scheme
   get preferredColorScheme() {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light"
   },
 
   // Init switchers
   initSwitchers() {
-    const buttons = document.querySelectorAll(this.buttonsTarget);
+    const buttons = document.querySelectorAll(this.buttonsTarget)
     buttons.forEach(button => {
-      button.addEventListener('click', () => {
+      button.addEventListener(
-        this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
+        "click",
-      }, false);
+        () => {
-    });
+          this.scheme == "dark"
+            ? (this.scheme = "light")
+            : (this.scheme = "dark")
+        },
+        false
+      )
+    })
   },
 
   // Add new button
   addButton(config) {
-    let button = document.createElement(config.tag);
+    let button = document.createElement(config.tag)
-    button.className = config.class;
+    button.className = config.class
-    document.querySelector(config.target).appendChild(button);
+    document.querySelector(config.target).appendChild(button)
   },
 
   // Set scheme
   set scheme(scheme) {
-    if (scheme == 'auto') {
+    if (scheme == "auto") {
-      this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
+      this.preferredColorScheme == "dark"
+        ? (this._scheme = "dark")
+        : (this._scheme = "light")
+    } else if (scheme == "dark" || scheme == "light") {
+      this._scheme = scheme
     }
-    else if (scheme == 'dark' || scheme == 'light') {
+    this.applyScheme()
-      this._scheme = scheme;
+    this.schemeToLocalStorage()
-    }
-    this.applyScheme();
-    this.schemeToLocalStorage();
   },
 
   // Get scheme
   get scheme() {
-    return this._scheme;
+    return this._scheme
   },
 
   // Apply scheme
   applyScheme() {
-    document.querySelector('html').setAttribute('data-theme', this.scheme);
+    document.querySelector("html").setAttribute("data-theme", this.scheme)
-    const buttons = document.querySelectorAll(this.buttonsTarget);
+    const buttons = document.querySelectorAll(this.buttonsTarget)
-    buttons.forEach(
+    buttons.forEach(button => {
-      button => {
+      const text = this.scheme == "dark" ? this.change.dark : this.change.light
-        const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
+      button.innerHTML = text
-        button.innerHTML = text;
+      button.setAttribute("aria-label", text.replace(/<[^>]*>?/gm, ""))
-        button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
+    })
-      }
-    );
   },
 
   // Store scheme to local storage
   schemeToLocalStorage() {
-    if (typeof window.localStorage !== 'undefined') {
+    if (typeof window.localStorage !== "undefined") {
-      window.localStorage.setItem(this.localStorageKey, this.scheme);
+      window.localStorage.setItem(this.localStorageKey, this.scheme)
     }
   },
-};
+}
 
-export default themeSwitcher;
+export default themeSwitcher

docs/js/src/toggle-navigation.js

@@ -6,11 +6,10 @@
  */
 
 export const toggleNavigation = {
-  
   // Config
-  _state: 'closed-on-mobile',
+  _state: "closed-on-mobile",
-  toggleLink: document.getElementById('toggle-docs-navigation'),
+  toggleLink: document.getElementById("toggle-docs-navigation"),
-  nav: document.querySelector('main > aside > nav'),
+  nav: document.querySelector("main > aside > nav"),
 
   // Init
   init() {
@@ -18,25 +17,29 @@ export const toggleNavigation = {
   },
 
   onToggleClick() {
-    this.toggleLink.addEventListener('click', event => {
+    this.toggleLink.addEventListener(
-      event.preventDefault();
+      "click",
-      this.state == 'closed-on-mobile' 
+      event => {
-        ? this.state = 'open' 
+        event.preventDefault()
-        : this.state = 'closed-on-mobile';
+        this.state == "closed-on-mobile"
-      this.nav.removeAttribute('class');
+          ? (this.state = "open")
-      this.nav.classList.add(this.state);
+          : (this.state = "closed-on-mobile")
-    }, false);
+        this.nav.removeAttribute("class")
+        this.nav.classList.add(this.state)
+      },
+      false
+    )
   },
 
   // Get state
   get state() {
-    return this._state;
+    return this._state
   },
 
   // Set state
   set state(state) {
-    this._state = state;
+    this._state = state
   },
-};
+}
 
-export default toggleNavigation;
+export default toggleNavigation

docs/src/_footer.html

@@ -1,4 +1,13 @@
 <footer>
-  <hr>
+  <hr />
-  <p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p>
+  <p>
+    <small
+      >Code licensed
+      <a
+        href="https://github.com/picocss/pico/blob/master/LICENSE.md"
+        class="secondary"
+        >MIT</a
+      ></small
+    >
+  </p>
 </footer>

docs/src/_head.html

@@ -1,8 +1,8 @@
-<meta charset="utf-8">
+<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>${props.title} • Pico CSS</title>
-<meta name="description" content="${props.description}">
+<meta name="description" content="${props.description}" />
-<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
+<link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
-<link rel="stylesheet" href="../css/pico.min.css">
+<link rel="stylesheet" href="../css/pico.min.css" />
-<link rel="stylesheet" href="css/pico.docs.min.css">
+<link rel="stylesheet" href="css/pico.docs.min.css" />
-<link rel="canonical" href="https://picocss.com/docs/${props.canonical}">
+<link rel="canonical" href="https://picocss.com/docs/${props.canonical}" />

docs/src/_nav.html

@@ -2,20 +2,48 @@
   <ul>
     <li>
       <a href="https://picocss.com" aria-label="Back home">
-        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
+        <svg
-          <path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1000 1000"
+          height="56px"
+        >
+          <path
+            fill="currentColor"
+            d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"
+          />
         </svg>
       </a>
     </li>
     <li>Documentation</li>
   </ul>
   <ul>
-    <li><a href="https://github.com/picocss/examples" class="secondary">Examples</a></li>
+    <li>
+      <a href="https://github.com/picocss/examples" class="secondary"
+        >Examples</a
+      >
+    </li>
     <li><a href="./" class="secondary">Docs</a></li>
     <li>
-      <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
+      <a
-        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px">
+        href="https://github.com/picocss/pico"
-          <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+        class="contrast"
+        aria-label="Pico GitHub repository"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+          height="16px"
+        >
+          <path
+            fill="currentColor"
+            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+          ></path>
         </svg>
       </a>
     </li>

docs/src/_sidebar.html

@@ -1,13 +1,31 @@
 <aside>
   <nav class="closed-on-mobile">
     <a href="./" class="secondary" id="toggle-docs-navigation">
-      <svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="expand"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        height="16px"
+      >
         <title>Expand</title>
-        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
+        <path
+          fill-rule="evenodd"
+          d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"
+        ></path>
       </svg>
-      <svg xmlns="http://www.w3.org/2000/svg" class="collapse"  fill="currentColor" viewBox="0 0 16 16" height="16px">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="collapse"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        height="16px"
+      >
         <title>Collapse</title>
-        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
+        <path
+          fill-rule="evenodd"
+          d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"
+        ></path>
       </svg>
       Table of contents
     </a>
@@ -15,60 +33,122 @@
       <summary>Getting started</summary>
       <ul>
         <li><a href="./" id="start-link" class="secondary">Usage</a></li>
-        <li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li>
+        <li>
-        <li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li>
+          <a href="./themes.html" id="themes-link" class="secondary">Themes</a>
-        <li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li>
+        </li>
+        <li>
+          <a
+            href="./customization.html"
+            id="customization-link"
+            class="secondary"
+            >Customization</a
+          >
+        </li>
+        <li>
+          <a href="./classless.html" id="classless-link" class="secondary"
+            >Class-less version</a
+          >
+        </li>
         <li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li>
       </ul>
     </details>
     <details>
       <summary>Layout</summary>
       <ul>
-        <li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li>
+        <li>
+          <a href="./containers.html" id="containers-link" class="secondary"
+            >Containers</a
+          >
+        </li>
         <li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li>
-        <li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li>
+        <li>
+          <a href="./scroller.html" id="scroller-link" class="secondary"
+            >Horizontal scroller</a
+          >
+        </li>
       </ul>
     </details>
     <details>
       <summary>Elements</summary>
       <ul>
-        <li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li>
+        <li>
-        <li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li>
+          <a href="./typography.html" id="typography-link" class="secondary"
-        <li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li>
+            >Typography</a
-        <li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li>
+          >
+        </li>
+        <li>
+          <a href="./buttons.html" id="buttons-link" class="secondary"
+            >Buttons</a
+          >
+        </li>
+        <li>
+          <a href="./forms.html" id="forms-link" class="secondary">Forms</a>
+        </li>
+        <li>
+          <a href="./tables.html" id="tables-link" class="secondary">Tables</a>
+        </li>
       </ul>
     </details>
     <details>
       <summary>Components</summary>
       <ul>
-        <li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
+        <li>
-        <li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
+          <a href="./accordions.html" id="accordions-link" class="secondary"
-        <li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li>
+            >Accordions</a
-        <li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
+          >
+        </li>
+        <li>
+          <a href="./cards.html" id="cards-link" class="secondary">Cards</a>
+        </li>
+        <li>
+          <a href="./dropdowns.html" id="dropdowns-link" class="secondary"
+            >Dropdowns</a
+          >
+        </li>
+        <li>
+          <a href="./modal.html" id="modal-link" class="secondary">Modal</a>
+        </li>
         <li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
-        <li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
+        <li>
+          <a href="./progress.html" id="progress-link" class="secondary"
+            >Progress</a
+          >
+        </li>
       </ul>
     </details>
     <details>
       <summary>Utilities</summary>
       <ul>
-        <li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li>
+        <li>
-        <li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li>
+          <a href="./loading.html" id="loading-link" class="secondary"
+            >Loading</a
+          >
+        </li>
+        <li>
+          <a href="./tooltips.html" id="tooltips-link" class="secondary"
+            >Tooltips</a
+          >
+        </li>
       </ul>
     </details>
     <details>
       <summary>Extend</summary>
       <ul>
         <li>
-          <a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a>
+          <a
+            href="./we-love-classes.html"
+            id="we-love-classes-link"
+            class="secondary"
+            >We love .classes</a
+          >
         </li>
       </ul>
     </details>
   </nav>
   <script>
-    const activeLink = document.querySelector(`aside a#${props.active}`);
+    const activeLink = document.querySelector(`aside a#${props.active}`)
-    const parentAccordion = activeLink.closest('details');
+    const parentAccordion = activeLink.closest("details")
-    activeLink.setAttribute('aria-current', 'page');
+    activeLink.setAttribute("aria-current", "page")
-    parentAccordion.setAttribute('open', 'true');
+    parentAccordion.setAttribute("open", "true")
   </script>
 </aside>

docs/src/accordions.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Accordions` description=`Toggle sections of
-      title=`Accordions`
+    content in pure HTML, without JavaScript.` canonical=`accordions.html` }
-      description=`Toggle sections of content in pure HTML, without JavaScript.`
-      canonical=`accordions.html`
-    }
   </head>
 
   <body>
@@ -18,25 +15,39 @@
         <section id="accordions">
           <hgroup>
             <h1>Accordions</h1>
-            <h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
+            <h2>
+              Toggle sections of content in pure HTML, without JavaScript.
+            </h2>
           </hgroup>
           <article aria-label="Accordions examples">
             <details>
               <summary>Accordion 1</summary>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Pellentesque urna diam, tincidunt nec porta sed, auctor id
+                velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam
+                commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla
+                convallis lectus rutrum quam hendrerit, in facilisis elit
+                sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit
+                auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet,
+                congue turpis.
+              </p>
             </details>
             <details open>
               <summary>Accordion 2</summary>
               <ul>
                 <li>Vestibulum id elit quis massa interdum sodales.</li>
-                <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
+                <li>
+                  Nunc quis eros vel odio pretium tincidunt nec quis neque.
+                </li>
                 <li>Quisque sed eros non eros ornare elementum.</li>
-                <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
+                <li>
+                  Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
+                </li>
               </ul>
             </details>
             <footer class="code">
-
+              <pre><code>&lt;<b>details</b>&gt;
-<pre><code>&lt;<b>details</b>&gt;
   &lt;<b>summary</b>&gt;Accordion 1&lt;/<b>summary</b>&gt;
   &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
 &lt;/<b>details</b>&gt;
@@ -48,26 +59,39 @@
     &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code>&lt;<b>summary</b>&gt;</code> into a button.</p>
+          <p>
+            <code><i>role</i>=<u>"button"</u></code> can be used to turn
+            <code>&lt;<b>summary</b>&gt;</code> into a button.
+          </p>
           <article aria-label="Accordions buttons examples">
             <details>
               <summary role="button">Accordion 1</summary>
-              <p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
+              <p>
+                Aenean vestibulum nunc at libero congue, eu pretium nulla
+                viverra. Fusce sed ex at est egestas vehicula. Integer sit amet
+                lectus mi. Duis ut viverra mauris, at laoreet enim.
+              </p>
             </details>
             <details>
               <summary role="button" class="secondary">Accordion 2</summary>
-              <p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>
+              <p>
+                Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac
+                tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna
+                quis, luctus risus. Donec vitae molestie felis.
+              </p>
             </details>
             <details>
               <summary role="button" class="contrast">Accordion 3</summary>
-              <p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>
+              <p>
+                Praesent quam ipsum, condimentum non augue at, porttitor
+                interdum tellus. Curabitur ultrices consectetur leo, a placerat
+                mauris malesuada et. In quis varius risus.
+              </p>
             </details>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- Primary --&gt;</em>
-<pre><code><em>&lt;!-- Primary --&gt;</em>
 &lt;<b>details</b>&gt;
   &lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;Accordion 1&lt;/<b>summary</b>&gt;
   &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
@@ -83,14 +107,12 @@
 &lt;<b>details</b>&gt;
   &lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Accordion 3&lt;/<b>summary</b>&gt;
   &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
-&lt;/<b>details</b>&gt;
+&lt;/<b>details</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/buttons.html

@@ -1,11 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Buttons` description=`The essential button
-      title=`Buttons`
+    in pure HTML, without .classes for the default style.`
-      description=`The essential button in pure HTML, without .classes for the default style.`
+    canonical=`buttons.html` }
-      canonical=`buttons.html`
-    }
   </head>
 
   <body>
@@ -18,58 +16,92 @@
         <section id="buttons">
           <hgroup>
             <h1>Buttons</h1>
-            <h2>The essential button in pure HTML, without <code>.classes</code> for the default style.</h2>
+            <h2>
+              The essential button in pure HTML, without
+              <code>.classes</code> for the default style.
+            </h2>
           </hgroup>
           <article aria-label="Button example">
             <button aria-label="Button">Button</button>
-            <input type="submit">
+            <input type="submit" />
             <footer class="code">
-
+              <pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
-<pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"submit"</u>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><i>role</i>=<u>"button"</code> on an inline element if you need an inline button.</p>
+          <p>
+            Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use
+            <code><i>role</i>=<u>"button"</u></code> on an inline element if you
+            need an inline button.
+          </p>
           <article aria-label="Inline buttons examples">
             <a href="#" onclick="event.preventDefault()" role="button">Link</a>
             <a href="#" onclick="event.preventDefault()" role="button">Link</a>
             <footer class="code">
-
+              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;
-<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
+          <p>
-          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
+            Buttons come with <code>.secondary</code> and
+            <code>.contrast</code> styles.
+          </p>
+          <p>
+            ℹ️&nbsp;These classes are not available in the
+            <a href="classless.html">class-less version</a>.
+          </p>
           <article aria-label="Buttons styles examples">
-            <a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
+            <a
-            <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
+              href="#"
+              onclick="event.preventDefault()"
+              role="button"
+              class="secondary"
+              >Secondary</a
+            >
+            <a
+              href="#"
+              onclick="event.preventDefault()"
+              role="button"
+              class="contrast"
+              >Contrast</a
+            >
             <footer class="code">
-
+              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
-<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
-
             </footer>
           </article>
           <p>And a classic <code>.outline</code> variant.</p>
           <article aria-label="Outline style examples">
-            <a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
+            <a
-            <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
+              href="#"
-            <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
+              onclick="event.preventDefault()"
+              role="button"
+              class="outline"
+              >Primary</a
+            >
+            <a
+              href="#"
+              onclick="event.preventDefault()"
+              role="button"
+              class="secondary outline"
+              >Secondary</a
+            >
+            <a
+              href="#"
+              onclick="event.preventDefault()"
+              role="button"
+              class="contrast outline"
+              >Contrast</a
+            >
             <footer class="code">
-
+              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
-<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>&gt;Secondary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/cards.html

@@ -1,10 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Cards` description=`A flexible container
-      title=`Cards`
+    with graceful spacings across devices and viewports.` canonical=`cards.html`
-      description=`A flexible container with graceful spacings across devices and viewports.`
-      canonical=`cards.html`
     }
   </head>
 
@@ -18,29 +16,32 @@
         <section id="cards">
           <hgroup>
             <h1>Cards</h1>
-            <h2>A flexible container with graceful spacings across devices and viewports.</h2>
+            <h2>
+              A flexible container with graceful spacings across devices and
+              viewports.
+            </h2>
           </hgroup>
-          <article aria-label="Card example">
+          <article aria-label="Card example">I'm a card!</article>
-            I'm a card!
-          </article>
           <pre><code>&lt;<b>article</b>&gt;I'm a card!&lt;/<b>article</b>&gt;</code></pre>
-          <p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p>
+          <p>
+            You can use <code>&lt;<b>header</b>&gt;</code> and footer
+            <code>&lt;<b>footer</b>&gt;</code> inside
+            <code>&lt;<b>article</b>&gt;</code>
+          </p>
           <article aria-label="Card sectioning example">
             <header>Header</header>
             Body
             <footer>Footer</footer>
           </article>
 
-<pre><code>&lt;<b>article</b>&gt;
+          <pre><code>&lt;<b>article</b>&gt;
   &lt;<b>header</b>&gt;Header&lt;/<b>header</b>&gt;
   Body
   &lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt;
 &lt;/<b>article</b>&gt;</code></pre>
-
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/classless.html

@@ -1,11 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Class-less version` description=`For wild
-      title=`Class-less version`
+    HTML purists, Pico provides a .classless version.`
-      description=`For wild HTML purists, Pico provides a .classless version.`
+    canonical=`classless.html` }
-      canonical=`classless.html`
-    }
   </head>
 
   <body>
@@ -20,10 +18,21 @@
             <h1>Class-less version</h1>
             <h2>For wild HTML purists!</h2>
           </hgroup>
-          <p>Pico provides a <code>.classless</code> version (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless">example</a>).</p>
+          <p>
-          <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code> act as <a href="./containers.html">containers</a> to define a centered or a fluid viewport.</p>
+            Pico provides a <code>.classless</code> version (<a
+              href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless"
+              >example</a
+            >).
+          </p>
+          <p>
+            In this version, <code>&lt;<b>header</b>&gt;</code>,
+            <code>&lt;<b>main</b>&gt;</code>, and
+            <code>&lt;<b>footer</b>&gt;</code> act as
+            <a href="./containers.html">containers</a> to define a centered or a
+            fluid viewport.
+          </p>
 
-<pre><code><em>// Containers</em>
+          <pre><code><em>// Containers</em>
 <b>body</b> > <b>header</b>,
 <b>body</b> > <b>main</b>,
 <b>body</b> > <b>footer</b> {
@@ -32,24 +41,46 @@
 </code></pre>
 
           <p><strong>Usage:</strong></p>
-          <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
+          <p>
+            Use the default <code>.classless</code> version if you need centered
+            viewports:
+          </p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
-          <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
+          <p>
+            Or use the <code>.fluid.classless</code> version if you need a fluid
+            container:
+          </p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
-          <p>These <code>.classless</code> versions are also available on <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a>:</p>
+          <p>
+            These <code>.classless</code> versions are also available on
+            <a href="https://www.jsdelivr.com/package/npm/@picocss/pico"
+              >jsDelivr CDN</a
+            >:
+          </p>
 
-<pre><code><em>// Centered viewport</em>
+          <pre><code><em>// Centered viewport</em>
 &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"</u>&gt;
 </code></pre>
 
-<pre><code><em>// Fluid viewport</em>
+          <pre><code><em>// Fluid viewport</em>
 &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css"</u>&gt;
 </code></pre>
 
-          <p>If you need to customize the default parent (<code>&lt;<b>body</b>&gt;</code>) for <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code>, you can recompile Pico by defining another CSS selector.</p>
+          <p>
-          <p>Useful for <a href="https://reactjs.org/">React</a>, <a href="https://www.gatsbyjs.com/">Gatsby</a> or <a href="https://nextjs.org/">Next.js</a>.</p>
+            If you need to customize the default parent
+            (<code>&lt;<b>body</b>&gt;</code>) for
+            <code>&lt;<b>header</b>&gt;</code>,
+            <code>&lt;<b>main</b>&gt;</code>, and
+            <code>&lt;<b>footer</b>&gt;</code>, you can recompile Pico by
+            defining another CSS selector.
+          </p>
+          <p>
+            Useful for <a href="https://reactjs.org/">React</a>,
+            <a href="https://www.gatsbyjs.com/">Gatsby</a> or
+            <a href="https://nextjs.org/">Next.js</a>.
+          </p>
 
-<pre><code><em>/* Custom Class-less version for React */</em>
+          <pre><code><em>/* Custom Class-less version for React */</em>
 
 <em>// Set the root element</em>
 <i>$semantic-root-element</i>: <u>"#root"</u>;
@@ -63,20 +94,21 @@
 <em>// Import Pico</em>
 <b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
 
-          <p>The code above will compile Pico with the containers defined like this:</p>
+          <p>
+            The code above will compile Pico with the containers defined like
+            this:
+          </p>
 
-<pre><code><em>// Containers</em></em>
+          <pre><code><em>// Containers</em>
 <i>#root</i> > <b>header</b>,
 <i>#root</i> > <b>main</b>,
 <i>#root</i> > <b>footer</b> {
   <em>…</em>
 }
 </code></pre>
-
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/containers.html

@@ -1,11 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Containers` description=`.container enable
-      title=`Containers`
+    a centered viewport, .container-fluid enable a 100% layout.`
-      description=`.container enable a centered viewport, .container-fluid enable a 100% layout.`
+    canonical=`containers.html` }
-      canonical=`containers.html`
-    }
   </head>
 
   <body>
@@ -19,16 +17,23 @@
           <hgroup>
             <h1>Containers</h1>
             <h2>
-              <code>.container</code> enable a centered viewport.<br>
+              <code>.container</code> enable a centered viewport.<br />
-              <code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
+              <code>.container-fluid</code> enable a
+              <code><u>100%</u></code> layout.
             </h2>
           </hgroup>
 
-<pre><code>&lt;<b>body</b>&gt;
+          <pre><code>&lt;<b>body</b>&gt;
   &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
 &lt;/<b>body</b>&gt;</code></pre>
 
-          <p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
+          <p>
+            Pico uses the same breakpoints and viewports sizes as
+            <a
+              href="https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints"
+              >Bootstrap</a
+            >.
+          </p>
           <figure>
             <table role="grid">
               <thead>
@@ -61,12 +66,20 @@
               </tbody>
             </table>
           </figure>
-          <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct children of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
+          <p>
-          <p><code>&lt;<b>section</b>&gt;</code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
+            <code>&lt;<b>header</b>&gt;</code>,
+            <code>&lt;<b>main</b>&gt;</code> and
+            <code>&lt;<b>footer</b>&gt;</code> as direct children of
+            <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical
+            <code><i>padding</i></code>
+          </p>
+          <p>
+            <code>&lt;<b>section</b>&gt;</code> provides a responsive
+            <code><i>margin-bottom</i></code> to separate your sections.
+          </p>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/customization.html

@@ -1,11 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Customization` description=`You can
-      title=`Customization`
+    customize themes with SCSS, or you can edit the CSS variables. All Pico's
-      description=`You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables).`
+    styles and colors are set with CSS custom properties (variables).`
-      canonical=`customization.html`
+    canonical=`customization.html` }
-    }
   </head>
 
   <body>
@@ -18,7 +17,10 @@
         <section id="customization">
           <hgroup>
             <h1>Customization</h1>
-            <h2>You can customize themes with SCSS or, you can edit the CSS variables.</h2>
+            <h2>
+              You can customize themes with SCSS or, you can edit the CSS
+              variables.
+            </h2>
           </hgroup>
           <p>Example: <strong>pick a color!</strong></p>
 
@@ -26,32 +28,60 @@
             <h3><span class="name">Custom theme</span></h3>
             <form>
               <div class="grid">
-                <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
+                <input
-                <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
+                  type="text"
-                <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
+                  name="login"
+                  placeholder="Login"
+                  aria-label="Login"
+                  autocomplete="nickname"
+                  required
+                />
+                <input
+                  type="password"
+                  name="password"
+                  placeholder="Password"
+                  aria-label="Password"
+                  autocomplete="current-password"
+                  required
+                />
+                <button
+                  type="submit"
+                  aria-label="Example button"
+                  onclick="event.preventDefault()"
+                >
+                  Login
+                </button>
               </div>
               <fieldset>
                 <label for="remember">
-                  <input type="checkbox" role="switch" id="remember" name="remember" checked>
+                  <input
+                    type="checkbox"
+                    role="switch"
+                    id="remember"
+                    name="remember"
+                    checked
+                  />
                   Remember me
                 </label>
               </fieldset>
             </form>
             <footer class="code">
-
+              <pre><code><em>// Simplified example</em>
-<pre><code><em>// Simplified example</em>
 <b>:root</b> {
   <i>--primary</i>: <u class="c600">…</u>;
 }
 </code></pre>
-
             </footer>
           </article>
           <p>There are 2 ways to customize your version of Pico CSS:</p>
           <h3>Overriding CSS variables</h3>
-          <p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
+          <p>
+            All Pico's styles and colors are set with
+            <em>CSS custom properties</em> (variables). Just override the CSS
+            variables to customize your version of Pico.
+          </p>
 
-<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
+          <pre><code><em>/* <span class="name"></span>Light scheme (Default) */
 /* Can be forced with data-theme="light" */</em>
 <b>[data-theme=<u>"light"</u>]</b>,
 <b>:root:not([data-theme=<u>"dark"</u>])</b> {
@@ -90,12 +120,22 @@
 }
 </code></pre>
 
-          <p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
+          <p>
+            You can find all the CSS variables used in the default theme here:
+            <a
+              href="https://github.com/picocss/pico/blob/master/css/themes/default.css"
+              >css/themes/default.css</a
+            >
+          </p>
           <h3>Importing Pico SASS library</h3>
-          <p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
+          <p>
+            We recommend customizing Pico by importing SASS source files into
+            your project. This way, you can keep Pico up to date without
+            conflicts since Pico code and your custom code are separated.
+          </p>
           <p>Compile the SASS file to CSS to get a custom version of Pico.</p>
 
-<pre><code><em>/* Custom <span class="name"> </span>version */</em>
+          <pre><code><em>/* Custom <span class="name"> </span>version */</em>
 
 <em>// Override default variables</em>
 <i>$primary-500</i>: <u class="c500">…</u>;
@@ -105,9 +145,12 @@
 <em>// Import Pico</em>
 <b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
 
-          <p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
+          <p>
+            Alternatively, you can create a custom theme and import it into your
+            project with the components you need.
+          </p>
 
-<pre><code><em>/* Custom version */</em>
+          <pre><code><em>/* Custom version */</em>
 
 <em>// Custom theme</em>
 <b>@import</b> <u>"path/themes/custom"</u>;
@@ -118,11 +161,13 @@
 <em>…</em>
 </code></pre>
 
-          <p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.</p>
+          <p>
+            Compiling a custom SASS version allows you to create a lighter
+            version with only the components that are useful to you.
+          </p>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/dropdowns.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html')
+    ${require('./_head.html') title=`Dropdowns` description=`Dropdown menus and
-      title=`Dropdowns`
+    custom selects without JavaScript.` canonical=`dropdowns.html` }
-      description=`Dropdown menus and custom selects without JavaScript.`
-      canonical=`dropdowns.html`
-    }
   </head>
 
   <body>
@@ -20,15 +17,31 @@
             <h1>Dropdowns</h1>
             <h2>Dropdown menus and custom selects without JavaScript.</h2>
           </hgroup>
-          <p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct children.</p>
+          <p>
-          <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
+            Dropdowns are built with
+            <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a
+            wrapper and <code>&lt;<b>summary</b>&gt;</code> and
+            <code>&lt;<b>ul</b>&gt;</code> as direct children.
+          </p>
+          <p>
+            For style consistency with the form elements, dropdowns are styled
+            like a <a href="forms.html">&lt;select&gt;</a> by default.
+          </p>
           <article aria-label="Dropdowns as Selects">
             <details role="list">
               <summary aria-haspopup="listbox">Dropdown</summary>
               <ul role="listbox">
                 <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li>
-                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Another action</a
+                  >
+                </li>
+                <li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Something else here</a
+                  >
+                </li>
               </ul>
             </details>
             <select required>
@@ -38,8 +51,7 @@
               <option>Something else here</option>
             </select>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- Dropdown --&gt;</em>
-<pre><code><em>&lt;!-- Dropdown --&gt;</em>
 &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
   &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
   &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
@@ -50,43 +62,74 @@
 &lt;/<b>details</b>&gt;
 
 <em>&lt;!-- Select --&gt;</em>
-&lt;<b>select</b></u>&gt;
+&lt;<b>select</b>&gt;
   &lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
   &lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
 &lt;/<b>select</b>&gt;
 </code></pre>
-
             </footer>
           </article>
-          <p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p>
+          <p>
+            <code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code>
+            transforms the dropdown into a button.
+          </p>
           <article aria-label="Dropdowns as Buttons">
             <details role="list">
-              <summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
+              <summary aria-haspopup="listbox" role="button">
+                Dropdown as a button 1
+              </summary>
               <ul role="listbox">
                 <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li>
-                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Another action</a
+                  >
+                </li>
+                <li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Something else here</a
+                  >
+                </li>
               </ul>
             </details>
             <details role="list">
-              <summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
+              <summary aria-haspopup="listbox" role="button" class="secondary">
+                Dropdown as a button 2
+              </summary>
               <ul role="listbox">
                 <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li>
-                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Another action</a
+                  >
+                </li>
+                <li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Something else here</a
+                  >
+                </li>
               </ul>
             </details>
             <details role="list">
-              <summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
+              <summary aria-haspopup="listbox" role="button" class="contrast">
+                Dropdown as a button 3
+              </summary>
               <ul role="listbox">
                 <li><a href="#" onclick="event.preventDefault()">Action</a></li>
-                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li>
-                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Another action</a
+                  >
+                </li>
+                <li>
+                  <a href="#" onclick="event.preventDefault()"
+                    >Something else here</a
+                  >
+                </li>
               </ul>
             </details>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- Primary --&gt;</em>
-<pre><code><em>&lt;!-- Primary --&gt;</em>
 &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
   &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
     Dropdown as a button 1
@@ -122,10 +165,13 @@
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
 </code></pre>
-              
             </footer>
           </article>
-          <p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or  <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
+          <p>
+            Dropdowns can be used as custom selects with
+            <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or
+            <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code>
+          </p>
           <article aria-label="Dropdowns with radio buttons or checkboxes">
             <details role="list">
               <summary aria-haspopup="listbox">Select single element</summary>
@@ -138,7 +184,12 @@
                 </li>
                 <li>
                   <label for="medium">
-                    <input type="radio" id="medium" name="size" value="medium" />
+                    <input
+                      type="radio"
+                      id="medium"
+                      name="size"
+                      value="medium"
+                    />
                     Medium
                   </label>
                 </li>
@@ -151,7 +202,9 @@
               </ul>
             </details>
             <details role="list">
-              <summary aria-haspopup="listbox">Select multiple elements</summary>
+              <summary aria-haspopup="listbox">
+                Select multiple elements
+              </summary>
               <ul role="listbox">
                 <li>
                   <label>
@@ -174,8 +227,7 @@
               </ul>
             </details>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- With radio buttons --&gt;</em>
-<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
 &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
   &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
   &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
@@ -224,10 +276,14 @@
     &lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;
-              
+</code></pre>
             </footer>
           </article>
-          <p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p>
+          <p>
+            Dropdowns can be used inside a
+            <a href="navs.html">&lt;nav&gt;</a> with a nested
+            <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code>
+          </p>
           <p>Example with a dropdown as a link:</p>
           <article aria-label="Dropdowns inside a nav">
             <nav>
@@ -238,19 +294,30 @@
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                 <li>
                   <details role="list" dir="rtl">
-                    <summary aria-haspopup="listbox" role="link">Dropdown</summary>
+                    <summary aria-haspopup="listbox" role="link">
+                      Dropdown
+                    </summary>
                     <ul role="listbox">
-                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                      <li>
-                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                        <a href="#" onclick="event.preventDefault()">Action</a>
-                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                      </li>
+                      <li>
+                        <a href="#" onclick="event.preventDefault()"
+                          >Another action</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" onclick="event.preventDefault()"
+                          >Something else here</a
+                        >
+                      </li>
                     </ul>
                   </details>
                 </li>
               </ul>
             </nav>
             <footer class="code">
-
+              <pre><code>&lt;<b>nav</b>&gt;
-<pre><code>&lt;<b>nav</b>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
@@ -268,7 +335,6 @@
     &lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
-
             </footer>
           </article>
           <p>Example with a default dropdown and a dropdown as a button:</p>
@@ -279,27 +345,48 @@
                   <details role="list">
                     <summary aria-haspopup="listbox">Dropdown</summary>
                     <ul role="listbox">
-                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                      <li>
-                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                        <a href="#" onclick="event.preventDefault()">Action</a>
-                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                      </li>
+                      <li>
+                        <a href="#" onclick="event.preventDefault()"
+                          >Another action</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" onclick="event.preventDefault()"
+                          >Something else here</a
+                        >
+                      </li>
                     </ul>
                   </details>
                 </li>
                 <li>
                   <details role="list">
-                    <summary aria-haspopup="listbox" role="button">Dropdown</summary>
+                    <summary aria-haspopup="listbox" role="button">
+                      Dropdown
+                    </summary>
                     <ul role="listbox">
-                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                      <li>
-                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                        <a href="#" onclick="event.preventDefault()">Action</a>
-                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                      </li>
+                      <li>
+                        <a href="#" onclick="event.preventDefault()"
+                          >Another action</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" onclick="event.preventDefault()"
+                          >Something else here</a
+                        >
+                      </li>
                     </ul>
                   </details>
                 </li>
               </ul>
             </nav>
             <footer class="code">
-
+              <pre><code>&lt;<b>nav</b>&gt;
-<pre><code>&lt;<b>nav</b>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;
       &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
@@ -323,11 +410,17 @@
     &lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>You can also use  <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p>
+          <p>
-          <p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
+            You can also use
+            <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested
+            wrapper to render a list as a dropdown.
+          </p>
+          <p>
+            ℹ️&nbsp;This syntax is experimental. In this version, the dropdown
+            menu is triggered on hover.
+          </p>
           <article aria-label="Dropdowns inside a nav">
             <nav>
               <ul>
@@ -337,18 +430,32 @@
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                 <li role="list" dir="rtl">
-                  <a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
+                  <a
+                    href="#"
+                    onclick="event.preventDefault()"
+                    aria-haspopup="listbox"
+                    >Dropdown</a
+                  >
                   <ul role="listbox">
-                    <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                    <li>
-                    <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                      <a href="#" onclick="event.preventDefault()">Action</a>
-                    <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                    </li>
+                    <li>
+                      <a href="#" onclick="event.preventDefault()"
+                        >Another action</a
+                      >
+                    </li>
+                    <li>
+                      <a href="#" onclick="event.preventDefault()"
+                        >Something else here</a
+                      >
+                    </li>
                   </ul>
                 </li>
               </ul>
             </nav>
             <footer class="code">
-
+              <pre><code>&lt;<b>nav</b>&gt;
-<pre><code>&lt;<b>nav</b>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
@@ -365,13 +472,11 @@
     &lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/forms.html

@@ -1,11 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html')
+    ${require('./_head.html') title=`Forms` description=`All form elements are
-      title=`Forms`
+    fully responsive in pure semantic HTML, allowing forms to scale gracefully
-      description=`All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.`
+    across devices and viewports.` canonical=`forms.html` }
-      canonical=`forms.html`
-    }
   </head>
 
   <body>
@@ -18,30 +16,62 @@
         <section id="forms">
           <hgroup>
             <h1>Forms</h1>
-            <h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
+            <h2>
+              All form elements are fully responsive in pure semantic HTML,
+              allowing forms to scale gracefully across devices and viewports.
+            </h2>
           </hgroup>
-          <p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
+          <p>
-          <p>All native form elements are fully customizable and themeable with CSS variables.</p>
+            Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You
+            can use <code>.grid</code> inside a form.
+          </p>
+          <p>
+            All native form elements are fully customizable and themeable with
+            CSS variables.
+          </p>
           <article aria-label="Form example">
             <form>
               <div class="grid">
                 <label for="firstname">
                   First name
-                  <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+                  <input
+                    type="text"
+                    id="firstname"
+                    name="firstname"
+                    placeholder="First name"
+                    required
+                  />
                 </label>
                 <label for="lastname">
                   Last name
-                  <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+                  <input
+                    type="text"
+                    id="lastname"
+                    name="lastname"
+                    placeholder="Last name"
+                    required
+                  />
                 </label>
               </div>
               <label for="email">Email address</label>
-              <input type="email" id="email" name="email" placeholder="Email address" required>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Email address"
+                required
+              />
               <small>We'll never share your email with anyone else.</small>
-              <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
+              <button
+                type="submit"
+                aria-label="Example button"
+                onclick="event.preventDefault()"
+              >
+                Submit
+              </button>
             </form>
             <footer class="code">
-
+              <pre><code>&lt;<b>form</b>&gt;
-<pre><code>&lt;<b>form</b>&gt;
 
   <em>&lt;!-- Grid --&gt;</em>
   &lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
@@ -68,28 +98,52 @@
   &lt;<b>button</b> <i>type</i>=<u>"submit"</u>&gt;Submit&lt;/<b>button</b>&gt;
 
 &lt;/<b>form</b>&gt;</code></pre>
-
             </footer>
           </article>
           <p>Disabled and validation states:</p>
           <article aria-label="Validation states examples">
             <form class="grid">
-              <input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
+              <input
-              <input type="text" placeholder="Invalid" aria-label="Invalid"  aria-invalid="true">
+                type="text"
-              <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
+                placeholder="Valid"
-              <input type="text" value="Readonly" aria-label="Readonly" readonly>
+                aria-label="Valid"
+                aria-invalid="false"
+              />
+              <input
+                type="text"
+                placeholder="Invalid"
+                aria-label="Invalid"
+                aria-invalid="true"
+              />
+              <input
+                type="text"
+                placeholder="Disabled"
+                aria-label="Disabled"
+                disabled
+              />
+              <input
+                type="text"
+                value="Readonly"
+                aria-label="Readonly"
+                readonly
+              />
             </form>
             <footer class="code">
-
+              <pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
-<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>
-
             </footer>
           </article>
-          <p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
+          <p>
-          <p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
+            <code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a
+            container for radios and checkboxes, providing a consistent
+            <code><i>margin-bottom</i></code> for the set.
+          </p>
+          <p>
+            <code><i>role</i>=<u>"switch"</u></code> on a
+            <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.
+          </p>
           <article aria-label="Select, radios, checkboxes, switch examples">
             <label for="fruit">Fruit</label>
             <select id="fruit" required>
@@ -103,45 +157,74 @@
             <fieldset>
               <legend>Size</legend>
               <label for="small">
-                <input type="radio" id="small" name="size" value="small" checked>
+                <input
+                  type="radio"
+                  id="small"
+                  name="size"
+                  value="small"
+                  checked
+                />
                 Small
               </label>
               <label for="medium">
-                <input type="radio" id="medium" name="size" value="medium">
+                <input type="radio" id="medium" name="size" value="medium" />
                 Medium
               </label>
               <label for="large">
-                <input type="radio" id="large" name="size" value="large">
+                <input type="radio" id="large" name="size" value="large" />
                 Large
               </label>
               <label for="extralarge">
-                <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+                <input
+                  type="radio"
+                  id="extralarge"
+                  name="size"
+                  value="extralarge"
+                  disabled
+                />
                 Extra Large
               </label>
             </fieldset>
             <fieldset>
               <label for="terms">
-                <input type="checkbox" id="terms" name="terms">
+                <input type="checkbox" id="terms" name="terms" />
                 I agree to the Terms and Conditions
               </label>
               <label for="terms_sharing">
-                <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+                <input
+                  type="checkbox"
+                  id="terms_sharing"
+                  name="terms_sharing"
+                  disabled
+                  checked
+                />
                 I agree to share my information with partners
               </label>
             </fieldset>
             <fieldset>
               <label for="switch">
-                <input type="checkbox" id="switch" name="switch" role="switch">
+                <input
+                  type="checkbox"
+                  id="switch"
+                  name="switch"
+                  role="switch"
+                />
                 Publish on my profile
               </label>
               <label for="switch_disabled">
-                <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
+                <input
+                  type="checkbox"
+                  id="switch_disabled"
+                  name="switch_disabled"
+                  role="switch"
+                  disabled
+                  checked
+                />
                 User must change password at next logon
               </label>
             </fieldset>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- Select --&gt;</em>
-<pre><code><em>&lt;!-- Select --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
 &lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
   &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
@@ -192,49 +275,76 @@
     User must change password at next logon
   &lt;/<b>label</b>&gt;
 &lt;/<b>fieldset</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
+          <p>
+            You can change a checkbox to an indeterminate state by setting the
+            <code><i>indeterminate</i></code> property to
+            <code><u>true</u></code>
+          </p>
           <article aria-label="Indeterminate checkbox example">
             <label for="indeterminate-checkbox">
-              <input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
+              <input
+                type="checkbox"
+                id="indeterminate-checkbox"
+                name="indeterminate-checkbox"
+              />
               Select all
             </label>
-            <script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
+            <script>
+              document.getElementById(
+                "indeterminate-checkbox"
+              ).indeterminate = true
+            </script>
             <footer class="code">
-
+              <pre><code>&lt;<b>script</b>&gt;
-<pre><code>&lt;<b>script</b>&gt;
   <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
 &lt;/<b>script</b>&gt;</code></pre>
-
             </footer>
           </article>
 
           <p>Others input types:</p>
-          <article aria-label="Search, file browser, range slider, date, time, color examples">
+          <article
-            <input type="search" id="search" name="search" placeholder="Search">
+            aria-label="Search, file browser, range slider, date, time, color examples"
-            <label for="file">File browser
+          >
-              <input type="file" id="file" name="file">
+            <input
+              type="search"
+              id="search"
+              name="search"
+              placeholder="Search"
+            />
+            <label for="file"
+              >File browser
+              <input type="file" id="file" name="file" />
             </label>
-            <label for="range">Range slider
+            <label for="range"
-              <input type="range" min="0" max="100" value="50" id="range" name="range">
+              >Range slider
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value="50"
+                id="range"
+                name="range"
+              />
             </label>
-            <label for="date">Date
+            <label for="date"
-              <input type="date" id="date" name="date">
+              >Date
+              <input type="date" id="date" name="date" />
             </label>
-            <label for="time">Time
+            <label for="time"
-              <input type="time" id="time" name="time">
+              >Time
+              <input type="time" id="time" name="time" />
             </label>
-            <label for="color">Color
+            <label for="color"
-              <input type="color" id="color" name="color" value="#0eaaaa">
+              >Color
+              <input type="color" id="color" name="color" value="#0eaaaa" />
             </label>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- Search --&gt;</em>
-<pre><code><em>&lt;!-- Search --&gt;</em>
 &lt;<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>&gt;
 
-&lt;!-- File browser --&gt;</em>
+<em>&lt;!-- File browser --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
   &lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
 &lt;/<b>label</b>&gt;
@@ -258,13 +368,11 @@
 &lt;<b>label</b> <i>for</i>=<u>"color"</u>&gt;Color
   &lt;<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
 &lt;/<b>label</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/grid.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Grid` description=`.grid enable a minimal
-      title=`Grid`
+    grid system with auto-layout columns.` canonical=`grid.html` }
-      description=`.grid enable a minimal grid system with auto-layout columns.`
-      canonical=`grid.html`
-    }
   </head>
 
   <body>
@@ -18,7 +15,10 @@
         <section id="grid">
           <hgroup>
             <h1>Grid</h1>
-            <h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
+            <h2>
+              <code>.grid</code> enable a minimal grid system with auto-layout
+              columns.
+            </h2>
           </hgroup>
           <article aria-label="Grid example">
             <div class="grid">
@@ -28,37 +28,81 @@
               <div>4</div>
             </div>
             <footer class="code">
-
+              <pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
-<pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
   &lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
   &lt;<b>div</b>&gt;2&lt;/<b>div</b>&gt;
   &lt;<b>div</b>&gt;3&lt;/<b>div</b>&gt;
   &lt;<b>div</b>&gt;4&lt;/<b>div</b>&gt;
 &lt;/<b>div</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
+          <p>
-          <p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid">merge Pico with the Bootstrap grid system</a>.</p>
+            Columns intentionally collapses below large devices
+            <code>(<u>992px</u>)</code>
+          </p>
+          <p>
+            To go further, discover how to
+            <a
+              href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid"
+              >merge Pico with the Bootstrap grid system</a
+            >.
+          </p>
           <details>
             <summary>
-              <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                height="16px"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
                 <circle cx="12" cy="12" r="10"></circle>
                 <line x1="12" y1="16" x2="12" y2="12"></line>
                 <line x1="12" y1="8" x2="12.01" y2="8"></line>
               </svg>
               &nbsp;More about grids
             </summary>
-            <p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
+            <p>
-            <p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
+              As Pico focuses on native HTML elements, we kept this grid system
-            <p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
+              very minimalist.
-            <p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
+            </p>
-            <p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
+            <p>
+              A complete grid system in flexbox, with all the ordering,
+              offsetting and, breakpoints utilities, can be heavier than the
+              total size of the Pico library. Not really in the Pico spirit.
+            </p>
+            <p>
+              If you need a quick way to prototyping or build a complex layout,
+              you can look at <strong>Flexbox grid layouts</strong>. For
+              example,
+              <a
+                href="https://getbootstrap.com/docs/4.2/getting-started/contents/"
+                >Bootstrap Grid System only</a
+              >
+              or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.
+            </p>
+            <p>
+              If you need a light and custom grid, you can look at
+              <strong>CSS Grid Generators</strong>. For example,
+              <a href="https://cssgrid-generator.netlify.com/"
+                >CSS Grid Generator</a
+              >, <a href="http://grid.layoutit.com/">Layoutit!</a> or
+              <a href="https://griddy.io/">Griddy</a>.
+            </p>
+            <p>
+              Alternatively, you can
+              <a href="https://learncssgrid.com/">learn about CSS Grid</a>.
+            </p>
           </details>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/index.html

@@ -1,11 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Documentation` description=`Pico works
-      title=`Documentation`
+    without package manager or dependencies! There are 4 ways to get started
-      description=`Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
+    with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
-      canonical=``
+    canonical=`` }
-    }
   </head>
 
   <body>
@@ -22,10 +21,23 @@
           </hgroup>
           <p>There are 4 ways to get started with Pico CSS:</p>
           <h3>Install manually</h3>
-          <p><a href="https://github.com/picocss/pico/archive/refs/tags/v1.5.11.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
+          <p>
+            <a
+              href="https://github.com/picocss/pico/archive/refs/tags/v1.5.11.zip"
+              >Download Pico</a
+            >
+            and link <code>/css/pico.min.css</code> in the
+            <code>&lt;<b>head</b>&gt;</code> of your website.
+          </p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
           <h3>Install from CDN</h3>
-          <p>Alternatively, you can use <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a> to link pico.css</p>
+          <p>
+            Alternatively, you can use
+            <a href="https://www.jsdelivr.com/package/npm/@picocss/pico"
+              >jsDelivr CDN</a
+            >
+            to link pico.css
+          </p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"</u>&gt;</code></pre>
           <h3>Install with NPM</h3>
           <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
@@ -33,7 +45,7 @@
           <pre><code><b>composer</b> <i>require</i> <u>picocss/pico</u></code></pre>
           <p>Starter HTML template:</p>
 
-<pre><code><em>&lt;!doctype html&gt;</em>
+          <pre><code><em>&lt;!doctype html&gt;</em>
 &lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
   &lt;<b>head</b>&gt;
     &lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
@@ -47,11 +59,9 @@
     &lt;/<b>main</b>&gt;
   &lt;/<b>body</b>&gt;
 &lt;/<b>html</b>&gt;</code></pre>
-
         </section>
 
         ${require('./_footer.html')}
-
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/loading.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Loading` description=`aria-busy='true'
-      title=`Loading`
+    enable a loading indicator.` canonical=`loading.html` }
-      description=`aria-busy='true' enable a loading indicator.`
-      canonical=`loading.html`
-    }
   </head>
 
   <body>
@@ -18,16 +15,17 @@
         <section id="loading">
           <hgroup>
             <h1>Loading</h1>
-            <h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
+            <h2>
+              <code><i>aria-busy</i>=<u>"true"</u></code> enable a loading
+              indicator.
+            </h2>
           </hgroup>
           <article aria-label="Loading buttons example">
             <button aria-busy="true">Please wait…</button>
             <button aria-busy="true" class="secondary"></button>
             <footer class="code">
-
+              <pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait…&lt;/<b>button</b>&gt;
-<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait…&lt;/<b>button</b>&gt;
 &lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>&gt;&lt;/<b>button</b>&gt;</code></pre>
-
             </footer>
           </article>
           <p>It can be applied to any block:</p>
@@ -35,7 +33,9 @@
           <pre><code>&lt;<b>article</b> <i>aria-busy</i>=<u>"true"</u>&gt;&lt;/<b>article</b>&gt;</code></pre>
           <p>Or any text element:</p>
           <article aria-label="Loading paragraph example">
-            <a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
+            <a href="#" aria-busy="true" onclick="event.preventDefault()"
+              >Generating link, please wait…</a
+            >
             <footer class="code">
               <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait…&lt;/<b>a</b>&gt;</code></pre>
             </footer>
@@ -43,7 +43,6 @@
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/modal.html

@@ -1,10 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Modal` description=`A flexible container
-      title=`Modal` 
+    with graceful spacings across devices and viewports.` canonical=`modal.html`
-      description=`A flexible container with graceful spacings across devices and viewports.`
-      canonical=`modal.html`
     }
   </head>
 
@@ -18,28 +16,45 @@
         <section id="modal">
           <hgroup>
             <h1>Modal</h1>
-            <h2>The classic modal element with graceful spacings across devices and viewports.</h2>
+            <h2>
+              The classic modal element with graceful spacings across devices
+              and viewports.
+            </h2>
           </hgroup>
 
-          <p>Modals are built with <code>&lt;<b>dialog</b>&gt;</code> as a wrapper and <code>&lt;<b>article</b>&gt;</code> as a content container.</p>
+          <p>
-          <p>Inside <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>a</b> <i>class</i>=<u>"close"</u>&gt;</code> is defined to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to be top aligned with a title.</p>
+            Modals are built with <code>&lt;<b>dialog</b>&gt;</code> as a
+            wrapper and <code>&lt;<b>article</b>&gt;</code> as a content
+            container.
+          </p>
+          <p>
+            Inside <code>&lt;<b>header</b>&gt;</code>,
+            <code>&lt;<b>a</b> <i>class</i>=<u>"close"</u>&gt;</code> is defined
+            to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to
+            be top aligned with a title.
+          </p>
 
           <dialog class="example" open>
             <article>
               <header>
-                <a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a>
+                <a
+                  href="#close"
+                  aria-label="Close"
+                  class="close"
+                  onclick="event.preventDefault()"
+                ></a>
                 <p>Modal title</p>
               </header>
               <p>
                 Nunc nec ligula a tortor sollicitudin dictum in vel enim.
                 Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
-                Sed eleifend a dui nec ullamcorper. 
+                Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac
-                Praesent vehicula lacus ac justo accumsan ullamcorper.
+                justo accumsan ullamcorper.
               </p>
             </article>
           </dialog>
 
-<pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
+          <pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
   &lt;<b>article</b>&gt;
     &lt;<b>header</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#close"</u> <i>aria-label</i>=<u>"Close"</u> <i>class</i>=<u>"close"</u>&gt;&lt;/<b>a</b>&gt;
@@ -54,23 +69,37 @@
   &lt;/<b>article</b>&gt;
 &lt;/<b>dialog</b>&gt;</code></pre>
 
-          <p>Inside <code>&lt;<b>footer</b>&gt;</code>, the content is right aligned by default.</p>
+          <p>
+            Inside <code>&lt;<b>footer</b>&gt;</code>, the content is right
+            aligned by default.
+          </p>
 
           <dialog class="example" open>
             <article>
               <h3>Confirm your action!</h3>
               <p>
-                Mauris non nibh vel nisi sollicitudin malesuada. 
+                Mauris non nibh vel nisi sollicitudin malesuada. Donec ut
-                Donec ut sagittis erat. Praesent eu eros felis. 
+                sagittis erat. Praesent eu eros felis. Ut consectetur placerat
-                Ut consectetur placerat pulvinar.
+                pulvinar.
               </p>
               <footer>
-                <a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a>
+                <a
+                  href="#cancel"
+                  role="button"
+                  class="secondary"
+                  onclick="event.preventDefault()"
+                  >Cancel</a
+                ><a
+                  href="#confirm"
+                  role="button"
+                  onclick="event.preventDefault()"
+                  >Confirm</a
+                >
               </footer>
             </article>
           </dialog>
 
-<pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
+          <pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
   &lt;<b>article</b>&gt;
     &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
     &lt;<b>p</b>&gt;
@@ -91,10 +120,15 @@
           </hgroup>
 
           <article>
-            <button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button>
+            <button
+              class="contrast"
+              data-target="modal-example"
+              onclick="toggleModal(event)"
+            >
+              Launch demo modal
+            </button>
             <footer class="code">
-
+              <pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
-<pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
 &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
   <i>data-target</i>=<u>"modal-example"</u>
   <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
@@ -133,15 +167,26 @@
     &lt;/<b>footer</b>&gt;
   &lt;/<b>article</b>&gt;
 &lt;/<b>dialog</b>&gt;</code></pre>
-
             </footer>
           </article>
 
-          <p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
+          <p>
-          <p>As a starting point, you can look at this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>.</p>
+            Pico does not include JavaScript code. You will need to implement
-          <p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b></u>&gt;</code> container.</p>
+            your JS to interact with modals.
+          </p>
+          <p>
+            As a starting point, you can look at this example:
+            <a
+              href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js"
+              >modal.js</a
+            >.
+          </p>
+          <p>
+            To make a modal appear, add the <code><i>open</i></code> attribute
+            to the <code>&lt;<b>dialog</b>&gt;</code> container.
+          </p>
 
-<pre><code><em>&lt;!-- Open modal--&gt;</em>
+          <pre><code><em>&lt;!-- Open modal--&gt;</em>
 &lt;<b>dialog</b> <i>open</i>&gt;
   &lt;<b>article</b>&gt;
   <em>…</em>
@@ -158,49 +203,73 @@
 
           <h2>Utilities</h2>
           <p>Modals come with 3 utility classes.</p>
-          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
+          <p>
-          <p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p>
+            ℹ️&nbsp;These classes are not available in the
+            <a href="classless.html">class-less version</a>.
+          </p>
+          <p>
+            <code>.modal-is-open</code> prevents any scrolling and interactions
+            below the modal.
+          </p>
 
-<pre><code><em>&lt;!doctype html&gt;</em>
+          <pre><code><em>&lt;!doctype html&gt;</em>
 &lt;<b>html</b> <i>class</i>=<u>"modal-is-open"</u>&gt;
   <em>…</em>
 &lt;/<b>html</b>&gt;</code></pre>
 
           <p><code>.modal-is-opening</code> brings an opening animation.</p>
 
-<pre><code><em>&lt;!doctype html&gt;</em>
+          <pre><code><em>&lt;!doctype html&gt;</em>
 &lt;<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-opening"</u>&gt;
   <em>…</em>
 &lt;/<b>html</b>&gt;</code></pre>
 
           <p><code>.modal-is-closing</code> brings a closing animation.</p>
 
-<pre><code><em>&lt;!doctype html&gt;</em>
+          <pre><code><em>&lt;!doctype html&gt;</em>
 &lt;<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-closing"</u>&gt;
   <em>…</em>
 &lt;/<b>html</b>&gt;</code></pre>
-
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
 
     <dialog id="modal-example">
       <article>
-        <a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a>
+        <a
+          href="#close"
+          aria-label="Close"
+          class="close"
+          data-target="modal-example"
+          onclick="toggleModal(event)"
+        ></a>
         <h3>Confirm your action!</h3>
-        <p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p>
+        <p>
+          Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue
+          finibus pellentesque. Nullam finibus risus non semper euismod.
+        </p>
         <footer>
-          <a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a>
+          <a
+            href="#cancel"
+            role="button"
+            class="secondary"
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+            >Cancel</a
+          ><a
+            href="#confirm"
+            role="button"
+            data-target="modal-example"
+            onclick="toggleModal(event)"
+            >Confirm</a
+          >
         </footer>
       </article>
     </dialog>
 
     <script src="js/commons.min.js"></script>
     <script src="js/modal.min.js"></script>
-    
-    </script>
   </body>
 </html>

docs/src/navs.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Navs` description=`The essential navbar
-      title=`Navs`
+    component in pure semantic HTML.` canonical=`navs.html` }
-      description=`The essential navbar component in pure semantic HTML.`
-      canonical=`navs.html`
-    }
   </head>
 
   <body>
@@ -28,12 +25,15 @@
               <ul>
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
-                <li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
+                <li>
+                  <a href="#" onclick="event.preventDefault()" role="button"
+                    >Button</a
+                  >
+                </li>
               </ul>
             </nav>
             <footer class="code">
-
+              <pre><code>&lt;<b>nav</b>&gt;
-<pre><code>&lt;<b>nav</b>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
@@ -43,21 +43,39 @@
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Button&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p><code>&lt;<b>ul</b>&gt;</code> are automatically distributed horizontally.</p>
+          <p>
+            <code>&lt;<b>ul</b>&gt;</code> are automatically distributed
+            horizontally.
+          </p>
           <p><code>&lt;<b>li</b>&gt;</code> are unstyled and inlined.</p>
           <article aria-label="Nav example">
             <nav>
               <ul>
                 <li>
-                  <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
+                  <a
-                    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    href="#"
-                      <line x1="3" y1="12" x2="21" y2="12">
+                    onclick="event.preventDefault()"
-                      </line><line x1="3" y1="6" x2="21" y2="6">
+                    class="secondary"
-                      </line><line x1="3" y1="18" x2="21" y2="18">
+                    aria-label="Menu"
-                      </line>
+                  >
+                    <svg
+                      aria-hidden="true"
+                      focusable="false"
+                      role="img"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      height="16px"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <line x1="3" y1="12" x2="21" y2="12"></line>
+                      <line x1="3" y1="6" x2="21" y2="6"></line>
+                      <line x1="3" y1="18" x2="21" y2="18"></line>
                     </svg>
                   </a>
                 </li>
@@ -67,17 +85,35 @@
               </ul>
               <ul>
                 <li>
-                  <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
+                  <a
-                    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    href="#"
-                      <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+                    onclick="event.preventDefault()"
+                    class="secondary"
+                    aria-label="Twitter"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      focusable="false"
+                      role="img"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      height="16px"
+                      fill="currentColor"
+                      stroke="none"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path
+                        d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+                      ></path>
                     </svg>
                   </a>
                 </li>
               </ul>
             </nav>
             <footer class="code">
-
+              <pre><code>&lt;<b>nav</b>&gt;
-<pre><code>&lt;<b>nav</b>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
@@ -88,10 +124,12 @@
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>Inside <code>&lt;<b>aside</b>&gt;</code>, navs are stacked vertically.</p>
+          <p>
+            Inside <code>&lt;<b>aside</b>&gt;</code>, navs are stacked
+            vertically.
+          </p>
           <article aria-label="Vertical nav example">
             <aside>
               <nav>
@@ -103,8 +141,7 @@
               </nav>
             </aside>
             <footer class="code">
-
+              <pre><code>&lt;<b>aside</b>&gt;
-<pre><code>&lt;<b>aside</b>&gt;
   &lt;<b>nav</b>&gt;
     &lt;<b>ul</b>&gt;
       &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
@@ -113,45 +150,42 @@
     &lt;/<b>ul</b>&gt;
   &lt;/<b>nav</b>&gt;
 &lt;/<b>aside</b>&gt;</code></pre>
+            </footer>
+          </article>
 
-          </footer>
+          <p>
-        </article>
+            With <code><i>aria-label</i>=<u>"breadcrumb"</u></code
+            >, you can turn a nav into a breadcrumb.
+          </p>
 
-        <p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb.</p>
+          <article aria-label="Breadcrumb example">
+            <nav aria-label="breadcrumb">
+              <ul>
+                <li>
+                  <a href="#" onclick="event.preventDefault()">Home</a>
+                </li>
+                <li>
+                  <a href="#" onclick="event.preventDefault()">Category</a>
+                </li>
+                <li>Page</li>
+              </ul>
+            </nav>
 
-        <article aria-label="Breadcrumb example">
+            <footer class="code">
-          <nav aria-label="breadcrumb">
+              <pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
-            <ul>
-              <li>
-                <a href="#" onclick="event.preventDefault()">Home</a>
-              </li>
-              <li>
-                <a href="#" onclick="event.preventDefault()">Category</a>
-              </li>
-              <li>Page</li>
-            </ul>
-          </nav>
-
-          <footer class="code">
-
-<pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Home&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Category&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
     &lt;<b>li</b>&gt;Page&lt;<b>/li</b>&gt;
   &lt;<b>/ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
+            </footer>
+          </article>
+        </section>
 
-          </footer>
+        ${require('./_footer.html')}
-        </article>
+      </div>
-
+    </main>
-      </section>
+    <script src="js/commons.min.js"></script>
-
+  </body>
-      ${require('./_footer.html')}
-
-    </div>
-  </main>
-  <script src="js/commons.min.js"></script>
-</body>
-
 </html>

docs/src/progress.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html')
+    ${require('./_head.html') title=`Progress` description=`Progress bar element
-      title=`Progress`
+    in pure HTML, without JavaScript.` canonical=`progress.html` }
-      description=`Progress bar element in pure HTML, without JavaScript.`
-      canonical=`progress.html`
-    }
   </head>
 
   <body>
@@ -23,24 +20,22 @@
           <article aria-label="Progress bar example">
             <progress value="25" max="100"></progress>
             <footer class="code">
-
+              <pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
-<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>A progress bar without a <code><b>value</b></code> attribute is indeterminate.</p>
+          <p>
+            A progress bar without a <code><b>value</b></code> attribute is
+            indeterminate.
+          </p>
           <article aria-label="Indeterminate progress bar example">
             <progress></progress>
             <footer class="code">
-
+              <pre><code>&lt;<b>progress</b>&gt;&lt;/<b>progress</b>&gt;</code></pre>
-<pre><code>&lt;<b>progress</b>&gt;&lt;/<b>progress</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/rtl.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`RTL (Right-To-Left)` description=`Support
-      title=`RTL (Right-To-Left)`
+    for right-to-left text in Pico with dir='rtl'` canonical=`rtl.html` }
-      description=`Support for right-to-left text in Pico with dir='rtl'`
-      canonical=`rtl.html`
-    }
   </head>
 
   <body>
@@ -20,18 +17,27 @@
             <h1>RTL</h1>
             <h2>Support for right-to-left text in Pico.</h2>
           </hgroup>
-          <p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&gt</code> element (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl">example</a>).</p>
+          <p>
+            To enable RTL in Pico you need to set
+            <code><i>dir</i>=<u>"rtl"</u></code
+            >on the <code>&lt;<b>html</b>&gt</code> element (<a
+              href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl"
+              >example</a
+            >).
+          </p>
 
-<pre><code><em>&lt;!doctype html&gt;</em>
+          <pre><code><em>&lt;!doctype html&gt;</em>
 &lt;<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>&gt;
   <em>...</em>
 &lt;/<b>html</b>&gt;</code></pre>
 
-          <p>ℹ️&nbsp;The RTL feature is still experimental and will probably evolve.</p>
+          <p>
+            ℹ️&nbsp;The RTL feature is still experimental and will probably
+            evolve.
+          </p>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/scroller.html

@@ -1,11 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Horizontal scroller`
-      title=`Horizontal scroller`
+    description=`&lt;figure&gt; acts as a container to make any content
-      description=`&lt;figure&gt; acts as a container to make any content scrollable horizontally.`
+    scrollable horizontally.` canonical=`scroller.html` }
-      canonical=`scroller.html`
-    }
   </head>
 
   <body>
@@ -18,7 +16,10 @@
         <section id="scroller">
           <hgroup>
             <h1>Horizontal scroller</h1>
-            <h2><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h2>
+            <h2>
+              <code>&lt;<b>figure</b>&gt;</code> acts as a container to make any
+              content scrollable horizontally.
+            </h2>
           </hgroup>
           <p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
           <figure>
@@ -78,16 +79,14 @@
             </table>
           </figure>
 
-<pre><code>&lt;<b>figure</b>&gt;
+          <pre><code>&lt;<b>figure</b>&gt;
   &lt;<b>table</b>&gt;
     …
   &lt;/<b>table</b>&gt;
 &lt;/<b>figure</b>&gt;</code></pre>
-
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/tables.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Tables` description=`Default styles for
-      title=`Tables`
+    tables without .classes` canonical=`tables.html` }
-      description=`Default styles for tables without .classes`
-      canonical=`tables.html`
-    }
   </head>
 
   <body>
@@ -71,7 +68,7 @@
             </table>
           </figure>
 
-<pre><code>&lt;<b>table</b>&gt;
+          <pre><code>&lt;<b>table</b>&gt;
   &lt;<b>thead</b>&gt;
     &lt;<b>tr</b>&gt;
       &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
@@ -120,7 +117,9 @@
   &lt;/<b>tfoot</b>&gt;
 &lt;/<b>table</b>&gt;</code></pre>
 
-          <p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>
+          <p>
+            <code><i>role</i>=<u>"grid"</u></code> enable striped rows.
+          </p>
           <figure>
             <table role="grid">
               <thead>
@@ -162,14 +161,12 @@
             </table>
           </figure>
 
-<pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
+          <pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
   <em>…</em>
 &lt;/<b>table</b>&gt;</code></pre>
-
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/tooltips.html

@@ -1,11 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`Tooltips` description=`Enable tooltips
-      title=`Tooltips`
+    everywhere in pure HTML, without JavaScript.` canonical=`tooltips.html` }
-      description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
-      canonical=`tooltips.html`
-    }
   </head>
 
   <body>
@@ -18,46 +15,72 @@
         <section id="tooltips">
           <hgroup>
             <h1>Tooltips</h1>
-            <h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
+            <h2>
+              Enable tooltips everywhere in pure HTML, without JavaScript.
+            </h2>
           </hgroup>
           <article aria-label="Tooltips examples">
-            <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
+            <p>
+              Tooltip on a
+              <a
+                href="#"
+                onclick="event.preventDefault()"
+                data-tooltip="Tooltip"
+                >link</a
+              >
+            </p>
             <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
-            <p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
+            <p>
+              <button data-tooltip="Tooltip" aria-label="Example button">
+                Tooltip on a button
+              </button>
+            </p>
             <footer class="code">
-
+              <pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
-<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
 &lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
 &lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;
 </code></pre>
-
             </footer>
           </article>
 
-          <p><code><i>data-placement</i></code> with the values <code><u>top</u></code>, <code><u>right</u></code>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to control the position of the tooltip.</p>
+          <p>
+            <code><i>data-placement</i></code> with the values
+            <code><u>top</u></code
+            >, <code><u>right</u></code
+            >, <code><u>bottom</u></code> or <code><u>left</u></code> is used to
+            control the position of the tooltip.
+          </p>
 
           <article aria-label="Tooltips examples">
             <div class="grid">
-              <div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>
+              <div class="top">
-              <div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>
+                <button data-tooltip="Top" data-placement="top">Top</button>
-              <div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>
+              </div>
-              <div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>
+              <div class="right">
+                <button data-tooltip="Right" data-placement="right">
+                  Right
+                </button>
+              </div>
+              <div class="bottom">
+                <button data-tooltip="Bottom" data-placement="bottom">
+                  Bottom
+                </button>
+              </div>
+              <div class="left">
+                <button data-tooltip="Left" data-placement="left">Left</button>
+              </div>
             </div>
             <footer class="code">
-
+              <pre><code>&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top&lt;/<b>button</b>&gt;
-<pre><code>&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top&lt;/<b>button</b>&gt;
 &lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right&lt;/<b>button</b>&gt;
 &lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom&lt;/<b>button</b>&gt;
 &lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left&lt;/<b>button</b>&gt;
 </code></pre>
-
             </footer>
           </article>
-
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

docs/src/typography.html

@@ -1,11 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html')
+    ${require('./_head.html') title=`Typography` description=`All typographic
-      title=`Typography`
+    elements are responsive, allowing text to scale gracefully across devices
-      description=`All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.`
+    and viewports.` canonical=`typography.html` }
-      canonical=`typography.html`
-    }
   </head>
 
   <body>
@@ -163,8 +161,14 @@
               </div>
             </div>
           </article>
-          <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
+          <p>
-          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
+            Links come with <code>.secondary</code> and
+            <code>.contrast</code> styles.
+          </p>
+          <p>
+            ℹ️&nbsp;These classes are not available in the
+            <a href="classless.html">class-less version</a>.
+          </p>
           <article aria-label="Links examples">
             <a href="#" onclick="event.preventDefault()">Primary</a><br />
             <a href="#" onclick="event.preventDefault()" class="secondary"

docs/src/we-love-classes.html

@@ -1,11 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title=`We love .classes` description=`As a
-      title=`We love .classes`
+    starting point, Pico chose to be as neutral and semantic as possible using
-      description=`As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers.`
+    very few .classes. But of course, .classes are not a bad practice at all.
-      canonical=`we-love-classes.html`
+    Feel free to use modifiers.` canonical=`we-love-classes.html` }
-    }
   </head>
 
   <body>
@@ -17,20 +16,27 @@
       <div role="document">
         <section id="we-love-classes">
           <h1>We love <code>.classes</code></h1>
-          <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
+          <p>
-          <p>But of course, <code>.classes</code> are not a bad practice at all.</p>
+            As a starting point, Pico chose to be as neutral and semantic as
+            possible using very few <code>.classes</code>
+          </p>
+          <p>
+            But of course, <code>.classes</code> are not a bad practice at all.
+          </p>
           <p>Feel free to use <em>modifiers</em>.</p>
           <div data-theme="valid">
             <pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
           </div>
-          <p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
+          <p>
+            Just try to keep your HTML clean and semantic to keep the Pico
+            spirit.
+          </p>
           <div data-theme="invalid">
             <pre><code>&lt;<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
           </div>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>