maverick-wave 5.15.0 → 5.17.0

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

@@ -48,18 +48,20 @@ Load the one you need - do not read them all up front.
 />
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5/maverick-wave.min.css"
 />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
 />
 ...
-<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5/maverick-wave.min.js"></script>
 ```
 
-Pin the version. The JS file is optional and only for server-rendered/static pages -
-see below. `viewport-fit=cover` is not optional - see pitfall 30.
+`@5` keeps this snippet current; in a real project pin the exact version so a
+build stays reproducible. The JS file is optional and only for
+server-rendered/static pages - see below. `viewport-fit=cover` is not optional -
+see pitfall 30.
 
 ### Angular (or any SPA)
 
@@ -129,7 +131,7 @@ The classes that mean something _other_ than "on" keep their own names:
 | Checkbox list item (`li`)                    | `mw-selected`                                            |
 | Calendar day, picked                         | `mw-selected`                                            |
 | Kanban ticket being edited                   | `mw-kanban-editing`                                      |
-| Modal overlay                                | `mw-modal-open`                                          |
+| Modal, older overlay div                     | `mw-modal-open` (a `<dialog>` carries `open` itself)     |
 | Alert, dismissing / dismissed                | `mw-alert-closing` → `mw-alert-closed` (`display: none`) |
 | Field wrapper in error                       | `mw-field-has-error`                                     |
 | Single form control in error                 | `mw-form-element-error`                                  |
@@ -234,8 +236,9 @@ none of them survive into the compiled CSS. Full list in `references/theming.md`
 - `touch-context($bp: 'md')` - coarse pointer _or_ narrow viewport, the condition
   every target-size rule in the framework hangs under.
 - `touch-floor($size: 2.75rem)` - that condition plus a `min-height`.
-- `hit-area($grow: 6px)` - grows the hit area through `::after` without touching
-  the silhouette.
+- `hit-area($grow: 6px, $box: 1.5rem)` - grows the hit area through `::after`
+  without touching the silhouette. An element carrying a `data-tooltip` owns that
+  pseudo for its arrow, so those are skipped and grow to `$box` instead.
 - `hover` / `hover-move`, `focus-ring`, `focus-ring-inset`, `field-focus`,
   `truncate`, `surface`.
 

package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md

@@ -248,40 +248,44 @@ export class InvoiceListComponent {
 </div>
 }
 
-<!-- Delete confirmation -->
-<div class="mw-modal-overlay" [class.mw-modal-open]="toDelete() !== null">
-  <div class="mw-modal mw-modal-sm">
-    <div class="mw-modal-header">
-      <h4 class="mw-modal-title">Delete invoice</h4>
-      <button type="button" class="mw-modal-close" (click)="toDelete.set(null)">
-        &#120299;
-      </button>
-    </div>
-    <div class="mw-modal-body">
-      <p class="mw-text-center">
-        <strong>Delete {{ toDelete()?.number }}?</strong>
-      </p>
-      <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
-    </div>
-    <div class="mw-modal-footer">
-      <button
-        type="button"
-        class="mw-btn mw-btn-outline"
-        (click)="toDelete.set(null)"
-      >
-        Cancel
-      </button>
-      <button
-        type="button"
-        class="mw-btn mw-btn-danger"
-        (click)="confirmDelete()"
-      >
-        <i class="fas fa-trash"></i> Delete
-      </button>
-    </div>
+<!-- Delete confirmation - ModalDirective is in angular-services.md -->
+<dialog
+  class="mw-modal mw-modal-sm"
+  closedby="any"
+  appModal
+  [isOpen]="toDelete() !== null"
+  (dismiss)="toDelete.set(null)"
+  aria-labelledby="delete-title"
+>
+  <div class="mw-modal-header">
+    <h4 class="mw-modal-title" id="delete-title">Delete invoice</h4>
+    <button type="button" class="mw-modal-close" (click)="toDelete.set(null)">
+      &#120299;
+    </button>
   </div>
-  <div class="mw-modal-backdrop" (click)="toDelete.set(null)"></div>
-</div>
+  <div class="mw-modal-body">
+    <p class="mw-text-center">
+      <strong>Delete {{ toDelete()?.number }}?</strong>
+    </p>
+    <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
+  </div>
+  <div class="mw-modal-footer">
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline"
+      (click)="toDelete.set(null)"
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="mw-btn mw-btn-danger"
+      (click)="confirmDelete()"
+    >
+      <i class="fas fa-trash"></i> Delete
+    </button>
+  </div>
+</dialog>
 ```
 
 ## Notes
