maverick-wave 4.10.0 → 4.11.0

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

@@ -155,12 +155,38 @@ keys at all (negative gap is invalid CSS and is not generated).
 
 **Radius** (`mw-radius-none|xs|sm|md|lg|xl|2xl|full`): 0, 2, 5, 10, 15, 20, 30 px, 50%.
 
+**Elevation** (`mw-elevation-0` … `-5`, and `var(--mw-elevation-N)` inside SCSS).
+Two shadows per level - a tight contact layer plus a wide ambient one:
+`1` resting (inputs, tags), `2` raised (cards, panels at rest), `3` floating
+(a card under the pointer), `4` overlay (dropdown, popover, drawer), `5` modal.
+`0` is explicitly flat. Never write a `box-shadow` by hand - the twelve one-off
+values that used to exist are exactly what this replaced.
+
+**Motion** `--mw-duration-instant|fast|base|slow|slower` = 90/150/240/400/700ms,
+`--mw-ease-out` (things arriving - the default), `--mw-ease-in-out` (A to B and
+back), `--mw-ease-spring` (a pop). Two ready-made transitions:
+`var(--mw-transition)` for hover and focus states, `var(--mw-transition-fast)`
+for anything that should feel instant under the pointer. Both list their
+properties explicitly rather than saying `all`.
+
+**Control sizes** `--mw-control-height-sm|base|lg` = 2 / 2.25 / 2.5rem (an even
+32 / 36 / 40px step) and
+`--mw-control-font-sm|base|lg` = 0.8 / 0.9 / 1rem, shared by `mw-input`,
+`mw-select`, `mw-textarea` and `mw-btn`. A field and the button beside it are
+the same height by construction. Buttons run one font step above the fields.
+
+**Focus** `--mw-focus-ring-width` 2px, `--mw-focus-ring-offset` 2px,
+`--mw-focus-ring-color`, plus `--mw-focus-halo-size` 3px /
+`--mw-focus-halo-opacity` 28% for the soft ring a form field gets instead of a
+hard outline. SCSS: `@include focus-ring`, `focus-ring-inset`, `field-focus`.
+
 ## Component index
 
 Everything below is documented in `references/components.md` unless marked otherwise.
 
 **Actions** `mw-btn` (+ `primary`, `secondary`, `danger`, `success`, `outline`,
-`link`, `link-muted`, `plain`, `sm`, `lg`) · `mw-btn-mini` · `mw-button-bar`
+`ghost`, `ghost-danger`, `link`, `link-muted`, `plain`, `icon`, `block`, `sm`,
+`lg`) · `mw-btn-mini` · `mw-button-bar`
 (+ `left`, `right`, `center`, `between`) · `mw-segmented` · `mw-actions-note`
 
 **Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon,
@@ -171,7 +197,8 @@ feature frame) ·
 **Data & status** `mw-table` (+ `subtle`, `sticky-head`, `cards`, `compact`,
 `hover`, responsive wrappers) · `mw-kanban` (+ `plain`, `compact`) ·
 `mw-calendar` (+ `compact`, `plain`) · `mw-tag` /
-`mw-tags` · `mw-info` / `mw-info-mini` / `mw-info-counter` · `mw-progress-bar` ·
+`mw-tags` · `mw-badge` (+ `-dot`, `-status`, `-anchor`, `-float`, `-pulse`) ·
+`mw-info` / `mw-info-mini` / `mw-info-counter` · `mw-progress-bar` ·
 `mw-rating` · `mw-meta-header` · `mw-stepper` · `mw-timeline-big` /
 `mw-timeline-simple`
 
@@ -179,11 +206,13 @@ feature frame) ·
 `mw-spinner-border` / `mw-spinner-dots` / `mw-spinner-dual-ring` · `mw-skeleton`
 
 **Navigation** `mw-header` + `mw-navbar` · `mw-breadcrumbs` · `mw-pagination` ·
