maverick-wave 5.30.0 → 5.32.0

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

@@ -1,358 +0,0 @@
-# Forms
-
-## Control sizes
-
-`mw-input`, `mw-select`, `mw-textarea` and `mw-btn` share one scale:
-
-| step  | height   | font   |
-| ----- | -------- | ------ |
-| `-sm` | 1.875rem | 0.8rem |
-| base  | 2.125rem | 0.9rem |
-| `-lg` | 2.375rem | 1rem   |
-
-A field and the button beside it are therefore the same height by construction -
-before 4.11.0 each control worked its own height out and an input, a select and
-a button in one row measured 32.2, 34.4 and 37.2 pixels. Buttons sit one font
-step above the fields: a button carries a label, a field carries what the user
-typed.
-
-Never set a height on a control yourself. Pick the step and leave it alone.
-
-The minimum only governs while it is the larger of the two numbers. Block
-padding above it wins, and the control silently leaves the scale - which is
-exactly how a button once ended up 1.2px taller than the field beside it. So if
-you do override `padding-block` on a control, keep
-`2 x padding + line-height + border` under the height its step allows.
-On a coarse pointer or below 768px every control grows to 2.75rem on its own.
-Retune the whole scale through `--mw-control-height*` / `--mw-control-font*`.
-
-## The field pattern
-
-`mw-field` groups label, control, hint and error into one unit. It is the
-recommended wrapper for every labelled control and the natural fit for a
-reactive form control.
-
-```html
-<div class="mw-field">
-  <label class="mw-field-label mw-required" for="email">Email</label>
-  <input id="email" type="email" class="mw-input" />
-  <span class="mw-field-hint">Used for login and notifications.</span>
-  <span class="mw-field-error">
-    <i class="fas fa-exclamation-circle"></i> Please enter a valid email
-    address.
-  </span>
-</div>
-```
-
-- `mw-required` on the label appends a red asterisk (`data-required="true"`
-  works too). A label sitting directly in front of a control with the `required`
-  attribute gets the asterisk without either class - useful for template-driven
-  and plain HTML forms, where the marker then cannot drift out of step with the
-  validation.
-- `mw-field-hint` is the small muted helper line, `mw-field-error` the small red
-  one. Render only one of them at a time.
-- `mw-field-has-error` on the **wrapper** turns the border of the contained
-  `mw-input` / `mw-select` / `mw-textarea` red and adds a soft red halo.
-- `mw-form-element-error` does the same for a single control that has no field
-  wrapper - it also works on `mw-checkbox-group`, `mw-radio-group` and
-  `mw-slider-container`. On the two groups it adds the inset a field brings with
-  it, so the rows do not sit flush against the border.
-- Native validation is styled too: a control that fails `required`, `type` or
-  `pattern` gets the same red border and halo through `:user-invalid`, and the
-  `mw-field-hint` beside it turns red. `:user-invalid` and not `:invalid`, so an
-  untouched empty field is not red on page load. Nothing has to be bound for
-  this - which is exactly why the classes still exist for the case below, where
-  the validator lives in the component rather than on the element.
-- `mw-textarea` grows with its content (`field-sizing`) between 3 lines and
-  60dvh, where the browser supports it.
-
-> **The framework does not style Angular's `ng-invalid` / `ng-touched` classes.**
-> Bind the framework classes to the control state yourself:
->
-> ```html
-> <div
->   class="mw-field"
->   [class.mw-field-has-error]="email.invalid && email.touched"
-> >
->   <label class="mw-field-label mw-required" for="email">Email</label>
->   <input id="email" type="email" class="mw-input" formControlName="email" />
->   @if (email.hasError('required') && email.touched) {
->   <span class="mw-field-error">
->     <i class="fas fa-exclamation-circle"></i> Email is required.
->   </span>
->   }
-> </div>
-> ```
->
-> The same applies to any other framework - React: `className={...}`, Vue:
-> `:class`. Nothing reacts to validation on its own.
-
-## Form layout
-
-```html
-<form class="mw-form">
-  <div class="mw-form-group">
-    <h4 class="mw-form-group-title">Personal information</h4>
-    <div class="mw-grid-2">
-      <div class="mw-field">...</div>
-      <div class="mw-field">...</div>
-    </div>
-  </div>
-
-  <div class="mw-form-actions">
-    <p class="mw-actions-note">Changes are saved immediately.</p>
-    <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-    <button type="submit" class="mw-btn mw-btn-primary">Save</button>
-  </div>
-</form>
-```
-
-- `mw-form` is a flex column with a gap and **no padding** - safe to put
-  directly on `mw-modal-body` or `mw-panel-body`. It also works on a `<div>`
-  when there is no real form element.
-- `mw-form-inline` lays the children out in a row.
-- `mw-form-group` is the bordered block for a titled group of fields.
-  `mw-form-group-title` is the heading hook inside it - put it on the `<h3>` /
-  `<h4>`, otherwise the heading keeps its full document-level size.
-- `mw-form-actions` is a right-aligned wrapping button row.
-  `mw-actions-note` is a full-width note above the buttons and works the same
-  way in a modal, card or panel footer (`references/components.md`). The
-  alignment variants steer it along: `mw-form-actions-left`,
-  `mw-form-actions-center`, `mw-form-actions-full-width` (stacked, buttons at
-  100% - login forms).
-  `mw-form-actions-hint` is the old name for the note and still styled, but new
-  markup should use `mw-actions-note`.
-- Put multi-column layouts inside a group with `mw-grid-2` etc. and let a field
-  span everything with `style="grid-column: 1 / -1"`.
-
-## Text inputs
-
-```html
-<input type="text" class="mw-input" />
-<input type="text" class="mw-input mw-input-sm" />
-<input type="text" class="mw-input mw-input-lg" />
-```
-
-- Full width by default, `2px` border, focus ring in the primary colour.
-- `readonly` renders on a muted surface, `disabled` additionally as
-  `not-allowed`. Both are attribute driven - there is no readonly/disabled
-  class.
-- Date/time work as normal inputs (`type="date" | "time" | "datetime-local"`);
-  the native picker indicator is styled.
-
-### Numbers and money
-
-```html
-<div class="mw-field">
-  <label class="mw-field-label" for="budget">Budget</label>
-  <div class="mw-input-group">
-    <span class="mw-input-group-prefix"><i class="fas fa-euro-sign"></i></span>
-    <input
-      id="budget"
-      type="text"
-      inputmode="decimal"
-      class="mw-input mw-input-numeric"
-      placeholder="0,00"
-    />
-    <span class="mw-input-group-suffix">EUR</span>
-  </div>
-</div>
-```
-
-`mw-input-numeric` is the entry counterpart to the `mw-text-numeric` utility:
-right aligned, tabular lining figures, native spinners suppressed. A value looks
-identical while being typed and once it is rendered into a table.
-
-> **Use `type="text"` + `inputmode="decimal"`, not `type="number"`.** A focused
-> number input changes its value when the page is scrolled, and in most locales
-> it rejects a comma as decimal separator - the user sees `1234,50` but `.value`
-> comes back empty. `inputmode="decimal"` still brings up the numeric keypad on
-> mobile. Parsing the comma stays the application's job.
-
-## Input group
-
-Prefix, suffix and buttons glued to the control:
-
-```html
-<div class="mw-input-group">
-  <span class="mw-input-group-prefix"><i class="fas fa-search"></i></span>
-  <input type="text" class="mw-input" placeholder="Search…" />
-  <button type="button" class="mw-btn mw-btn-primary">
-    <i class="fas fa-search"></i>
-  </button>
-</div>
-```
-
-Sizes: `mw-input-group-sm`, `mw-input-group-lg` - combine them with the matching
-`mw-input-sm` / `mw-input-lg` on the control. A prefix or suffix takes an icon,
-a symbol (`@`, `https://`) or a short unit.
-
-## Select
-
-```html
-<select class="mw-select">
-  <option value="" disabled selected>Choose…</option>
-  <option>Option A</option>
-</select>
-```
-
-Sizes: `mw-select-sm`, `mw-select-lg`.
-
-## Textarea
-
-```html
-<textarea class="mw-textarea" rows="4"></textarea>
-```
-
-Sizes: `mw-textarea-sm`, `mw-textarea-lg`. Resizing is off by default; enable it
-with `mw-textarea-resizable`, `mw-textarea-resizable-vertical` or
-`mw-textarea-resizable-horizontal`.
-
-## Prefilled values
-
-`mw-prefilled` marks a control whose value did not come from the user in this
-session - loaded from an existing record, restored from a draft, filled with a
-default. It draws a small triangle into the top left corner of the control.
-
-```html
-<input type="text" class="mw-input mw-prefilled" value="Max Mustermann" />
-<select class="mw-select mw-select-sm mw-prefilled">
-  ...
-</select>
-<textarea class="mw-textarea mw-prefilled" rows="3"></textarea>
-```
-
-- Works on `mw-input`, `mw-select` and `mw-textarea`, and goes on the control
-  itself, not on the `mw-field` wrapper - so it also works in an input group or
-  on a standalone control.
-- The triangle follows the size modifier (`mw-input-sm`, `mw-select-lg`, ...)
-  and stays visible on `readonly` and `disabled` controls.
-- Colour is `--mw-info-color`, deliberately not primary or danger: it is an
-  information about the value, not a state or an error.
-- Decoration only. Screen readers do not see it, so put the same information in
-  an `mw-field-hint` and reference it with `aria-describedby`.
-- It is drawn as a background layer, not a pseudo element (`input` and `select`
-  never render `::before`/`::after`). A rule that sets the `background`
-  shorthand on the same control wipes it - use `background-color` there.
-
-## Checkbox
-
-The native input is hidden; `mw-checkbox-box` is the visible control, so the
-order of the three children matters.
-
-```html
-<div class="mw-checkbox-group mw-checkbox-group-inline">
-  <label class="mw-checkbox mw-checkbox-success">
-    <input type="checkbox" />
-    <div class="mw-checkbox-box"></div>
-    <div class="mw-checkbox-label">Send a copy</div>
-  </label>
-</div>
-```
-
-- Sizes: `mw-checkbox-sm`, `mw-checkbox-lg`
-- Colours: `mw-checkbox-primary`, `-secondary`, `-success`, `-warning`,
-  `-danger`, `-info`
-- Disabled: `mw-checkbox-disabled` on the label **plus** the `disabled`
-  attribute on the input
-- Group: `mw-checkbox-group` (column), `mw-checkbox-group-inline` (row)
-- With a heading and a description use `mw-checkbox-content` containing
-  `mw-checkbox-header` + `mw-checkbox-label` - see the checkbox item list in
-  `references/components.md`
-
-## Radio
-
-Same structure, with `mw-radio-button` as the visible control:
-
-```html
-<div class="mw-radio-group">
-  <label class="mw-radio">
-    <input type="radio" name="plan" value="free" />
-    <div class="mw-radio-button"></div>
-    <div class="mw-radio-label">Free</div>
-  </label>
-</div>
-```
-
-Sizes `mw-radio-sm`, `-lg`; colours `mw-radio-primary`, `-secondary`,
-`-success`, `-warning`, `-danger`, `-info`; `mw-radio-disabled`; groups
-`mw-radio-group`, `mw-radio-group-inline`.
-
-## Toggle
-
-```html
-<div class="mw-toggle-group">
-  <label class="mw-toggle mw-toggle-success">
-    <input type="checkbox" checked />
-    <div class="mw-toggle-track"></div>
-    <span class="mw-toggle-label">Notifications</span>
-  </label>
-</div>
-```
-
-Sizes `mw-toggle-sm`, `-lg`; colours `mw-toggle-primary`, `-secondary`,
-`-success`, `-warning`, `-danger` (no `info` variant); `mw-toggle-disabled` plus
-the `disabled` attribute; groups `mw-toggle-group`, `mw-toggle-group-inline`.
-
-## Slider
-
-```html
-<label>
-  <span>Experience</span>
-  <div class="mw-slider-container">
-    <div class="mw-slider-value mw-slider-numeric" data-value="3"></div>
-    <input
-      type="range"
-      class="mw-slider mw-slider-primary"
-      min="0"
-      max="10"
-      value="3"
-    />
-  </div>
-</label>
-```
-
-- The badge prints `data-value`: `mw-slider-numeric` appends `/10`,
-  `mw-slider-percent` appends `%`.
-- The filled part of the track comes from the custom property `--value` on the
-  input (`style="--value: 30%"`).
-- Both `data-value` and `--value` are set by the shipped JS on `input`. In a SPA
-  bind them yourself - two bindings, see `examples/angular-form.md`.
-- Colours: `mw-slider-primary`, `-secondary`, `-success`, `-warning`, `-danger`,
-  `-info`; sizes `mw-slider-sm`, `-lg`.
-
-## Login card
-
-A centered, self-contained card for sign-in screens.
-
-```html
-<div class="mw-login">
-  <div class="mw-login-logo"><img src="logo.svg" alt="" /></div>
-  <div class="mw-login-message">Internal area - valid account required.</div>
-  <div class="mw-login-message mw-login-message-error">Wrong credentials.</div>
-
-  <form class="mw-form">
-    <div class="mw-grid-1">
-      <div class="mw-field">
-        <label class="mw-field-label mw-required" for="login-email"
-          >Email</label
-        >
-        <div class="mw-input-group">
-          <span class="mw-input-group-prefix"
-            ><i class="fas fa-envelope"></i
-          ></span>
-          <input id="login-email" type="email" class="mw-input" required />
-        </div>
-      </div>
-    </div>
-    <div class="mw-form-actions mw-form-actions-full-width">
-      <button type="submit" class="mw-btn mw-btn-primary">
-        <i class="fas fa-sign-in-alt"></i> Sign in
-      </button>
-    </div>
-  </form>
-</div>
-```
-
-`mw-login-error` on the card flashes a red border after a failed attempt,
-`mw-login-message-info` / `mw-login-message-error` colour the message line.

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

