maverick-wave 3.11.0 → 4.0.0

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

@@ -19,9 +19,27 @@ exhaustive: what is not named does not exist.
 - 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
-- `active` (no prefix) gives the pressed/selected look on the coloured variants
+- `mw-active` gives the pressed/selected look on the coloured variants
 - `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
+
+### `mw-btn-plain` - a button with no button in it
+
+For everywhere a `<button>` is the right element and a button is the wrong look:
+a calendar day, a time in a request row, a settings tab, a modal backdrop.
+
+```html
+<button type="button" class="mw-btn-plain">14:30</button>
+```
+
+It clears `appearance`, background, border, padding and margin, inherits font
+and colour, and keeps exactly two things: the pointer and the focus ring. Used
+on its own - `mw-btn` is neither needed nor wanted next to it.
+
+Not the same as `mw-btn-link`, which is a button dressed as a link and brings
+its own colour and minimum width.
 
 **Destructive actions use `mw-btn-danger`.** `mw-btn-secondary` is a brand
 colour, not a semantic one.
@@ -54,9 +72,56 @@ Row of equally treated buttons, centered by default.
 - Colouring: `mw-button-bar-primary`, `-secondary`, `-outline` style the bare
   `mw-btn` children, so the buttons carry no variant class themselves.
   `mw-button-bar-nav` mixes them for prev/center/next navigation.
-- Alignment: `mw-button-bar-left`, `-right` (default is centered),
-  `mw-button-bar-between` pushes first and last apart.
+- 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
+  independent actions - wrong for a switch, see below.
+
+### `mw-actions-note` - one line above a row of actions
+
+```html
+<div class="mw-modal-footer">
+  <p class="mw-actions-note">This action cannot be undone.</p>
+  <button class="mw-btn mw-btn-outline">Cancel</button>
+  <button class="mw-btn mw-btn-danger">Delete</button>
+</div>
+```
+
+Right-aligned, muted, one size smaller. For what the buttons apply to, why one
+of them is disabled, or that something cannot be taken back.
+
+- Works in `mw-modal-footer`, `mw-card-footer`, `mw-form-actions` and
+  `mw-panel-footer`. It is a child of the action row, not a wrapper around it:
+  the line takes the full width and pushes the buttons onto the row below.
+- Only rows that actually carry a note start wrapping, so adding one changes
+  nothing anywhere else.
+- Inside `mw-form-actions` the alignment variants steer it as well -
+  `mw-form-actions-left` makes the note left-aligned too.
+- `mw-form-actions-hint` is the old, form-only name for the same thing. Still
+  styled, but use `mw-actions-note`: the hint name is wrong the moment the line
+  sits in a modal.
+
+### Segmented control
+
+Two or three positions of **one** switch: income/expense, offer/quote, a period
+picker.
+
+```html
+<div class="mw-segmented">
+  <button type="button" class="mw-segmented-item mw-active">Income</button>
+  <button type="button" class="mw-segmented-item">Expense</button>
+</div>
+```
+
+- Stays horizontal at every width and splits the row into equal shares - which
+  is the whole point. Stacked in a `mw-button-bar`, two positions of a switch
+  look like two buttons you could press both of.
+- Active position: `mw-active` on the item.
+- `mw-segmented-secondary` switches the active fill to the secondary colour,
+  `mw-segmented-auto` shrinks the control to its content instead of filling the
+  row. `disabled` works on an item.
+- Items reach a 2.5rem minimum height on a coarse pointer.
 
 ## Cards
 
@@ -169,11 +234,11 @@ Tile sizes: `mw-tile-sm`, `mw-tile-lg`.
 ```html
 <div class="mw-accordion">
   <div class="mw-accordion-item">
-    <div class="mw-accordion-header active">
+    <div class="mw-accordion-header mw-active">
       <h3>Question</h3>
       <i class="fas fa-chevron-down mw-accordion-icon"></i>
     </div>
-    <div class="mw-accordion-content active">
+    <div class="mw-accordion-content mw-active">
       <div class="mw-accordion-content-inner">Answer</div>
     </div>
   </div>
