maverick-wave 5.22.0 → 5.23.0

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

@@ -232,6 +232,8 @@ none of them survive into the compiled CSS. Full list in `references/theming.md`
   end a key of `$font-sizes` or a plain rem/px length. The rem term is the
   point: a vw-only clamp ignores the reader's font size and stops responding to
   zoom. A headline passes `$to: 'xl'`.
+- `fluid-container($min, $max, $from, $to)` - the same ramp in `cqi` against the
+  container. Use it instead of `fluid()` inside a `@container` block.
 - `media-up($bp)` / `media-down($bp)` - the breakpoint map as a query.
 - `touch-context($bp: 'md')` - coarse pointer _or_ narrow viewport, the condition
   every target-size rule in the framework hangs under.
@@ -255,10 +257,13 @@ Everything below is documented in `references/components.md` unless marked other
 **Containers** `mw-card` (+ `simple`, `lg`, `xl`, `stack`, badge, ribbon,
 feature frame) ·
 `mw-panel` · `mw-tile` · `mw-accordion` · `mw-tabs` · `mw-modal` ·
-`mw-item-list` family · `mw-offer` (+ `-head`, `-name`)
+`mw-item-list` family · `mw-offer` (+ `-head`, `-name`) ·
+`mw-leader-row` (+ `-label`, `-value`, `-top`, `-dashed`, `-solid`) ·
+`mw-date-stamp` (+ `-day`, `-date`, `-body`, `-today`) ·
+`mw-contact` (+ `-row`, `-label`)
 
 **Pricing** `mw-price` (+ `-amount`, `-fraction`, `-currency`, `-original`,
-`-period`, `-word`, `-note`, `sm`/`lg`, `inline`, `center`, `plain`)
+`-period`, `-word`, `-note`, `xs`/`sm`/`lg`, `inline`, `center`, `plain`)
 
 **Data & status** `mw-table` (+ `subtle`, `sticky-head`, `cards`, `compact`,
 `hover`, responsive wrappers) · `mw-kanban` (+ `plain`, `compact`) ·
@@ -290,8 +295,10 @@ feature frame) ·
 `mw-input-group` · `mw-prefilled` · `mw-form` / `mw-form-group` /
 `mw-form-actions` · `mw-login`
 
-**Layout** (`references/layout.md`) `mw-main` · `mw-container` · `mw-content` ·
-`mw-section` (+ `mw-section-intro`) · `mw-page-header` · `mw-grid-*` ·
+**Layout** (`references/layout.md`) `mw-main` · `mw-container` (+ `-narrow`) ·
+`mw-content` ·
+`mw-section` (+ `mw-section-intro`) · `mw-page-header` · `mw-grid-*`
+(+ `mw-grid-even`) ·
 `mw-columns-2/3` · `mw-row-split` · `mw-hero` (+ `mw-scroll-hint`, `-end`) ·
 `mw-parallax` (+ `-media`, `-content`, `-dimmed`, `-sticky`, `-rise`,
 `-slow`, `-pattern`) · `mw-footer`

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

