maverick-wave 5.7.0 → 5.10.0

package/index.html

@@ -124,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;
@@ -165,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 {
@@ -181,7 +211,7 @@
 
       .palette-grid {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(3, 1fr);
         gap: 6px;
       }
 
@@ -262,6 +292,26 @@
         border-top: 1px solid var(--mw-border);
       }
 
+      /* Splits the list by where a switch shows up, because half of them act on
+         parts of the page the preview does not contain */
+      .variant-group {
+        margin: 20px 0 2px;
+        font-size: 0.78rem;
+        font-weight: 600;
+        color: var(--mw-text-color);
+      }
+
+      .variant-group:first-child {
+        margin-top: 4px;
+      }
+
+      .variant-group-hint {
+        margin: 0 0 4px;
+        font-size: 0.68rem;
+        line-height: 1.35;
+        color: var(--mw-text-muted-color);
+      }
+
       .variant-row {
         display: flex;
         align-items: center;
@@ -291,7 +341,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);
@@ -339,14 +389,129 @@
         background: var(--mw-primary-accent-text-color);
       }
 
+      /* The sticky bar would otherwise sit on the section title it jumps to */
+      #preview {
+        scroll-margin-top: calc(var(--mw-header-height) + 1rem);
+      }
+
+      .preview-head {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .preview-title {
+        margin: 0 0 0.35rem;
+      }
+
+      .preview-lede {
+        margin: 0;
+        max-inline-size: 60ch;
+      }
+
+      /* The panel is fixed over the right of the page, flush with the container
+         edge. Below xl there is no room to dodge it and it simply covers part of
+         the preview; from there the preview keeps to the strip beside it,
+         because a switch that moves something hidden behind the panel
+         demonstrates nothing. */
+      @media (width >= 1200px) {
+        body:has(.palette-panel:not([hidden])) #preview > .mw-container {
+          padding-inline-end: 460px;
+        }
+      }
+
+      /* Both wrap rather than squeezing a field to nothing on a phone */
+      .preview-row,
+      .preview-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .preview-row .mw-input {
+        flex: 1 1 12rem;
+      }
+
+      /* The one thing here that keeps moving without being touched, so Motion
+         tempo has something to show that a hover state cannot */
+      .preview-status {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin: 0 0 1.25rem;
+        font-size: 0.82rem;
+        color: var(--mw-text-muted-color);
+      }
+
+      .preview-status strong {
+        display: block;
+        color: var(--mw-text-color);
+        font-weight: 500;
+      }
+
+      .preview-status small {
+        font-size: 0.75rem;
+      }
+
+      .preview-row .mw-select {
+        flex: 0 1 14rem;
+      }
+
+      /* The spacing sits on the row and not on the label: the button is taller
+         than the caption beside it, so a margin under the label leaves the
+         button itself resting on the box */
+      .variant-setup-head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 10px;
+        margin: 14px 0 10px;
+      }
+
       .variant-setup-label {
         display: block;
-        margin-top: 14px;
-        margin-bottom: 5px;
+        margin: 0;
         font-size: 0.7rem;
         color: var(--mw-text-muted-color);
       }
 
+      /* The one control here that leads somewhere - everything else in the
+         panel only changes what is on screen. Carries the brand colour so it
+         reads as the way out rather than as one more switch. */
+      .variant-share {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+        padding: 5px 12px;
+        border-radius: 999px;
+        border: 1px solid var(--mw-primary-color);
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+        font: inherit;
+        font-size: 0.72rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: var(--mw-transition-fast);
+      }
+
+      .variant-share:hover {
+        background: var(--mw-primary-color-hover, var(--mw-primary-color));
+        transform: translateY(-1px);
+      }
+
+      .variant-share:active {
+        transform: translateY(0);
+      }
+
+      .variant-share:focus-visible {
+        outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+        outline-offset: var(--mw-focus-ring-offset);
+      }
+
       .variant-setup {
         display: block;
         width: 100%;
@@ -362,22 +527,6 @@
         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?v={{VERSION}}"></script>
@@ -387,7 +536,7 @@
     <a class="mw-skip-link" href="#main">Skip to content</a>
 
     <!-- Header -->
-    <header class="mw-header mw-header-reveal mw-localhost-indicator-activated">
+    <header class="mw-header mw-localhost-indicator-activated">
       <div class="mw-container">
         @@include('./src/partials/header-container.html')
       </div>
@@ -809,6 +958,18 @@
           @@include('./src/partials/history-container.html')
         </div>
       </section>
+      <!-- Preview section, showcase only - see the partial -->
+      <section id="preview" class="mw-section">
+        <div class="mw-container">
+          <h2 class="mw-section-title">Preview</h2>
+          <p class="mw-section-intro">
+            One page-shaped example, so the variant switches in the palette
+            panel have something to act on that is not a component gallery. Open
+            the panel and the page lands here.
+          </p>
+          @@include('./src/partials/preview-container.html')
+        </div>
+      </section>
     </main>
 
     <!-- Footer -->
@@ -908,12 +1069,12 @@
       // 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;
 
@@ -999,12 +1160,24 @@
           input.addEventListener('change', settle);
         });
 
