maverick-wave 4.4.1 → 4.5.0

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

@@ -944,15 +944,19 @@ deprecated). Any card fits into the content wrapper.
 
 Layout containers for arbitrary children - the children need no classes.
 
-| Class                     | Look                                                                         |
-| ------------------------- | ---------------------------------------------------------------------------- |
-| `mw-item-list`            | Plain flex column with gaps                                                  |
-| `mw-item-list-horizontal` | Row, wrapping; column below `sm`                                             |
-| `mw-item-list-cards`      | Wider gaps, for cards                                                        |
-| `mw-item-list-compact`    | Bordered box, divided rows, hover indent (nests)                             |
-| `mw-item-list-menu`       | Elevated menu card, pointer cursor, press feedback                           |
-| `mw-item-list-slide`      | Cards with a sliding accent border on hover (`mw-item-list-slide-secondary`) |
-| `mw-item-list-scroll`     | Scroll box, 300px (`-sm` 200, `-lg` 400, `-xl` 500)                          |
+| Class                     | Look                                                          |
+| ------------------------- | ------------------------------------------------------------- |
+| `mw-item-list`            | Plain flex column with gaps                                   |
+| `mw-item-list-horizontal` | Row, wrapping; column below `sm`                              |
+| `mw-item-list-cards`      | Wider gaps, for cards                                         |
+| `mw-item-list-compact`    | Bordered card-surface box, divided rows, hover indent (nests) |
+| `mw-item-list-menu`       | Elevated menu card, pointer cursor, press feedback            |
+| `mw-item-list-slide`      | Cards sliding sideways with an accent border on hover         |
+| `mw-item-list-scroll`     | Scroll box, 300px tall                                        |
+
+Modifiers are additive - keep the base class and add the modifier:
+`mw-item-list-scroll` + `-sm` (200px), `-lg` (400px) or `-xl` (500px), and
+`mw-item-list-slide` + `-secondary` for the secondary accent.
 
 ```html
 <div class="mw-item-list-compact">
@@ -984,10 +988,17 @@ Layout containers for arbitrary children - the children need no classes.
 </ul>
 ```
 
-Variants: `mw-item-list-checkbox-compact`, `-large`, `-secondary`,
-`-scroll`. `mw-selected` on the `<li>` is the selected-row highlight - bind it
-to the checkbox state yourself in a SPA. The `mw-checkbox-content` block is
-optional; a bare `mw-checkbox-label` renders a single-line row.
+Add `mw-item-list-checkbox-compact`, `-large` or `-secondary` alongside the
+base class; `mw-item-list-checkbox-scroll` is a standalone class that replaces
+it. `mw-selected` on the `<li>` is the selected-row highlight - bind it to the
+checkbox state yourself in a SPA. The `mw-checkbox-content` block is optional;
+a bare `mw-checkbox-label` renders a single-line row.
+
+The `mw-checkbox` inside is the ordinary form-element checkbox, so
+`mw-checkbox-disabled` and the colour variants (`mw-checkbox-success` and the
+rest, see `references/forms.md`) work here too. Row height is a list concern -
+use the list's own `-compact` / `-large` modifiers rather than
+`mw-checkbox-sm` / `-lg`, which sit on the wrong element to reach the box.
 
 ## HTML lists
 

package/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - new color concept and new default color palette
+- `mw-item-list-compact` sits on a card surface now
 
 ## [4.4.0] - 2026-08-20
 

package/index.html

@@ -16,46 +16,24 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
     <link rel="stylesheet" href="maverick-wave.min.css" />
-    <!-- Basic favicon -->
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
-    <!-- PNG favicons -->
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="favicon/favicon-32x32.png"
-    />
+    <!-- Favicons -->
+    <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
     <link
       rel="icon"
       type="image/png"
-      sizes="16x16"
-      href="favicon/favicon-16x16.png"
+      sizes="96x96"
+      href="favicon/favicon-96x96.png"
     />
-
-    <!-- Apple Touch Icon (for iOS devices) -->
+    <link rel="shortcut icon" href="favicon.ico" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
       href="favicon/apple-touch-icon.png"
     />
-
-    <!-- Safari Pinned Tab Icon -->
-    <link
-      rel="mask-icon"
-      href="favicon/safari-pinned-tab.svg"
-      color="#5bbad5"
-    />
-
-    <!-- Android/Chrome Icons -->
     <link rel="manifest" href="favicon/site.webmanifest" />
 
-    <!-- Microsoft Tiles (for Windows) -->
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="msapplication-config" content="favicon/browserconfig.xml" />
-
-    <!-- Theme Color for browsers that support it -->
-    <meta name="theme-color" content="#ffffff" />
+    <!-- Showcase starts in dark mode unless localStorage says otherwise -->
+    <meta name="theme-color" content="#171f30" />
     <style>
       /* Additional styles only for the showcase page */
       .position-relative {