maverick-wave 5.25.0 → 5.27.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.25.0",
+  "version": "5.27.0",
   "config": {
-    "version_short": "5.25"
+    "version_short": "5.27"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/scripts/verify.js

@@ -109,6 +109,10 @@ for (const t of [...tokensDefined].sort()) {
 
 const classesInCss = new Set(all(css, /\.(mw-[a-z0-9-]+)/g));
 
+// Keyframes carry the same prefix and get named in the docs, but they are not
+// classes - and one the docs name without the CSS having it still has to fail.
+const keyframesInCss = new Set(all(css, /@keyframes\s+(mw-[a-z0-9-]+)/g));
+
 // Classes the JS adds at runtime, or queries as a hook, count as legitimate
 // targets - including selector strings like '.mw-foo' and '[class~="mw-foo"]'
 const classesInJs = new Set(all(js, /\.?(mw-[a-z0-9-]+)/g));
@@ -130,7 +134,12 @@ for (const c of all(docs, /[`."'\s](mw-[a-z0-9-]+)/g)) {
 }
 
 for (const [c, where] of [...classesInMarkup].sort()) {
-  if (classesInCss.has(c) || classesInJs.has(c) || CLASS_ALLOWLIST.has(c)) {
+  if (
+    classesInCss.has(c) ||
+    classesInJs.has(c) ||
+    keyframesInCss.has(c) ||
+    CLASS_ALLOWLIST.has(c)
+  ) {
     continue;
   }
   errors.push(`class used in ${where} but not generated by the CSS: .${c}`);

package/src/partials/accordions-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Accordions</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Only as much content open as anyone needs at once. The header is the control
   and the panel follows it in the DOM, which is what lets the whole thing run
   off two state classes and no wrapper element.

package/src/partials/alerts-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Alerts System</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A message that belongs to the page it sits on. The colour carries the severity
   and the left rule repeats it, so the meaning survives where the tint does not.
   The same markup inside a <code>mw-toast-stack</code> becomes a toast.

package/src/partials/announcement-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Announcement</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The ribbon glued under the fixed header - a discount, a launch note, a
   maintenance window. Shown here with <code>mw-announcement-static</code>, so
   the demos sit in the flow instead of over this page. Without it the ribbon

package/src/partials/avatars-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Avatars</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A picture or a pair of initials, in five sizes. The colour variants sit on the
   border, so they still read over a photo; on an initials avatar they fill the
   circle as well. Inside a group the overlap follows the avatar size.

package/src/partials/badges-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Badges</h3>
 
-<p class="mw-text-muted mw-mb-6 mw-text-measure">
+<p class="mw-text-muted mw-text-measure">
   A badge is not a tag. A tag names something and sits in a row of its own kind;
   a badge carries a count or a status and usually sits <em>on</em> something -
   the number on a bell, the dot on an avatar. That is why it fills its colour

package/src/partials/blog-posts-container.html

@@ -1,11 +1,11 @@
 <h3 class="mw-section-subtitle">Blog Posts</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A long-form article rather than a card: title, meta line, body and the way
   back out. The gradient rule down the left edge is what makes it read as a page
   instead of a panel.
 </p>
 
-<div class="mw-blog-post mw-mt-9">
+<div class="mw-blog-post">
   <h2 class="mw-blog-post-title">
     Just a dummy blog post (markdown generated)
   </h2>

package/src/partials/breadcrumbs-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Breadcrumbs</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Modern skewed navigation breadcrumbs with overlapping design.
 </p>
 

package/src/partials/button-bar-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Button Bars</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A framed row of actions. Below 576px it stacks and every button takes the full
   width. The colour variants style whatever is inside them, so a bar of five
   buttons needs one class rather than five.

package/src/partials/buttons-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Buttons</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Three emphasis levels: primary fills, outline draws a line, ghost does neither
   until you point at it. Every variant dips a pixel when pressed - on touch that
   press is the only feedback there is.

package/src/partials/calendar-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Calendar</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Month, compact and week share every class - a week is seven cells instead of
   forty-two, <code>mw-calendar-compact</code> drops the dots and a third of the
   height. The status dots come in as

package/src/partials/cards-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Cards</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The framework's main container: a surface, padding, an optional image, a
   header and a footer. The add-ons - badge, ribbon, title icon - all take their
   colour from one <code>mw-card-addon-*</code> class on the card itself.

package/src/partials/code-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Code</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Inline code gets a surface of its own so it reads as a quoted thing; blocks
   get a filename bar and a terminal variant. The syntax colours are a fixed pair
   of themes rather than brand tokens - code is easier to read in the colours an

package/src/partials/colors-container.html

@@ -2,7 +2,7 @@
 
 <!-- the hex code string is getting updated via javascript! -->
 
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   These thirteen are the only colors you ever set. Everything else - hover
   tones, translucent backgrounds, borders, muted text, the card and footer
   surfaces, the ink variant the dark theme needs - is derived from them at
@@ -152,7 +152,7 @@
 
 <h3 class="mw-section-subtitle">Fill or Ink</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   Every brand and status colour comes in two tokens.
   <code>--mw-primary-color</code> is the exact colour, for anything it
   <strong>fills</strong> - buttons, badges, bars - with
@@ -193,7 +193,7 @@
 
 <h3 class="mw-section-subtitle">Label Ink Per Colour</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   <code>--mw-accent-text-color</code> is the label on every solid coloured
   surface, and one value for all six only holds while the whole palette sits on
   the same side of the lightness scale. A neon green primary next to a deep blue

package/src/partials/coming-soon-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Coming Soon Banner</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A placeholder for a section that is not built yet. Loud on purpose: the whole
   point is that nobody ships it by accident.
 </p>

package/src/partials/contact-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Contact</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The practical block at the end of a site - when we are open, how to reach us.
   Only the second half is a component: <code>mw-contact</code> is an
   <code>&lt;address&gt;</code> with its italics undone and a label column that

package/src/partials/divider-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Divider</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A rule between two things - horizontal or vertical, solid or dashed, in a
   brand colour, or with a label sitting in the middle of it.
 </p>

package/src/partials/dropdown-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Dropdown</h3>
 
-<p class="mw-text-muted mw-mb-6 mw-text-measure">
+<p class="mw-text-muted mw-text-measure">
   Built on <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> rather
   than a <code>div</code> and a click handler. That buys the whole keyboard
   contract for free: the trigger is focusable, Enter and Space toggle it, the

package/src/partials/empty-state-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Empty State</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   What a list shows when it holds nothing. An icon, a line saying what is
   missing and, ideally, the action that fills it. The parts are
   <code>-icon</code>, <code>-title</code> and <code>-desc</code>.

package/src/partials/form-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Form</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The layout around the fields: a flex column with a single gap, so no field
   needs a margin of its own. <code>mw-form</code> carries no padding, which is
   what lets it sit straight inside a modal body or a panel.

package/src/partials/form-elements-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Form Elements</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Every control the framework styles. They stay light in both themes on purpose,
   and they share one height per size step - a field, a select and the button
   beside them line up by construction.

package/src/partials/form-field-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Form Field Pattern</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Label, field, hint and error as one unit, so the spacing between them is not
   re-invented per form. Written with Angular reactive forms in mind; the markup
   is plain HTML.

package/src/partials/gallery-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Image Gallery</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A slider for photos: swipe, arrows, dots and a caption read off the slide
   itself. The dots are real buttons, so the fourth picture is reachable without
   a mouse.

package/src/partials/grid-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Grid System</h3>
 
-<p class="mw-text-muted mw-mb-4">
+<p class="mw-text-muted">
   MaverickWave CSS framework provides a simple grid system that adapts to
   different screen sizes, making responsive layouts simple to implement. It also
   has an advanced grid system with custom column spans. Perfect for complex

package/src/partials/header-utilities-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Header Utilities</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The controls that live in the bar itself rather than on the page: the theme
   switch, the language switcher and the login button. All of them are real
   buttons, so they are reachable by keyboard - the theme switch in particular is
   the first thing someone with a light-sensitivity need goes looking for.
 </p>
 
-<div class="mw-mt-6">
+<div>
   <h3 class="mw-mb-2">Color Switcher (on a fake header here)</h3>
   <p class="mw-text-muted">
     This one is not clickable - the real switcher sits in the header at the top

package/src/partials/html-lists-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">HTML Lists</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The plain <code>ul</code> and <code>ol</code> the framework styles, for prose.
   Anything meant to be used rather than read - selectable rows, menus - belongs
   in the item lists instead.

package/src/partials/info-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Info Badges & Counters</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A small solid marker for a status, a label or a count, down to a mini form
   that fits inside a table cell. A tag names something; this one flags it.
 </p>

package/src/partials/input-group-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Input Group</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A field with something welded to its edge - a unit, an icon, a button. Put the
   size modifier on the group and it reaches the field inside, and the whole
   group takes one focus ring rather than three.

package/src/partials/item-lists-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Item Lists</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Rows that are meant to be used, not just read: selectable, clickable, with a
   sliding accent or a checkbox. For a plain bulleted list use the HTML lists
   above.

package/src/partials/kanban-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Kanban</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A board is a <code>mw-kanban</code> with one <code>mw-kanban-column</code> per
   status, a ticket a plain <code>mw-card</code> with
   <code>mw-kanban-card</code> on top. The priority is the regular
   <code>mw-card-ribbon</code> and brings its colour along on its own.
 </p>
 
-<h4 class="mw-mb-2 mw-mt-8">Default Board</h4>
+<h4 class="mw-mb-2">Default Board</h4>
 <div
   class="mw-kanban"
   data-kanban-prefix="MW"

package/src/partials/kbd-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Keyboard Keys</h3>
 
-<p class="mw-text-muted mw-mb-6 mw-text-measure">
+<p class="mw-text-muted mw-text-measure">
   Anything that tells someone which key to press should look like the key.
   <code>&lt;kbd&gt;</code> is styled directly, so a shortcut in prose needs no
   class at all; <code>mw-kbd</code> is there for a <code>span</code> when the

package/src/partials/leader-row-container.html

@@ -1,10 +1,10 @@
 <h3 class="mw-section-subtitle">Leader row</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A label, its value, and a dotted line connecting the two - the row a menu, a
   table of contents and an invoice all draw. The line is generated by the row
   itself, so the markup is two spans.
 </p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Label and value is what <code>&lt;dl&gt;</code> is for, and since HTML 5.2 a
   <code>&lt;div&gt;</code> may group a <code>&lt;dt&gt;</code> and its
   <code>&lt;dd&gt;</code> inside one - so the semantic version costs no extra

package/src/partials/login-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Login</h3>
 
-<p class="mw-text-muted mw-my-0">
+<p class="mw-text-muted">
   Click "Login" to simulate a failure and see the red border. It will
   automatically clear after 4 seconds.
 </p>
 
 <div class="mw-mb-4">
-  <div class="mw-login mw-my-8">
+  <div class="mw-login mw-mb-8">
     <div class="mw-login-logo">
       <img
         src="https://m1well.com/images/header_logo.svg"

package/src/partials/lunch-menu-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Lunch menu</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Nothing below is a lunch-menu component. It is <code>mw-card</code>,
   <code>mw-price</code>, <code>mw-date-stamp</code> and two grid classes - a
   weekly menu is a composition, not a widget. One day per row: five columns
@@ -8,7 +8,7 @@
   every row the height of the tallest, so a day with a second line of
   description does not make its card taller than the rest of the week.
 </p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   <code>mw-date-stamp</code> answers to the card, not the viewport. On a narrow
   card it is a muted line above the title; once the card is wide enough that a
   single column would leave its right half empty - as every card in a stacked

package/src/partials/media-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Media</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Self-hosted audio and video. The framework ships no player - the native
   controls are the player, and <code>accent-color</code> already brands them.
   The wrapper makes the element a full-width block; a <code>video</code> also

package/src/partials/meta-info-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Meta Info</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The line of small facts that sits with a heading - author, date, reading time,
   status. One wrapping row, with the separators drawn by CSS rather than typed
   into the markup.

package/src/partials/modals-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Simple Modals</h3>
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   A <code>&lt;dialog&gt;</code> carrying the same <code>mw-modal</code> classes.
   Escape, the focus trap, the inert page behind it and the body scroll lock come
   from the element - only opening it needs a line of script. The older

package/src/partials/page-header-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Page Header</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   The start of a content page: title and subtitle on the left, actions on the
   right, wrapping when it gets tight. The counterpart to
   <code>mw-section-head</code>, which opens a section of a landing page rather

package/src/partials/pagination-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Simple Pagination</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The same frame as a calendar - an arrow on each side of the title, content
   below - but the body is yours. Not a page-number list; the paging itself is
   your job, <code>mw-pagination-loading</code> dims the body while the next page
   is on its way.
 </p>
 
-<div class="mw-pagination mw-my-6" id="weekPagination">
+<div class="mw-pagination mw-mb-6" id="weekPagination">
   <div class="mw-pagination-header">
     <button
       type="button"

package/src/partials/palette-container.html

@@ -450,9 +450,9 @@
         class="mw-select mw-select-sm"
         data-variant-prop="--mw-section-padding-block"
       >
-        <option value="2rem">Compact</option>
+        <option value="var(--mw-section-padding-compact)">Compact</option>
         <option value="" selected>Default</option>
-        <option value="5.5rem">Airy</option>
+        <option value="var(--mw-section-padding-airy)">Airy</option>
         <option value="var(--mw-section-padding-fluid)">
           Fluid - grows with the screen
         </option>

package/src/partials/panels-container.html

@@ -1,10 +1,10 @@
 <h3 class="mw-section-subtitle">Panels</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A card whose header and footer are part of the frame rather than the content.
   The body scrolls on its own, which is what the max-height variants are for.
 </p>
 
-<div class="mw-grid-1 mw-my-6">
+<div class="mw-grid-1 mw-mb-6">
   <div class="mw-panel">
     <h4 class="mw-panel-header">Default Panel</h4>
     <div class="mw-panel-body">

package/src/partials/parallax-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Parallax</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Two ways to play a picture against the scroll, both on the browser's scroll
   timeline - no listener, and no
   <code>background-attachment: fixed</code>, which iOS ignores. The image lives

package/src/partials/pricing-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Pricing</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Two pieces that are usually needed together: <code>mw-price</code>, the figure
   on its own, and <code>mw-offer</code>, the card it is sold from. The price is
   one baseline row - what it cost before, what it costs now, the unit, a
@@ -7,7 +7,7 @@
   <code>--mw-price-size</code>, so <code>mw-price-sm</code> and
   <code>mw-price-lg</code> move the whole row at once.
 </p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A struck-through price is a visual convention that a screen reader does not
   pass on - <code>&lt;s&gt;</code> is announced by almost none of them. Where an
   old and a new price stand next to each other, name them with

package/src/partials/progress-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Progress Bars</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A bar with an optional label and scale. The fill runs up from zero when it
   scrolls into view, so the number gets read rather than just seen.
 </p>

package/src/partials/prose-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Prose</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Long-form running text - a legal page, terms, a plain article. One class on
   the container, bare <code>h2</code>/<code>h3</code>/<code>p</code>/<code
     >ul</code

package/src/partials/ratings-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Ratings</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Change the <code>data-rating</code> attribute (0-5) to see how many thumbs-up
   light up. You can also determine the icon flexibly.
 </p>

package/src/partials/section-head-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Section Head</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   The opening of a section: a hairline rule, a mark sitting on its left end, the
   title, and the line that says what follows. Everything starts at one edge -
   centred body copy moves its own left edge with every line break, so the eye
@@ -37,7 +37,7 @@
         <h2 class="mw-section-head-title">About me</h2>
         <p class="mw-section-head-intro">
           A section head without a lead works the same way - the next one below
-          shows it.
+          shows it, and takes a smaller gap to the content for it.
         </p>
       </div>
 
@@ -55,7 +55,10 @@
       <code>-success</code>, <code>-warning</code>, <code>-danger</code> and
       <code>-info</code>. Its length is
       <code>--mw-section-head-mark-width</code> (80px), the gap to the content
-      below <code>--mw-section-head-gap</code>.
+      below <code>--mw-section-head-gap</code>. That gap and the space above the
+      title are multiples of <code>--mw-section-head-step</code>, which follows
+      <code>--mw-section-padding-block</code> - so the section spacing picker in
+      the palette panel moves the heads along with the page.
     </p>
     <div class="mw-card mw-card-simple">
       <div class="mw-section-head mw-section-head-secondary">

package/src/partials/segmented-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Segmented Control</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   Two or three positions of <em>one</em> switch - income or expense, offer or
   quote. Deliberately not a <strong>mw-button-bar</strong>: that one stacks
   below 576px and gives every button 96% width, which is right for a row of

package/src/partials/skeleton-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Skeleton Loader</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The shape of the content before the content arrives. Match it to what is
   actually loading - a skeleton in the wrong shape is worse than a spinner,
   because the page then moves twice.

package/src/partials/spinners-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Loading Spinners</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Three shapes for the same job. Each one needs its shape class:
   <code>mw-spinner-primary</code> on its own renders nothing at all.
 </p>

package/src/partials/stepper-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Stepper</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A process with a known number of steps and a current one. Horizontal where
   there is width for it, vertical where the labels need the room.
 </p>

package/src/partials/tables-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tables</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Rows for data that has columns. On a phone a wide table either scrolls inside
   its own frame or turns each row into a card -
   <code>mw-table-responsive</code> for the first,

package/src/partials/tabs-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tabs</h3>
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   A tab bar scrolls sideways when it runs out of room, and now it says so: a
   shadow appears on whichever side still has tabs behind it, and disappears once
   that end is reached. Four gradients, no scroll listener. The fade colour comes

package/src/partials/tags-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tags</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A label with a soft surface that names something - a topic, a state, a
   category - and sits in a row of its own kind. For a count or a status marker
   reach for a badge instead.

package/src/partials/testimonials-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Testimonials</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A quote card with its source - a <code>figure</code>, because quote and
   attribution belong together. One voice may stand above the grid as
   <code>mw-testimonial-featured</code>; the rest flow in