-`mw-section-nav` (`references/layout.md`)
+`mw-dropdown` (+ `-menu`, `-item`, `-item-danger`, `-divider`, `-label`,
+`-caret`, `-end`, `-up`) · `mw-section-nav` (`references/layout.md`)
 
 **Media & content** `mw-avatar` (+ `initials`, `group`) · `mw-gallery` ·
 `mw-image-slider` · `mw-blog-post` · `mw-code-block` / `mw-terminal` ·
-`mw-techstack-bucket` · `mw-coming-soon` · `mw-divider` · `mw-list` family
+`mw-techstack-bucket` · `mw-coming-soon` · `mw-divider` · `mw-kbd` ·
+`mw-list` family
 
 **Forms** (`references/forms.md`) `mw-field` · `mw-input` · `mw-select` ·
 `mw-textarea` · `mw-checkbox` · `mw-radio` · `mw-toggle` · `mw-slider` ·
@@ -194,9 +223,14 @@ feature frame) ·
 `mw-section` · `mw-page-header` · `mw-grid-*` · `mw-row-split` · `mw-hero` ·
 `mw-footer`
 
-**Utilities** (`references/layout.md`) `mw-sr-only` · `mw-row-split`
-(+ `center`) · `mw-text-numeric` / `mw-text-currency` · spacing, flex, display,
-text
+**Utilities** (`references/layout.md`) `mw-sr-only` / `mw-sr-only-focusable` /
+`mw-skip-link` · `mw-row-split` (+ `center`) · `mw-text-numeric` /
+`mw-text-currency` · `mw-text-truncate` / `mw-text-clamp-2..5` /
+`mw-text-break` / `mw-text-nowrap` · `mw-text-balance` / `mw-text-pretty` /
+`mw-text-eyebrow` / `mw-text-measure` · `mw-elevation-0..5` ·
+`mw-aspect-square|video|wide|portrait|photo` · `mw-d-{sm,md,lg,xl}-*` /
+`mw-hide-mobile` / `mw-hide-desktop` · `mw-overflow-*` / `mw-snap-x` ·
+spacing, flex, display, text
 
 ## Pitfalls
 
@@ -238,11 +272,13 @@ text
     Safari 16.4+, Firefox 128+. Both carry the derived tones, so older browsers
     get no colours at all, not merely worse ones.
 11. **Touch targets grow on their own.** On `pointer: coarse` or below 768px,
-    `mw-btn-sm`, `mw-input-sm`, `mw-select-sm` and `mw-textarea-sm` get a 2.5rem
-    minimum height, a tab 2.75rem, a calendar day 44px. `mw-btn-mini` keeps its
-    18px circle - it sits in tag rows and table cells where a bigger one would
-    shift the layout - and grows its _hit area_ to 28px via a pseudo-element.
-    Nothing to switch on, and no reason to write the media query again in an app.
+    `mw-btn` gets a 2.75rem minimum height, `mw-btn-sm`, `mw-input-sm`,
+    `mw-select-sm` and `mw-textarea-sm` 2.5rem, a tab 2.75rem, a calendar day
+    44px, and list rows / menu items / pager pages / accordion headers 2.75rem.
+    `mw-btn-mini` keeps its 18px circle - it sits in tag rows and table cells
+    where a bigger one would shift the layout - and grows its _hit area_ to 28px
+    via a pseudo-element. Nothing to switch on, and no reason to write the media
+    query again in an app.
 12. **`mw-empty-state` has a `-desc`, not a `-text`.** The parts are
     `mw-empty-state-icon`, `-title`, `-desc`, plus the size variant
     `mw-empty-state-sm`. Invented names fail silently, as always.
@@ -259,3 +295,67 @@ text
     that host - it then generates no box and the children take the item role
     back. Angular: `host: { class: 'mw-d-contents' }`. `mw-header` handles this
     case on its own, the others do not.
