maverick-wave 5.26.0 → 5.27.0

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

@@ -116,6 +116,9 @@ system monospace stack behind it. Load a font yourself and either set the three
 
 - Classes: `mw-` prefix, kebab-case: `.mw-button-bar`, `.mw-item-list-compact`
 - Tokens: `--mw-` prefix: `--mw-primary-color`, `--mw-border-accent`
+- Keyframes: `mw-` prefix too (`mw-toast-in`, `mw-home-fade`). `@keyframes` is
+  global, so an unprefixed name in your app and one in the framework are the
+  same animation - the loser disappears without an error
 - Variants are suffixes on the base class: `mw-btn` + `mw-btn-primary`,
   `mw-alert` + `mw-alert-danger`
 - Colour variant names are the same everywhere: `primary`, `secondary`,
@@ -379,7 +382,8 @@ feature frame) ·
 11. **Touch targets grow on their own.** On `pointer: coarse` or below 768px,
     `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.
+    44px, `mw-section-btn` 2.75rem, 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, and `mw-kanban-action` does the same - its 32px box
@@ -475,6 +479,10 @@ feature frame) ·
     with it, so `<button type="button" class="mw-tabs-nav-item" data-tab="...">`
     is the whole markup. The burger is the worst of the five to get wrong:
     below the collapse breakpoint it is the only route to the navigation.
+    `mw-tile` is the same rule from the other side: the class paints a surface
+    on anything, but the hand cursor, the focus ring and the tap handling only
+    come with `<a class="mw-tile">` or `<button class="mw-tile">`. On a `<div>`
+    you get the look and nothing a keyboard can reach.
     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

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

@@ -492,29 +492,36 @@ A bordered box with a header rule - the "titled section" of an application.
 ```
 
 - Header colour: `mw-panel-primary`, `mw-panel-secondary`; without them the
-  header is neutral.
+  header is neutral. Title and action sit at opposite ends and wrap to two rows
+  when the panel gets too narrow for both.
 - Height: `mw-panel-scrollable` (500px), `mw-panel-max-height-sm` (300px),
   `-md` (500px), `-lg` (700px) - the body scrolls, header and footer stay.
-- `mw-panel` has `min-height: 100%`, so panels in a grid row end up equally tall.
+- Panels in a grid row end up equally tall on their own - a grid item stretches.
+  A height variant opts out with `align-self: start`.
 
 ## Tiles
 
-Compact, clickable info blocks in a fixed 3-column grid.
+Compact info blocks. The look is on the class, the click is on the element: put
+`mw-tile` on an `<a>` or a `<button>` and it gets the hand cursor, the focus ring
+and the tap handling. On a `<div>` it stays a plain surface - no cursor, no ring,
+because there would be nothing to reach by keyboard.
 
 ```html
 <div class="mw-tiles mw-tiles-2col">
-  <div class="mw-tile">
+  <a href="/billing" class="mw-tile">
     <div class="mw-tile-img"><img src="icon.png" alt="" /></div>
     <h3 class="mw-tile-header">Billing</h3>
     <div class="mw-tile-body">
       <p>Invoices and payments</p>
     </div>
     <div class="mw-tile-footer">Updated 2026-01-02</div>
-  </div>
+  </a>
 </div>
 ```
 
-Container: `mw-tiles` (3 columns), `mw-tiles-2col`, `mw-tiles-4col`.
+Container: `mw-tiles` (1 / 2 at `sm` / 3 at `md`), `mw-tiles-2col` (1 / 2 at
+`sm`), `mw-tiles-4col` (1 / 2 at `sm` / 4 at `lg`) - the same ramps `mw-grid-3`,
+`-2` and `-4` use, and the full container width like any other grid.
 Tile sizes: `mw-tile-sm`, `mw-tile-lg`.
 
 ## Accordion

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

@@ -289,8 +289,8 @@ with no `mw-section-head-intro` takes a smaller gap: the gap sized to follow a
 paragraph reads as a hole under a rule and one line of type.
 
 The strip sticks at `--mw-header-height` and is `--mw-section-nav-height` tall
-(3.7rem). Anything it can cover on a jump needs the sum as `scroll-margin-top`;
-a block wrapping a `mw-section-subtitle` gets that from the framework already.
+(3.75rem). A page carrying one adds that height to `scroll-padding-top` on its
+own, so anchors and tab stops both clear it - nothing to add per target.
 
 ## Page header
 

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

@@ -85,7 +85,8 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-section-padding-fluid`                                                                                                                                                 | The fluid alternative to the value above - 1.75rem on a phone up to 5.5rem at `xl`. Not applied by itself: set `--mw-section-padding-block: var(--mw-section-padding-fluid)`                                                                                                                                                            |
 | `--mw-section-padding-compact`, `--mw-section-padding-airy`                                                                                                                  | The two presets, as tokens so the phone steps reach them - point `--mw-section-padding-block` at one                                                                                                                                                                                                                                    |
 | `--mw-section-head-step`                                                                                                                                                     | One step of the head rhythm, derived from `--mw-section-padding-block`. Every measure in a head and around a subtitle is a multiple of it, so a spacing preset moves them all                                                                                                                                                           |
-| `--mw-section-nav-height`                                                                                                                                                    | Height the sticky `mw-section-nav` reserves (3.7rem). Add it to `--mw-header-height` for the `scroll-margin-top` of anything the strip can cover                                                                                                                                                                                        |
+| `--mw-section-nav-height`                                                                                                                                                    | Height the sticky `mw-section-nav` reserves (3.75rem). A page carrying a strip adds it to `scroll-padding-top` itself, through the offset token below                                                                                                                                                                                   |
+| `--mw-announcement-offset`, `--mw-section-nav-offset`                                                                                                                        | What each layer of sticky chrome below the header adds to `scroll-padding-top`. `0px` until the component switches it on, so a page with both a ribbon and a strip reserves for both. For a sticky bar of your own, override `scroll-padding-top` on `html` - the calc names these two                                                  |
 | `--mw-root-font-size`                                                                                                                                                        | Percentage the whole rem scale is built on (`100%`). Type, spacing and control heights move with it; px breakpoints do not                                                                                                                                                                                                              |
 | `--mw-calendar-dot`                                                                                                                                                          | Colour of a single calendar dot - set it per dot or per cell; the `mw-calendar-dot-*` classes are presets for it                                                                                                                                                                                                                        |
 | `--mw-scroll-hint-cover`                                                                                                                                                     | Colour the scroll hint on a tab bar fades into. Preset to the page, re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`, `mw-tile`, `mw-calendar`                                                                                                                                                                |

package/CHANGELOG.md

@@ -6,6 +6,12 @@ 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).
 
+## [5.27.0] - 2026-09-21
+
+### Changed
+
+- Spacing and small refactorings in css code
+
 ## [5.26.0] - 2026-09-20
 
 ### Changed

package/README.md

@@ -45,12 +45,12 @@ The result is a framework that balances utility with simplicity, offering develo
     <title>My MaverickWave Project</title>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.26.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.27.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.26.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.27.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```