@@ -1,164 +0,0 @@
-# JavaScript & SPA integration
-
-## What `maverick-wave.min.js` is
-
-One vanilla IIFE, no dependencies, ~24 kB. It queries the DOM on
-`DOMContentLoaded` and attaches listeners. No `MutationObserver`, no exported
-module - it is built for a server-rendered or static page.
-
-Markup that arrives later gets wired through the one public entry point:
-
-```js
-window.MaverickWave.init(subtree); // or init() for the whole document
-```
-
-Call it after an htmx swap, after filling a modal from a fetch, or after a view
-transition replaced the body. Every element that already carries listeners is
-skipped, so calling it twice over the same markup does nothing - the components
-are safe to re-run, the document- and window-level behaviour is wired once and
-never again.
-
-What that does **not** make it is a SPA library - see below.
-
-## Why a SPA must not load it
-
-- Anything rendered after bootstrap needs `MaverickWave.init()` by hand, for
-  every subtree, on every render - in a routed application that is all of it.
-- It writes straight into the DOM (class toggles, generated elements, inline
-  styles). In Angular that happens outside change detection; in a zoneless app
-  the framework never learns about it, and on the next re-render your bindings
-  win and the mutation is gone.
-- It reads and writes `localStorage` for the theme, competing with whatever
-  service you build for the same job.
-
-So: no `"scripts"` entry in `angular.json`, no `import 'maverick-wave.min.js'`
-in a Vite entry point. Load the **CSS only** and rebuild the handful of
-behaviours in components. Each one is a few lines - the framework's state
-classes are the entire contract.
-
-## The theme has to be applied before the first paint
-
-`main.js` sits at the end of the body, so a stored choice that differs from the
-operating system reaches the page one frame too late - the reader sees the other
-theme flash. The fix is five lines in the `<head>`, inline and synchronous,
-before the stylesheet has painted anything:
-
-```html
-<script>
-  (function () {
-    var stored = localStorage.getItem('mw-theme');
-    if (stored === 'light' || stored === 'dark') {
-      document.documentElement.classList.add('mw-theme-' + stored);
-    }
-  })();
-</script>
-```
-
-That is also why the toggle writes the class on `<html>` and not on `<body>`:
-in the head there is no body yet. An external file would not help - it paints
-first. With nothing stored, nothing happens here and the page follows the OS on
-its own through `light-dark()`.
-
-## Behaviour inventory
-
-| Behaviour           | What the shipped JS does                                                                                                                                                                                                                                                        | What to do instead                                                                                                                                                                                                                 |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Accordion           | Toggles `mw-active` on `mw-accordion-header` and the following `mw-accordion-content`, and writes `aria-expanded` when the header is a `<button>`                                                                                                                               | `[class.mw-active]="isOpen()"` and `[attr.aria-expanded]="isOpen()"` on the header, `mw-active` on the panel                                                                                                                       |
-| Tabs                | `data-tab` → panel `id`; sets `mw-active` on nav item and panel, and wires the whole tablist: `role`, `aria-selected`, `aria-controls`, `aria-labelledby`, a roving `tabindex` and arrow/Home/End keys                                                                          | Track the selected index/key, bind `mw-active` on both; drop `data-tab`                                                                                                                                                            |
-| Modal               | `data-mw-modal="<id>"` on a trigger opens that modal; a click on `mw-modal-close` closes the `<dialog>` it sits in, or clears `mw-modal-open` on an overlay div                                                                                                                 | A `<dialog>` needs a directive calling `showModal()` - `[open]` only opens it non-modally. See `examples/angular-services.md`                                                                                                      |
-| Mobile nav          | Toggles `open` on `mw-menu-btn` and `mw-navbar` plus `mw-nav-open` on `<body>`, writes `aria-expanded` when the button is a `<button>`, closes on anchor click and on Escape (focus returns to the button)                                                                      | One signal, bound to all three - the body class carries the scrim, the scroll lock and the pinning of the bar; reset it on navigation end                                                                                          |
-| Scroll spy          | Sets `mw-active` on `mw-navbar-link` from the scroll position                                                                                                                                                                                                                   | Router-based: `routerLinkActive="mw-active"`                                                                                                                                                                                       |
-| Anchor scrolling    | Intercepts `a[href^="#"]` and runs its own eased scroll - duration scales with distance, capped at 1.4s, cancelled by wheel or touch. Lands on `scroll-padding-top`, moves focus to the target, writes the hash with `replaceState`, and measures a sticky target unpinned      | The router; for in-page anchors `scrollIntoView({ behavior: 'smooth' })` or your own animation                                                                                                                                     |
-| Theme toggle        | `localStorage['mw-theme']`, toggles `mw-theme-light` / `mw-theme-dark` on `<html>` and `mw-active` on the toggle, wrapped in `mw-theme-switching` on `<html>` so the flip starts no transitions. With nothing stored it takes `prefers-color-scheme` and keeps following it     | A theme service - see `examples/angular-services.md`                                                                                                                                                                               |
-| Progress bar        | `IntersectionObserver` sets `width` from `data-value`                                                                                                                                                                                                                           | Bind `[style.width.%]="value()"` on `mw-progress-fill`                                                                                                                                                                             |
-| Slider              | On `input`, sets `--value` (track fill) and `data-value` (badge text)                                                                                                                                                                                                           | Bind `[style.--value.%]` and `[attr.data-value]`                                                                                                                                                                                   |
-| Alerts              | Close button adds `mw-alert-closing` (fade out), then `mw-alert-closed` (`display: none`) after `--mw-duration-base`                                                                                                                                                            | Remove the alert from the list/signal                                                                                                                                                                                              |
-| Checkbox lists      | Adds `mw-selected` to the `li`, emits a `checkboxToggle` event, exposes `window.mwToggleCheckbox`                                                                                                                                                                               | `[class.mw-selected]="item.checked"`                                                                                                                                                                                               |
-| Gallery             | Generates the dots, moves the track, swipe handling (single finger, dominant axis, passive listeners), writes `mw-gallery-desc`                                                                                                                                                 | Render dots in the template, bind the track transform and `mw-active` on the current dot                                                                                                                                           |
-| Image slider        | Toggles `mw-active` on the overlay image and the control button with the matching `data-index`                                                                                                                                                                                  | Bind `mw-active` from the selected index                                                                                                                                                                                           |
-| Mosaic              | Sets `mw-mosaic-wide` / `mw-mosaic-tall` on a tile from the photo's proportions - its `width`/`height` attributes, else the natural size - unless a shape class is already there                                                                                                | Bind the shape class from the image size you already know                                                                                                                                                                          |
-| Lightbox            | Delegated: an image link inside `mw-mosaic` or `[data-mw-lightbox]` opens a `<dialog class="mw-lightbox">` built once - slides in reading order, images loaded one either side of the current, swipe, arrows and keys, focus back on the tile of the last photo                 | A component around a `<dialog>`: `showModal()`, a scroll-snap track, the index read from `scrollLeft`                                                                                                                              |
-| Portrait gallery    | Adds arrows and dots and keeps them in step with the scroll position; sets `mw-fit-contain` and a blurred `mw-fit-backdrop` on a slide whose photo is more than 1.4× off its shape, checked again by a `ResizeObserver`                                                         | Render arrows and dots, `scrollBy` one slide on click; bind `mw-fit-contain` from the image ratio                                                                                                                                  |
-| Story reel          | Playback is CSS. Adds the `mw-story-reel-prev` / `-next` tap zones and arrow keys (seeking through `getAnimations()`), starts a video when its frame comes up and stops it with the story, closes the popover at the end, focuses the close button on open                      | Keep the CSS playback and the popover; add stepping only if you need it, the same way                                                                                                                                              |
-| Kanban board        | Counts the tickets per lane, moves a card between lanes (`data-kanban-move`) and marks the arrival with `mw-kanban-card-moved-forward` / `-back`, clones `mw-kanban-card-template` on save, derives the next key from `data-kanban-prefix`, toggles `mw-active` on the composer | Keep the tickets in a signal/store and render the lanes from it; `mw-active` on the composer, `mw-kanban-editing` on the ticket it replaces. Neither the `<template>` nor the `mw-kanban-composer-*` hook classes are needed       |
-| 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 |
-| Viewport check      | On a local hostname, warns on the console when the viewport meta has no `viewport-fit=cover` - without it every `env(safe-area-inset-*)` resolves to 0                                                                                                                          | Nothing - check the meta tag once                                                                                                                                                                                                  |
-| 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); 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       | Older browsers 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       | Older browsers 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            | Older browsers 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, and measuring against `document.documentElement.clientHeight` - `innerHeight` grows by up to 100px as the URL bar slides away and steps every layer mid-scroll |
-
-## 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. Chrome and
-Edge have had timelines since 115, Firefox since 158 and Safari since 26, and
-there they need no script at all. Older versions get the shipped JS instead.
-Each one checks `CSS.supports('animation-timeline', ...)` first and does nothing
-where the browser has it.
-
-Without the script an older browser 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
-
-`mwOpenModal(id)` / `mwCloseModal(id)` are on `window` and handle both modal
-shapes - a `<dialog class="mw-modal">` and the older `mw-modal-overlay` div.
-Close buttons and `data-mw-modal="<id>"` triggers are delegated from the
-document, so markup rendered later still works and a static page needs no code
-of its own. In a SPA, call `showModal()` and `close()` on the element instead.
-
-`mw-progress-fill` takes its target width from `data-value="75"` or an inline
-`style="width: 75%"`. Where scroll-driven animations are supported the bar fills
-with the scroll position and the script only hands the value over; elsewhere it
-falls back to setting the width once the bar comes into view.
-
-## A note on the state class
-
-Since 4.0.0 the script writes `mw-active` and clears both `mw-active` and the
-deprecated bare `active` when it switches a state off. That is deliberate: HTML
-written against an older version marks the first tab with `active`, and if
-switching away only removed `mw-active`, that first tab would stay lit next to
-the newly chosen one. In your own components bind `mw-active` and forget the
-other spelling exists.
-
-## What works without any JavaScript
-
-Pure CSS, nothing to wire up: hover, focus and press states, the card lift,
-tooltips (`data-tooltip`), `mw-rating` (via `data-rating`), the responsive table
-card view (`data-label`), all grids and utilities, the body scroll lock while a
-modal is open (from the `<dialog>` element, or `body:has(.mw-modal-open)` for an
-overlay div), the modal turning into a bottom sheet below 576px, toast entry animations, the photo feed and its post cards (`popover`), story
-playback with its progress bar and pause, the sticky table header, the scroll
-hint on a tab bar (four gradients, no scroll listener), the kanban empty-lane
-placeholder (hidden via `:has()` as soon as the lane holds a ticket), touch
-target sizing on a coarse pointer, `prefers-reduced-motion` handling.
-
-`mw-dropdown` is _almost_ in this list: opening, closing, the keyboard and the
-open state are all the `<details>` element, so it works with no script at all.
-The only two things the shipped JS adds are closing on Escape and closing on a
-click somewhere else - worth rebuilding in a SPA, but a menu without them is
-still a working menu, not a broken one.
-
-## When you do keep the shipped JS
-
-For a static page, a landing page or a server-rendered site (Thymeleaf, Twig,
-Jekyll, plain HTML) it is exactly right - load it at the end of `<body>` and
-write no JavaScript at all. A modal opens from its trigger:
-
-```html
-<button class="mw-btn mw-btn-primary" data-mw-modal="demo">Book a demo</button>
-
-<dialog id="demo" class="mw-modal" closedby="any">
-  …
-  <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
-</dialog>
-
-<script src="maverick-wave.min.js"></script>
-```