+15. **A badge is not a tag.** `mw-tag` names something - a topic, a state - and
+    sits in a row of its own kind, with a tinted surface. `mw-badge` carries a
+    _count_ or a _status_ and usually sits **on** something, filled rather than
+    tinted. Number on a bell: badge. "Draft" next to a title: tag.
+16. **A dropdown is a `<details>`, not a div.** `<details class="mw-dropdown">`
+    with a `<summary>` trigger - that is where the keyboard handling, the focus
+    and the open state come from, and it works without script. The framework JS
+    only adds Escape and click-outside. Writing your own div-plus-click loses all
+    of it.
+17. **An open dropdown is clipped by anything that hides its overflow.** The menu
+    is absolutely positioned. The framework's own containers - panel, card, tile,
+    modal body, responsive table - lift the clip while a menu is open. On your
+    own container it is one line:
+    `:has(.mw-dropdown[open]) { overflow: visible }`.
+18. **Never write `box-shadow` by hand.** Use `var(--mw-elevation-1..5)` or the
+    `mw-elevation-*` class. A hand-rolled shadow is the wrong colour in one of
+    the two themes - the dark theme's shadow is a light rim over a dark contact
+    layer, not a black blur.
+19. **Never write a duration or an easing curve by hand** either. Use
+    `var(--mw-transition)` for a hover or focus state,
+    `var(--mw-transition-fast)` for something that should feel instant, and
+    `var(--mw-duration-*)` with `var(--mw-ease-*)` for anything else. That is
+    also what makes `prefers-reduced-motion` work - it turns the duration tokens
+    down, so anything built on them is covered for free.
+20. **A hover effect that _moves_ something needs the `hover` mixin.** On touch
+    `:hover` latches after a tap and stays on, so a lifted card stays lifted,
+    visibly out of line with its row. `@include hover { transform: ... }` -
+    colour changes are fine unguarded, movement is not. The framework's own
+    components already do this.
+21. **Below 576px a modal is a bottom sheet.** Full width, anchored to the bottom
+    edge, rounded on the top two corners, with a grab handle and full-width
+    actions in the footer. Nothing to switch on - do not fight it with your own
+    media query, and do not put a fixed height on `mw-modal`.
+22. **Press states exist on every control**, because a finger never hovers.
+    `mw-btn` and friends dip 1px and invert their highlight, `mw-btn-mini` and
+    `mw-modal-close` scale down. If you build your own control, give it an
+    `:active` - on touch it is the only feedback there is.
+23. **Never set a height on a form control.** `mw-input`, `mw-select`,
+    `mw-textarea` and `mw-btn` all take their minimum height from the control
+    scale, so a field and the button next to it line up on their own. Pick the
+    size step (`-sm` / nothing / `-lg`) and leave the height alone - a hand-set
+    one puts that control back out of line with everything around it.
+24. **Put the size modifier on the input group, not inside it.**
+    `mw-input-group-sm` and `-lg` size the prefix, the suffix _and_ the field.
+    Adding `mw-input-sm` inside as well is redundant, and mixing the two steps
+    is what makes a group look broken.
+25. **Loops keep their own timing, entrances go on the scale.** A spinner, a
+    skeleton shimmer and a pulse ring are ambient - running them at 300ms would
+    be frantic, and they are the one place a hand-written duration is right.
+    Anything that plays once - a panel appearing, a card sliding in, a drawer -
+    uses `var(--mw-duration-*)`.
+26. **`transition: all` is out.** `var(--mw-transition)` lists paint-only
+    properties on purpose. The one exception in the framework is the header
+    burger, which morphs by animating `top` and `bottom`, and it says so in a
+    comment. If your component really does need to animate a size, name that
+    property - do not reach for `all`.
+27. **A control is a `<button>`, never a styled `<div>`.** `mw-tabs-nav-item`,
+    `mw-theme-toggle` and `mw-gallery-dot` are all written for one, and all
+    three shipped as divs and spans before 4.11 that no keyboard could reach.
+    Each class clears what a `<button>` brings with it, so
+    `<button type="button" class="mw-tabs-nav-item" data-tab="...">` is the
+    whole markup. If you build your own clickable thing: the element decides
+    whether anyone without a mouse can use it, the class only decides how it
+    looks.

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

