maverick-wave 5.22.0 → 5.24.0

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

@@ -156,9 +156,9 @@ keys at all (negative gap is invalid CSS and is not generated).
 **Font sizes** (`mw-text-3xs` … `mw-text-6xl`): `3xs` 0.6, `2xs` 0.7, `xs` 0.8,
 `sm` 0.9, `base` 1, `md` 1.1, `lg` 1.3, `xl` 1.5, `2xl` 1.8, `3xl` 2.2, `4xl` 2.5,
 `5xl` 3, `6xl` 4.3 rem. The utility classes are single steps; `h1`, `h2`,
-`mw-section-title` and `mw-section-subtitle` interpolate instead - `h1` runs
-`3xl` to `5xl` between 375px and 768px, `h2` `2xl` to `4xl`, the two section
-headings one step each up to 576px. The endpoints are the values the old
+`mw-section-head-title` and `mw-section-subtitle` interpolate instead - `h1`
+runs `3xl` to `5xl` between 375px and 768px, `h2` `2xl` to `4xl`, the head title
+`2xl` to `4xl` up to 992px and the subtitle one step up to 576px. The endpoints are the values the old
 breakpoint steps had, so a phone and a desktop look the same and only the widths
 between them moved.
 
@@ -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,11 @@ 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-head` (+ `-title`, `-intro`, `-numbered`, colours) ·
+`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/examples/static-landing-page.md

@@ -143,11 +143,13 @@ accordion FAQ.
       <!-- Features -->
       <section id="features" class="mw-section mw-section-alternate">
         <div class="mw-container">
-          <h2 class="mw-section-title">Features</h2>
-          <p class="mw-section-intro">
-            Three things every team asks about on the first call - and the
-            numbers behind them.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Features</h2>
+            <p class="mw-section-head-intro">
+              Three things every team asks about on the first call - and the
+              numbers behind them.
+            </p>
+          </div>
 
           <!-- mw-reveal-stagger on the grid: every card rises as it scrolls
                in, the second and third of each row a beat later -->
@@ -217,10 +219,12 @@ accordion FAQ.
       <!-- Pricing -->
       <section id="pricing" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">Pricing</h2>
-          <p class="mw-section-intro">
-            Per workspace, per month. Every plan starts with a 14 day trial.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Pricing</h2>
+            <p class="mw-section-head-intro">
+              Per workspace, per month. Every plan starts with a 14 day trial.
+            </p>
+          </div>
 
           <!-- mw-offer pushes the price row to the bottom of the body, so the
                three prices line up although the lists differ in length. The
@@ -316,10 +320,12 @@ accordion FAQ.
       <!-- Voices -->
       <section id="voices" class="mw-section mw-section-alternate">
         <div class="mw-container">
-          <h2 class="mw-section-title">Voices</h2>
-          <p class="mw-section-intro">
-            What teams say after the first quarter.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Voices</h2>
+            <p class="mw-section-head-intro">
+              What teams say after the first quarter.
+            </p>
+          </div>
 
           <!-- Quotes of unequal length: columns, not a grid. The stagger
                works on the column children just the same -->
@@ -367,7 +373,9 @@ accordion FAQ.
       <!-- FAQ -->
       <section id="faq" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">FAQ</h2>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">FAQ</h2>
+          </div>
 
           <div class="mw-accordion">
             <div class="mw-accordion-item">

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.
@@ -236,15 +241,22 @@ pointing at the trigger in every combination.
 | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `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-head`                   | The opening of a section: hairline rule, a mark on its left end, title and lead - all on one left edge. Variants `-secondary`, `-success`, `-warning`, `-danger`, `-info` recolour the mark     |
+| `mw-section-head-title`             | The heading inside it, `2xl` growing to `4xl` up to 992px, tight tracking                                                                                                                       |
+| `mw-section-head-intro`             | The lead under it - muted, 65 characters, and from `md` up at most four fifths of the container                                                                                                 |
+| `mw-section-head-numbered`          | Adds the running number at the right end of the rule; the browser counts, restarting per `mw-main`                                                                                              |
+| `mw-section-subtitle`               | Left-aligned heading with a thin secondary underline, `xl` growing to `2xl` up to 576px - the level inside a section                                                                            |
 | `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">
   <div class="mw-container">
-    <h2 class="mw-section-title">Components</h2>
+    <div class="mw-section-head mw-section-head-numbered">
+      <h2 class="mw-section-head-title">Components</h2>
+      <p class="mw-section-head-intro">
+        The everyday parts - buttons, tags, alerts and their many friends.
+      </p>
+    </div>
     <nav class="mw-section-nav">
       <a href="#buttons" class="mw-section-btn"
         ><i class="fas fa-hand-pointer"></i> Buttons</a
@@ -257,13 +269,26 @@ pointing at the trigger in every combination.
 </section>
 ```
 
+**Why the head is left-aligned and has no centred variant.** Centred running
+text moves its own left edge with every line break, so the eye has to find the
+start of each line instead of returning to a fixed position - unnoticeable over
+two lines, tiring from the third or fourth on. Aligned, the title, the lead and
+the content below share one edge, and that shared edge is what makes a band of
+elements read as one section. A hero, a single call to action or a caption is
+short enough to centre; a section head is not, so the framework does not offer
+the choice.
+
+Its tokens: `--mw-section-head-gap` (space to the content below),
+`--mw-section-head-pad` (rule to title), `--mw-section-head-mark-width` (80px)
+and `--mw-section-head-mark-color`.
+
 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.
 
 ## Page header
 
-The application counterpart to `mw-section-title`: title and subtitle left,
+The application counterpart to `mw-section-head`: title and subtitle left,
 actions right, wrapping when it gets tight. Below `sm` the actions take the full
 width.
 
