maverick-wave 5.4.0 → 5.5.0

package/.claude/skills/mw-maverick-wave/SKILL.md

@@ -44,14 +44,14 @@ Load the one you need - do not read them all up front.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.css"
 />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
 />
 ...
-<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -

package/.claude/skills/mw-maverick-wave/examples/angular-services.md

@@ -369,3 +369,94 @@ about the class name.
 
 `mw-progress-percent` only appends the `%` sign - the number comes from you, and
 so does the width.
+
+## Scroll reveal
+
+`mw-reveal` runs on the browser's scroll timeline and needs nothing from you -
+except in Firefox, which ships none, where the block appears without motion.
+This directive is the Firefox half: it adds to the class, never replaces it.
+
+```ts
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  afterNextRender,
+  inject,
+  signal,
+} from '@angular/core';
+
+@Directive({
+  selector: '[mwReveal]',
+  host: {
+    '[class.mw-reveal-hidden]': "state() === 'hidden'",
+    '[class.mw-reveal-run]': "state() === 'run'",
+    '[style.animation-delay.ms]': 'delay()',
+  },
+})
+export class MwRevealDirective {
+  private readonly host =
+    inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+
+  protected readonly state = signal<'off' | 'hidden' | 'run'>('off');
+  protected readonly delay = signal(0);
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+
+    afterNextRender(() => {
+      if (CSS.supports('animation-timeline', 'view()')) return;
+      if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      // Already on screen: past its entry range in a timeline browser too
+      if (this.host.getBoundingClientRect().top < innerHeight) return;
+
+      this.state.set('hidden');
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry.isIntersecting) return;
+          observer.disconnect();
+          this.delay.set(this.columnDelay());
+          this.state.set('run');
+        },
+        { threshold: 0.15 }
+      );
+
+      observer.observe(this.host);
+      destroyRef.onDestroy(() => observer.disconnect());
+    });
+  }
+
+  // The wave a grid draws in CSS, read back from the columns the browser
+  // rendered - one on a phone, so the stagger disappears with them.
+  private columnDelay(): number {
+    const grid = this.host.parentElement;
+    if (!grid?.classList.contains('mw-reveal-stagger')) return 0;
+    const columns =
+      getComputedStyle(grid).gridTemplateColumns.split(' ').length;
+    return ([...grid.children].indexOf(this.host) % columns) * 90;
+  }
+}
+```
+
+A single block carries `mw-reveal`, a grid carries `mw-reveal-stagger` and its
+children carry nothing but the directive:
+
+```html
+<article class="mw-card mw-reveal" mwReveal>...</article>
+
+<div class="mw-grid-4 mw-reveal-stagger">
+  @for (item of items(); track item.id) {
+  <article class="mw-card" mwReveal>...</article>
+  }
+</div>
+```
+
+Unlike the shipped script this also covers what a route renders later - the
+directive runs per element, not once per page.
+
+`mw-header-reveal` and `mw-parallax` need the same treatment and the same
+`CSS.supports` guard. The header is a class toggled past a scroll threshold; the
+parallax writes `--mw-parallax-progress` (0 to 1) on each `mw-parallax-media`
+from a `requestAnimationFrame` loop, reading every layer's rect before writing
+to any of them.

package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md

@@ -20,7 +20,7 @@ accordion FAQ.
 
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.css"
     />
     <link
       rel="stylesheet"
@@ -487,7 +487,7 @@ accordion FAQ.
       <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.js"></script>
     <script>
       // The only thing the shipped script does not cover: opening a modal.
       // Closing works through .mw-modal-close, the backdrop is wired above.
@@ -523,8 +523,9 @@ accordion FAQ.
 - `mw-reveal-stagger` goes on the grid (or `mw-columns-*`) and reveals every
   child as it scrolls in, the second and third of each three a beat later.
   `mw-reveal` on a single block reveals that block as one. Both are off under
-  `prefers-reduced-motion`, and a browser without scroll timelines renders the
-  blocks in place - never invisible.
+  `prefers-reduced-motion`. A page like this one loads the script, so Firefox -
+  which has no scroll timelines - runs the same entrance off an observer;
+  without the script the blocks stand in place, never invisible.
 - `mw-offer` on a card pushes the price row to the bottom of the body, so the
   prices in a row line up. The `mw-card-feature` frame around the middle plan
   reaches 29px above its card - the `mw-mt-10` on the grid is that room.

package/.claude/skills/mw-maverick-wave/references/components.md

