maverick-wave 4.11.0 → 4.13.0

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

@@ -162,7 +162,8 @@ Two shadows per level - a tight contact layer plus a wide ambient one:
 `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,
+**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)`
@@ -186,7 +187,8 @@ Everything below is documented in `references/components.md` unless marked other
 
 **Actions** `mw-btn` (+ `primary`, `secondary`, `danger`, `success`, `outline`,
 `ghost`, `ghost-danger`, `link`, `link-muted`, `plain`, `icon`, `block`, `sm`,
-`lg`) · `mw-btn-mini` · `mw-button-bar`
+`lg`) · `mw-btn-mini` · `mw-link` / `mw-link-muted` (the link in running text) ·
+`mw-button-bar`
 (+ `left`, `right`, `center`, `between`) · `mw-segmented` · `mw-actions-note`
 
 **Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon,
@@ -352,10 +354,21 @@ spacing, flex, display, text
     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.
+    `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.
+28. **A link in running text is `mw-link`, not `mw-btn mw-btn-link`.** Since
+    4.13.0 there is a class for exactly that. `mw-btn` is `inline-flex` with
+    `min-height: var(--mw-control-height)`, so a link written that way pulls its
+    own line up to 2.25rem while every line around it keeps the paragraph's
+    height - in a footer disclaimer at `font-size: sm` that is nearly double,
+    and it reads as a layout bug. `mw-p-0` is not the fix it looks like: the
+    height does it, not the padding. `mw-link` is the same look without the
+    control height and works on an `<a>` and a `<button>` alike.
+    `mw-btn mw-btn-link` stays right where the link really is one of several
+    buttons and has to line up with them - a card's actions, a button bar.

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

@@ -26,11 +26,38 @@ exhaustive: what is not named does not exist.
 - 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
+- **A link inside a sentence is `mw-link`, not `mw-btn mw-btn-link`.** The base
+  class carries a control height, so in running text it lifts that one line to
+  2.25rem while the lines around it stay where they are. `mw-p-0` does not help
+  - the height does it, not the padding. Keep `mw-btn` only where the link
+    really is a button in a row of buttons and has to line up with them
 - 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
 
+```html
+<!-- a button that happens to look like a link -->
+<button type="button" class="mw-btn mw-btn-link">Read Article</button>
+
+<!-- a link inside a sentence -->
+<p>Built with <a href="https://astro.build" class="mw-link">Astro</a>.</p>
+```
+
+### Text links
+
+`mw-link` and `mw-link-muted` are the inline links, added in 4.13.0. Same look
+as the two button variants - no box, underline on hover - but without
+`inline-flex` and without the control height, which is what makes them sit on
+the line instead of above it. `font` and the focus ring are set explicitly, so
+a `<button>` in the middle of a paragraph works as well as an `<a>`.
+
+```html
+<p>
+  Built with <a href="https://astro.build" class="mw-link">Astro</a> and written
+  up in the
+  <a href="#get-started" class="mw-link-muted">Get Started</a> section.
+</p>
+```
+
 ### Three emphasis levels
 
 `mw-btn-primary` (or any solid colour) **fills**, `mw-btn-outline` **draws a
@@ -79,7 +106,8 @@ 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.
+its own colour and control height, nor as `mw-link`, which is the link inside a
+sentence.
 
 **Destructive actions use `mw-btn-danger`.** `mw-btn-secondary` is a brand
 colour, not a semantic one.
@@ -317,21 +345,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
 

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

@@ -27,7 +27,7 @@ classes are the entire contract.
 
 | 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                                                                                                                                                                              |
+| 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                                                                                                                                                                        |

package/CHANGELOG.md

@@ -6,6 +6,18 @@ Patch releases are only for test purposes - here I only document major and minor
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.13.0] - 2026-08-27
+
+### Added
+
+- `mw-link` / `mw-link-muted` - the link inside a sentence, same look as `mw-btn-link` without the control height
+
+## [4.12.0] - 2026-08-27
+
+### Fixed
+
+- some fixes because of the big update previously
+
 ## [4.11.0] - 2026-08-27
 
 ### Changed