@@ -189,11 +254,11 @@ via the header state. Content taller than 500px scrolls. Toggling is JS - see
 ```html
 <div class="mw-tabs">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item active" data-tab="tab1">Details</div>
+    <div class="mw-tabs-nav-item mw-active" data-tab="tab1">Details</div>
     <div class="mw-tabs-nav-item" data-tab="tab2">History</div>
   </div>
   <div class="mw-tabs-content">
-    <div class="mw-tabs-panel active" id="tab1">...</div>
+    <div class="mw-tabs-panel mw-active" id="tab1">...</div>
     <div class="mw-tabs-panel" id="tab2">...</div>
   </div>
 </div>
@@ -202,8 +267,15 @@ via the header state. Content taller than 500px scrolls. Toggling is JS - see
 - Variants: `mw-tabs-vertical` (nav on the left, horizontal again below `sm`),
   `mw-tabs-pills`.
 - `data-tab` matches the panel `id` - that pairing is only needed for the
-  shipped JS. In a SPA, bind `active` yourself and drop the attribute.
-- The nav scrolls horizontally on small screens instead of wrapping.
+  shipped JS. In a SPA, bind `mw-active` yourself and drop the attribute.
+- The nav scrolls horizontally instead of wrapping, and says so: a shadow shows
+  on whichever side still has tabs behind it and disappears once that end is
+  reached. Pure CSS, no scroll listener. The fade colour comes from
+  `--mw-scroll-hint-cover`, which is preset to the page background and
+  re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`,
+  `mw-tile` and `mw-calendar` - override it if the strip sits on some other
+  surface.
+- Tab items reach a 2.75rem minimum height on a coarse pointer.
 
 ## Modal
 
@@ -215,9 +287,10 @@ via the header state. Content taller than 500px scrolls. Toggling is JS - see
       <button class="mw-modal-close" type="button">&#120299;</button>
     </div>
     <div class="mw-modal-body">
-      <p>This cannot be undone.</p>
+      <p>Invoice 2026-0042 will be removed.</p>
     </div>
     <div class="mw-modal-footer">
+      <p class="mw-actions-note">This action cannot be undone.</p>
       <button class="mw-btn mw-btn-outline">Cancel</button>
       <button class="mw-btn mw-btn-danger">Delete</button>
     </div>
@@ -230,11 +303,12 @@ via the header state. Content taller than 500px scrolls. Toggling is JS - see
   class is the whole open/close mechanism.
 - Body scroll lock is automatic: the stylesheet uses
   `body:has(.mw-modal-open)`. Nothing to implement.
-- Sizes: `mw-modal-sm` 370px, default 550px, `mw-modal-lg` 680px,
-  `mw-modal-xl` 900px. Height is capped at 80-92dvh, the body scrolls.
+- Sizes: `mw-modal-sm` 370px, default 520px, `mw-modal-lg` 720px,
+  `mw-modal-xl` 960px. Height is capped at 80-92dvh, the body scrolls.
 - `mw-modal-backdrop` is the click-to-close surface; put the close handler on it.
 - `mw-modal-body` takes a `mw-form` directly - the form brings the field gaps,
   the body brings the padding.
+- `mw-actions-note` is the muted line above the buttons - see below.
 
 Angular: `<div class="mw-modal-overlay" [class.mw-modal-open]="isOpen()">`.
 