+        const preview = document.getElementById('preview');
+
         const toggle = (open) => {
           panel.hidden = !open;
-          fab.setAttribute('aria-expanded', String(open));
+          toggleBtn.setAttribute('aria-expanded', String(open));
+
+          // Or the switches act on whatever section the reader is parked at,
+          // which is one component at a time and says little about a look.
+          //
+          // `instant` against the smooth default in the reset: the preview sits
+          // at the end of a page some 80 000px long, and over that distance a
+          // smooth scroll either crawls through every section on the way or, as
+          // here, never starts at all.
+          if (open)
+            preview?.scrollIntoView({ block: 'start', behavior: 'instant' });
         };
 
-        fab.addEventListener('click', (event) => {
+        toggleBtn.addEventListener('click', (event) => {
           event.stopPropagation();
           toggle(panel.hidden);
         });
@@ -1102,6 +1275,58 @@
         const root = document.documentElement;
         const controls = [...list.querySelectorAll('input, select')];
 
+        // Built on every render, put into the address bar by nobody: a setup
+        // written to the URL as you go comes back on the next reload, and then
+        // the showcase opens in someone else's look for good. Copy link is the
+        // one way out of here, and what it hands over is this.
+        //
+        // URLSearchParams and not a hand-rolled separator: a value like the
+        // heading font or the page width is full of commas, quotes and brackets,
+        // and escaping those by hand is where this kind of thing breaks.
+        let shareUrl = location.origin + location.pathname;
+
+        const buildShareUrl = (classes, dropped, pairs) => {
+          const params = new URLSearchParams();
+          if (classes.length) params.set('c', classes.join(' '));
+          if (dropped.length) params.set('d', dropped.join(' '));
+          pairs.forEach(([prop, value]) => params.set(prop, value));
+
+          const query = params.toString();
+          return (
+            location.origin + location.pathname + (query ? '#' + query : '')
+          );
+        };
+
+        // Back into the shape load() reads, so the link and a pasted setup go
+        // through one parser rather than two that can drift apart. The target in
+        // front of `: no` is only there to make the line read like the printed
+        // one - load() matches on the class name alone.
+        const readHash = () => {
+          const params = new URLSearchParams(location.hash.slice(1));
+          const lines = [];
+
+          const classes = params.get('c');
+          if (classes) lines.push('html class="' + classes + '"');
+
+          (params.get('d') || '')
+            .split(/\s+/)
+            .filter(Boolean)
+            .forEach((name) => lines.push('markup: no ' + name));
+
+          const pairs = [...params.entries()].filter(([key]) =>
+            key.startsWith('--')
+          );
+          if (pairs.length) {
+            lines.push(
+              ':root {',
+              ...pairs.map(([key, value]) => `  ${key}: ${value};`),
+              '}'
+            );
+          }
+
+          return lines.length ? lines.join('\n') : null;
+        };
+
         const isOn = (input) =>
           input.hasAttribute('data-variant-invert')
             ? !input.checked
@@ -1113,8 +1338,10 @@
           if (document.activeElement === setup) return;
 
           const classes = [];
+          // Unformatted, because both the box and the link are written from
+          // these and formatting only one of the two ways is a bug waiting
           const notes = [];
-          const props = [];
+          const pairs = [];
 
           // The palette is part of the setup, and it is printed first because a
           // project sets its brand colours before it retunes anything else
@@ -1127,15 +1354,18 @@
             ['--mw-dark-page-background', palette.dark],
             ['--mw-light-page-background', palette.light],
           ].forEach(([prop, value]) => {
-            if (value) props.push(`  ${prop}: ${value};`);
+            if (value) pairs.push([prop, value]);
           });
 
           controls.forEach((control) => {
             if (control.type !== 'checkbox') {
-              if (control.value) {
-                props.push(
-                  `  ${control.dataset.variantProp}: ${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 {
+                pairs.push([control.dataset.variantProp, control.value]);
               }
               return;
             }
@@ -1145,7 +1375,7 @@
             const target = control.dataset.variantTarget;
             if (target) {
               if (!isOn(control)) {
-                notes.push(target + ': no ' + control.dataset.variantClass);
+                notes.push([target, control.dataset.variantClass]);
               }
             } else if (isOn(control)) {
               classes.push(control.dataset.variantClass);
@@ -1156,19 +1386,37 @@
           if (classes.length) {
             lines.push('html class="' + classes.join(' ') + '"');
           }
-          lines.push(...notes);
-          if (props.length) lines.push(':root {', ...props, '}');
+          lines.push(...notes.map(([target, name]) => `${target}: no ${name}`));
+          if (pairs.length) {
+            lines.push(
+              ':root {',
+              ...pairs.map(([prop, value]) => `  ${prop}: ${value};`),
+              '}'
+            );
+          }
 
           setup.value = lines.length
             ? lines.join('\n')
             : 'Default setup - nothing to change.';
+
+          shareUrl = buildShareUrl(
+            classes,
+            notes.map(([, name]) => name),
+            pairs
+          );
         };
 
+        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 {
@@ -1214,6 +1462,9 @@
               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) ?? '';
             }
@@ -1224,21 +1475,103 @@
         // Picking a palette repaints the page, and the box has to say so
         window.mwRefreshSetup = render;
 
-        setup.addEventListener('input', () => load(setup.value));
+        setup.addEventListener('input', () => inPlace(() => load(setup.value)));
         // Normalises what was pasted back into the shape render() writes
         setup.addEventListener('blur', render);
 
+        // Type and spacing switches change the height of all 80 000px of page
+        // above the preview as well, so the section slides out from under
+        // whoever is watching it - Text size alone moves it by 16 000px. Hold
+        // its top edge where it was and the change happens in place.
+        //
+        // Only while the preview is on screen: correcting the scroll for someone
+        // parked up in the component sections would move *them* by those 16 000
+        // instead. `instant` because the smooth default would animate the
+        // correction as a scroll of its own.
+        const previewSection = document.getElementById('preview');
+
+        const inPlace = (change) => {
+          const box = previewSection?.getBoundingClientRect();
+          const watching =
+            box && box.bottom > 0 && box.top < window.innerHeight;
+          if (!watching) return change();
+
+          const before = box.top;
+          change();
+          const shift = previewSection.getBoundingClientRect().top - before;
+          if (shift) window.scrollBy({ top: shift, behavior: 'instant' });
+        };
+
         controls.forEach((control) =>
-          control.addEventListener('change', () => {
-            apply(control);
-            render();
-          })
+          control.addEventListener('change', () =>
+            inPlace(() => {
+              apply(control);
+              render();
+            })
+          )
         );
 
-        // Applied on load too, so a browser that restored a checked box after a
-        // reload does not leave the page and the panel disagreeing
-        controls.forEach(apply);
-        render();
+        const shared = readHash();
+        if (shared) {
+          // Drives the switches, which drive the page - then render() normalises
+          // the box and writes the link back in the order it prints
+          load(shared);
+          render();
+        } else {
+          // Without a link the showcase opens in its own look, every time. That
+          // has to be spelled out: Firefox restores form state across a reload,
+          // so the switches would otherwise come back set the way the last visit
+          // left them, and the page with them.
+          //
+          // The markup is the one source for that starting state - the written
+          // defaults for a plain switch, and for a targeted one whether the
+          // class it stands for is actually on the element it names. A header
+          // shipped without mw-header-reveal keeps it off.
+          controls.forEach((control) => {
+            const target = control.dataset.variantTarget;
+            const el = target && document.querySelector(target);
+
+            if (el) {
+              const present = el.classList.contains(
+                control.dataset.variantClass
+              );
+              control.checked = control.hasAttribute('data-variant-invert')
+                ? !present
+                : present;
+            } else if (control.type === 'checkbox') {
+              control.checked = control.defaultChecked;
+            } else {
+              const preset = [...control.options].find(
+                (o) => o.defaultSelected
+              );
+              control.value = preset ? preset.value : '';
+            }
+          });
+
+          controls.forEach(apply);
+          render();
+        }
+
+        document
+          .getElementById('variant-share')
+          ?.addEventListener('click', async (event) => {
+            const button = event.currentTarget;
+            const label = document.getElementById('variant-share-label');
+            try {
+              await navigator.clipboard.writeText(shareUrl);
+              label.textContent = 'Copied';
+            } catch {
+              // Denied permission or an insecure origin. The address bar is no
+              // help here - it never carries the setup - so hand the link over
+              // in the box instead, where it can be selected by hand.
+              setup.value = shareUrl;
+              setup.select();
+              label.textContent = 'Copy from the box';
+            }
+            setTimeout(() => {
+              label.textContent = 'Copy link';
+            }, 1600);
+          });
       });
 
       // for the modals - the framework handles both shapes, div and <dialog>