@@ -336,9 +336,9 @@ tag:
 ```
 
 - Everything in the row is sized in `em` off `--mw-price-size`, so
-  `mw-price-sm` (1.5rem) and `mw-price-lg` (3rem) move the whole row at once -
-  cents, unit and struck original included. Set the token yourself for any other
-  size.
+  `mw-price-xs` (1.3rem), `mw-price-sm` (1.5rem) and `mw-price-lg` (3rem) move
+  the whole row at once - cents, unit and struck original included. Set the
+  token yourself for any other size.
 - `mw-price-original` is muted **and** struck, and it takes its own line
   **above** the new price. Muted alone reads as a footnote; the line is what
   says this is no longer the price. The rule is drawn explicitly, because the
@@ -351,8 +351,8 @@ tag:
   baseline, not raised to the cap height - raised cents are a discounter's idiom
   and make a service price read cheaper than it is.
 - `mw-price-currency` and `mw-price-period` stop shrinking at 0.8rem, and
-  `mw-price-original` at 0.9rem. Below `mw-price-sm` the `em` chain would put
-  them under 12px, and that is the size most offer cards run at.
+  `mw-price-original` at 0.9rem. At `mw-price-xs` the `em` chain would put them
+  under 10px, which is where the floor earns its keep.
 - `mw-price-word` for "On request" or "Free" - bold, so it holds the same slot in
   a row of cards, but set well below a figure. Its line box is scaled back up to
   the amount's, so a word and a number in neighbouring cards land on one line.
@@ -361,12 +361,12 @@ tag:
 - A `mw-tag` or `mw-badge` placed directly in the row is centred against the
   digits rather than hung off their baseline.
 
-| Class             | What it does                                   |
-| ----------------- | ---------------------------------------------- |
-| `mw-price-sm/lg`  | Retunes `--mw-price-size`, everything follows  |
-| `mw-price-inline` | Old price in front of the new one, on one line |
-| `mw-price-center` | Centres the row                                |
-| `mw-price-plain`  | Body colour instead of the brand               |
+| Class               | What it does                                   |
+| ------------------- | ---------------------------------------------- |
+| `mw-price-xs/sm/lg` | Retunes `--mw-price-size`, everything follows  |
+| `mw-price-inline`   | Old price in front of the new one, on one line |
+| `mw-price-center`   | Centres the row                                |
+| `mw-price-plain`    | Body colour instead of the brand               |
 
 A struck-through price is a visual convention a screen reader does not pass on -
 `<s>` is announced by almost none of them. Wherever an old and a new price stand
@@ -1473,6 +1473,81 @@ deprecated). Any card fits into the content wrapper.
   across it. Nothing to switch on. It is skipped on `mw-avatar-initials`, on
   touch, under `prefers-reduced-motion` and under `mw-hover-static`.
 
+## Date stamp
+
+The date on a dated card - an event, a changelog entry, a day on a menu. It
+answers to the **card**, not the viewport: narrow, it is a muted line above the
+title; once the card is wide enough that a single column would leave its right
+half empty, the same markup becomes a column on the left.
+
+```html
+<article class="mw-card mw-offer">
+  <div class="mw-card-body">
+    <p class="mw-date-stamp mw-date-stamp-today">
+      <span class="mw-date-stamp-day">Fri</span>
+      <span class="mw-date-stamp-date">18.09.</span>
+    </p>
+    <div class="mw-date-stamp-body">
+      <h4 class="mw-text-base mw-text-bold mw-mb-2">Baked fish fillet</h4>
+      <p class="mw-text-sm mw-text-muted mw-mb-0">In beer batter.</p>
+    </div>
+    <p class="mw-price mw-price-xs">
+      <span class="mw-price-amount">11.90</span>
+      <span class="mw-price-currency">Euro</span>
+    </p>
+  </div>
+</article>
+```
+
+- `mw-date-stamp-body` wraps everything that is not the stamp or the price. It
+  is `display: contents` on a narrow card, so the body still sees the title and
+  the price as its own children - which is what `mw-offer` selects on. On a wide
+  card it becomes the middle column.
+- The price is a **sibling** of the wrapper, not inside it. Give the card one
+  and it gets a third column at the right edge; leave it out and the card is two
+  columns. With more than one dish per card, put the price on a
+  `mw-leader-row` with the dish instead - an empty third track would still
+  charge the card a gap.
+- Write the day as `Fri`, not `FRI` - the uppercase is `text-transform`, so a
+  screen reader still reads a word rather than three letters.
+- Day column width, day font size, the column gap and the card's block padding
+  all ramp with the **card**, from 420px to 900px wide, via
+  `fluid-container()`. A narrow card in a wide window gets narrow-card sizing -
+  which is the point of putting the switch in a container query at all.
+- `mw-date-stamp-today` drops the muting for a **fill**: on a wide card it spans
+  the full card height, rounded to the card's own left corners and cut square
+  against the content. A text colour would compete with the price, which is
+  already the brand colour.
+- Cards in a stack want `mw-grid-even` next to `mw-grid-1`, or the card with the
+  longer description ends up taller than the rest of the week.
+
+## Contact
+
+How to reach someone - postal address, phone, mail. It belongs on an
+`<address>`, and undoing that element's italics is most of what the component
+does; the rest is a label column wide enough that the values line up.
+
+```html
+<address class="mw-contact">
+  <p class="mw-text-bold">Gasthaus Lamm</p>
+  <p>Marktplatz 3<br />72622 Musterhausen</p>
+  <p class="mw-contact-row">
+    <span class="mw-contact-label">Phone</span>
+    <a class="mw-link" href="tel:+497123456789">07123 456789</a>
+  </p>
+</address>
+```
+
+- `<address>` is for the contact details of its nearest `<article>` or of the
+  page - not for any postal address that happens to be on it.
+- The label column is 5rem and fixed. An auto column is as wide as its own word,
+  so "Phone" and "Email" would start their values in different places.
+- Wrap phone and mail in `tel:` and `mailto:` links and mark them `mw-link` -
+  in a block of plain lines an unstyled link reads as text.
+- Opening hours are **not** part of this. A day, its times and a line between
+  them is a `mw-leader-row` in a `<dl>`, one row per day, and a note for the
+  rest.
+
 ## Item lists
 
 Layout containers for arbitrary children - the children need no classes.
@@ -1533,6 +1608,43 @@ 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.
 
+## Leader row
+
+A label on the left, its value on the right, a dotted line bridging the gap -
+the row a menu, a table of contents and an invoice all draw. The markup is two
+spans; the line is the row's own `::before`, so it stays out of the
+accessibility tree and no filler element needs `aria-hidden`.
+
+```html
+<p class="mw-leader-row mw-leader-row-top">
+  <span class="mw-leader-row-label mw-text-bold">Roast pork with dumpling</span>
+  <span class="mw-leader-row-value mw-text-bold mw-text-primary">17.50</span>
+</p>
+```
+
+- Label and value is what `<dl>` is for, and since HTML 5.2 a `<div>` may group
+  a `<dt>` and its `<dd>` inside one - so the semantic version costs no extra
+  element over the `<p>`. Put `mw-leader-row` on that `<div>`. Use it where the
+  pair **is** the content; where every row also carries a description, a `<p>`
+  stays simpler.
+- `mw-leader-row-top` keeps the value beside the **first** line of a wrapping
+  label instead of the last. On a menu that is where the price belongs - next to
+  the dish, not somewhere down in its description.
+- A second `mw-leader-row-value` needs no extra class. Both sit after the
+  leader, with a mark in the leader's colour between them - "11.30 - 14.00 |
+  17.00 - 23.00". Without it the pair reads as one long range.
+- Values are set in tabular figures and never break, so a column of them lines
+  up. The label wraps between its words and stops at its longest one; past that
+  the whole row wraps, with the values dropping under the label. Nothing shrinks
+  to one letter per line.
+- Keep `mw-price` out of a leader row: it sets its own baseline and the leader
+  would no longer meet it. Plain text in the value span, or the price in a
+  column of its own.
+
+`mw-leader-row-dashed` and `mw-leader-row-solid` swap the line style; a single
+row retunes with `--mw-leader-row-color`, `--mw-leader-row-style` and
+`--mw-leader-row-width`.
+
 ## HTML lists
 
 `mw-list` is the base (spacing for `li`), combined with one of:

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

@@ -35,6 +35,11 @@
   desktop; stepping the gutter at a breakpoint instead would make the container
   jump backwards at the step. Both values are tokens,
   `--mw-container-gutter` and `--mw-container-width`.
+- `mw-container-narrow` sits **inside** a `mw-container` and gives the content
+  80% of it, back to 90% below `lg` and the full width below `md`. For a column
+  of full-width cards, where a 1200px line leaves more empty card than content.
+  It centers itself; put nothing else in it that has to line up with the
+  headings outside.
 - `mw-content` (`flex: 1` + top padding) is the alternative to `mw-section` when
   a page has one single content area. `mw-content-centered` centers it
   vertically over the full viewport - login pages, error pages.
@@ -459,6 +464,11 @@ way.
 | `mw-grid-flex`    | 12 columns + `mw-col-span-1` … `mw-col-span-12` | single column below `md`     |
 | `mw-grid`         | no template, just grid + gap                    | -                            |
 
+`mw-grid-even` is a modifier, not a grid - add it to one of the above and every
+row becomes as tall as the tallest instead of as tall as its own contents. For a
+column of cards that should end on one line even when one of them carries an
+extra sentence.
+
 Every one of them has a `-lg` twin with a wider gap (2.5rem instead of 1.35rem):
 `mw-grid-2-lg`, `mw-grid-3-lg`, `mw-grid-4-lg`, `mw-grid-5-lg`, `mw-grid-1-lg`,
 `mw-grid-auto-lg`, `mw-grid-flex-lg`, `mw-grid-lg`.

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

@@ -389,6 +389,11 @@ Functions read the maps: `spacing('4')`, `font-size('lg')`,
   responding to zoom. The default range ends at `md` because that is where the
   stepped heading sizes it replaces reached their largest value - a headline
   that should keep growing passes `$to: 'xl'`.
+- `fluid-container($min, $max, $from, $to)` - the same ramp measured against the
+  container instead of the viewport, so the slope lands in `cqi`. For anything
+  inside a `@container` block: sizing there off `vw` hands a 440px card in a
+  1400px window the measurements a 900px card was drawn for. The endpoints are
+  container widths, not breakpoint names, because a container has none.
 - `media-up($bp)` / `media-down($bp)` - the `$breakpoints` map as range syntax,
   `width >= bp` and `width < bp`, so the two never overlap at the breakpoint.
 - `touch-context($bp: 'md')` - coarse pointer _or_ narrow viewport. Every

package/CHANGELOG.md

@@ -6,6 +6,14 @@ 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.23.0] - 2026-09-20
+
+### Added
+
+- leader-row
+- lunch menu with 2 variants
+- contact cards
+
 ## [5.22.0] - 2026-09-19
 
 ### Fixed

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.22.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.23.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.22.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.23.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```

