maverick-wave 3.6.0 → 3.6.2

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

@@ -44,14 +44,14 @@ Load the one you need - do not read them all up front.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/maverick-wave@3.4.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@3.7.0/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@3.4.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@3.7.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -
@@ -149,8 +149,8 @@ Everything below is documented in `references/components.md` unless marked other
 **Actions** `mw-btn` (+ `primary`, `secondary`, `danger`, `success`, `outline`,
 `link`, `link-muted`, `sm`, `lg`) · `mw-btn-mini` · `mw-button-bar`
 
-**Containers** `mw-card` (+ `simple`, `content`, `lg`, `xl`, `stack`, badge,
-ribbon) · `mw-panel` · `mw-tile` · `mw-accordion` · `mw-tabs` · `mw-modal` ·
+**Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon) ·
+`mw-panel` · `mw-tile` · `mw-accordion` · `mw-tabs` · `mw-modal` ·
 `mw-item-list` family
 
 **Data & status** `mw-table` (+ `subtle`, `sticky-head`, `cards`, `compact`,
@@ -197,6 +197,10 @@ ribbon) · `mw-panel` · `mw-tile` · `mw-accordion` · `mw-tabs` · `mw-modal`
 7. **`--mw-text-muted-color` on a coloured surface is always wrong.** It follows
    the theme; buttons, table headers and badges do not. Use
    `--mw-accent-text-color` there, and `opacity` for disabled states.
+   `--mw-accent-text-color` is the text on a **brand** surface, so overriding it
+   for a light primary makes it dark everywhere it is used. The fixed grey
+   surfaces - tooltip, `mw-btn-mini`, `mw-info-mini`, gallery arrows - therefore
+   hardcode white and ignore the token.
 8. **`mw-card` already lifts on hover** and `mw-btn` already has `inline-flex`
    plus a gap for icons. Neither has a modifier class for it - adding one from
    memory produces markup that does nothing.
@@ -206,3 +210,12 @@ ribbon) · `mw-panel` · `mw-tile` · `mw-accordion` · `mw-tabs` · `mw-modal`
    set.
 10. **Browser floor: `color-mix()`** - Chrome 111+, Safari 16.2+, Firefox 113+.
     Older browsers get no colours at all, not merely worse ones.
+11. **A component host between a container and its children breaks the layout,
+    silently.** Every `mw-*` flex or grid container styles its _children_ -
+    `mw-grid-*`, `mw-tags`, `mw-button-bar`, `mw-form-actions`, `mw-modal-footer`,
+    `mw-toast-stack`. In plain HTML the children are right there; in a SPA a
+    component host often sits in between and becomes the item instead, so it
+    shrinks to content width or swallows a whole grid row. Put `mw-d-contents` on
+    that host - it then generates no box and the children take the item role
+    back. Angular: `host: { class: 'mw-d-contents' }`. `mw-header` handles this
+    case on its own, the others do not.

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

@@ -15,7 +15,7 @@ wired up by hand.
 
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@3.4.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@3.7.0/maverick-wave.min.css"
     />
     <link
       rel="stylesheet"
@@ -169,7 +169,7 @@ wired up by hand.
           <h2 class="mw-section-title">Pricing</h2>
 
           <div class="mw-grid-3">
-            <div class="mw-card mw-card-content">
+            <div class="mw-card">
               <div class="mw-card-body">
                 <h3 class="mw-card-title">Starter</h3>
                 <hr class="mw-card-title-divider" />
@@ -187,7 +187,7 @@ wired up by hand.
               </div>
             </div>
 
-            <div class="mw-card mw-card-content">
+            <div class="mw-card">
               <div class="mw-card-badge mw-card-addon-success">Popular</div>
               <div class="mw-card-body">
                 <h3 class="mw-card-title">Team</h3>
@@ -206,7 +206,7 @@ wired up by hand.
               </div>
             </div>
 
-            <div class="mw-card mw-card-content">
+            <div class="mw-card">
               <div class="mw-card-ribbon mw-card-addon-primary">Enterprise</div>
               <div class="mw-card-body">
                 <h3 class="mw-card-title">Custom</h3>
@@ -332,7 +332,7 @@ wired up by hand.
       <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@3.4.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@3.7.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.

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

@@ -61,7 +61,7 @@ Row of equally treated buttons, centered by default.
 ## Cards
 
 ```html
-<div class="mw-card mw-card-content">
+<div class="mw-card">
   <div class="mw-card-img">
     <img src="cover.jpg" alt="" />
   </div>
@@ -79,20 +79,26 @@ Row of equally treated buttons, centered by default.
 ```
 
 - `mw-card` is the shell; the hover lift is built in and has no modifier class.
+  It is a flex column by default, so `mw-card-footer` sticks to the bottom and
+  cards in a grid line up without any extra class.
 - `mw-card-simple` is the flat variant with even padding for arbitrary content.
-  Use it when you only need a padded surface.
-- `mw-card-content` turns the card into a flex column so `mw-card-footer` sticks
-  to the bottom - needed whenever cards sit next to each other in a grid.
-- Image height: 210px, `mw-card-lg` 340px, `mw-card-xl` 480px.
+  Use it when you only need a padded surface - it stays a block container, so
+  inline children keep flowing side by side.
+- Image height: 210px, `mw-card-lg` 340px, `mw-card-xl` 480px. Set
+  `--mw-card-img-height` on the card for any other height.
   `mw-card-img-contain` shows the whole image instead of cropping it.
