maverick-wave 3.3.0 → 3.3.2

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

@@ -0,0 +1,289 @@
+# Forms
+
+## The field pattern
+
+`mw-field` groups label, control, hint and error into one unit. It is the
+recommended wrapper for every labelled control and the natural fit for a
+reactive form control.
+
+```html
+<div class="mw-field">
+  <label class="mw-field-label mw-required" for="email">Email</label>
+  <input id="email" type="email" class="mw-input" />
+  <span class="mw-field-hint">Used for login and notifications.</span>
+  <span class="mw-field-error">
+    <i class="fas fa-exclamation-circle"></i> Please enter a valid email
+    address.
+  </span>
+</div>
+```
+
+- `mw-required` on the label appends a red asterisk (`data-required="true"`
+  works too).
+- `mw-field-hint` is the small muted helper line, `mw-field-error` the small red
+  one. Render only one of them at a time.
+- `mw-field-has-error` on the **wrapper** turns the border of the contained
+  `mw-input` / `mw-select` / `mw-textarea` red and adds a soft red halo.
+- `mw-form-element-error` does the same for a single control that has no field
+  wrapper - it also works on `mw-checkbox-group`, `mw-radio-group` and
+  `mw-slider-container`.
+
+> **The framework does not style Angular's `ng-invalid` / `ng-touched` classes.**
+> Bind the framework classes to the control state yourself:
+>
+> ```html
+> <div
+>   class="mw-field"
+>   [class.mw-field-has-error]="email.invalid && email.touched"
+> >
+>   <label class="mw-field-label mw-required" for="email">Email</label>
+>   <input id="email" type="email" class="mw-input" formControlName="email" />
+>   @if (email.hasError('required') && email.touched) {
+>   <span class="mw-field-error">
+>     <i class="fas fa-exclamation-circle"></i> Email is required.
+>   </span>
+>   }
+> </div>
+> ```
+>
+> The same applies to any other framework - React: `className={...}`, Vue:
+> `:class`. Nothing reacts to validation on its own.
+
+## Form layout
+
+```html
+<form class="mw-form">
+  <div class="mw-form-group">
+    <h4 class="mw-form-group-title">Personal information</h4>
+    <div class="mw-grid-2">
+      <div class="mw-field">...</div>
+      <div class="mw-field">...</div>
+    </div>
+  </div>
+
+  <div class="mw-form-actions">
+    <p class="mw-form-actions-hint">Changes are saved immediately.</p>
+    <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
+    <button type="submit" class="mw-btn mw-btn-primary">Save</button>
+  </div>
+</form>
+```
+
+- `mw-form` is a flex column with a gap and **no padding** - safe to put
+  directly on `mw-modal-body` or `mw-panel-body`. It also works on a `<div>`
+  when there is no real form element.
+- `mw-form-inline` lays the children out in a row.
+- `mw-form-group` is the bordered block for a titled group of fields.
+  `mw-form-group-title` is the heading hook inside it - put it on the `<h3>` /
+  `<h4>`, otherwise the heading keeps its full document-level size.
+- `mw-form-actions` is a right-aligned wrapping button row.
+  `mw-form-actions-hint` is a full-width note above the buttons.
+  Alignment variants: `mw-form-actions-left`, `mw-form-actions-center`,
+  `mw-form-actions-full-width` (stacked, buttons at 100% - login forms).
+- Put multi-column layouts inside a group with `mw-grid-2` etc. and let a field
+  span everything with `style="grid-column: 1 / -1"`.
+
+## Text inputs
+
+```html
+<input type="text" class="mw-input" />
+<input type="text" class="mw-input mw-input-sm" />
+<input type="text" class="mw-input mw-input-lg" />
+```
+
+- Full width by default, `2px` border, focus ring in the primary colour.
+- `readonly` renders on a muted surface, `disabled` additionally as
+  `not-allowed`. Both are attribute driven - there is no readonly/disabled
+  class.
+- Date/time work as normal inputs (`type="date" | "time" | "datetime-local"`);
+  the native picker indicator is styled.
+
+### Numbers and money
+
+```html
+<div class="mw-field">
+  <label class="mw-field-label" for="budget">Budget</label>
+  <div class="mw-input-group">
+    <span class="mw-input-group-prefix"><i class="fas fa-euro-sign"></i></span>
+    <input
+      id="budget"
+      type="text"
+      inputmode="decimal"
+      class="mw-input mw-input-numeric"
+      placeholder="0,00"
+    />
+    <span class="mw-input-group-suffix">EUR</span>
+  </div>
+</div>
+```
+
+`mw-input-numeric` is the entry counterpart to the `mw-text-numeric` utility:
+right aligned, tabular lining figures, native spinners suppressed. A value looks
+identical while being typed and once it is rendered into a table.
+
+> **Use `type="text"` + `inputmode="decimal"`, not `type="number"`.** A focused
+> number input changes its value when the page is scrolled, and in most locales
+> it rejects a comma as decimal separator - the user sees `1234,50` but `.value`
+> comes back empty. `inputmode="decimal"` still brings up the numeric keypad on
+> mobile. Parsing the comma stays the application's job.
+
+## Input group
+
+Prefix, suffix and buttons glued to the control:
+
+```html
+<div class="mw-input-group">
+  <span class="mw-input-group-prefix"><i class="fas fa-search"></i></span>
+  <input type="text" class="mw-input" placeholder="Search…" />
+  <button type="button" class="mw-btn mw-btn-primary">
+    <i class="fas fa-search"></i>
+  </button>
+</div>
+```
+
+Sizes: `mw-input-group-sm`, `mw-input-group-lg` - combine them with the matching
+`mw-input-sm` / `mw-input-lg` on the control. A prefix or suffix takes an icon,
+a symbol (`@`, `https://`) or a short unit.
+
+## Select
+
+```html
+<select class="mw-select">
+  <option value="" disabled selected>Choose…</option>
+  <option>Option A</option>
+</select>
+```
+
+Sizes: `mw-select-sm`, `mw-select-lg`.
+
+## Textarea
+
+```html
+<textarea class="mw-textarea" rows="4"></textarea>
+```
+
+Sizes: `mw-textarea-sm`, `mw-textarea-lg`. Resizing is off by default; enable it
+with `mw-textarea-resizable`, `mw-textarea-resizable-vertical` or
+`mw-textarea-resizable-horizontal`.
+
+## Checkbox
+
+The native input is hidden; `mw-checkbox-box` is the visible control, so the
+order of the three children matters.
+
+```html
+<div class="mw-checkbox-group mw-checkbox-group-inline">
+  <label class="mw-checkbox mw-checkbox-success">
+    <input type="checkbox" />
+    <div class="mw-checkbox-box"></div>
+    <div class="mw-checkbox-label">Send a copy</div>
+  </label>
+</div>
+```
+
+- Sizes: `mw-checkbox-sm`, `mw-checkbox-lg`
+- Colours: `mw-checkbox-primary`, `-secondary`, `-success`, `-warning`,
+  `-danger`, `-info`
+- Disabled: `mw-checkbox-disabled` on the label **plus** the `disabled`
+  attribute on the input
+- Group: `mw-checkbox-group` (column), `mw-checkbox-group-inline` (row)
+- With a heading and a description use `mw-checkbox-content` containing
+  `mw-checkbox-header` + `mw-checkbox-label` - see the checkbox item list in
+  `references/components.md`
+
+## Radio
+
+Same structure, with `mw-radio-button` as the visible control:
+
+```html
+<div class="mw-radio-group">
+  <label class="mw-radio">
+    <input type="radio" name="plan" value="free" />
+    <div class="mw-radio-button"></div>
+    <div class="mw-radio-label">Free</div>
+  </label>
+</div>
+```
+
+Sizes `mw-radio-sm`, `-lg`; colours `mw-radio-primary`, `-secondary`,
+`-success`, `-warning`, `-danger`, `-info`; `mw-radio-disabled`; groups
+`mw-radio-group`, `mw-radio-group-inline`.
+
+## Toggle
+
+```html
+<div class="mw-toggle-group">
+  <label class="mw-toggle mw-toggle-success">
+    <input type="checkbox" checked />
+    <div class="mw-toggle-track"></div>
+    <span class="mw-toggle-label">Notifications</span>
+  </label>
+</div>
+```
+
+Sizes `mw-toggle-sm`, `-lg`; colours `mw-toggle-primary`, `-secondary`,
+`-success`, `-warning`, `-danger` (no `info` variant); `mw-toggle-disabled` plus
+the `disabled` attribute; groups `mw-toggle-group`, `mw-toggle-group-inline`.
+
+## Slider
+
+```html
+<label>
+  <span>Experience</span>
+  <div class="mw-slider-container">
+    <div class="mw-slider-value mw-slider-numeric" data-value="3"></div>
+    <input
+      type="range"
+      class="mw-slider mw-slider-primary"
+      min="0"
+      max="10"
+      value="3"
+    />
+  </div>
+</label>
+```
+
+- The badge prints `data-value`: `mw-slider-numeric` appends `/10`,
+  `mw-slider-percent` appends `%`.
+- The filled part of the track comes from the custom property `--value` on the
+  input (`style="--value: 30%"`).
+- Both `data-value` and `--value` are set by the shipped JS on `input`. In a SPA
+  bind them yourself - two bindings, see `examples/angular-form.md`.
+- Colours: `mw-slider-primary`, `-secondary`, `-success`, `-warning`, `-danger`,
+  `-info`; sizes `mw-slider-sm`, `-lg`.
+
+## Login card
+
+A centered, self-contained card for sign-in screens.
+
+```html
+<div class="mw-login">
+  <div class="mw-login-logo"><img src="logo.svg" alt="" /></div>
+  <div class="mw-login-message">Internal area - valid account required.</div>
+  <div class="mw-login-message mw-login-message-error">Wrong credentials.</div>
+
+  <form class="mw-form">
+    <div class="mw-grid-1">
+      <div class="mw-field">
+        <label class="mw-field-label mw-required" for="login-email"
+          >Email</label
+        >
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-envelope"></i
+          ></span>
+          <input id="login-email" type="email" class="mw-input" required />
+        </div>
+      </div>
+    </div>
+    <div class="mw-form-actions mw-form-actions-full-width">
+      <button type="submit" class="mw-btn mw-btn-primary">
+        <i class="fas fa-sign-in-alt"></i> Sign in
+      </button>
+    </div>
+  </form>
+</div>
+```
+
+`mw-login-error` on the card flashes a red border after a failed attempt,
+`mw-login-message-info` / `mw-login-message-error` colour the message line.

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