@@ -355,9 +429,17 @@ Shapes: `mw-skeleton-title`, `-text`, `-circle`, `-rect` (+ `-rect-sm`,
 | `mw-table-hover`             | Stronger row hover                                                                                                      |
 | `mw-table-cards`             | Below `md` every row becomes a card; keep `<thead>` (hidden via CSS) and give each cell a `data-label`                  |
 | `mw-table-responsive`        | Wrapper, horizontal scroll                                                                                              |
+| `mw-table-responsive-hint`   | On top of the wrapper: a soft right edge showing there are more columns. Opt-in - see below                             |
 | `mw-table-responsive-scroll` | Wrapper with a height cap (`--mw-table-scroll-height`, 400px / 260px below `sm`) and vertical scroll                    |
 | `mw-table-sticky-head`       | Header stays put while the body scrolls - only works inside a height-limited wrapper, i.e. `mw-table-responsive-scroll` |
 
+`mw-table-responsive-hint` is opt-in, unlike the automatic hint on a tab bar,
+and works differently for a reason: a table paints its own opaque surface, so
+the gradient trick used on `mw-tabs-nav` would sit _behind_ the rows and never
+show. A mask sits in front and does show - but a mask has no `local` attachment,
+so it cannot fade away once the last column is reached. Put the class on the
+tables you know overflow, leave it off the ones that fit.
+
 ```html
 <div class="mw-table-responsive-scroll" style="--mw-table-scroll-height: 250px">
   <table class="mw-table mw-table-subtle mw-table-sticky-head">
@@ -510,6 +592,139 @@ lane it is needed in.
   them.
 - `mw-kanban-editing` hides the ticket the composer is currently replacing.
 
+## Calendar
+
+A card-shaped surface with a header and a seven column grid. A month is six
+rows, a week is one - same classes, same cell size, the only difference is how
+many cells you render. Which page is on screen is application state: the shipped
+JS renders it from `data-calendar`, an Angular app renders the same markup
+itself.
+
+```html
+<div
+  class="mw-calendar"
+  data-calendar="month"
+  data-calendar-markers='{"2026-08-19": ["success", "warning"]}'
+>
+  <div class="mw-calendar-header">
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+      data-calendar-nav="-1"
+      aria-label="Previous month"
+    >
+      <i class="fas fa-chevron-left"></i>
+    </button>
+
+    <div class="mw-calendar-title" aria-live="polite">August 2026</div>
+
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+      data-calendar-nav="1"
+      aria-label="Next month"
+    >
+      <i class="fas fa-chevron-right"></i>
+    </button>
+  </div>
+
+  <div class="mw-calendar-grid">
+    <div class="mw-calendar-weekday" aria-hidden="true">Mon</div>
+    ...
+    <div class="mw-calendar-weekday mw-calendar-weekend" aria-hidden="true">
+      Sat
+    </div>
+
+    <button
+      type="button"
+      class="mw-calendar-day mw-calendar-adjacent"
+      aria-label="Monday, 27 July 2026"
+    >
+      <span class="mw-calendar-date">27</span>
+    </button>
+
+    <button
+      type="button"
+      class="mw-calendar-day mw-calendar-today"
+      aria-current="date"
+      aria-pressed="false"
+      aria-label="Wednesday, 19 August 2026"
+    >
+      <span class="mw-calendar-date">19</span>
+      <span class="mw-calendar-dots">
+        <span class="mw-calendar-dot mw-calendar-dot-success"></span>
+        <span class="mw-calendar-dot mw-calendar-dot-warning"></span>
+      </span>
+    </button>
+    ...
+  </div>
+
+  <div class="mw-calendar-legend">
+    <span class="mw-calendar-legend-item">
+      <span class="mw-calendar-dot mw-calendar-dot-success"></span>
+      Slots free
+    </span>
+    ...
+  </div>
+</div>
+```
+
+| Class                     | Role                                                                                                                                                |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mw-calendar`             | Surface. Same border, radius and shadow as a card, without the hover lift                                                                           |
+| `mw-calendar-plain`       | Drops the surface - for a calendar already sitting on a card or panel                                                                               |
+| `mw-calendar-compact`     | Date picker density: dots hidden, 29px cells, tighter header and labels                                                                             |
+| `mw-calendar-header`      | Arrow, title, arrow                                                                                                                                 |
+| `mw-calendar-nav`         | Sits **on** `mw-btn` - only squares it off around the chevron                                                                                       |
+| `mw-calendar-title`       | Takes the space between the arrows, stays optically centred                                                                                         |
+| `mw-calendar-grid`        | The seven column grid; weekday labels and day cells are its only children                                                                           |
+| `mw-calendar-weekday`     | Column label. Decorative - the day buttons carry the weekday themselves                                                                             |
+| `mw-calendar-day`         | One day. A `button`, so `:disabled` gives you an unavailable day                                                                                    |
+| `mw-calendar-date`        | The number                                                                                                                                          |
+| `mw-calendar-adjacent`    | Day of the neighbouring month - muted, still readable                                                                                               |
+| `mw-calendar-weekend`     | Saturday/Sunday. Tinted cell; on the label it turns the text secondary                                                                              |
+| `mw-calendar-today`       | Outlined in the secondary colour, bold                                                                                                              |
+| `mw-selected`             | Filled with the primary colour                                                                                                                      |
+| `mw-calendar-dots`        | Dot row, absolutely placed at the bottom of the cell                                                                                                |
+| `mw-calendar-dot`         | 5px dot. Colour comes from `--mw-calendar-dot`; the `-primary`, `-secondary`, `-success`, `-warning`, `-danger`, `-info` classes are presets for it |
+| `mw-calendar-legend`      | Rule plus a row of dot/label pairs below the grid                                                                                                   |
+| `mw-calendar-legend-item` | One dot/label pair                                                                                                                                  |
+
+- **Today is outlined in secondary, the picked day is filled with primary.** Two
+  different colours on purpose: an outline and a fill in the same colour read as
+  two states of the same thing. Do not give one day both.
+- The dots are positioned absolutely, so a day without any keeps the exact same
+  height and its number sits on the same line as every other. Two or three per
+  day stay readable, more do not. A dot on a picked day keeps its status colour;
+  only the untoned one flips to the accent text colour.
+- **What a dot means belongs to the caller.** The same calendar reads "request
+  pending / booked / time offered" in a scheduling app and something entirely
+  different on a public booking page, so the colour is a custom property, not a
+  fixed set: `style="--mw-calendar-dot: #7a4fd4"` on the dot, or on the cell to
+  colour all of its dots. The six tone classes are named presets for exactly
+  that property - use them when they fit, ignore them when they do not.
+- **Render the days spilling in from the neighbouring month.** An empty first
+  row reads like a broken calendar, not like a short month. `mw-calendar-adjacent`
+  is what pushes them back.
+- A month gets six rows even when five would do, so the calendar - and
+  everything under it - keeps its height while you page through.
+- Cell height is fixed (38px, 44px on a coarse pointer, 29px compact), width
+  follows the container. No aspect ratio: a full-width calendar would otherwise
+  grow rows several hundred pixels tall. A calendar therefore wants a column,
+  not the full page width - give it one, or cap it.
+- **A week has no class of its own.** Render seven cells instead of forty-two
+  and you have one; everything else is identical.
+- `mw-calendar-compact` hides the dots and shortens the cell - the dots are what
+  a full cell needs its height for, so the two go together. It costs about a
+  third of the calendar height and leaves a plain date picker; drop the legend
+  there, it has nothing left to explain. 29px is below a comfortable tap target,
+  so keep it for pointer-first surfaces. Its grid gap drops to 2px as well, which
+  puts the space back into the cells.
+- Give every day an `aria-label` with the full date - the bare number is not an
+  accessible name. The weekday labels are `aria-hidden`, they would only repeat
+  it. With a `button` per day, keep one tab stop for the grid (roving
+  `tabindex`) instead of 42.
+
 ## Tags
 
 Two forms, picked by count - see also the pitfall list in `SKILL.md`.
@@ -521,8 +736,14 @@ Two forms, picked by count - see also the pitfall list in `SKILL.md`.
 ```
 
 Variants: `mw-tag-primary`, `-secondary`, `-success`, `-info`, `-warning`,
-`-danger`, `-muted`. Size: `mw-tag-lg`. `mw-tag-muted` is the neutral tone for
-states that should not shout (draft, archived).
+`-danger`, `-muted`, `-neutral`. Size: `mw-tag-lg`.
+
+`mw-tag-muted` and `mw-tag-neutral` are not the same and the difference carries
+meaning. **Muted** means the label steps back - draft, archived, a shortcoming
+("no e-invoice"). **Neutral** is an identifier with no judgement attached and
+keeps the normal text colour - a customer number, a document type, a price on a
+category ("XRechnung" is a property, not a verdict). Both are also available on
+the list container: `mw-tags-muted`, `mw-tags-neutral`.
 
 **List** - the container carries the colour for all its items:
 
@@ -670,7 +891,7 @@ Both are chronicles (CV, changelog), not schedulable time axes.
 
 ```html
 <div class="mw-timeline-big">
-  <div class="mw-timeline-big-step active">
+  <div class="mw-timeline-big-step mw-active">
     <div class="mw-timeline-big-date-container">
       <div class="mw-timeline-big-date-main">01/2023 - today</div>
       <div class="mw-timeline-big-date-sub">(3 years)</div>
@@ -686,7 +907,7 @@ Both are chronicles (CV, changelog), not schedulable time axes.
 </div>
 
 <div class="mw-timeline-simple">
-  <div class="mw-timeline-simple-step active">
+  <div class="mw-timeline-simple-step mw-active">
     <div class="mw-timeline-simple-date">2024-03-22</div>
     <div class="mw-timeline-simple-content">
       <div class="mw-card mw-card-simple">...</div>
@@ -803,23 +1024,46 @@ The last item takes `mw-breadcrumbs-current` on the `li` and
 
 ## Pagination
 
-A titled content frame with prev/next controls - not a page-number list.
+A titled content frame with prev/next controls - not a page-number list. Same
+surface and header as `mw-calendar`; only the body differs, and the body is
+yours.
 
 ```html
 <div class="mw-pagination">
   <div class="mw-pagination-header">
-    <button class="mw-pagination-nav"><i class="fas fa-arrow-left"></i></button>
-    <h3 class="mw-pagination-title">Week 10</h3>
-    <button class="mw-pagination-nav">
-      <i class="fas fa-arrow-right"></i>
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline mw-btn-sm mw-pagination-nav"
+      aria-label="Previous week"
+    >
+      <i class="fas fa-chevron-left"></i>
+    </button>
+
+    <div class="mw-pagination-title" aria-live="polite">Week 10</div>
+
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline mw-btn-sm mw-pagination-nav"
+      aria-label="Next week"
+    >
+      <i class="fas fa-chevron-right"></i>
     </button>
   </div>
+
   <div class="mw-pagination-content">...</div>
 </div>
 ```
 
-`mw-pagination-loading` on the container dims the content while it swaps;
-`mw-pagination-slide-left` / `-slide-right` are the directional transitions.
+- `mw-pagination-nav` sits **on** `mw-btn` - it only squares the button off
+  around the chevron. The arrows carry no accessible name of their own, so give
+  each one an `aria-label`; `aria-live="polite"` on the title is what tells a
+  screen reader where you landed.
+- `mw-pagination-loading` goes on `mw-pagination-content` (not on the
+  container) and dims it while the next page is on its way.
+- `mw-pagination-slide-left` / `-slide-right` are the directional transitions,
+  also on the content.
+- The body has a 200px floor so a short page does not collapse the frame. Paging
+  is application state - the framework ships no JavaScript for it.
 
 ## Divider
 
@@ -867,12 +1111,12 @@ shipped JS, as is the track transform. In a SPA, render the dots and set
     <img class="mw-image-slider-base-image" src="base.jpg" alt="" />
   </div>
   <div class="mw-image-slider-overlay">
-    <div class="mw-image-slider-overlay-image active" data-index="1">
+    <div class="mw-image-slider-overlay-image mw-active" data-index="1">
       <img src="a.jpg" alt="" />
     </div>
   </div>
   <div class="mw-image-slider-controls-grid-3">
-    <button class="mw-btn mw-btn-primary active" data-index="0">Base</button>
+    <button class="mw-btn mw-btn-primary mw-active" data-index="0">Base</button>
   </div>
 </div>
 ```

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

@@ -62,7 +62,7 @@ reactive form control.
   </div>
 
   <div class="mw-form-actions">
-    <p class="mw-form-actions-hint">Changes are saved immediately.</p>
+    <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>
@@ -77,9 +77,13 @@ reactive form control.
   `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-form-actions-hint` is a full-width note above the buttons.
-  Alignment variants: `mw-form-actions-left`, `mw-form-actions-center`,
-  `mw-form-actions-full-width` (stacked, buttons at 100% - login forms).
+  `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"`.
 

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

@@ -26,32 +26,44 @@ classes are the entire contract.
 ## Behaviour inventory
 
 | Behaviour           | What the shipped JS does                                                                                                                                                                                    | What to do instead                                                                                                                                                                                                           |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Accordion           | Toggles `active` on `mw-accordion-header` and the following `mw-accordion-content`                                                                                                                          | `[class.active]="isOpen()"` on both elements                                                                                                                                                                                 |
-| Tabs                | `data-tab` → panel `id`; sets `active` on nav item and panel                                                                                                                                                | Track the selected index/key, bind `active` on both; drop `data-tab`                                                                                                                                                         |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 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 `active` on `mw-navbar-link` from the scroll position                                                                                                                                                  | Router-based: `routerLinkActive="active"`                                                                                                                                                                                    |
-| Theme toggle        | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `active` on the toggle                                                                                                                 | A theme service - see `examples/angular-services.md`                                                                                                                                                                         |
+| 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 `active` on the overlay image and the control button with the matching `data-index`                                                                                                                 | Bind `active` from the selected index                                                                                                                                                                                        |
+| 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                                                                                                                                                                                                                   |
 
+## 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 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 kanban empty-lane placeholder (hidden via `:has()` as soon as the
-lane holds a ticket), `prefers-reduced-motion` handling.
+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.
 
 ## When you do keep the shipped JS
 

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