@@ -15,15 +15,55 @@ exhaustive: what is not named does not exist.
 ```
 
 - Variants: `mw-btn-primary`, `mw-btn-secondary`, `mw-btn-danger`,
-  `mw-btn-success`, `mw-btn-outline`, `mw-btn-link`, `mw-btn-link-muted`
+  `mw-btn-success`, `mw-btn-outline`, `mw-btn-ghost`, `mw-btn-ghost-danger`,
+  `mw-btn-link`, `mw-btn-link-muted`
+- Shapes: `mw-btn-icon` (square, for an icon-only button), `mw-btn-block`
+  (full width)
 - Sizes: `mw-btn-sm`, `mw-btn-lg`
 - `mw-btn` is `inline-flex` with a gap - icons need no wrapper and no extra class
 - `disabled` gets `opacity: .6` and `not-allowed`; there is no disabled class
 - `mw-active` gives the pressed/selected look on the coloured variants
+- Every variant dips 1px on `:active`, and the solid ones invert their top
+  highlight into an inner shadow. On touch that press is the only feedback there
+  is, so do not override it away
 - `mw-btn-link` still has the button padding - `mw-p-0` makes it read as inline
   text
-- On a coarse pointer or below 768px `mw-btn-sm` grows to a 2.5rem minimum
-  height on its own
+- On a coarse pointer or below 768px `mw-btn` grows to a 2.75rem minimum height
+  and `mw-btn-sm` to 2.5rem, on their own
+
+### Three emphasis levels
+
+`mw-btn-primary` (or any solid colour) **fills**, `mw-btn-outline` **draws a
+line**, `mw-btn-ghost` does **neither** until you point at it. Ghost is what a
+toolbar, a card's own actions or a row of icon buttons wants - five outlined
+boxes in a row fight the content they sit on.
+
+```html
+<button type="button" class="mw-btn mw-btn-ghost">Rename</button>
+<button type="button" class="mw-btn mw-btn-ghost mw-btn-ghost-danger">
+  Remove
+</button>
+```
+
+Ghost is not `mw-btn-plain`: it keeps the button's shape, padding and hit area
+and only leaves them unpainted at rest. `mw-btn-plain` has no look at all.
+
+### Icon-only buttons
+
+```html
+<button
+  type="button"
+  class="mw-btn mw-btn-ghost mw-btn-icon"
+  aria-label="Duplicate"
+>
+  <i class="fas fa-copy"></i>
+</button>
+```
+
+`mw-btn-icon` makes the button square and follows the size modifier next to it
+(`mw-btn-sm` / `mw-btn-lg`), growing to 2.75rem on a coarse pointer. It always
+needs an `aria-label` - there is no text to read out. Combine it with any
+variant; ghost is usually the right one.
 
 ### `mw-btn-plain` - a button with no button in it
 
@@ -75,7 +115,7 @@ Row of equally treated buttons, centered by default.
 - Alignment: `mw-button-bar-left`, `-right`, `-center` (which is also the
   default), `mw-button-bar-between` pushes first and last apart.
 - Sizes: `mw-button-bar-sm`, `mw-button-bar-lg`.
-- Below 576px it stacks and gives every button 96% width. Right for a row of
+- Below 576px it stacks and gives every button the full width. Right for a row of
   independent actions - wrong for a switch, see below.
 
 ### `mw-actions-note` - one line above a row of actions
@@ -809,6 +849,114 @@ Container variants: `mw-tags-primary`, `-secondary`, `-success`, `-info`,
 `-warning`, `-danger`, `-muted`, size `mw-tags-lg`. `mw-tags-remove` only
 positions the button - its look comes from `mw-btn-mini` plus a colour variant.
 
+## Badges
+
+A count or a status, not a label. See the pitfall list in `SKILL.md` for the
+badge-versus-tag rule: a tag names something and sits in a row of its own kind,
+a badge carries a number or a state and usually sits _on_ something.
+
+```html
+<span class="mw-badge mw-badge-danger">99+</span>
+```
+
+Colours: `mw-badge-primary` (the default), `-secondary`, `-success`, `-warning`,
+`-danger`, `-info`, `-muted`, plus `mw-badge-outline`. Sizes: `mw-badge-sm`,
+`mw-badge-lg`.
+
+Round on one character, a pill from two on - a `min-width` the padding grows
+past. The digits are `tabular-nums`, so a counter ticking 9 to 10 does not shift
+what sits beside it.
+
+**On an icon or a button:**
+
+```html
+<span class="mw-badge-anchor">
+  <button class="mw-btn mw-btn-outline">
+    <i class="fas fa-inbox"></i> Inbox
+  </button>
+  <span class="mw-badge mw-badge-danger mw-badge-float">5</span>
+</span>
+```
+
+`mw-badge-anchor` on the thing being badged, `mw-badge-float` on the badge. It
+hangs half off the corner and carries a ring in the surface colour, so it reads
+as a separate object rather than a blob on the icon. The ring follows the
+surface automatically inside a card, panel, modal, tile or the header.
+
+**Status:**
+
+```html
+<span class="mw-badge-status mw-badge-status-success">
+  <span class="mw-badge-dot"></span> Online
+</span>
+```
+
+`mw-badge-status-{primary|secondary|success|warning|danger|info|muted}` colours
+the dot inside it. A bare `mw-badge-dot-{colour}` works on its own too. Add
+`mw-badge-pulse` for something actually running - a job, an open connection: a
+ring grows out and fades while the dot underneath stays put, so a column of them
+in a table stays readable. Not for decoration.
+
+## Dropdown
+
+Built on `<details>` / `<summary>`. That is where the keyboard handling, the
+focus behaviour and the open state a screen reader can see come from, and it
+works with JavaScript switched off. The framework script only adds Escape and
+click-outside.
+
+```html
+<details class="mw-dropdown">
+  <summary class="mw-btn mw-btn-primary">
+    Actions <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+  </summary>
+  <div class="mw-dropdown-menu">
+    <div class="mw-dropdown-label">Manage</div>
+    <button class="mw-dropdown-item"><i class="fas fa-pen"></i> Edit</button>
+    <button class="mw-dropdown-item mw-active">Duplicate</button>
+    <button class="mw-dropdown-item" disabled>Move</button>
+    <hr class="mw-dropdown-divider" />
+    <button class="mw-dropdown-item mw-dropdown-item-danger">
+      <i class="fas fa-trash"></i> Delete
+    </button>
+  </div>
+</details>
+```
+
+Parts: `mw-dropdown-menu`, `-item`, `-item-danger`, `-divider`, `-label`,
+`-caret` (rotates with the open state on its own). Alignment:
+`mw-dropdown-end` anchors the menu to the trigger's right edge,
+`mw-dropdown-up` opens it upward.
+
+`mw-active` (or `aria-checked="true"`) marks the current choice, for a menu that
+picks rather than acts. Icons inside items keep one column, so labels line up
+whether or not every item has one.
+
+The menu is absolutely positioned and is clipped by any ancestor that hides its
+overflow. The framework's own containers lift that clip while a menu is open; on
+your own it is `:has(.mw-dropdown[open]) { overflow: visible }`.
+
+On a coarse pointer the rows grow to 2.75rem and the menu takes at least the
+trigger's full width.
+
+## Keyboard keys
+
+`<kbd>` is styled directly, so a shortcut in prose needs no class:
+
+```html
+<p>
+  Press
+  <span class="mw-kbd-group"
+    ><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd></span
+  >
+  to open the palette, <kbd>Esc</kbd> to close.
+</p>
+```
+
+`mw-kbd` is the same look for a `<span>` when the markup is not yours to change.
+`mw-kbd-group` wraps a combination so the pluses are spaced and the whole thing
+cannot wrap apart. `mw-kbd-pressed` shows a key mid-press - the raised bottom
+edge drops and the key sits 1px lower.
+
 ## Info badges & counters
 
 ```html

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