@@ -0,0 +1,70 @@
+# JavaScript & SPA integration
+
+## What `maverick-wave.min.js` is
+
+One vanilla IIFE, no dependencies, ~8 kB. It queries the DOM **once** on
+`DOMContentLoaded` and attaches listeners. There is no re-init API, no
+`MutationObserver`, no exported module - it is built for a server-rendered or
+static page.
+
+## Why a SPA must not load it
+
+- It runs once during bootstrap. Anything rendered afterwards - i.e. everything
+  in a routed application - never gets initialised.
+- It writes straight into the DOM (class toggles, generated elements, inline
+  styles). In Angular that happens outside change detection; in a zoneless app
+  the framework never learns about it, and on the next re-render your bindings
+  win and the mutation is gone.
+- It reads and writes `localStorage` for the theme, competing with whatever
+  service you build for the same job.
+
+So: no `"scripts"` entry in `angular.json`, no `import 'maverick-wave.min.js'`
+in a Vite entry point. Load the **CSS only** and rebuild the handful of
+behaviours in components. Each one is a few lines - the framework's state
+classes are the entire contract.
+
+## Behaviour inventory
+
+| Behaviour           | What the shipped JS does                                                                                                      | What to do instead                                                                                                                    |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Accordion           | Toggles `active` on `mw-accordion-header` and the following `mw-accordion-content`                                            | `[class.active]="isOpen()"` on both elements                                                                                          |
+| Tabs                | `data-tab` → panel `id`; sets `active` on nav item and panel                                                                  | Track the selected index/key, bind `active` on both; drop `data-tab`                                                                  |
+| Modal               | Click on `mw-modal-close` removes `mw-modal-open` from the overlay                                                            | `[class.mw-modal-open]="isOpen()"`; backdrop click closes. Opening is not in the script at all (the showcase has its own `openModal`) |
+| Mobile nav          | Toggles `open` on `mw-menu-btn` and `mw-navbar`, closes on anchor click                                                       | One signal, bound to both; reset it on navigation end                                                                                 |
+| Scroll spy          | Sets `active` on `mw-navbar-link` from the scroll position                                                                    | Router-based: `routerLinkActive="active"`                                                                                             |
+| Theme toggle        | `localStorage['mw-theme']`, toggles `mw-theme-light` on `<body>` and `active` on the toggle                                   | A theme service - see `examples/angular-services.md`                                                                                  |
+| Progress bar        | `IntersectionObserver` sets `width` from `data-value`                                                                         | Bind `[style.width.%]="value()"` on `mw-progress-fill`                                                                                |
+| Slider              | On `input`, sets `--value` (track fill) and `data-value` (badge text)                                                         | Bind `[style.--value.%]` and `[attr.data-value]`                                                                                      |
+| Alerts              | Close button adds `mw-alert-closed` (`display: none`)                                                                         | Remove the alert from the list/signal                                                                                                 |
+| Checkbox lists      | Adds `mw-selected` to the `li`, emits a `checkboxToggle` event, exposes `window.toggleCheckbox`                               | `[class.mw-selected]="item.checked"`                                                                                                  |
+| Gallery             | Generates the dots, moves the track, swipe handling, writes `mw-gallery-desc`                                                 | Render dots in the template, bind the track transform and `mw-active` on the current dot                                              |
+| Image slider        | Toggles `active` on the overlay image and the control button with the matching `data-index`                                   | Bind `active` from the selected index                                                                                                 |
+| Localhost indicator | On a local hostname, prepends `mw-localhost-indicator-pulse` to the header when it carries `mw-localhost-indicator-activated` | Render the element conditionally                                                                                                      |
+| Header login button | Swaps the FontAwesome lock icon                                                                                               | Bind the icon class                                                                                                                   |
+| Color swatches      | Showcase-only (prints computed hex values)                                                                                    | Not needed                                                                                                                            |
+
+## What works without any JavaScript
+
+Pure CSS, nothing to wire up: hover and focus states, the card lift, tooltips
+(`data-tooltip`), `mw-rating` (via `data-rating`), the responsive table card
+view (`data-label`), all grids and utilities, the body scroll lock while a modal
+is open (`body:has(.mw-modal-open)`), toast entry animations, the sticky table
+header, `prefers-reduced-motion` handling.
+
+## When you do keep the shipped JS
+
+For a static page, a landing page or a server-rendered site (Thymeleaf, Twig,
+Jekyll, plain HTML) it is exactly right - load it at the end of `<body>`. The
+only manual part is opening a modal, which the script does not cover:
+
+```html
+<script src="maverick-wave.min.js"></script>
+<script>
+  function openModal(id) {
+    document.getElementById(id).classList.add('mw-modal-open');
+  }
+  function closeModal(id) {
+    document.getElementById(id).classList.remove('mw-modal-open');
+  }
+</script>
+```

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

