maverick-wave 5.6.0 → 5.8.0

package/index.html

@@ -21,7 +21,10 @@
       @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css')
       layer(vendor);
     </style>
-    <link rel="stylesheet" href="maverick-wave.min.css" />
+    <!-- ?v= so a release actually reaches a browser that has the last one
+         cached: the filename never changes, and without it a stale stylesheet
+         survives a normal reload -->
+    <link rel="stylesheet" href="maverick-wave.min.css?v={{VERSION}}" />
     <!-- Favicons -->
     <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
     <link
@@ -121,40 +124,50 @@
 
       /* Palette switcher, showcase only. The framework derives every tone from
          the root colors, so the panel writes nothing but those. */
-      .palette-fab {
-        position: fixed;
-        right: 18px;
-        bottom: 18px;
-        z-index: 400;
-        width: 52px;
-        height: 52px;
-        border-radius: 50%;
-        border: 1px solid var(--mw-border-accent);
+      .palette-toggle {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 40px;
+        flex-shrink: 0;
+        border: none;
+        border-radius: calc(10px * var(--mw-radius-scale, 1));
         background: var(--mw-primary-color);
         color: var(--mw-primary-accent-text-color);
-        box-shadow: var(--mw-elevation-4);
-        font-size: 1.25rem;
+        font-size: 1.1rem;
         cursor: pointer;
         transition: var(--mw-transition);
       }
 
-      .palette-fab:hover {
+      /* Below sm the panel would cover the very thing it is changing */
+      @media (min-width: 576px) {
+        .palette-toggle {
+          display: flex;
+        }
+      }
+
+      .palette-toggle:hover {
         background: var(--mw-primary-color-hover);
       }
 
-      .palette-fab:active {
-        transform: scale(0.92);
+      .palette-toggle:active {
+        transform: scale(0.94);
       }
 
       .palette-panel {
         position: fixed;
-        right: 18px;
-        bottom: 82px;
+        top: calc(var(--mw-header-height) + 8px);
+        /* Flush with the container edge, so it lines up with the button in the
+           header rather than sitting further out */
+        right: max(18px, calc((100% - var(--mw-container-width)) / 2));
         z-index: 400;
-        width: 360px;
+        /* Wide enough for three palettes in a row; the min() is for the narrow
+           end, where the panel would otherwise reach past the viewport */
+        width: min(440px, calc(100% - 24px));
         /* The variant list makes the panel taller than a laptop in landscape -
-           the top of it would be behind the browser chrome without this */
-        max-height: calc(100dvh - 120px);
+           it takes what is left under the header and scrolls the rest */
+        max-height: calc(100dvh - var(--mw-header-height) - 24px);
         overflow-y: auto;
         overscroll-behavior: contain;
         padding: 18px;
@@ -162,6 +175,26 @@
         border: 1px solid var(--mw-border);
         background: var(--mw-card-background);
         box-shadow: var(--mw-elevation-5);
+        transform: translateY(0);
+        opacity: 1;
+        /* display is in the list so allow-discrete keeps the panel mounted
+           through the fade out - `hidden` is the state the script writes */
+        transition-property: opacity, transform, display;
+        transition-duration: var(--mw-duration-base);
+        transition-timing-function: var(--mw-ease-out);
+        transition-behavior: allow-discrete;
+      }
+
+      @starting-style {
+        .palette-panel {
+          opacity: 0;
+          transform: translateY(-12px);
+        }
+      }
+
+      .palette-panel[hidden] {
+        opacity: 0;
+        transform: translateY(-12px);
       }
 
       .palette-heading {
@@ -178,7 +211,7 @@
 
       .palette-grid {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(3, 1fr);
         gap: 6px;
       }
 
@@ -288,7 +321,7 @@
 
       .variant-row select {
         flex-shrink: 0;
-        max-width: 110px;
+        max-width: 135px;
         padding: 3px 6px;
         font-size: 0.75rem;
         color: var(--mw-text-color);
@@ -336,8 +369,18 @@
         background: var(--mw-primary-accent-text-color);
       }
 
-      .variant-setup {
+      .variant-setup-label {
+        display: block;
         margin-top: 14px;
+        margin-bottom: 5px;
+        font-size: 0.7rem;
+        color: var(--mw-text-muted-color);
+      }
+
+      .variant-setup {
+        display: block;
+        width: 100%;
+        resize: vertical;
         padding: 10px;
         border-radius: 8px;
         border: 1px solid var(--mw-border);
@@ -349,25 +392,9 @@
         white-space: pre-wrap;
         word-break: break-word;
       }
-
-      @media (max-width: 480px) {
-        .palette-fab {
-          right: 12px;
-          bottom: 12px;
-          width: 46px;
-          height: 46px;
-        }
-
-        .palette-panel {
-          right: 12px;
-          left: 12px;
-          bottom: 68px;
-          width: auto;
-        }
-      }
     </style>
 
-    <script src="maverick-wave.min.js"></script>
+    <script src="maverick-wave.min.js?v={{VERSION}}"></script>
   </head>
 
   <body>
@@ -895,15 +922,22 @@
       // root element repaints the page - bar, ink, borders and tints included.
       // Nothing is persisted - a palette is for looking at, a reload is the way back.
       document.addEventListener('DOMContentLoaded', () => {
-        const fab = document.getElementById('palette-fab');
+        const toggleBtn = document.getElementById('palette-toggle');
         const panel = document.getElementById('palette-panel');
         const primaryInput = document.getElementById('palette-primary');
         const secondaryInput = document.getElementById('palette-secondary');
         const items = [...document.querySelectorAll('.palette-item')];
-        if (!fab || !panel) return;
+        if (!toggleBtn || !panel) return;
 
         const root = document.documentElement;
 
+        // The values the markup ships with, so the setup box below can tell a
+        // chosen colour from the built-in one and print only the difference
+        const BUILT_IN = {
+          primary: primaryInput.value,
+          secondary: secondaryInput.value,
+        };
+
         const DARK_INK = '#131925';
         const LIGHT_INK = '#f2f6fc';
 
@@ -939,6 +973,7 @@
           void root.offsetHeight;
           root.classList.remove('mw-theme-switching');
           window.mwRefreshColorSwatches?.();
+          window.mwRefreshSetup?.();
         };
 
         const paint = (name, color) => {
@@ -980,10 +1015,10 @@
 
         const toggle = (open) => {
           panel.hidden = !open;
-          fab.setAttribute('aria-expanded', String(open));
+          toggleBtn.setAttribute('aria-expanded', String(open));
         };
 
-        fab.addEventListener('click', (event) => {
+        toggleBtn.addEventListener('click', (event) => {
           event.stopPropagation();
           toggle(panel.hidden);
         });
@@ -993,6 +1028,79 @@
         document.addEventListener('keydown', (event) => {
           if (event.key === 'Escape') toggle(false);
         });
+
+        // The seam to the variants panel below, which prints and reads the whole
+        // setup - the palette is half of it. Only inline values count as chosen:
+        // anything still coming from the stylesheet is the built-in one.
+        const PAGE_GROUNDS = {
+          dark: '--mw-dark-page-background',
+          light: '--mw-light-page-background',
+        };
+
+        window.mwPalette = {
+          read: () => ({
+            primary: root.style.getPropertyValue('--mw-primary-color') || null,
+            secondary:
+              root.style.getPropertyValue('--mw-secondary-color') || null,
+            // The label colour ink() measured for each fill. It has to travel
+            // with the setup: a project that only copies the two brand colours
+            // keeps the stock accent text, and on a light brand tone that is an
+            // unreadable button. write() recomputes it, so pasting it back is
+            // harmless.
+            primaryInk:
+              root.style.getPropertyValue('--mw-primary-accent-text-color') ||
+              null,
+            secondaryInk:
+              root.style.getPropertyValue('--mw-secondary-accent-text-color') ||
+              null,
+            dark: root.style.getPropertyValue(PAGE_GROUNDS.dark) || null,
+            light: root.style.getPropertyValue(PAGE_GROUNDS.light) || null,
+          }),
+
+          write: ({ primary, secondary, dark, light }) => {
+            const current = window.mwPalette.read();
+            const same =
+              current.primary === primary &&
+              current.secondary === secondary &&
+              current.dark === dark &&
+              current.light === light;
+            // Typing into the setup box fires per keystroke, and settle() forces
+            // a reflow - so a run that changes nothing has to cost nothing
+            if (same) return;
+
+            [
+              ['primary', primary, primaryInput],
+              ['secondary', secondary, secondaryInput],
+            ].forEach(([name, value, input]) => {
+              if (value) {
+                paint(name, value);
+                input.value = value;
+              } else {
+                root.style.removeProperty(`--mw-${name}-color`);
+                root.style.removeProperty(`--mw-${name}-accent-text-color`);
+                input.value = BUILT_IN[name];
+              }
+            });
+
+            Object.entries(PAGE_GROUNDS).forEach(([key, prop]) => {
+              const value = key === 'dark' ? dark : light;
+              if (value) root.style.setProperty(prop, value);
+              else root.style.removeProperty(prop);
+            });
+
+            const shownPrimary = primary || BUILT_IN.primary;
+            const shownSecondary = secondary || BUILT_IN.secondary;
+            items.forEach((item) =>
+              item.classList.toggle(
+                'mw-active',
+                item.dataset.primary === shownPrimary &&
+                  item.dataset.secondary === shownSecondary
+              )
+            );
+
+            settle();
+          },
+        };
       });
 
       // just for the showcase: the variant switches. Each one is a class on <html>
@@ -1014,13 +1122,36 @@
             : input.checked;
 
         const render = () => {
+          // Never while it is being typed in - the box is an input as well as a
+          // readout, and rewriting it under the cursor would eat the paste
+          if (document.activeElement === setup) return;
+
           const classes = [];
           const notes = [];
           const props = [];
 
+          // The palette is part of the setup, and it is printed first because a
+          // project sets its brand colours before it retunes anything else
+          const palette = window.mwPalette?.read() ?? {};
+          [
+            ['--mw-primary-color', palette.primary],
+            ['--mw-primary-accent-text-color', palette.primaryInk],
+            ['--mw-secondary-color', palette.secondary],
+            ['--mw-secondary-accent-text-color', palette.secondaryInk],
+            ['--mw-dark-page-background', palette.dark],
+            ['--mw-light-page-background', palette.light],
+          ].forEach(([prop, value]) => {
+            if (value) props.push(`  ${prop}: ${value};`);
+          });
+
           controls.forEach((control) => {
             if (control.type !== 'checkbox') {
-              if (control.value) {
+              // A select whose options are class names picks one of a set the
+              // markup cannot hold at the same time - a shape is one or none
+              if (!control.value) return;
+              if (control.hasAttribute('data-variant-classes')) {
+                classes.push(control.value);
+              } else {
                 props.push(
                   `  ${control.dataset.variantProp}: ${control.value};`
                 );
@@ -1047,16 +1178,22 @@
           lines.push(...notes);
           if (props.length) lines.push(':root {', ...props, '}');
 
-          setup.textContent = lines.length
+          setup.value = lines.length
             ? lines.join('\n')
             : 'Default setup - nothing to change.';
         };
 
+        const optionClasses = (control) =>
+          [...control.options].map((option) => option.value).filter(Boolean);
+
         const apply = (control) => {
           if (control.type === 'checkbox') {
             const target = control.dataset.variantTarget;
             const el = target ? document.querySelector(target) : root;
             el?.classList.toggle(control.dataset.variantClass, isOn(control));
+          } else if (control.hasAttribute('data-variant-classes')) {
+            root.classList.remove(...optionClasses(control));
+            if (control.value) root.classList.add(control.value);
           } else if (control.value) {
             root.style.setProperty(control.dataset.variantProp, control.value);
           } else {
@@ -1064,6 +1201,61 @@
           }
         };
 
+        // The box read backwards: someone else's setup pasted in drives the
+        // switches, which drive the page. Anything the text does not mention
+        // falls back to the default, so an empty box is a reset.
+        const load = (text) => {
+          const named = new Set(
+            (text.match(/class\s*=\s*"([^"]*)"/)?.[1] || '')
+              .trim()
+              .split(/\s+/)
+              .filter(Boolean)
+          );
+          // `.mw-header: no mw-header-reveal` - a class the markup ships and the
+          // setup takes away, which is the deviation worth reading
+          const dropped = new Set(
+            [...text.matchAll(/:\s*no\s+([\w-]+)/g)].map((m) => m[1])
+          );
+          const props = new Map(
+            [...text.matchAll(/(--[\w-]+)\s*:\s*([^;\n}]+)/g)].map((m) => [
+              m[1],
+              m[2].trim(),
+            ])
+          );
+
+          window.mwPalette?.write({
+            primary: props.get('--mw-primary-color') ?? null,
+            secondary: props.get('--mw-secondary-color') ?? null,
+            dark: props.get('--mw-dark-page-background') ?? null,
+            light: props.get('--mw-light-page-background') ?? null,
+          });
+
+          controls.forEach((control) => {
+            if (control.type === 'checkbox') {
+              const name = control.dataset.variantClass;
+              const on = control.dataset.variantTarget
+                ? !dropped.has(name)
+                : named.has(name);
+              control.checked = control.hasAttribute('data-variant-invert')
+                ? !on
+                : on;
+            } else if (control.hasAttribute('data-variant-classes')) {
+              control.value =
+                optionClasses(control).find((name) => named.has(name)) ?? '';
+            } else {
+              control.value = props.get(control.dataset.variantProp) ?? '';
+            }
+            apply(control);
+          });
+        };
+
+        // Picking a palette repaints the page, and the box has to say so
+        window.mwRefreshSetup = render;
+
+        setup.addEventListener('input', () => load(setup.value));
+        // Normalises what was pasted back into the shape render() writes
+        setup.addEventListener('blur', render);
+
         controls.forEach((control) =>
           control.addEventListener('change', () => {
             apply(control);