@@ -298,7 +302,8 @@ export class InvoiceListComponent {
   sits left while the figures sit right.
 - **`mw-tag`, not `mw-tags`**, for a single status chip in a cell.
 - **`mw-btn-danger` for the destructive action** in the modal footer.
-- The modal is always in the DOM and toggled through `mw-modal-open`; the body
-  scroll lock happens automatically via `body:has(.mw-modal-open)`.
+- The modal is always in the DOM; `ModalDirective` calls `showModal()` when the
+  signal turns true, and Escape, the focus trap and the scroll lock follow from
+  the element.
 - The toast stack lives in the app shell, not on this page - see
   `angular-services.md`.

package/.claude/skills/mw-maverick-wave/examples/angular-services.md

@@ -159,45 +159,94 @@ from the signal is cleaner.
 
 ## Modal
 
-No service needed - the overlay is toggled by one class and the body scroll lock
-is pure CSS (`body:has(.mw-modal-open)`).
+A `<dialog>` with the same `mw-modal` classes. Escape, the focus trap, the inert
+page behind it and the body scroll lock all come from the element, so what is
+left to write is opening it.
+
+`[open]="isOpen()"` does **not** work: the attribute opens a non-modal dialog -
+no top layer, no backdrop, no focus trap. It has to be `showModal()`, which
+needs a directive.
+
+```ts
+@Directive({
+  selector: 'dialog[appModal]',
+  host: {
+    '(close)': 'onClose()',
+    '(click)': 'onClick($event)',
+  },
+})
+export class ModalDirective {
+  readonly isOpen = input(false);
+  /** the dialog closed itself - Escape, a backdrop click or a form submit */
+  readonly dismiss = output<void>();
+
+  private readonly host =
+    inject<ElementRef<HTMLDialogElement>>(ElementRef).nativeElement;
+
+  constructor() {
+    const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+    effect(() => {
+      const open = this.isOpen();
+      if (!isBrowser) return;
+      if (open && !this.host.open) this.host.showModal();
+      else if (!open && this.host.open) this.host.close();
+    });
+  }
+
+  // Only when the dialog closed itself - closing it through the signal already
+  // went through whatever set the signal, and reporting that back would run the
+  // caller's dismiss handler a second time.
+  protected onClose(): void {
+    if (this.isOpen()) this.dismiss.emit();
+  }
+
+  // A click on the dialog element is a click on its backdrop; the content sits
+  // in .mw-modal-header/body/footer inside it. Stands in for `closedby="any"`
+  // where that is not supported yet.
+  protected onClick(event: MouseEvent): void {
+    if (event.target === this.host) this.host.close();
+  }
+}
+```
 
 ```ts
 @Component({
   selector: 'app-confirm-dialog',
+  imports: [ModalDirective],
   template: `
-    <div class="mw-modal-overlay" [class.mw-modal-open]="open()">
-      <div class="mw-modal mw-modal-sm">
-        <div class="mw-modal-header">
-          <h4 class="mw-modal-title">{{ title() }}</h4>
-          <button
-            type="button"
-            class="mw-modal-close"
-            (click)="cancelled.emit()"
-          >
-            &#120299;
-          </button>
-        </div>
-        <div class="mw-modal-body"><ng-content /></div>
-        <div class="mw-modal-footer">
-          <button
-            type="button"
-            class="mw-btn mw-btn-outline"
-            (click)="cancelled.emit()"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            class="mw-btn mw-btn-danger"
-            (click)="confirmed.emit()"
-          >
-            Delete
-          </button>
-        </div>
+    <dialog
+      class="mw-modal mw-modal-sm"
+      closedby="any"
+      appModal
+      [isOpen]="open()"
+      (dismiss)="cancelled.emit()"
+      aria-labelledby="confirm-title"
+    >
+      <div class="mw-modal-header">
+        <h4 class="mw-modal-title" id="confirm-title">{{ title() }}</h4>
+        <button type="button" class="mw-modal-close" (click)="cancelled.emit()">
+          &#120299;
+        </button>
       </div>
-      <div class="mw-modal-backdrop" (click)="cancelled.emit()"></div>
-    </div>
+      <div class="mw-modal-body"><ng-content /></div>
+      <div class="mw-modal-footer">
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline"
+          (click)="cancelled.emit()"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="mw-btn mw-btn-danger"
+          (click)="confirmed.emit()"
+        >
+          Delete
+        </button>
+      </div>
+    </dialog>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -209,6 +258,19 @@ export class ConfirmDialogComponent {
 }
 ```
 
+`role="dialog"` and `aria-modal` come from `showModal()`; the title is named
+with `aria-labelledby`. Without `autofocus` on something the browser focuses the
+first focusable element, usually the close button - put it on the field or the
+safe action instead.
+
+In tests, jsdom implements none of `<dialog>` - not `showModal`, `show` or
+`close`, only the `open` attribute reflects. Specs that render an open modal
+fail with `showModal is not a function` until a setup file adds them.
+
+The `mw-modal-overlay` div toggled by `mw-modal-open` is still styled, for
+markup that predates this - it cannot trap focus or make the page inert, so it
+is not what to write now.
+
 ## Accordion
 
 `mw-active` on the header **and** the content.

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

@@ -23,7 +23,7 @@ accordion FAQ.
 
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5/maverick-wave.min.css"
     />
     <link
       rel="stylesheet"
@@ -123,7 +123,7 @@ accordion FAQ.
                 <button
                   type="button"
                   class="mw-btn mw-btn-primary mw-btn-lg"
-                  onclick="openModal('demo')"
+                  data-mw-modal="demo"
                 >
                   Book a demo
                 </button>
@@ -302,7 +302,7 @@ accordion FAQ.
                   <button
                     type="button"
                     class="mw-btn mw-btn-outline"
-                    onclick="openModal('demo')"
+                    data-mw-modal="demo"
                   >
                     Contact us
                   </button>
@@ -412,11 +412,7 @@ accordion FAQ.
               <!-- A link in running text is mw-link, not a button class - it
                    keeps the line height of the paragraph around it -->
               <p>
-                <button
-                  type="button"
-                  class="mw-link"
-                  onclick="openModal('demo')"
-                >
+                <button type="button" class="mw-link" data-mw-modal="demo">
                   Book a 20 minute demo</button
                 >, no sales pitch.
               </p>
@@ -454,53 +450,42 @@ accordion FAQ.
       </div>
     </footer>
 
-    <!-- Modal: markup stays in the DOM, mw-modal-open shows it -->
-    <div id="demo" class="mw-modal-overlay">
-      <div class="mw-modal">
-        <div class="mw-modal-header">
-          <h4 class="mw-modal-title">Book a demo</h4>
-          <button type="button" class="mw-modal-close">&#120299;</button>
-        </div>
-        <div class="mw-modal-body">
-          <form class="mw-form">
-            <div class="mw-field">
-              <label class="mw-field-label mw-required" for="demo-email"
-                >Email</label
-              >
-              <div class="mw-input-group">
-                <span class="mw-input-group-prefix"
-                  ><i class="fas fa-envelope"></i
-                ></span>
-                <input id="demo-email" type="email" class="mw-input" required />
-              </div>
+    <!-- Markup stays in the DOM; a trigger carrying data-mw-modal="demo" opens
+         it, .mw-modal-close closes it, closedby="any" dismisses on the backdrop -->
+    <dialog
+      id="demo"
+      class="mw-modal"
+      closedby="any"
+      aria-labelledby="demo-title"
+    >
+      <div class="mw-modal-header">
+        <h4 class="mw-modal-title" id="demo-title">Book a demo</h4>
+        <button type="button" class="mw-modal-close">&#120299;</button>
+      </div>
+      <div class="mw-modal-body">
+        <form class="mw-form">
+          <div class="mw-field">
+            <label class="mw-field-label mw-required" for="demo-email"
+              >Email</label
+            >
+            <div class="mw-input-group">
+              <span class="mw-input-group-prefix"
+                ><i class="fas fa-envelope"></i
+              ></span>
+              <input id="demo-email" type="email" class="mw-input" required />
             </div>
-          </form>
-        </div>
-        <div class="mw-modal-footer">
-          <button
-            type="button"
-            class="mw-btn mw-btn-outline"
-            onclick="closeModal('demo')"
-          >
-            Cancel
-          </button>
-          <button type="button" class="mw-btn mw-btn-primary">Send</button>
-        </div>
+          </div>
+        </form>
       </div>
-      <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.js"></script>
-    <script>
-      // The only thing the shipped script does not cover: opening a modal.
-      // Closing works through .mw-modal-close, the backdrop is wired above.
-      function openModal(id) {
-        document.getElementById(id).classList.add('mw-modal-open');
-      }
-      function closeModal(id) {
-        document.getElementById(id).classList.remove('mw-modal-open');
-      }
-    </script>
+      <div class="mw-modal-footer">
+        <button type="button" class="mw-modal-close mw-btn mw-btn-outline">
+          Cancel
+        </button>
+        <button type="button" class="mw-btn mw-btn-primary">Send</button>
+      </div>
+    </dialog>
+
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5/maverick-wave.min.js"></script>
   </body>
 </html>
 ```

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

@@ -590,66 +590,65 @@ Toggling is JS - see `references/javascript.md`; the shipped script keeps
 ## Modal
 
 ```html
-<div id="delete-modal" class="mw-modal-overlay">
-  <div class="mw-modal mw-modal-sm">
-    <div class="mw-modal-header">
-      <h4 class="mw-modal-title">Delete invoice</h4>
-      <button class="mw-modal-close" type="button">&#120299;</button>
-    </div>
-    <div class="mw-modal-body">
-      <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>
+<dialog id="delete-modal" class="mw-modal mw-modal-sm" closedby="any">
+  <div class="mw-modal-header">
+    <h4 class="mw-modal-title">Delete invoice</h4>
+    <button class="mw-modal-close" type="button" aria-label="Close">
+      &#120299;
+    </button>
   </div>
-  <div class="mw-modal-backdrop"></div>
-</div>
+  <div class="mw-modal-body">
+    <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-modal-close mw-btn mw-btn-outline">Cancel</button>
+    <button class="mw-btn mw-btn-danger">Delete</button>
+  </div>
+</dialog>
 ```
 
-- The overlay is `display: none` until `mw-modal-open` is added to it. That
-  class is the whole open/close mechanism.
-- Body scroll lock is automatic: the stylesheet uses
-  `body:has(.mw-modal-open)`. Nothing to implement.
+- Escape, the focus trap, `inert` on the page behind it and the body scroll lock
+  all come from the element. There is no overlay wrapper and no backdrop div.
+- Opened with `showModal()`, closed with `close()`. `main.js` wires the close
+  buttons and exposes `mwOpenModal(id)` / `mwCloseModal(id)`; a trigger can also
+  carry `data-mw-modal="delete-modal"` and needs no script at all.
+- `closedby="any"` dismisses it on a backdrop click; where that attribute is not
+  understood yet the script handles the click instead.
 - 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-xl` 960px. Height is capped at 80-92dvh, the body scrolls. Below
+  576px it becomes a bottom sheet.
+- `mw-modal-close` is the hook, not a look: on the header X it styles the button,
+  on a footer action it only closes. Combine it with `mw-btn mw-btn-primary` and
+  the button keeps its own paint.
 - `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.
+- Name it with `aria-labelledby` pointing at the `mw-modal-title`; `role` and
+  `aria-modal` come from `showModal()`. Without `autofocus` the browser focuses
+  the first focusable element, usually the close button.
 
-Angular: `<div class="mw-modal-overlay" [class.mw-modal-open]="isOpen()">`.
+Angular: `[open]="isOpen()"` does **not** work - the attribute opens a non-modal
+dialog with no top layer, backdrop or focus trap. It takes a directive calling
+`showModal()`, see `examples/angular-services.md`.
 
-### The same modal as a `<dialog>`
+### The older overlay div
 
-Same classes, no overlay wrapper and no backdrop element:
+Still styled, for markup that predates the `<dialog>` above. It cannot trap
+focus or make the page inert, so it is not what to write now.
 
 ```html
-<dialog id="delete-modal" class="mw-modal mw-modal-sm" closedby="any">
-  <div class="mw-modal-header">
-    <h4 class="mw-modal-title">Delete invoice</h4>
-    <button class="mw-modal-close" type="button" aria-label="Close">
-      &#120299;
-    </button>
-  </div>
-  <div class="mw-modal-body">…</div>
-  <div class="mw-modal-footer">…</div>
-</dialog>
+<div id="delete-modal" class="mw-modal-overlay">
+  <div class="mw-modal mw-modal-sm">…</div>
+  <div class="mw-modal-backdrop"></div>
+</div>
 ```
 
-- Escape, the focus trap, `inert` on the page behind it and the scroll lock all
-  come from the element. Prefer this shape for anything that asks a question.
-- Opened with `showModal()`, closed with `close()`. `main.js` wires the close
-  buttons and exposes `mwOpenModal(id)` / `mwCloseModal(id)`, both of which take
-  either shape. A trigger can also carry `data-mw-modal="delete-modal"`.
-- `closedby="any"` dismisses it on a backdrop click; where that attribute is not
-  understood the script handles the click instead.
-- Sizes, the bottom sheet below 576px and every `mw-modal-*` part behave exactly
-  as above - those rules are class-based.
-
-Angular: bind nothing, call `showModal()` on a `viewChild` ref.
+- `display: none` until `mw-modal-open` is added to the overlay - that class is
+  the whole open/close mechanism, in Angular
+  `[class.mw-modal-open]="isOpen()"`.
+- Body scroll lock comes from `body:has(.mw-modal-open)`.
+- `mw-modal-backdrop` is the click-to-close surface; put the handler on it.
 
 ## Alerts & toasts
 

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

@@ -29,7 +29,7 @@ classes are the entire contract.
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Accordion           | Toggles `mw-active` on `mw-accordion-header` and the following `mw-accordion-content`, and writes `aria-expanded` when the header is a `<button>`                                                                                                                               | `[class.mw-active]="isOpen()"` and `[attr.aria-expanded]="isOpen()"` on the header, `mw-active` on the panel                                                                                                                       |
 | Tabs                | `data-tab` → panel `id`; sets `mw-active` on nav item and panel, and wires the whole tablist: `role`, `aria-selected`, `aria-controls`, `aria-labelledby`, a roving `tabindex` and arrow/Home/End keys                                                                          | Track the selected index/key, bind `mw-active` on both; drop `data-tab`                                                                                                                                                            |
-| Modal               | 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`)                                                                                              |
+| Modal               | `data-mw-modal="<id>"` on a trigger opens that modal; a click on `mw-modal-close` closes the `<dialog>` it sits in, or clears `mw-modal-open` on an overlay div                                                                                                                 | A `<dialog>` needs a directive calling `showModal()` - `[open]` only opens it non-modally. See `examples/angular-services.md`                                                                                                      |
 | Mobile nav          | Toggles `open` on `mw-menu-btn` and `mw-navbar`, writes `aria-expanded` when the button is a `<button>`, closes on anchor click and on Escape (focus returns to the button)                                                                                                     | One signal, bound to both; reset it on navigation end                                                                                                                                                                              |
 | Scroll spy          | Sets `mw-active` on `mw-navbar-link` from the scroll position                                                                                                                                                                                                                   | Router-based: `routerLinkActive="mw-active"`                                                                                                                                                                                       |
 | Anchor scrolling    | Intercepts `a[href^="#"]` and runs its own eased scroll - duration scales with distance, capped at 1.4s, cancelled by wheel or touch. Lands on `scroll-padding-top`, moves focus to the target, writes the hash with `replaceState`, and measures a sticky target unpinned      | The router; for in-page anchors `scrollIntoView({ behavior: 'smooth' })` or your own animation                                                                                                                                     |
@@ -69,10 +69,10 @@ difference, not a missing effect.
 ## Modals and progress bars
 
 `mwOpenModal(id)` / `mwCloseModal(id)` are on `window` and handle both modal
-shapes - the `mw-modal-overlay` div and a `<dialog class="mw-modal">`. Close
-buttons and `data-mw-modal="<id>"` triggers are delegated from the document, so
-markup rendered later still works. A `<dialog>` needs none of it in a SPA: call
-`showModal()` and `close()` on the element.
+shapes - a `<dialog class="mw-modal">` and the older `mw-modal-overlay` div.
+Close buttons and `data-mw-modal="<id>"` triggers are delegated from the
+document, so markup rendered later still works and a static page needs no code
+of its own. In a SPA, call `showModal()` and `close()` on the element instead.
 
 `mw-progress-fill` takes its target width from `data-value="75"` or an inline
 `style="width: 75%"`. Where scroll-driven animations are supported the bar fills
@@ -93,8 +93,8 @@ other spelling exists.
 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
+modal is open (from the `<dialog>` element, or `body:has(.mw-modal-open)` for an
+overlay div), the modal turning into a bottom sheet below 576px, toast entry animations, the 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.
@@ -108,17 +108,16 @@ still a working menu, not a broken one.
 ## When you do keep the shipped JS
 
 For a static page, a landing page or a server-rendered site (Thymeleaf, Twig,
-Jekyll, plain HTML) it is exactly right - load it at the end of `<body>`. The
-only manual part is opening a modal, which the script does not cover:
+Jekyll, plain HTML) it is exactly right - load it at the end of `<body>` and
+write no JavaScript at all. A modal opens from its trigger:
 
 ```html
+<button class="mw-btn mw-btn-primary" data-mw-modal="demo">Book a demo</button>
+
+<dialog id="demo" class="mw-modal" closedby="any">
+  …
+  <button class="mw-modal-close mw-btn mw-btn-outline">Cancel</button>
+</dialog>
+
 <script src="maverick-wave.min.js"></script>
-<script>
-  function openModal(id) {
-    document.getElementById(id).classList.add('mw-modal-open');
-  }
-  function closeModal(id) {
-    document.getElementById(id).classList.remove('mw-modal-open');
-  }
-</script>
 ```

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

@@ -196,14 +196,14 @@ pointing at the trigger in every combination.
 
 ## Sections
 
-| Class                               | Use                                                                                                                |
-| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`)     |
-| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                                                             |
-| `mw-section-title`                  | Centered heading with a decorative primary underline, `2xl` growing to `3xl` up to 576px - landing pages           |
-| `mw-section-intro`                  | The lead paragraph under a section title - centred, muted, 46rem measure                                           |
-| `mw-section-subtitle`               | Centered heading with a thin secondary underline, `xl` growing to `2xl` up to 576px                                |
-| `mw-section-nav` + `mw-section-btn` | Sticky single-row strip of outline-style jump links; parks under the header and scrolls sideways when it overflows |
+| Class                               | Use                                                                                                                                                                                             |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`); point it at `--mw-section-padding-fluid` for spacing that grows with the screen |
+| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                                                                                                                                          |
+| `mw-section-title`                  | Centered heading with a decorative primary underline, `2xl` growing to `3xl` up to 576px - landing pages                                                                                        |
+| `mw-section-intro`                  | The lead paragraph under a section title - centred, muted, 46rem measure                                                                                                                        |
+| `mw-section-subtitle`               | Centered heading with a thin secondary underline, `xl` growing to `2xl` up to 576px                                                                                                             |
+| `mw-section-nav` + `mw-section-btn` | Sticky single-row strip of outline-style jump links; parks under the header and scrolls sideways when it overflows                                                                              |
 
 ```html
 <section class="mw-section mw-section-alternate">