@@ -536,6 +536,9 @@ still renders the same, for markup written before 4.12.
 Open state = `mw-active` on header **and** content (bare `active` still works
 but is deprecated). The icon rotates via the **header** state - putting the
 class on the icon instead does nothing. Content taller than 500px scrolls.
+The `mw-accordion-content-inner` wrapper is required and not decoration: the
+panel opens by animating a grid row and that wrapper is the row, so content
+placed straight into `mw-accordion-content` never collapses when closed.
 Toggling is JS - see `references/javascript.md`; the shipped script keeps
 `aria-expanded` in step when the header is a button.
 

package/.claude/skills/mw-maverick-wave/references/javascript.md

@@ -2,7 +2,7 @@
 
 ## What `maverick-wave.min.js` is
 
-One vanilla IIFE, no dependencies, ~8 kB. It queries the DOM **once** on
+One vanilla IIFE, no dependencies, ~23 kB. It queries the DOM **once** on
 `DOMContentLoaded` and attaches listeners. There is no re-init API, no
 `MutationObserver`, no exported module - it is built for a server-rendered or
 static page.
@@ -44,9 +44,26 @@ classes are the entire contract.
 | Calendar            | Renders the month or week grid from `data-calendar="month                                                                                                                                                                                                                       | week"`, pages with `data-calendar-nav`, draws the status dots from `data-calendar-markers`, toggles `mw-selected`and emits`mw-calendar-select`                                                                               | Render the cells from a signal and bind `mw-calendar-adjacent`, `mw-calendar-weekend`, `mw-calendar-today` and `mw-selected` yourself; none of the `data-calendar-*` attributes are needed |
 | Localhost indicator | On a local hostname, prepends `mw-localhost-indicator-pulse` to the header when it carries `mw-localhost-indicator-activated`                                                                                                                                                   | Render the element conditionally                                                                                                                                                                                             |
 | Header login button | Swaps the FontAwesome lock icon                                                                                                                                                                                                                                                 | Bind the icon class                                                                                                                                                                                                          |
-| Color swatches      | Showcase-only (prints computed hex values)                                                                                                                                                                                                                                      | Not needed                                                                                                                                                                                                                   |
+| Color swatches      | Showcase-only (prints computed hex values); exposes `window.mwRefreshColorSwatches` to read them again after a root colour changed                                                                                                                                              | Not needed                                                                                                                                                                                                                   |
 | Dropdown            | Delegated to the document: closes the open `mw-dropdown` on Escape, on a click elsewhere and on a click on a `mw-dropdown-item`, and returns focus to the `summary`                                                                                                             | The `<details>` does the opening, the keyboard and the state on its own. Rebuild only the two behaviours markup cannot express - or bind `[attr.open]` and keep them in the component                                        |
 | Language switcher   | Keeps the trigger's flag and code in step with the chosen item, moves `mw-active` and `aria-current`, and fires `mw-language-change` (`detail: { lang, name }`) on the switcher                                                                                                 | Bind the trigger from your locale signal and switch the language in your own i18n service; the menu itself is a `<details>` and needs nothing                                                                                |
+| Scroll reveal       | Firefox only: an `IntersectionObserver` adds `mw-reveal-hidden` to what is still below the fold and swaps it for `mw-reveal-run` on entry, with an `animation-delay` per grid column                                                                                            | A directive per element - see `examples/angular-services.md`                                                                                                                                                                 |
+| Header reveal       | Firefox only: toggles `mw-header-away` and `mw-announcement-away` past 270px of scroll, and adds the transition class one frame later so the bar does not slide away on load                                                                                                    | The same two classes bound to a scroll signal, behind the same guard                                                                                                                                                         |
+| Parallax            | Firefox only: writes `--mw-parallax-progress` (0 to 1) on every `mw-parallax-media` from a `requestAnimationFrame` loop                                                                                                                                                         | The same, reading every layer's rect before writing to any of them                                                                                                                                                           |
+
+## Scroll-driven animations
+
+Four things ride the browser's own scroll timeline: `mw-reveal`,
+`mw-header-reveal`, `mw-parallax` and the `mw-progress-fill` scrub. In Chrome,
+Edge and Safari they need no script at all. Firefox ships no scroll timelines,
+so there - and only there - the shipped JS stands in for them. Each one checks
+`CSS.supports('animation-timeline', ...)` first and does nothing where the
+browser has it.
+
+Without the script Firefox loses the motion and nothing else: cards stand in
+place, the picture holds still. The exception is `mw-header-reveal`, where the
+bar then sits over the hero from the first paint - a layout difference, not a
+missing effect.
 
 ## Modals and progress bars
 