@@ -1,5 +1,31 @@
 # Forms
 
+## Control sizes
+
+`mw-input`, `mw-select`, `mw-textarea` and `mw-btn` share one scale:
+
+| step  | height  | font   |
+| ----- | ------- | ------ |
+| `-sm` | 2rem    | 0.8rem |
+| base  | 2.25rem | 0.9rem |
+| `-lg` | 2.5rem  | 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

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

@@ -25,25 +25,26 @@ classes are the entire contract.
 
 ## 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`                                                                                                                       | `[class.mw-active]="isOpen()"` on both elements                                                                                                                                                                              |
-| Tabs                | `data-tab` → panel `id`; sets `mw-active` on nav item and panel                                                                                                                                             | Track the selected index/key, bind `mw-active` on both; drop `data-tab`                                                                                                                                                      |
-| Modal               | Click on `mw-modal-close` removes `mw-modal-open` from the overlay                                                                                                                                          | `[class.mw-modal-open]="isOpen()"`; backdrop click closes. Opening is not in the script at all (the showcase has its own `openModal`)                                                                                        |
-| Mobile nav          | Toggles `open` on `mw-menu-btn` and `mw-navbar`, closes on anchor click                                                                                                                                     | One signal, bound to both; reset it on navigation end                                                                                                                                                                        |
-| Scroll spy          | Sets `mw-active` on `mw-navbar-link` from the scroll position                                                                                                                                               | Router-based: `routerLinkActive="mw-active"`                                                                                                                                                                                 |
-| Theme toggle        | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `mw-active` on the toggle                                                                                                              | 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-closed` (`display: none`)                                                                                                                                                       | Remove the alert from the list/signal                                                                                                                                                                                        |
-| Checkbox lists      | Adds `mw-selected` to the `li`, emits a `checkboxToggle` event, exposes `window.toggleCheckbox`                                                                                                             | `[class.mw-selected]="item.checked"`                                                                                                                                                                                         |
-| Gallery             | Generates the dots, moves the track, swipe handling, 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                                                                                                                                                                                     |
-| Kanban board        | Counts the tickets per lane, moves a card between lanes (`data-kanban-move`), 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 |
-| 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                                                                                                                                                                                                                   |
+| Behaviour           | What the shipped JS does                                                                                                                                                                                                                                                        | What to do instead                                                                                                                                                                                                           |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Accordion           | Toggles `mw-active` on `mw-accordion-header` and the following `mw-accordion-content`                                                                                                                                                                                           | `[class.mw-active]="isOpen()"` on both elements                                                                                                                                                                              |
+| Tabs                | `data-tab` → panel `id`; sets `mw-active` on nav item and panel                                                                                                                                                                                                                 | Track the selected index/key, bind `mw-active` on both; drop `data-tab`                                                                                                                                                      |
+| Modal               | Click on `mw-modal-close` removes `mw-modal-open` from the overlay                                                                                                                                                                                                              | `[class.mw-modal-open]="isOpen()"`; backdrop click closes. Opening is not in the script at all (the showcase has its own `openModal`)                                                                                        |
+| Mobile nav          | Toggles `open` on `mw-menu-btn` and `mw-navbar`, closes on anchor click                                                                                                                                                                                                         | One signal, bound to both; reset it on navigation end                                                                                                                                                                        |
+| Scroll spy          | Sets `mw-active` on `mw-navbar-link` from the scroll position                                                                                                                                                                                                                   | Router-based: `routerLinkActive="mw-active"`                                                                                                                                                                                 |
+| Theme toggle        | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `mw-active` on the toggle                                                                                                                                                                                  | 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-closed` (`display: none`)                                                                                                                                                                                                                           | Remove the alert from the list/signal                                                                                                                                                                                        |
+| Checkbox lists      | Adds `mw-selected` to the `li`, emits a `checkboxToggle` event, exposes `window.toggleCheckbox`                                                                                                                                                                                 | `[class.mw-selected]="item.checked"`                                                                                                                                                                                         |
+| Gallery             | Generates the dots, moves the track, swipe handling, 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                                                                                                                                                                                     |
+| 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 |
+| 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                                                                                                                                                                                                                   |
+| 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                                        |
 
 ## A note on the state class
 