@@ -26,7 +26,11 @@
 - `mw-main` is a full-height flex column - the footer stays at the bottom on
   short pages.
 - `mw-container` is `min(1200px, 89%)`, horizontally centered. Nest it inside
-  every full-bleed band (header, section, footer), never around them.
+  every full-bleed band (header, section, footer), never around them. Below
+  576px it switches to a fixed 1rem gutter instead of the percentage - 89% of a
+  375px screen leaves 41px of nothing on a card that has to fit an amount, a
+  status and two labels into one row. Both widths are tokens,
+  `--mw-container-width` and `--mw-container-width-sm`.
 - `mw-content` (`flex: 1` + top padding) is the alternative to `mw-section` when
   a page has one single content area. `mw-content-centered` centers it
   vertically over the full viewport - login pages, error pages.
@@ -59,7 +63,7 @@ its children are styled through descendant selectors:
       <nav class="mw-navbar mw-navbar-medium">
         <ul class="mw-navbar-list">
           <li class="mw-navbar-item">
-            <a href="#start" class="mw-navbar-link active">Start</a>
+            <a href="#start" class="mw-navbar-link mw-active">Start</a>
           </li>
           <li class="mw-navbar-item">
             <a href="#docs" class="mw-navbar-link">Docs</a>
@@ -153,7 +157,7 @@ viewport, so keep long tooltips off the outermost elements.
 
 | Class                               | Use                                                                        |
 | ----------------------------------- | -------------------------------------------------------------------------- |