-- In `mw-card-footer` the last child is pushed to the right; below `lg` the
-  footer stacks and children go full width.
+- In `mw-card-footer` the last child is pushed to the right when there is more
+  than one; below `lg` the footer stacks and children go full width.
 - `mw-card-badge` (top right corner) and `mw-card-ribbon` (diagonal banner) are
   absolutely positioned overlays; colour them with `mw-card-addon-primary`,
   `-secondary`, `-success`, `-warning`, `-danger`, `-info`.
+- A card does not clip its content, so a tooltip or dropdown inside it can reach
+  outside. The exception is `mw-card-ribbon`: that banner has to be cut off at
+  the edge, so a card containing one switches to `overflow: hidden` and clips
+  everything else too.
 
 ```html
-<div class="mw-card mw-card-content">
+<div class="mw-card">
   <div class="mw-card-badge mw-card-addon-success">New</div>
   ...
 </div>
@@ -523,7 +529,7 @@ Both are chronicles (CV, changelog), not schedulable time axes.
       <div class="mw-timeline-big-date-sub">(3 years)</div>
     </div>
     <div class="mw-timeline-big-content">
-      <div class="mw-card mw-card-content">...</div>
+      <div class="mw-card">...</div>
       <div class="mw-timeline-big-event">
         <span class="mw-timeline-big-event-date">05/2023</span>
         <span class="mw-timeline-big-event-title">Certification</span>

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

@@ -143,7 +143,11 @@ as the header's first child under the same condition.
 ```
 
 `data-tooltip="..."` is a global attribute hook, not a class - it works on any
-element and shows a tooltip above it on hover.
+element and shows a tooltip above it on hover or keyboard focus. It is pure CSS
+(a pseudo element on the trigger), which also means anything that clips its
+overflow cuts it off: a scroll container, or a card carrying a ribbon - plain
+cards do not clip. Close to the screen edge the bubble can run out of the
+viewport, so keep long tooltips off the outermost elements.
 
 ## Sections
 
@@ -271,12 +275,54 @@ Every one of them has a `-lg` twin with a wider gap (2.5rem instead of 1.35rem):
 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-inline-block`, `mw-d-grid`, `mw-d-none`, `mw-d-contents`.
 
 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).
 
+### `mw-d-contents` - wrapper components inside a layout container
+
+Every flex or grid container here styles its **children**. Plain HTML puts them
+right there, a SPA usually does not:
+
+```html
+<!-- what the CSS expects -->
+<div class="mw-grid-2">
+  <div class="mw-card">…</div>
+  <div class="mw-card">…</div>
+</div>
+
+<!-- what a component tree produces - one item, not two -->
+<div class="mw-grid-2">
+  <app-card>…</app-card>
+  <app-card>…</app-card>
+</div>
+```
+
+Two cards side by side still work, because each host _is_ one item. It breaks
+when one host wraps several intended items, or when a host sits between the
+container and a single child that brings its own width - the host becomes the
+item and shrinks to content width. Nothing errors, the layout is just wrong.
+
+`mw-d-contents` on the host removes its box, so the children become the items:
+
+```typescript
+@Component({
+  selector: 'app-header',
+  host: { class: 'mw-d-contents' },
+  …
+})
+```
+
+The trade-off: an element with `display: contents` has no box, so background,
+padding, border and transforms on that host stop working. If you need those, keep
+the box and give it `width: 100%` (flex row) or `mw-flex-1` instead.
+
+`mw-header` already absorbs a wrapper on its own, no `mw-d-contents` needed
+there. The grid, tag, button-bar, form-action, modal-footer and toast containers
+do not.
+
 **Flex** - `mw-flex-row`, `mw-flex-column`, `mw-flex-wrap`, `mw-flex-nowrap`,
 `mw-flex-1`, `mw-flex-grow-1`, `mw-flex-shrink-0`,
 `mw-justify-start|end|center|between|around|evenly`,

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

@@ -57,6 +57,7 @@ a palette switch meant setting 41 variables.
 | `--mw-font-family-base`, `-heading`, `-mono`                                                                                                                                       | Font stacks (default: system stacks - no font is bundled)                                                                                        |
 | `--mw-hero-background`                                                                                                                                                             | Hero image (`url(...)`)                                                                                                                          |
 | `--mw-transition`                                                                                                                                                                  | Global transition (`all 0.3s ease`)                                                                                                              |
+| `--mw-card-img-height`                                                                                                                                                             | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px)                                                                |
 | `--mw-table-scroll-height`                                                                                                                                                         | Per-table height cap for `mw-table-responsive-scroll`                                                                                            |
 | `--mw-internal-theme-mode`                                                                                                                                                         | Read-only: what `$mw-theme-mode` was compiled to                                                                                                 |
 

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).
 
+## [3.7.0] - 2026-08-07
+
+### Changed
+
+- Header container layout
+
+### Fixed
+
+- Cards no longer create a stacking context
+- Tooltips inside cards are no longer cut off
+- Tooltip arrow visibility
+
 ## [3.6.0] - 2026-08-05
 
 ### Fixed