@@ -56,14 +57,20 @@ other spelling exists.
 
 ## What works without any JavaScript
 
-Pure CSS, nothing to wire up: hover and focus 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 (`body:has(.mw-modal-open)`), toast entry animations, 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.
+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 (`body:has(.mw-modal-open)`), the modal turning into a bottom
+sheet below 576px, toast entry animations, 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
 

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

@@ -117,7 +117,7 @@ same height as the login and burger buttons.
   palette. All of them derive from `--mw-primary-color`, not from a theme
   colour: the bar is dark in both themes and a light-only project must not have
   to configure dark-theme values to change it. The bar itself is the primary
-  darkened toward black, `$header-surface` (16%) - see `theming.md`.
+  darkened toward black, `$header-surface` (14%) - see `theming.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/
@@ -238,8 +238,8 @@ mode with the background image from `--mw-hero-background`.
 `mw-home-content-fade` fades the content in.
 
 The image is treated per theme through `--mw-hero-image-filter` - a filter, not
-a tinted overlay: `$hero-filter-dark` (`brightness(0.5)`) against
-`$hero-filter-light` (`brightness(1.15) saturate(1.2)`). A translucent layer can
+a tinted overlay: `$hero-filter-dark` (`brightness(0.7)`) against
+`$hero-filter-light` (`brightness(1.1)`). A translucent layer can
 only darken toward its own colour, so on an already dark photo both themes look
 the same until the alpha is high enough that the tint colour is what you see.
 Moving the image's brightness reads as a difference even on a dark photo, and
@@ -314,6 +314,41 @@ automatically.
 **Display** - `mw-d-flex`, `mw-d-inline-flex`, `mw-d-block`, `mw-d-inline`,
 `mw-d-inline-block`, `mw-d-grid`, `mw-d-none`, `mw-d-contents`.
 
+**Responsive display** - `mw-d-{sm|md|lg|xl}-{none|block|flex|inline-flex|grid|inline-block}`.
+Mobile-first and min-width, like everything else here: `mw-d-md-flex` means
+"flex from the md breakpoint up", and the unprefixed class beside it is what
+applies below that. The pair `mw-d-none mw-d-md-flex` is hidden on a phone and a
+row from a tablet on. `mw-hide-mobile` (gone below md) and `mw-hide-desktop`
+(gone from md up) spell out the two everyone actually reaches for.
+
+**Text overflow** - `mw-text-truncate` is one line ending in an ellipsis and
+carries `min-width: 0` with it, which is the reason truncation "does not work"
+nine times out of ten inside a flex row. `mw-text-clamp-2` through `-5` is that
+many lines ending in one. `mw-text-break` is for a string with nothing to break
+at - a URL, a hash, an API key - and is what keeps a phone page from scrolling
+sideways. `mw-text-nowrap` is the opposite.
+
+**Wrapping and measure** - `mw-text-balance` evens out the lines of a short
+block so a headline never leaves one word alone (headings get it already);
+`mw-text-pretty` only prevents the orphan and is the one for body copy
+(paragraphs get it already). `mw-text-measure` caps a column at 68 characters -
+past roughly 75 the eye loses the start of the next line on the way back.
+`mw-text-eyebrow` is the small spaced upper-case kicker above a heading.
+`mw-text-uppercase` carries the letter-spacing capitals need to stay legible
+with it; `mw-text-capitalize` is the plain transform.
+
+**Elevation** - `mw-elevation-0` through `-5`, the same ramp every component
+uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
+
+**Aspect ratio** - `mw-aspect-square|video|wide|portrait|photo`. Reserves the
+box before the image inside it has loaded, so the page does not reflow when the
+picture arrives. The child fills the box and crops rather than stretching.
+
+**Overflow and scrolling** - `mw-overflow-auto`, `mw-overflow-x-auto` (which
+also contains the overscroll, so a sideways swipe on a wide table does not walk
+the whole page), `mw-overflow-hidden`, and `mw-snap-x` to make a horizontal
+strip come to rest on an item instead of halfway between two.
+
 **Numbers** - `mw-text-numeric` is fixed-width digits and nothing else, for a
 clock, a counter or an ID that must not jitter while it changes.
 `mw-text-currency` adds right alignment and `nowrap` on top, which is what a