package/index.html

@@ -659,6 +659,7 @@
             <a href="#modals" class="mw-section-btn">Modals</a>
             <a href="#html-lists" class="mw-section-btn">HTML Lists</a>
             <a href="#item-lists" class="mw-section-btn">Item Lists</a>
+            <a href="#leader-row" class="mw-section-btn">Leader Row</a>
             <a href="#stepper" class="mw-section-btn">Stepper</a>
             <a href="#parallax" class="mw-section-btn">Parallax</a>
           </nav>
@@ -705,6 +706,11 @@
             @@include('./src/partials/item-lists-container.html')
           </div>
 
+          <!-- Leader Row container -->
+          <div id="leader-row">
+            @@include('./src/partials/leader-row-container.html')
+          </div>
+
           <!-- Stepper container -->
           <div id="stepper">
             @@include('./src/partials/stepper-container.html')
@@ -899,6 +905,8 @@
             <a href="#tables" class="mw-section-btn">Tables</a>
             <a href="#kanban" class="mw-section-btn">Kanban</a>
             <a href="#calendar" class="mw-section-btn">Calendar</a>
+            <a href="#lunch-menu" class="mw-section-btn">Lunch Menu</a>
+            <a href="#contact" class="mw-section-btn">Contact</a>
             <a href="#pagination" class="mw-section-btn">Pagination</a>
             <a href="#timelines" class="mw-section-btn">Timelines</a>
             <a href="#gallery" class="mw-section-btn">Image Gallery</a>
@@ -937,6 +945,16 @@
             @@include('./src/partials/calendar-container.html')
           </div>
 
+          <!-- Lunch Menu container -->
+          <div id="lunch-menu">
+            @@include('./src/partials/lunch-menu-container.html')
+          </div>
+
+          <!-- Contact container -->
+          <div id="contact">
+            @@include('./src/partials/contact-container.html')
+          </div>
+
           <!-- Pagination container -->
           <div id="pagination">
             @@include('./src/partials/pagination-container.html')