package/.claude/skills/mw-maverick-wave/references/layout.md

@@ -142,8 +142,9 @@ A fixed `mw-announcement` rides along without a class of its own - both cover
 the height of the pair, so they arrive as one block rather than the ribbon
 catching up. Focus inside either brings both back regardless of the scroll
 position, so tabbing never lands on a link that is off screen (WCAG 2.4.11).
-Without scroll timelines, or under `prefers-reduced-motion`, the bar is simply
-there.
+Under `prefers-reduced-motion` the bar is simply there, and so it is without
+scroll timelines unless `maverick-wave.min.js` is on the page - in Firefox that
+is what rides it in (`javascript.md`).
 
 **Localhost indicator.** Put `mw-localhost-indicator-activated` on the header
 and the shipped JS prepends a pulsing bar when the host is localhost/127.0.0.1/
@@ -322,8 +323,10 @@ is taken on a phone. The bobbing stops under `prefers-reduced-motion`.
 **Parallax** - `mw-parallax` on the container plus a `mw-parallax-media` child
 moves the picture into its own layer. The container drops its own background and
 the layer reads `--mw-hero-background`, so the image stays configured in one
-place. Both modes run on the browser's scroll timeline - no listener, and no
-`background-attachment: fixed`, which iOS ignores.
+place. Both modes run on the browser's scroll timeline, and on no
+`background-attachment: fixed`, which iOS ignores. Firefox has neither timeline;
+there the shipped JS moves the layers instead, and without it the picture simply
+sits still (`javascript.md`).
 
 ```html
 <header class="mw-header mw-header-reveal">...</header>
@@ -467,19 +470,22 @@ with it; `mw-text-capitalize` is the plain transform.
 uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
 
 **Scroll entrance** - `mw-reveal` lets a block rise briefly as it scrolls into
-view, driven by the browser's scroll timeline (`animation-timeline: view()`) -
-no JavaScript, no observer. The block stays hidden until it is 8dvh above the
-bottom edge and has arrived by 34dvh, the same zone for every block whatever
-its height, so the motion happens where the eye is and is over before the
-block is read. Doubly guarded: `prefers-reduced-motion` turns it
-off, and a browser without scroll timelines renders the block in place instead
-of leaving it invisible. Put it on section content, not on the section itself -
-a screen-high band finishes its entrance before its content is halfway up.
+view, driven by the browser's scroll timeline (`animation-timeline: view()`).
+The block stays hidden while it is still below the bottom edge and has arrived
+three fifths of the way in - measured along its own entry, so it is never still
+transparent once it stands in its place, whatever its height. A block taller
+than the screen is capped at one viewport by the entry phase itself. Doubly guarded:
+`prefers-reduced-motion` turns it off, and a browser without scroll timelines
+renders the block in place instead of leaving it invisible. Firefox is that
+browser - there the shipped JS runs the entrance off an `IntersectionObserver`,
+so a page without the script keeps the block and loses only the motion
+(`javascript.md`). Put it on section content, not on the section itself - a
+screen-high band finishes its entrance before its content is halfway up.
 
 A row of cards crosses the viewport edge together, so `mw-reveal` on each of
 them rises as one slab. `mw-reveal-stagger` goes on the **grid** instead: every
-child reveals, and each one in a row 4dvh of scroll after the one before it -
-a wave across the row. One class, nothing per card. On `mw-grid-2` to `mw-grid-5` and
+child reveals, and each one in a row a tenth of that entry after the one
+before it - a wave across the row. One class, nothing per card. On `mw-grid-2` to `mw-grid-5` and
 their `-lg` variants the wave follows the actual columns at every breakpoint:
 four steps in a four-column row, two once it has collapsed to two. Any other
 container - `mw-columns-*`, a layout of your own - gets a fixed cycle of three.

package/.claude/skills/mw-maverick-wave/references/theming.md

@@ -9,6 +9,10 @@ borders, the theme's surface stack, the ink variant the dark theme needs. That i
 the difference to pre-3.4.0, where derived values were baked in at compile time
 and a palette switch meant setting 41 variables.
 
+Writing those tokens on `<html>` at runtime is how a palette is swapped without
+a reload. It repaints the same breadth the theme flip does and needs the same
+guard against a page-wide interpolation - see **Light & dark** below.
+
 Browser floor for that: `color-mix()` **and** `oklch(from ...)` - Chrome 119+,
 Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 `package.json`, so Autoprefixer and cssnano target exactly it.

package/CHANGELOG.md

@@ -6,6 +6,17 @@ Patch releases are only for test purposes - here I only document major and minor
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.5.0] - 2026-09-12
+
+### Added
+
+- showcase themes
+
+### Fixed
+
+- some firefox fixes
+- scrolling
+
 ## [5.4.0] - 2026-09-11
 
 ### Added

package/CLAUDE.md

@@ -38,7 +38,7 @@ There are no test or lint scripts.
 
 **JavaScript** (`src/js/main.js`) - Single file. All components auto-initialize on `DOMContentLoaded`. Includes: gallery and image sliders, theme toggle (persisted to localStorage, transitions suppressed during the flip), accordion, mobile nav, progress bar (IntersectionObserver), scroll spy, tabs (which also get their ARIA and arrow-key handling here), alerts/toasts, modals, range inputs, dropdowns, language switcher, checkbox lists, kanban board, calendar.
 
-**HTML showcase** (`index.html` + `src/partials/`) - The top-level `index.html` uses `@@include()` syntax to pull in 60 partials from `src/partials/`. These compile into `dist/index.html`.
+**HTML showcase** (`index.html` + `src/partials/`) - The top-level `index.html` uses `@@include()` syntax to pull in 63 partials from `src/partials/`. These compile into `dist/index.html`.
 
 ## Naming Conventions
 

package/README.md

@@ -42,12 +42,12 @@ The result is a framework that balances utility with simplicity, offering develo
     <title>My MaverickWave Project</title>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.4.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.5.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```
