maverick-wave 4.10.0 → 4.12.0

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

@@ -155,12 +155,39 @@ 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` = 110/180/300/520/900ms
+plus `--mw-duration-zoom` (650ms, for a large surface actually travelling),
+`--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 +198,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 +207,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 +224,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 +273,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 +296,68 @@ 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`, `mw-gallery-dot` and `mw-accordion-header` are all
+    written for one, and all four shipped as divs and spans - the first three
+    until 4.11, the accordion header until 4.12 - 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/examples/angular-services.md

@@ -194,7 +194,7 @@ export class ConfirmDialogComponent {
 
 ## Accordion
 
-`active` on the header **and** the content - no prefix.
+`mw-active` on the header **and** the content.
 
 ```ts
 @Component({
@@ -203,16 +203,20 @@ export class ConfirmDialogComponent {
     <div class="mw-accordion">
       @for (item of items(); track item.id; let i = $index) {
         <div class="mw-accordion-item">
-          <div
+          <button
+            type="button"
             class="mw-accordion-header"
             [class.mw-active]="openIndex() === i"
+            [attr.aria-expanded]="openIndex() === i"
+            [attr.aria-controls]="item.id"
             (click)="toggle(i)"
           >
-            <h3>{{ item.question }}</h3>
+            <span>{{ item.question }}</span>
             <i class="fas fa-chevron-down mw-accordion-icon"></i>
-          </div>
+          </button>
           <div
             class="mw-accordion-content"
+            [id]="item.id"
             [class.mw-active]="openIndex() === i"
           >
             <div class="mw-accordion-content-inner">{{ item.answer }}</div>

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

@@ -234,11 +234,16 @@ wired up by hand.
 
           <div class="mw-accordion">
             <div class="mw-accordion-item">
-              <div class="mw-accordion-header mw-active">
-                <h3>Where is the data stored?</h3>
+              <button
+                type="button"
+                class="mw-accordion-header mw-active"
+                aria-expanded="true"
+                aria-controls="faq-storage"
+              >
+                <span>Where is the data stored?</span>
                 <i class="fas fa-chevron-down mw-accordion-icon"></i>
-              </div>
-              <div class="mw-accordion-content mw-active">
+              </button>
+              <div class="mw-accordion-content mw-active" id="faq-storage">
                 <div class="mw-accordion-content-inner">
                   <p>In Frankfurt, in our own data centre.</p>
                 </div>
@@ -246,11 +251,16 @@ wired up by hand.
             </div>
 
             <div class="mw-accordion-item">
-              <div class="mw-accordion-header">
-                <h3>Can I cancel monthly?</h3>
+              <button
+                type="button"
+                class="mw-accordion-header"
+                aria-expanded="false"
+                aria-controls="faq-cancel"
+              >
+                <span>Can I cancel monthly?</span>
                 <i class="fas fa-chevron-down mw-accordion-icon"></i>
-              </div>
-              <div class="mw-accordion-content">
+              </button>
+              <div class="mw-accordion-content" id="faq-cancel">
                 <div class="mw-accordion-content-inner">
                   <p>Yes, at the end of every billing period.</p>
                 </div>

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
@@ -277,21 +317,32 @@ Tile sizes: `mw-tile-sm`, `mw-tile-lg`.
 ```html
 <div class="mw-accordion">
   <div class="mw-accordion-item">
-    <div class="mw-accordion-header mw-active">
-      <h3>Question</h3>
+    <button
+      type="button"
+      class="mw-accordion-header mw-active"
+      aria-expanded="true"
+      aria-controls="faq-1"
+    >
+      <span>Question</span>
       <i class="fas fa-chevron-down mw-accordion-icon"></i>
-    </div>
-    <div class="mw-accordion-content mw-active">
+    </button>
+    <div class="mw-accordion-content mw-active" id="faq-1">
       <div class="mw-accordion-content-inner">Answer</div>
     </div>
   </div>
 </div>
 ```
 
+The header is a `<button>` - it is the control that opens the panel, and a
+`<div>` is not focusable. A heading is not allowed inside a button, so the
+question is a `<span>` and the header carries the type itself; a nested `h3`
+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.
-Toggling is JS - see `references/javascript.md`.
+Toggling is JS - see `references/javascript.md`; the shipped script keeps
+`aria-expanded` in step when the header is a button.
 
 ## Tabs
 
@@ -809,6 +860,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`, 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                                                                                                                                                                                                                 | 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