wip

4 files changed, 613 insertions, 0 deletions

diff --git a/htmx/static/pico-1.5.11/docs/js/src/color-picker.js b/htmx/static/pico-1.5.11/docs/js/src/color-picker.js
new file mode 100644
index 0000000..4a8fb86
--- /dev/null
+++ b/htmx/static/pico-1.5.11/docs/js/src/color-picker.js
@@ -0,0 +1,173 @@
+/*
+ * Color Picker
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2023 - Licensed under MIT
+ */
+
+export const colorPicker = {
+  
+  // Config
+  colors: null,
+  buttonsTarget: '#customization article[data-theme="generated"]',
+  selectorButton: '#customization button[data-color]',
+  selectorSection: '#customization',
+  buttons: null,
+  generatedStyles: null,
+
+  // Init
+  init() {
+    this.generateButtons();
+    this.setActiveButton('pink');
+    this.generateTheme('pink');
+  },
+
+  // Generate Buttons
+  generateButtons() {
+    // Init
+    let innerButtons = '';
+    let innerStyles = '';
+
+    // Loop colors
+    for (const color in this.colors) {
+      // Buttons
+      innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
+
+      // Styles
+      innerStyles += `
+        button[data-color="${color}"] {
+          background-color: ${this.colors[color]['600']};
+        }
+        [data-theme="light"] button[data-color="${color}"]:hover,
+        [data-theme="light"] button[data-color="${color}"]:active,
+        [data-theme="light"] button[data-color="${color}"]:focus {
+          background-color: ${this.colors[color]['700']}; '
+        }
+        [data-theme="dark"] button[data-color="${color}"]:hover,
+        [data-theme="dark"] button[data-color="${color}"]:active,
+        [data-theme="dark"] button[data-color="${color}"]:focus {
+          background-color: ${this.colors[color]['500']};
+        }`;
+    }
+
+    // Insert buttons
+    let containerButtons = document.createElement('FIGURE');
+    containerButtons.innerHTML = innerButtons;
+    document.querySelector(this.buttonsTarget).before(containerButtons);
+
+    // Buttons listeners
+    this.buttons = document.querySelectorAll(this.selectorButton);
+    this.buttons.forEach( button => { 
+      button.addEventListener('click', event => {
+        let color = event.target.getAttribute('data-color');
+        this.setActiveButton(color);
+        this.generateTheme(color);
+      }, false);
+    });
+
+    // Insert CSS Styles
+    let containerStyles = document.createElement('STYLE');
+    containerStyles.setAttribute('title', 'color-picker');
+    this.generatedStyles = this.minifyCSS(innerStyles);
+    containerStyles.innerHTML = this.generatedStyles;
+    document.querySelector('head').appendChild(containerStyles);
+  },
+
+  // Set active button
+  setActiveButton(color) {
+    // Remove all active states
+    this.buttons.forEach( button => {
+      button.removeAttribute('class');
+    });
+
+    // Set active state
+    let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
+    buttonPicked.setAttribute('class', 'picked');
+  },
+
+  // Set active button
+  generateTheme(color) {
+    let name = color;
+    let data = this.colors[color];
+
+    // 1. Update name and colors in demo code
+    let swaps = {
+      '.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ',
+      '.c500': data[500],
+      '.c600': data[600],
+      '.c700': data[700],
+      '.c600-outline-light': this.hexToRgbA(data[600], 0.125),
+      '.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
+      '.inverse': data['inverse'],
+    };
+
+    Object.keys(swaps).forEach( swap => {
+      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
+      targets.forEach( target => {
+        target.innerHTML = swaps[swap];
+      });
+    });
+
+    // 2. Update CSS Styles
+    const innerStyles = `
+    [data-theme="generated"] {
+      --h4-color: ${data[700]};
+      --primary: ${data[600]};
+      --primary-hover: ${data[700]};
+      --primary-focus: ${this.hexToRgbA(data[600], 0.125)};
+      --primary-inverse: ${data['inverse']};
+    }
+    @media only screen and (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) [data-theme="generated"] {
+        --h4-color: ${data[400]};
+        --primary: ${data[600]};
+        --primary-hover: ${data[500]};
+        --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
+        --primary-inverse: ${data['inverse']};
+      }
+    }
+    [data-theme="dark"] [data-theme="generated"] {
+      --h4-color: ${data[500]};
+      --primary: ${data[600]};
+      --primary-hover: ${data[500]};
+      --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
+      --primary-inverse: ${data['inverse']};
+    }
+    [data-theme="generated"] {
+      --form-element-active-border-color: var(--primary);
+      --form-element-focus-color: var(--primary-focus);
+      --switch-color: var(--primary-inverse);
+      --switch-checked-background-color: var(--primary);
+    }`;
+
+    document.querySelector('style[title="color-picker"]').innerHTML =
+      this.generatedStyles + this.minifyCSS(innerStyles);
+  },
+
+  // Minify CSS
+  minifyCSS(css) {
+    return css.replace(/^ +/gm, '');
+  },
+
+  // Hexadecimal to Rgba
+  hexToRgbA(hex, alpha) {
+    let c;
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+      c = hex.substring(1).split('');
+      if (c.length == 3) {
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+      }
+      c = '0x' + c.join('');
+      return (
+        'rgba(' +
+        [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
+        ', ' +
+        alpha +
+        ')'
+      );
+    }
+    throw new Error('Bad Hex');
+  },
+};
+
+export default colorPicker;
diff --git a/htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js b/htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js
new file mode 100644
index 0000000..7cb8e50
--- /dev/null
+++ b/htmx/static/pico-1.5.11/docs/js/src/material-design-colors.js
@@ -0,0 +1,303 @@
+// Source: https://material.io/design/color/the-color-system.html
+export const materialDesignColors = {
+  red: {
+    50: '#ffebee',
+    100: '#ffcdd2',
+    200: '#ef9a9a',
+    300: '#e57373',
+    400: '#ef5350',
+    500: '#f44336',
+    600: '#e53935',
+    700: '#d32f2f',
+    800: '#c62828',
+    900: '#b71c1c',
+    a100: '#ff8a80',
+    a200: '#ff5252',
+    a400: '#ff1744',
+    a700: '#d50000',
+    inverse: '#FFF',
+  },
+  pink: {
+    50: '#fce4ec',
+    100: '#f8bbd0',
+    200: '#f48fb1',
+    300: '#f06292',
+    400: '#ec407a',
+    500: '#e91e63',
+    600: '#d81b60',
+    700: '#c2185b',
+    800: '#ad1457',
+    900: '#880e4f',
+    a100: '#ff80ab',
+    a200: '#ff4081',
+    a400: '#f50057',
+    a700: '#c51162',
+    inverse: '#FFF',
+  },
+  purple: {
+    50: '#f3e5f5',
+    100: '#e1bee7',
+    200: '#ce93d8',
+    300: '#ba68c8',
+    400: '#ab47bc',
+    500: '#9c27b0',
+    600: '#8e24aa',
+    700: '#7b1fa2',
+    800: '#6a1b9a',
+    900: '#4a148c',
+    a100: '#ea80fc',
+    a200: '#e040fb',
+    a400: '#d500f9',
+    a700: '#aa00ff',
+    inverse: '#FFF',
+  },
+  'deep-purple': {
+    50: '#ede7f6',
+    100: '#d1c4e9',
+    200: '#b39ddb',
+    300: '#9575cd',
+    400: '#7e57c2',
+    500: '#673ab7',
+    600: '#5e35b1',
+    700: '#512da8',
+    800: '#4527a0',
+    900: '#311b92',
+    a100: '#b388ff',
+    a200: '#7c4dff',
+    a400: '#651fff',
+    a700: '#6200ea',
+    inverse: '#FFF',
+  },
+  indigo: {
+    50: '#e8eaf6',
+    100: '#c5cae9',
+    200: '#9fa8da',
+    300: '#7986cb',
+    400: '#5c6bc0',
+    500: '#3f51b5',
+    600: '#3949ab',
+    700: '#303f9f',
+    800: '#283593',
+    900: '#1a237e',
+    a100: '#8c9eff',
+    a200: '#536dfe',
+    a400: '#3d5afe',
+    a700: '#304ffe',
+    inverse: '#FFF',
+  },
+  blue: {
+    50: '#e3f2fd',
+    100: '#bbdefb',
+    200: '#90caf9',
+    300: '#64b5f6',
+    400: '#42a5f5',
+    500: '#2196f3',
+    600: '#1e88e5',
+    700: '#1976d2',
+    800: '#1565c0',
+    900: '#0d47a1',
+    a100: '#82b1ff',
+    a200: '#448aff',
+    a400: '#2979ff',
+    a700: '#2962ff',
+    inverse: '#FFF',
+  },
+  'light-blue': {
+    50: '#e1f5fe',
+    100: '#b3e5fc',
+    200: '#81d4fa',
+    300: '#4fc3f7',
+    400: '#29b6f6',
+    500: '#03a9f4',
+    600: '#039be5',
+    700: '#0288d1',
+    800: '#0277bd',
+    900: '#01579b',
+    a100: '#80d8ff',
+    a200: '#40c4ff',
+    a400: '#00b0ff',
+    a700: '#0091ea',
+    inverse: '#FFF',
+  },
+  cyan: {
+    50: '#e0f7fa',
+    100: '#b2ebf2',
+    200: '#80deea',
+    300: '#4dd0e1',
+    400: '#26c6da',
+    500: '#00bcd4',
+    600: '#00acc1',
+    700: '#0097a7',
+    800: '#00838f',
+    900: '#006064',
+    a100: '#84ffff',
+    a200: '#18ffff',
+    a400: '#00e5ff',
+    a700: '#00b8d4',
+    inverse: '#FFF',
+  },
+  teal: {
+    50: '#e0f2f1',
+    100: '#b2dfdb',
+    200: '#80cbc4',
+    300: '#4db6ac',
+    400: '#26a69a',
+    500: '#009688',
+    600: '#00897b',
+    700: '#00796b',
+    800: '#00695c',
+    900: '#004d40',
+    a100: '#a7ffeb',
+    a200: '#64ffda',
+    a400: '#1de9b6',
+    a700: '#00bfa5',
+    inverse: '#FFF',
+  },
+  green: {
+    50: '#e8f5e9',
+    100: '#c8e6c9',
+    200: '#a5d6a7',
+    300: '#81c784',
+    400: '#66bb6a',
+    500: '#4caf50',
+    600: '#43a047',
+    700: '#388e3c',
+    800: '#2e7d32',
+    900: '#1b5e20',
+    a100: '#b9f6ca',
+    a200: '#69f0ae',
+    a400: '#00e676',
+    a700: '#00c853',
+    inverse: '#FFF',
+  },
+  'light-green': {
+    50: '#f1f8e9',
+    100: '#dcedc8',
+    200: '#c5e1a5',
+    300: '#aed581',
+    400: '#9ccc65',
+    500: '#8bc34a',
+    600: '#7cb342',
+    700: '#689f38',
+    800: '#558b2f',
+    900: '#33691e',
+    a100: '#ccff90',
+    a200: '#b2ff59',
+    a400: '#76ff03',
+    a700: '#64dd17',
+    inverse: '#FFF',
+  },
+  lime: {
+    50: '#f9fbe7',
+    100: '#f0f4c3',
+    200: '#e6ee9c',
+    300: '#dce775',
+    400: '#d4e157',
+    500: '#cddc39',
+    600: '#c0ca33',
+    700: '#afb42b',
+    800: '#9e9d24',
+    900: '#827717',
+    a100: '#f4ff81',
+    a200: '#eeff41',
+    a400: '#c6ff00',
+    a700: '#aeea00',
+    inverse: 'rgba(0, 0, 0, 0.75)',
+  },
+  yellow: {
+    50: '#fffde7',
+    100: '#fff9c4',
+    200: '#fff59d',
+    300: '#fff176',
+    400: '#ffee58',
+    500: '#ffeb3b',
+    600: '#fdd835',
+    700: '#fbc02d',
+    800: '#f9a825',
+    900: '#f57f17',
+    a100: '#ffff8d',
+    a200: '#ffff00',
+    a400: '#ffea00',
+    a700: '#ffd600',
+    inverse: 'rgba(0, 0, 0, 0.75)',
+  },
+  amber: {
+    50: '#fff8e1',
+    100: '#ffecb3',
+    200: '#ffe082',
+    300: '#ffd54f',
+    400: '#ffca28',
+    500: '#ffc107',
+    600: '#ffb300',
+    700: '#ffa000',
+    800: '#ff8f00',
+    900: '#ff6f00',
+    a100: '#ffe57f',
+    a200: '#ffd740',
+    a400: '#ffc400',
+    a700: '#ffab00',
+    inverse: 'rgba(0, 0, 0, 0.75)',
+  },
+  orange: {
+    50: '#fff3e0',
+    100: '#ffe0b2',
+    200: '#ffcc80',
+    300: '#ffb74d',
+    400: '#ffa726',
+    500: '#ff9800',
+    600: '#fb8c00',
+    700: '#f57c00',
+    800: '#ef6c00',
+    900: '#e65100',
+    a100: '#ffd180',
+    a200: '#ffab40',
+    a400: '#ff9100',
+    a700: '#ff6d00',
+    inverse: '#FFF',
+  },
+  'deep-orange': {
+    50: '#fbe9e7',
+    100: '#ffccbc',
+    200: '#ffab91',
+    300: '#ff8a65',
+    400: '#ff7043',
+    500: '#ff5722',
+    600: '#f4511e',
+    700: '#e64a19',
+    800: '#d84315',
+    900: '#bf360c',
+    a100: '#ff9e80',
+    a200: '#ff6e40',
+    a400: '#ff3d00',
+    a700: '#dd2c00',
+    inverse: '#FFF',
+  },
+  grey: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#eeeeee',
+    300: '#e0e0e0',
+    400: '#bdbdbd',
+    500: '#9e9e9e',
+    600: '#757575',
+    700: '#616161',
+    800: '#424242',
+    900: '#212121',
+    inverse: '#FFF',
+  },
+  'blue-grey': {
+    50: '#eceff1',
+    100: '#cfd8dc',
+    200: '#b0bec5',
+    300: '#90a4ae',
+    400: '#78909c',
+    500: '#607d8b',
+    600: '#546e7a',
+    700: '#455a64',
+    800: '#37474f',
+    900: '#263238',
+    inverse: '#FFF',
+  },
+};
+
+export default materialDesignColors;
diff --git a/htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js b/htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js
new file mode 100644
index 0000000..ed12aae
--- /dev/null
+++ b/htmx/static/pico-1.5.11/docs/js/src/theme-switcher.js
@@ -0,0 +1,95 @@
+/*
+ * Theme switcher
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2023 - Licensed under MIT
+ */
+
+export const themeSwitcher = {
+  
+  // Config
+  _scheme: 'auto',
+  change: {
+    light: '<i>Turn on dark mode</i>',
+    dark: '<i>Turn off dark mode</i>',
+  },
+  buttonsTarget: '.theme-switcher',
+  localStorageKey: 'picoPreferredColorScheme',
+
+  // Init
+  init() {
+    this.scheme = this.schemeFromLocalStorage;
+    this.initSwitchers();
+  },
+
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    if (typeof window.localStorage !== 'undefined') {
+      if (window.localStorage.getItem(this.localStorageKey) !== null) {
+        return window.localStorage.getItem(this.localStorageKey);
+      }
+    }
+    return this._scheme;
+  },
+
+  // Preferred color scheme
+  get preferredColorScheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  },
+
+  // Init switchers
+  initSwitchers() {
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach(button => {
+      button.addEventListener('click', () => {
+        this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
+      }, false);
+    });
+  },
+
+  // Add new button
+  addButton(config) {
+    let button = document.createElement(config.tag);
+    button.className = config.class;
+    document.querySelector(config.target).appendChild(button);
+  },
+
+  // Set scheme
+  set scheme(scheme) {
+    if (scheme == 'auto') {
+      this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
+    }
+    else if (scheme == 'dark' || scheme == 'light') {
+      this._scheme = scheme;
+    }
+    this.applyScheme();
+    this.schemeToLocalStorage();
+  },
+
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+  // Apply scheme
+  applyScheme() {
+    document.querySelector('html').setAttribute('data-theme', this.scheme);
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach(
+      button => {
+        const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
+        button.innerHTML = text;
+        button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
+      }
+    );
+  },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    if (typeof window.localStorage !== 'undefined') {
+      window.localStorage.setItem(this.localStorageKey, this.scheme);
+    }
+  },
+};
+
+export default themeSwitcher;
diff --git a/htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js b/htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js
new file mode 100644
index 0000000..9734191
--- /dev/null
+++ b/htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js
@@ -0,0 +1,42 @@
+/*
+ * Toggle navigation
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2023 - Licensed under MIT
+ */
+
+export const toggleNavigation = {
+  
+  // Config
+  _state: 'closed-on-mobile',
+  toggleLink: document.getElementById('toggle-docs-navigation'),
+  nav: document.querySelector('main > aside > nav'),
+
+  // Init
+  init() {
+    this.onToggleClick()
+  },
+
+  onToggleClick() {
+    this.toggleLink.addEventListener('click', event => {
+      event.preventDefault();
+      this.state == 'closed-on-mobile' 
+        ? this.state = 'open' 
+        : this.state = 'closed-on-mobile';
+      this.nav.removeAttribute('class');
+      this.nav.classList.add(this.state);
+    }, false);
+  },
+
+  // Get state
+  get state() {
+    return this._state;
+  },
+
+  // Set state
+  set state(state) {
+    this._state = state;
+  },
+};
+
+export default toggleNavigation;
\ No newline at end of file