-| `mw-section`                        | Vertical rhythm (1.75rem top/bottom) for a page band                       |
+| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 1.75rem    |
 | `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                     |
 | `mw-section-title`                  | Centered `3xl` heading with a decorative primary underline - landing pages |
 | `mw-section-subtitle`               | Centered `2xl` heading with a thin secondary underline                     |
@@ -277,6 +281,47 @@ 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`.
 
+**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
+money column in a table wants. Do not reach for `mw-text-currency` just to get
+the digits - that was the old behaviour of `mw-text-numeric` and the reason
+people wrote `font-variant-numeric` out by hand.
+
+### `mw-row-split` - the row with two ends
+
+The most common layout in any application: what it is on the left, the value or
+the action on the right, wrapping to two lines when it runs out of room. Card
+header, section header, key figure, week row.
+
+```html
+<div class="mw-row-split">
+  <strong>Invoice 2026-0042</strong>
+  <span class="mw-text-currency">1,204.50</span>
+</div>
+```
+
+Five declarations you would otherwise write again in every component -
+including the `flex-wrap` everyone forgets, which is what keeps the left half
+from being squashed on a phone.
+
+`mw-row-split` aligns on the baseline, which is right for text against text. Add
+`mw-row-split-center` when the two sides differ in height - a heading beside a
+button, a label beside an icon.
+
+### `mw-sr-only` - text for screen readers only
+
+```html
+<button type="button" class="mw-btn mw-btn-outline">
+  <i class="fas fa-trash"></i>
+  <span class="mw-sr-only">Delete invoice 2026-0042</span>
+</button>
+```
+
+Wherever an icon carries the whole message. Not `display: none` and not
+`visibility: hidden` - both drop the element out of the accessibility tree,
+which is precisely what must not happen.
+
 There are no responsive display variants. Show/hide per breakpoint is the
 application's job (media query in your own stylesheet, or `@if` in the
 template).