@@ -459,6 +484,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,20 @@ 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.24.0] - 2026-09-20
+
+### Changed
+
+- section header overhaul
+
+## [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.24.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.24.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```

package/index.html

@@ -576,7 +576,9 @@
       <!-- Get started section -->
       <section id="get-started" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">Get started</h2>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Get started</h2>
+          </div>
           @@include('./src/partials/get-started-container.html')
         </div>
       </section>
@@ -584,7 +586,9 @@
       <!-- Documentation section -->
       <section id="documentation" class="mw-section mw-section-alternate">
         <div class="mw-container">
-          <h2 class="mw-section-title">Documentation</h2>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Documentation</h2>
+          </div>
           @@include('./src/partials/documentation-container.html')
         </div>
       </section>
@@ -592,11 +596,13 @@
       <!-- Foundations section -->
       <section id="foundations" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">Foundations</h2>
-          <p class="mw-section-intro">
-            The raw material - type, color, spacing and the small utilities
-            everything else is built from.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Foundations</h2>
+            <p class="mw-section-head-intro">
+              The raw material - type, color, spacing and the small utilities
+              everything else is built from.
+            </p>
+          </div>
           <nav class="mw-section-nav">
             <a href="#typography" class="mw-section-btn">Typography</a>
             <a href="#colors" class="mw-section-btn">Main Colors</a>
@@ -643,12 +649,15 @@
       <!-- Layout section -->
       <section id="layout" class="mw-section mw-section-alternate">
         <div class="mw-container">
-          <h2 class="mw-section-title">Layout</h2>
-          <p class="mw-section-intro">
-            The bones of a page - grids, cards, panels and the containers that
-            hold content together.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Layout</h2>
+            <p class="mw-section-head-intro">
+              The bones of a page - grids, cards, panels and the containers that
+              hold content together.
+            </p>
+          </div>
           <nav class="mw-section-nav">
+            <a href="#section-head" class="mw-section-btn">Section Head</a>
             <a href="#grid" class="mw-section-btn">Grid System</a>
             <a href="#cards" class="mw-section-btn">Cards</a>
             <a href="#panels" class="mw-section-btn">Panels</a>
@@ -659,10 +668,16 @@
             <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>
 
+          <!-- Section head container -->
+          <div id="section-head">
+            @@include('./src/partials/section-head-container.html')
+          </div>
+
           <!-- Grid container -->
           <div id="grid">@@include('./src/partials/grid-container.html')</div>
 
@@ -705,6 +720,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')
@@ -736,11 +756,13 @@
       <!-- Components section -->
       <section id="components" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">Components</h2>
-          <p class="mw-section-intro">
-            The everyday parts - buttons, tags, alerts and their many friends,
-            ready to drop in.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Components</h2>
+            <p class="mw-section-head-intro">
+              The everyday parts - buttons, tags, alerts and their many friends,
+              ready to drop in.
+            </p>
+          </div>
           <nav class="mw-section-nav">
             <a href="#buttons" class="mw-section-btn">Buttons</a>
             <a href="#button-bar" class="mw-section-btn">Button Bar</a>
@@ -843,11 +865,13 @@
       <!-- Forms section -->
       <section id="forms" class="mw-section mw-section-alternate">
         <div class="mw-container">
-          <h2 class="mw-section-title">Forms</h2>
-          <p class="mw-section-intro">
-            Inputs, selects, toggles and validation - fields and buttons share
-            one height scale by construction.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Forms</h2>
+            <p class="mw-section-head-intro">
+              Inputs, selects, toggles and validation - fields and buttons share
+              one height scale by construction.
+            </p>
+          </div>
           <nav class="mw-section-nav">
             <a href="#form-elements" class="mw-section-btn">Form Elements</a>
             <a href="#input-group" class="mw-section-btn">Input Group</a>
@@ -888,17 +912,21 @@
       <!-- Data & display section -->
       <section id="data-display" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">Data & Display</h2>
-          <p class="mw-section-intro">
-            Tables, boards, timelines and long-form content - everything that
-            shows real data.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Data & Display</h2>
+            <p class="mw-section-head-intro">
+              Tables, boards, timelines and long-form content - everything that
+              shows real data.
+            </p>
+          </div>
           <nav class="mw-section-nav">
             <a href="#page-header" class="mw-section-btn">Page Header</a>
             <a href="#meta-info" class="mw-section-btn">Meta Info</a>
             <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 +965,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')
@@ -982,23 +1020,27 @@
       <!-- History section -->
       <section id="history" class="mw-section mw-section-alternate">
         <div class="mw-container">
-          <h2 class="mw-section-title">History</h2>
-          <p class="mw-section-intro">
-            The major releases so far. Everything in between - the minors and
-            the patch releases - sits in the changelog.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">History</h2>
+            <p class="mw-section-head-intro">
+              The major releases so far. Everything in between - the minors and
+              the patch releases - sits in the changelog.
+            </p>
+          </div>
           @@include('./src/partials/history-container.html')
         </div>
       </section>
       <!-- Preview section, showcase only - see the partial -->
       <section id="preview" class="mw-section">
         <div class="mw-container">
-          <h2 class="mw-section-title">Preview</h2>
-          <p class="mw-section-intro">
-            One page-shaped example, so the variant switches in the palette
-            panel have something to act on that is not a component gallery. Open
-            the panel and the page lands here.
-          </p>
+          <div class="mw-section-head">
+            <h2 class="mw-section-head-title">Preview</h2>
+            <p class="mw-section-head-intro">
+              One page-shaped example, so the variant switches in the palette
+              panel have something to act on that is not a component gallery.
+              Open the panel and the page lands here.
+            </p>
+          </div>
           @@include('./src/partials/preview-container.html')
         </div>
       </section>