@@ -0,0 +1,300 @@
+# Layout & utilities
+
+## Page skeleton
+
+```html
+<body>
+  <header class="mw-header">
+    <div class="mw-container"><!-- logo + actions --></div>
+  </header>
+
+  <main class="mw-main">
+    <section id="overview" class="mw-section">
+      <div class="mw-container">...</div>
+    </section>
+    <section id="details" class="mw-section mw-section-alternate">
+      <div class="mw-container">...</div>
+    </section>
+  </main>
+
+  <footer class="mw-footer">
+    <div class="mw-container">...</div>
+  </footer>
+</body>
+```
+
+- `mw-main` is a full-height flex column - the footer stays at the bottom on
+  short pages.
+- `mw-container` is `min(1200px, 89%)`, horizontally centered. Nest it inside
+  every full-bleed band (header, section, footer), never around them.
+- `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.
+- `<section>` has **no** padding of its own. Always add `mw-section`.
+
+In an Angular app the shell above lives in `app.component.html` and the router
+outlet goes inside the `mw-container`:
+
+```html
+<main class="mw-main">
+  <section class="mw-section">
+    <div class="mw-container"><router-outlet /></div>
+  </section>
+</main>
+```
+
+## Header & navigation
+
+The header is fixed, dark in both themes, and expects exactly this structure -
+its children are styled through descendant selectors:
+
+```html
+<header class="mw-header">
+  <div class="mw-container">
+    <div class="mw-logo">
+      <button type="button"><img src="logo.svg" alt="Logo" /></button>
+    </div>
+
+    <div class="mw-header-actions">
+      <nav class="mw-navbar mw-navbar-medium">
+        <ul class="mw-navbar-list">
+          <li class="mw-navbar-item">
+            <a href="#start" class="mw-navbar-link active">Start</a>
+          </li>
+          <li class="mw-navbar-item">
+            <a href="#docs" class="mw-navbar-link">Docs</a>
+          </li>
+        </ul>
+      </nav>
+
+      <div class="mw-theme-toggle mw-ml-5">
+        <div class="mw-theme-toggle-slider">
+          <div class="mw-theme-toggle-icon"><i class="fas fa-moon"></i></div>
+        </div>
+      </div>
+
+      <button class="mw-login-btn" type="button">
+        <i class="fas fa-lock"></i>
+      </button>
+
+      <div class="mw-menu-btn"><div class="mw-menu-btn-burger"></div></div>
+    </div>
+  </div>
+</header>
+```
+
+- **Collapse breakpoint follows the item count**: default (1-3 items) collapses
+  at `md`, `mw-navbar-medium` (4-5) at `lg`, `mw-navbar-large` (6+) at `xl`.
+  Pick the class by how many links you have.
+- Below the breakpoint the list is hidden and `mw-menu-btn` appears. Opening the
+  drawer means adding `open` to **both** `mw-menu-btn` and `mw-navbar`.
+- The active link carries `active` (no prefix).
+- `mw-profile-btn` is the signed-in pill, next to or instead of the login button:
+
+```html
+<button class="mw-profile-btn" type="button">
+  <span class="mw-avatar mw-avatar-initials mw-avatar-xs">MW</span>
+  <span class="mw-profile-btn-name">Michael</span>
+</button>
+```
+
+An icon (`<i class="fas fa-user-circle"></i>`) works instead of the avatar.
+Below `md` the name hides and the button becomes a round 40px control, the
+same height as the login and burger buttons.
+
+- Header colours have their own tokens (`--mw-header-background`,
+  `--mw-header-text-color`, `--mw-header-navbar-list-color`,
+  `--mw-header-navbar-list-active-color`, `--mw-header-burgerbutton-color`,
+  `--mw-header-border`) so the chrome can be retuned without touching the brand
+  palette.
+
+**Localhost indicator.** Put `mw-localhost-indicator-activated` on the header
+and the shipped JS prepends a pulsing bar when the host is localhost/127.0.0.1/
+192.168.\*. In a SPA, reimplement it: add a `<div class="mw-localhost-indicator-pulse">`
+as the header's first child under the same condition.
+
+## Footer
+
+```html
+<footer class="mw-footer">
+  <div class="mw-container">
+    <div class="mw-footer-top">
+      <div class="mw-footer-column">
+        <h3>Product</h3>
+        <p>...</p>
+      </div>
+      <div class="mw-footer-column">
+        <h3>Links</h3>
+        <ul>
+          <li><a href="#">Docs</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="mw-social-links">
+      <a href="#" data-tooltip="GitHub"><i class="fab fa-github"></i></a>
+    </div>
+
+    <p class="mw-disclaimer">Long-form text under the columns.</p>
+    <p class="mw-copyright">&copy; 2026 Example</p>
+    <p class="mw-last-updated">Last updated: 2026-08-04</p>
+  </div>
+</footer>
+```
+
+`data-tooltip="..."` is a global attribute hook, not a class - it works on any
+element and shows a tooltip above it on hover.
+
+## Sections
+
+| Class                               | Use                                                                        |
+| ----------------------------------- | -------------------------------------------------------------------------- |
+| `mw-section`                        | Vertical rhythm (1.75rem top/bottom) for a page band                       |
+| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                     |
+| `mw-section-title`                  | Centered `3xl` heading with a decorative primary underline - landing pages |
+| `mw-section-subtitle`               | Centered `2xl` heading with a thin secondary underline                     |
+| `mw-section-nav` + `mw-section-btn` | Centered, wrapping row of outline-style jump links                         |
+
+```html
+<section class="mw-section mw-section-alternate">
+  <div class="mw-container">
+    <h2 class="mw-section-title">Components</h2>
+    <nav class="mw-section-nav">
+      <a href="#buttons" class="mw-section-btn"
+        ><i class="fas fa-hand-pointer"></i> Buttons</a
+      >
+      <a href="#cards" class="mw-section-btn"
+        ><i class="fas fa-square"></i> Cards</a
+      >
+    </nav>
+  </div>
+</section>
+```
+
+## Page header
+
+The application counterpart to `mw-section-title`: title and subtitle left,
+actions right, wrapping when it gets tight. Below `sm` the actions take the full
+width.
+
+```html
+<header class="mw-page-header">
+  <div>
+    <h2>Invoices</h2>
+    <p>14 entries &middot; 3 drafts</p>
+  </div>
+  <div class="mw-page-header-actions">
+    <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
+      <i class="fas fa-filter"></i> Filter
+    </button>
+    <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
+      <i class="fas fa-plus"></i> New
+    </button>
+  </div>
+</header>
+```
+
+- `h1`-`h3` inside are normalised to `2xl` (`xl` below `sm`), `p` becomes muted
+  and small - no extra classes needed.
+- `mw-meta-header` fits under the title instead of the `<p>` (see
+  `references/components.md`).
+- `mw-page-header-plain` removes the bottom rule.
+
+## Hero
+
+```html
+<div class="mw-container">
+  <div class="mw-hero">
+    <div class="mw-home mw-home-content-fade">
+      <div class="mw-home-text">
+        <h1>Product<span class="mw-text-primary">Name</span></h1>
+        <p>Subline</p>
+      </div>
+      <div class="mw-d-flex mw-gap-8 mw-justify-center mw-mb-7">
+        <button class="mw-btn mw-btn-primary mw-btn-lg">Get started</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+A `mw-container` that contains a `mw-hero` switches to full-bleed, full-height
+mode with the background image from `--mw-hero-background` and a blurred overlay
+(`--mw-hero-overlay-background`). `mw-home-content-fade` fades the content in.
+
+## Grid
+
+All grid classes are `display: grid` with a preset gap (`mw-gap-*` overrides
+it). They collapse to fewer columns on their own - no responsive suffixes to
+manage.
+
+| Class             | Columns                                         | Collapses                    |
+| ----------------- | ----------------------------------------------- | ---------------------------- |
+| `mw-grid-1`       | 1                                               | - (children forced to 100%)  |
+| `mw-grid-2`       | 2                                               | 1 below `sm`                 |
+| `mw-grid-3`       | 3                                               | 2 below `md`, 1 below `sm`   |
+| `mw-grid-4`       | 4                                               | 2 below `lg`, 1 below `sm`   |
+| `mw-grid-5`       | 5                                               | 4 / 3 / 2 / 1 down the scale |
+| `mw-grid-auto`    | `auto-fill`, min 300px                          | automatic                    |
+| `mw-grid-auto-sm` | min 250px                                       | automatic                    |
+| `mw-grid-auto-md` | min 350px                                       | automatic                    |
+| `mw-grid-flex`    | 12 columns + `mw-col-span-1` … `mw-col-span-12` | single column below `md`     |
+| `mw-grid`         | no template, just grid + gap                    | -                            |
+
+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`.
+
+```html
+<div class="mw-grid-flex">
+  <aside class="mw-col-span-4">Sidebar</aside>
+  <div class="mw-col-span-8">Content</div>
+</div>
+```
+
+**Stacks** - single column, differing horizontal alignment of the children:
+
+| Class                                         | Children                                |
+| --------------------------------------------- | --------------------------------------- |
+| `mw-grid-stack`                               | natural width, left aligned             |
+| `mw-grid-stack-center`                        | centered                                |
+| `mw-grid-stack-end`                           | right aligned                           |
+| `mw-grid-stack-stretch`                       | full width (same result as `mw-grid-1`) |
+| `mw-grid-stack-lg`, `mw-grid-stack-center-lg` | wide-gap twins                          |
+
+## Utilities
+
+**Spacing** - margin `mw-m-*`, `mw-mt-*`, `mw-mb-*`, `mw-ml-*`, `mw-mr-*`,
+`mw-mx-*`, `mw-my-*`; padding `mw-p-*`, `mw-pt-*`, `mw-pb-*`, `mw-pl-*`,
+`mw-pr-*`, `mw-px-*`, `mw-py-*`; `mw-gap-*`. Keys `0`-`14`, plus negative keys
+`1`-`6` for margins only (`mw-mt--3`). Gap shrinks to 75% below `sm`
+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`.
+
+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).
+
+**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`,
+`mw-items-start|end|center|stretch`.
+
+`mw-flex-1` sets `flex: 1` (basis 0, all items equal). `mw-flex-grow-1` only
+grows and keeps the content width as the basis - that is the one you want next
+to an avatar or an icon.
+
+**Text** - alignment `mw-text-left|center|right`; colour `mw-text-primary`,
+`-secondary`, `-success`, `-warning`, `-danger`, `-info`, `-muted`,
+`mw-text-color-dark`, `mw-text-color-light`; weight `mw-text-bold`, `-medium`,
+`-normal`, `-light`; `mw-text-italic`; size `mw-text-3xs` … `mw-text-6xl`;
+line height `mw-leading-tight|normal|loose`.
+
+`mw-text-numeric` is the one to know: right aligned, tabular lining figures, no
+wrap - for money and figures in tables. It is locale agnostic (alignment comes
+from the right edge), but the number of decimal places has to be constant per
+column.
+
+**Radius** - `mw-radius-none|xs|sm|md|lg|xl|2xl|full`.