@@ -515,9 +515,8 @@ maverick-wave/
 │       ├── utilities/      # Spacing, flex, display helpers
 │       └── main.scss       # SCSS entry point
 ├── .claude/
-│   ├── commands/mw.md      # Claude Code slash command (Angular quick reference)
 │   └── skills/
-│       └── maverick-wave/  # Claude Code skill: full usage guide + examples
+│       └── mw-maverick-wave/  # Claude Code skill: full usage guide + examples
 ├── scripts/verify.js       # Class and token consistency check (npm run verify)
 ├── .prettierrc.json        # Prettier configuration
 ├── gulpfile.js             # Gulp tasks configuration

package/index.html

@@ -118,6 +118,144 @@
           height: 50px;
         }
       }
+
+      /* 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);
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+        box-shadow: var(--mw-elevation-4);
+        font-size: 1.25rem;
+        cursor: pointer;
+        transition: var(--mw-transition);
+      }
+
+      .palette-fab:hover {
+        background: var(--mw-primary-color-hover);
+      }
+
+      .palette-fab:active {
+        transform: scale(0.92);
+      }
+
+      .palette-panel {
+        position: fixed;
+        right: 18px;
+        bottom: 82px;
+        z-index: 400;
+        width: 300px;
+        padding: 18px;
+        border-radius: 12px;
+        border: 1px solid var(--mw-border);
+        background: var(--mw-card-background);
+        box-shadow: var(--mw-elevation-5);
+      }
+
+      .palette-heading {
+        font-size: 1.1rem;
+        margin-bottom: 4px;
+      }
+
+      .palette-hint {
+        font-size: 0.8rem;
+        line-height: 1.35;
+        color: var(--mw-text-muted-color);
+        margin-bottom: 14px;
+      }
+
+      .palette-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 6px;
+      }
+
+      .palette-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: 8px;
+        border: 1px solid var(--mw-border);
+        background: transparent;
+        color: var(--mw-text-color);
+        font-size: 0.8rem;
+        text-align: left;
+        cursor: pointer;
+        transition: var(--mw-transition);
+      }
+
+      .palette-item::before {
+        content: '';
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        background: linear-gradient(
+          135deg,
+          var(--swatch-primary) 50%,
+          var(--swatch-secondary) 50%
+        );
+      }
+
+      .palette-item:hover,
+      .palette-item.mw-active {
+        border-color: var(--mw-primary-text-color);
+      }
+
+      .palette-item.mw-active {
+        background: var(--mw-primary-background);
+      }
+
+      .palette-custom {
+        display: flex;
+        gap: 10px;
+        margin-top: 14px;
+        padding-top: 12px;
+        border-top: 1px solid var(--mw-border);
+      }
+
+      .palette-field {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 0.75rem;
+        color: var(--mw-text-muted-color);
+      }
+
+      .palette-field input {
+        width: 100%;
+        height: 30px;
+        padding: 2px;
+        border: 1px solid var(--mw-border);
+        border-radius: 6px;
+        background: var(--mw-card-background);
+        cursor: pointer;
+      }
+
+      @media (max-width: 576px) {
+        .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>
@@ -538,6 +676,17 @@
           </div>
         </div>
       </section>
+      <!-- History section -->
+      <section id="history" class="mw-section mw-section-alternate">
+        <div class="mw-container">
+          <h2 class="mw-section-title">History</h2>
+          <p class="mw-section-intro">
+            The major releases so far. Everything in between - the minors and
+            the patch releases - sits in the changelog.
+          </p>
+          @@include('./src/partials/history-container.html')
+        </div>
+      </section>
     </main>
 
     <!-- Footer -->
@@ -546,6 +695,9 @@
         @@include('./src/partials/footer-container.html')
       </div>
     </footer>
+
+    <!-- Palette switcher -->
+    @@include('./src/partials/palette-container.html')
     <script>
       // just for the showcase (login button triggers login error)
       document.addEventListener('DOMContentLoaded', () => {
@@ -629,6 +781,111 @@
         apply(cycleSwitch.querySelector('.mw-active'));
       });
 
+      // just for the showcase: the palette switcher. Every tone in the framework
+      // is derived from the root colors with color-mix(), so writing those on the
+      // 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 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;
+
+        const root = document.documentElement;
+
+        const DARK_INK = '#131925';
+        const LIGHT_INK = '#f2f6fc';
+
+        const luminance = (hex) => {
+          const [r, g, b] = [1, 3, 5].map((i) => {
+            const channel = parseInt(hex.slice(i, i + 2), 16) / 255;
+            return channel <= 0.04045
+              ? channel / 12.92
+              : ((channel + 0.055) / 1.055) ** 2.4;
+          });
+          return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        };
+
+        const contrast = (a, b) => {
+          const [high, low] = [luminance(a), luminance(b)].sort(
+            (x, y) => y - x
+          );
+          return (high + 0.05) / (low + 0.05);
+        };
+
+        // Measured, not thresholded - a lightness cutoff gets a saturated mid
+        // tone wrong
+        const ink = (fill) =>
+          contrast(fill, DARK_INK) > contrast(fill, LIGHT_INK)
+            ? DARK_INK
+            : LIGHT_INK;
+
+        // Cuts the transition the new colours started: the whole page
+        // interpolating at once is the expensive part, and the hex labels in the
+        // Colors section read computed values, so they need the landed ones
+        const settle = () => {
+          root.classList.add('mw-theme-switching');
+          void root.offsetHeight;
+          root.classList.remove('mw-theme-switching');
+          window.mwRefreshColorSwatches?.();
+        };
+
+        const paint = (name, color) => {
+          root.style.setProperty(`--mw-${name}-color`, color);
+          root.style.setProperty(`--mw-${name}-accent-text-color`, ink(color));
+        };
+
+        items.forEach((item) => {
+          const { primary, secondary, dark, light } = item.dataset;
+          item.style.setProperty('--swatch-primary', primary);
+          item.style.setProperty('--swatch-secondary', secondary);
+
+          item.addEventListener('click', () => {
+            items.forEach((other) =>
+              other.classList.toggle('mw-active', other === item)
+            );
+            paint('primary', primary);
+            paint('secondary', secondary);
+            root.style.setProperty('--mw-dark-page-background', dark);
+            root.style.setProperty('--mw-light-page-background', light);
+            primaryInput.value = primary;
+            secondaryInput.value = secondary;
+            settle();
+          });
+        });
+
+        // A hand-picked color belongs to no preset - the page backgrounds stay put
+        [
+          ['primary', primaryInput],
+          ['secondary', secondaryInput],
+        ].forEach(([name, input]) => {
+          input.addEventListener('input', () => {
+            items.forEach((item) => item.classList.remove('mw-active'));
+            paint(name, input.value);
+          });
+          // Dragging the picker fires `input` per pixel - the rest waits for the end
+          input.addEventListener('change', settle);
+        });
+
+        const toggle = (open) => {
+          panel.hidden = !open;
+          fab.setAttribute('aria-expanded', String(open));
+        };
+
+        fab.addEventListener('click', (event) => {
+          event.stopPropagation();
+          toggle(panel.hidden);
+        });
+        document.addEventListener('click', (event) => {
+          if (!panel.hidden && !panel.contains(event.target)) toggle(false);
+        });
+        document.addEventListener('keydown', (event) => {
+          if (event.key === 'Escape') toggle(false);
+        });
+      });
+
       // for the modals - the framework handles both shapes, div and <dialog>
       const openModal = window.mwOpenModal;
       const closeModal = window.mwCloseModal;