@getvitops/generator 8.2.0 → 8.3.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,121 @@
 # @getvitops/generator
 
+## 8.3.0-alpha.1
+
+### Minor Changes
+
+- 24c568b: Escape hatches on every block, a section theme, widget areas, a badges block, Tailwind scanning of package renderers, and a sturdier `vitops audit`.
+
+  **@getvitops/emdash**
+
+  - Every `vitops.*` block and `vitops_section` gains three fields: `anchor` (rendered as the `id`, so `#contact` works), `className` (`class_name` on the section type: block-type slugs are lowercase) and `style`. `style` takes CSS custom properties only (`--p-card: 2rem`); any other declaration, and any value containing `url(`, `@`, `{`, `}` or a backslash, is dropped. With the `tailwind` format a class typed in the CMS only works if the site already uses it. They are applied to the block's own outermost element (the grid `<ul>` for `vitops.cards`), never an extra wrapper, so a block's markup is the same whether or not an editor fills them in.
+  - `vitops_section` gains a `theme` select: a role, or `<role>:solid`, with readable text chosen by the generator's contrast rules. It overrides `tone`/`color`/`solid`, which stay for existing content. Other site roles still go through `tone`.
+  - New `vitops.badges` block (a row of `.badge` or `.tag` labels, each with an optional tone, icon and link) and `vitops.widgetArea` block, plus `<VitopsWidgetArea name level />` from `@getvitops/emdash/astro`. A widget area is content defined once under Widgets and shown wherever it is placed. An area cannot hold another area, and an area containing a `core:*` component widget is rendered by EmDash's own renderer.
+  - Existing sites: re-run the block-type seed only on a new database; on an existing one add the `theme`, `anchor`, `className` and `style` fields to the `vitops_section` block type in the admin.
+
+  **@getvitops/create**: the emdash template seeds `announcement` and `pre-footer` widget areas, renders them in `Layout.astro`, and documents when to use a Section, a block or a widget area. Sites scaffolded earlier add the two `<VitopsWidgetArea>` lines and the `widgetAreas` seed entries by hand.
+
+  **@getvitops/generator / astro / vite** (`tailwind` format only): the Astro integration now adds `@source` lines for `@getvitops/astro` and `@getvitops/emdash`, because Tailwind v4 does not scan `node_modules`; utilities used only by their renderers (`font-display`, `font-caption`, `font-footnote`) were never emitted and the page silently rendered at body size. New `sources` option on `generate()` and the Vite plugin. A site's `src/package-classes.txt` workaround can be deleted. css and bricks: no change.
+
+  **@getvitops/cli**: `vitops emdash check-prerender` now also warns when a page uses a type-role class (`font-display`, …) the built CSS has no rule for; `--strict` makes it fail. `vitops audit` checks for its optional packages and a Chromium binary before starting the preview server (so a failed run no longer leaves port 4398 busy), stops the server on Ctrl+C and termination, and takes its page list from the built sitemap, then the menus; the guessed defaults (`/privacy`, `/contact`, …) are used only when neither exists.
+
+  **@getvitops/utils**: the audit helpers behind the above (`preflight`, `fetchSitemapPaths`, `sitemapLocs`, `pathsFromSitemapLocs`).
+
+  **@getvitops/core** (all formats): new `.block-anchor` rule gives an anchored block `scroll-margin-top: var(--header-offset, 5rem)`; set `--header-offset` to a sticky header's height. New `widget-area.css` partial. No other consumer-facing change.
+
+  The other fixed-group packages: no consumer-facing change beyond the above.
+
+  **Also fixed in the emdash template** (`site.json`): it defined only the `display`, `heading` and `body` type roles while the blocks use `title`, `eyebrow`, `lead`, `caption` and `footnote`, so those rendered at body size with no rule behind them. The roles are added with the reference design system's specs. A site scaffolded earlier adds the same five entries under `designSystem.themes.default.typography.roles`; `vitops emdash check-prerender` now names any that are missing.
+
+### Patch Changes
+
+- Updated dependencies [24c568b]
+  - @getvitops/utils@8.3.0-alpha.1
+  - @getvitops/config@8.3.0-alpha.1
+
+## 8.3.0-alpha.0
+
+### Minor Changes
+
+- 93d2067: New framework patterns and an `Entries` component for the EmDash block library.
+
+  **CSS, all formats** (css, bricks and inlined into tailwind's `components` layer; no existing class changes): `tone` (a shared tint/solid colour convention driven by `--tone-*` custom properties, plus `.accent` for a run inside a heading), `section` (head and heading-left `--split` layout), `steps` (numbered `<ol>` with a connector line), `stats` (figures and `--tiles`), `callout` (a call-to-action band), `logos` (a still partner grid) and `embed` (a consent-gated iframe frame). All are structural partials, classified `vitops.components`.
+
+  **`@getvitops/astro`:** new `Entries.astro` (`@getvitops/astro/components/Entries.astro`) emits `<wc-entries>` itself with the semantic heading + `<dl>` fallback.
+
+  **`@getvitops/generator`:** `TierEntry` gains `emdashExempt` (a reason a shipped web component has no EmDash block). `tiers.test.ts` now fails if a shipped `wc-*` has neither `emdash` nor `emdashExempt`, and the components doc and the docs site list the exemptions.
+
+  No other consumer-facing change in `@getvitops/core`, `@getvitops/utils`, `@getvitops/cli` or `@getvitops/vite` beyond the version bump.
+
+- 161c7f3: A contact form that works end to end: `vitops setup turnstile`, `<wc-turnstile>`, the `vitops.form` EmDash block, and the route the emdash template ships to receive it.
+
+  **CSS, all formats** (no existing class changes): `forms.css` gains `.form-notice--target:not(:target)` (a message revealed only when the URL fragment names it, which is how a prerendered page shows a no-JS form's result) and `:where(wc-turnstile) { display: block }`.
+
+  **`@getvitops/core`:** new `<wc-turnstile sitekey="…">` in `elements.js`. It loads Cloudflare Turnstile on the first interaction with its form (no request to `challenges.cloudflare.com` for a visitor who only reads the page), holds an early submit until the token arrives, and leaves its slotted no-JS explanation in place until JS takes over. Turnstile is category `necessary`, so it is not behind the consent banner.
+
+  **`@getvitops/utils` / `@getvitops/cli`:** new `@getvitops/utils/turnstile` and `vitops setup turnstile [--dry] [--check] [--no-write] [--no-secret]`. It plans from the site's hostnames, creates a managed widget unless one already covers them (an existing widget is adopted, never edited, rotated or deleted), writes the public key to `site.security.turnstile.siteKey`, and pipes the one-time secret to `wrangler secret put VITOPS_TURNSTILE_SECRET` without writing it to any file. Needs `CLOUDFLARE_API_TOKEN` with **Account > Turnstile > Edit** and `CLOUDFLARE_ACCOUNT_ID`.
+
+  **`@getvitops/astro`:** `virtual:getvitops/head` gains `turnstileSiteKey` (read from `site.security.turnstile.siteKey`) so blocks can render the widget. No other change.
+
+  **`@getvitops/generator`:** `TIERS` gains a `turnstile` entry (wc-turnstile, claimed by `vitops.form`); `wc-multi-field`'s `emdashExempt` reason is reworded now the form block exists.
+
+  **`@getvitops/emdash`:** new `vitops.form` block: a field repeater (text, email, phone, long text, choose one, tick box), required flags, help text, success/error messages, optional Turnstile. It renders a semantic `<form method="post">` that works with no JavaScript, with a honeypot named per `createConversionRoute`'s defaults. A field named `phone` submits as `tel`, because the route reserves `phone` and `event`.
+
+  **`@getvitops/create`:** the emdash template ships `src/pages/api/track.ts` (`prerender = false`, `createConversionRoute()`), a seeded contact form, and `challenges.cloudflare.com` in both templates' Report-Only CSP (`script-src`, `frame-src`). The route refuses a post with nowhere to deliver and fails closed when a site key exists without `VITOPS_TURNSTILE_SECRET`. SETUP.html gains the Turnstile step. Existing sites: copy the route and the CSP change, then run `vitops setup turnstile`.
+
+- 175d16e: **Added: `vitops.reviews` and `vitops.nav` EmDash blocks.** Non-breaking.
+
+  - **`vitops.reviews`** renders Google reviews from the committed `.vitops/reviews.json` cache (`vitops reviews`) as a grid, carousel or marquee of `<ReviewCard>`. Fields: location key, layout, columns, limit, lowest rating, order, featured ids, reviewer photos (off by default), tone/colour. Which reviews show is `selectReviews()`, the one shared decision. Review JSON-LD is not offered (Google treats self-marked-up reviews as ineligible for rich results). A new review reaches the page after `vitops reviews` is re-run, committed and the site rebuilt, not when an editor saves; with no cache file the block renders nothing (a note in `astro dev`).
+  - **`vitops.nav`** renders a named EmDash menu inside page content (site map, section links, footer-style columns), never the header. Fields: menu (picked from the site's menus via a new `menus/list` plugin route, with `footer-sitemap`/`footer-legal`/`primary` as the static fallback), accessible name, visible heading and level, layout `list | inline | columns | sitenav`, depth 1-3, tone/colour. It is a `<nav>` with a name that is never `Primary`, `Site map` or `Legal` (the layout's landmarks), `aria-current="page"`, no runtime JS; a missing or empty menu renders nothing.
+  - `@getvitops/astro`: **`virtual:getvitops/reviews`**, served by `vitops()`, is `.vitops/reviews.json` as a build-time import (an empty cache when absent or unreadable), because a Worker cannot read the file. `<ReviewCard>` now renders the review's source link (`.review__source`, `rel="nofollow noopener noreferrer"`), which the pattern already styled. **Fix:** `src/json-ld.ts` was missing from the published `files`, so any consumer importing `<ReviewCard>` (which composes `schemas/Review.astro`) failed to build with an unresolved import. `@getvitops/emdash` now needs this version of `@getvitops/astro` for the `vitops.reviews` block.
+  - `@getvitops/utils`: new Worker-safe subpath **`@getvitops/utils/reviews/select`** (`selectReviews` and the review types, no `node:fs`). `selectReviews` now takes only the display fields (`featured`, `minRating`, `limit`, `sort`), so a caller with no configured `locationId` can use it; existing calls are unchanged.
+  - `@getvitops/core`: new `.navlist` pattern in `patterns/sitenav.css` (`.navlist`, `__item`, `__link`, `__label`, `__sub`, `--inline`, `--columns`). **All formats** (css, bricks, tailwind). No existing class changes.
+  - `@getvitops/generator`: `TIERS.review` lists `vitops.reviews` and `TIERS.sitenav` lists `vitops.nav` (and `.navlist`), so `vitops docs components` and the docsite show them.
+
+- 83d6f3c: Theming escape hatches, so a real palette builds without raw ramp steps. All additive; existing configs build unchanged.
+
+  - **Dark-only sites.** `designSystem.defaultColorScheme: "dark"` (accepted by the schema before, but ignored) now makes the dark tokens the `:root` appearance with `color-scheme: dark`, emits no light block or `data-theme` flip, and skips light-mode contrast checks. Reaches css, bricks and tailwind formats. Do not ship `<wc-color-scheme-toggle>` on such a site.
+  - **Role solid step and foreground.** `colors.roles.<role>` may be `{ hue, kind?, solid?, foreground? }`. `solid: 400` starts the solid family at step 400 (bold and x-bold walk one and two rungs darker); `foreground: "dark" | "light"` pins `text-on-<role>`. The APCA check (Lc 60) still runs on the pair emitted. The string shorthand is unchanged. All formats. The live editor's `roleTokens` still assume the default 600 family when re-pointing a role.
+  - **Split shadows.** `shadows.<name>` may be `{ box?, drop? }`: `box` (spread, inset, layers) is `--shadow-<name>`; `drop` is `--shadow-<name>-drop` and feeds `.drop-shadow-<name>` and the `shadow:` state shortcut. The string form is unchanged. css/bricks emit `.drop-shadow-*`; tailwind emits the `-drop` token only.
+  - **Layout tokens.** New optional `layout` block (`widths.{measure,breakout,spotlight,nav}`, `regionSpace.{min,preferred,max}`) emitted as `--width-*` / `--region-space*` on `:root` in css, bricks and tailwind formats, and exposed in `design-manifest.json` (`layout`, `reverseIndex`). Keys you omit keep the framework defaults.
+  - **`acknowledgeOffLadder: true`** on a palette hue silences that hue's off-ladder anchor warnings.
+  - **Typography:** `transform` and `decoration` are now accepted as aliases of `text-transform` and `text-decoration` (canonical wins when both are present) instead of warning and being dropped.
+  - **Docs strings** (`authoring.md`, JSON Schema hovers) state the Lc 60 muted-text requirement against the page plane and give a type-scale recipe for marketing headings.
+  - `@getvitops/utils`: `pickOn` takes an optional `prefer: 'light' | 'dark'`.
+
+- 892b204: Generated legal documents gain a **Quebec (Law 25) jurisdiction**: `site.legal.jurisdiction: "qc"` renders the privacy policy, terms of use and cookie notice from new, Quebec-specific templates (not the `ca` prose). The privacy policy adds the person in charge of the protection of personal information, technologies that identify, locate or profile, transfers _outside Quebec_ (so a provider elsewhere in Canada counts), retention and anonymization, and the rights of access, rectification, portability, withdrawal, de-indexing and review of automated decisions, with the Commission d'accès à l'information as the complaint body. Every `qc` document carries a second, prominent review banner (counsel review, designated person, impact assessment, French-language requirement). Two optional config facts back it: `privacyPolicy.privacyOfficerTitle` and `privacyPolicy.impactAssessments` (the impact-assessment sentence renders only when attested). The "off until you choose" profiling assurance renders only under an opt-in consent model. **Not legal advice and not reviewed by counsel.**
+
+  CASL: when a form collects a newsletter sign-up, the `ca` **and** `qc` privacy policies now include a short "Commercial Electronic Messages" paragraph (consent, sender identification, unsubscribe). Existing `ca` documents change only for sites with such a form. No CSS change; no change to `ca` documents otherwise.
+
+- 06d6112: Fix the EmDash `/design-system` admin page erroring on a tailwind site. It fetches `/vitops/design-manifest.json`, which the `tailwind` format never emitted and the integration only mirrored under `editor: true` (which also loads `editor.js` on every public page).
+
+  - **generator** (`tailwind` format only): `design-manifest.json` is now emitted alongside `tailwind.css`. No change to the CSS.
+  - **astro**: new `vitops({ editorManifest: true })` writes everything an outside host needs into `public/vitops/` (`design-manifest.json`, `editor.js`, a standalone `editor.css`, and `design-system-editor.html`) without loading the editor on public pages. `editor: true` still loads it from `<Head />`.
+  - **vite**: `editorManifestDir` also writes `vitops/editor.css`, from a throwaway `css`-format pass on tailwind sites.
+  - **emdash**: the `/design-system` admin page was unstyled and overflowed the admin, because the editor borrows the framework CSS and the admin never loads it. It now embeds `/vitops/design-system-editor.html` in an iframe, so the design system can't leak into the admin's styles. **Requires `editorManifest: true`** in `vitops({ … })`.
+  - **create**: the EmDash template sets `editorManifest: true`. Existing sites: add it to `vitops({ … })` in `astro.config.mjs`.
+
+  No consumer-facing change in the other toolchain packages.
+
+- 6297337: `organization.address.streetAddress` is now optional (a home-based or service-area business with no public street address), and `organization.description` is a new optional, localisable field. The generated legal documents omit an absent street line; JSON-LD builders already skipped absent address fields. Non-breaking; no CSS change.
+- 55061e2: **Added: `<SiteNav>` and `<SiteFooter>` for Astro/EmDash sites.** Both are tier-1 markup over the existing `sitenav` pattern (no runtime JS: `<details>` accordions + Popover API drawer). Non-breaking.
+
+  - `<SiteNav {...await loadNavMenus(getMenu)} />` renders EmDash menu `primary` (the default: depth 3, dropdowns from the `md` container width, drawer below). If a `primary-mobile` menu exists it replaces the nav below `md` (depth 1); if `primary-mega` exists it replaces it from `xl` (mega panels). Adding the menu in the admin is the whole change. Only one tier is in the accessibility tree at a time. An item's `titleAttr` is its description (EmDash has no description field yet).
+  - `<SiteFooter sitemap legal name>` renders `footer-sitemap` + `footer-legal` + a copyright line.
+  - `@getvitops/astro/components/sitenav.ts` exports the pure helpers (`loadNavMenus`, `selectTiers`, ...).
+  - CSS (`patterns/sitenav.css`, **all formats**): tier visibility classes (`.sitenav-tier--below-*`/`--from-*`), `.sitenav--mega`, `.sitenav__desc`, `.sitefooter*`, `aria-current` styling, reduced-motion and forced-colors handling. Existing `.sitenav` rules are unchanged, so the Bricks element is unaffected.
+  - `@getvitops/create` (emdash template): the layout now renders header and footer through these components, with the colour-scheme toggle in the header. It reads menus `primary`, `footer-sitemap` and `footer-legal`; a template whose seed still has the old `footer` menu renders no footer links until the seed is updated.
+  - `@getvitops/generator`: `TIERS.sitenav` now lists the two Astro components.
+
+### Patch Changes
+
+- Updated dependencies [161c7f3]
+- Updated dependencies [175d16e]
+- Updated dependencies [83d6f3c]
+- Updated dependencies [b47df4d]
+  - @getvitops/utils@8.3.0-alpha.0
+  - @getvitops/config@8.3.0-alpha.0
+
 ## 8.2.0
 
 ### Minor Changes

package/assets/css/index.css

@@ -72,6 +72,14 @@
 @import './patterns/text-effects.css';
 @import './patterns/svg.css';
 @import './patterns/marquee.css';
+@import './patterns/tone.css';
+@import './patterns/section.css';
+@import './patterns/widget-area.css';
+@import './patterns/steps.css';
+@import './patterns/stats.css';
+@import './patterns/callout.css';
+@import './patterns/logos.css';
+@import './patterns/embed.css';
 @import './patterns/counter.css';
 @import './patterns/nav.css';
 @import './patterns/carousel.css';

package/assets/css/patterns/callout.css

@@ -0,0 +1,39 @@
+/**
+ * Callout — a call-to-action band: a short message and the action it points at, set
+ * apart from the page. Not a banner: `banner` is a dismissible announcement; this is
+ * content that stays.
+ *
+ * Message left and actions right when there is room, stacked when there is not. Colour
+ * is `.tone` (tone.css); `--center` stacks and centres at every width.
+ */
+.callout {
+  display: grid;
+  gap: var(--callout-gap, 1rem 2rem);
+  align-items: center;
+  padding: var(--callout-padding, clamp(1.25rem, 4cqi, 2.5rem));
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+
+  .callout__body {
+    display: grid;
+    gap: 0.5rem;
+    min-inline-size: 0;
+  }
+
+  .callout__title,
+  .callout__text,
+  .callout__actions {
+    margin: 0;
+  }
+
+  &.callout--center {
+    text-align: center;
+    justify-items: center;
+  }
+}
+
+@container (min-width: 48rem) {
+  .callout:not(.callout--center) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+}

package/assets/css/patterns/embed.css

@@ -0,0 +1,39 @@
+/**
+ * Embed — a third-party iframe (map, video) held at a fixed aspect ratio, behind consent.
+ *
+ * The iframe ships with NO `src`: the address rides on `data-consent-src`, and the consent
+ * runtime assigns it only once the visitor has granted the category. Until then the
+ * `.embed__placeholder` — a real link to the same content, so it is useful with no JS — is
+ * what the page shows; `[data-vitops-activated]` on the iframe (set by the runtime) hides
+ * it. No third-party request is made before consent.
+ */
+.embed {
+  position: relative;
+  aspect-ratio: var(--embed-ratio, 16 / 9);
+  overflow: hidden;
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+
+  .embed__frame {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: 0;
+  }
+
+  .embed__placeholder {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-content: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  /* Once the runtime has loaded the frame, the placeholder has nothing left to say. */
+  .embed__frame[data-vitops-activated] ~ .embed__placeholder {
+    display: none;
+  }
+}

package/assets/css/patterns/forms.css

@@ -369,3 +369,17 @@ select.custom-select {
 :where(wc-multi-field) {
   display: block;
 }
+
+/* `<wc-turnstile>` wraps a fallback paragraph and the widget box, both blocks (light DOM, no `:host`). */
+:where(wc-turnstile) {
+  display: block;
+}
+
+/*
+ * A message shown only when the URL fragment names it. A prerendered page cannot know whether a
+ * no-JS post succeeded, so a form's success and error notices are always in the markup and the
+ * endpoint's redirect (`#form-sent` / `#form-error`) reveals one.
+ */
+.form-notice--target:not(:target) {
+  display: none;
+}

package/assets/css/patterns/logos.css

@@ -0,0 +1,45 @@
+/**
+ * Logos — a static grid of partner/client marks. `marquee` is the scrolling version;
+ * this one holds still, which is what most "key partners" rows should do (nothing to
+ * pause, nothing to track, no motion to opt out of).
+ *
+ * Each item is a plain image, or a link around one. Marks are normalised to a common
+ * height rather than a common width, because logos vary far more in aspect ratio than
+ * in how tall they should read. `--grayscale` quiets them until hover or focus.
+ */
+.logos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: var(--logos-justify, center);
+  gap: var(--logos-gap, 1.5rem 2.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .logos__item {
+    display: grid;
+    place-items: center;
+    margin: 0;
+  }
+
+  .logos__item img {
+    block-size: var(--logos-height, 2.5rem);
+    inline-size: auto;
+    max-inline-size: 100%;
+    object-fit: contain;
+  }
+
+  &.logos--grayscale .logos__item img {
+    filter: grayscale(1);
+    opacity: 0.7;
+    transition:
+      filter 0.2s,
+      opacity 0.2s;
+  }
+
+  &.logos--grayscale .logos__item:is(:hover, :focus-within) img {
+    filter: none;
+    opacity: 1;
+  }
+}

package/assets/css/patterns/section.css

@@ -0,0 +1,61 @@
+/**
+ * Section — the editorial wrapper most pages are made of: an optional kicker, a heading,
+ * a lead-in line, then a body of other blocks.
+ *
+ * Composed from the layout primitives rather than reinventing them: the outer element
+ * is `.region` (vertical rhythm) and the content sits on `.centered`'s tracks, so this
+ * partial only adds what neither has — the head's own rhythm and the `--split` layout,
+ * which puts the head beside the body (heading-left) above the container breakpoint.
+ * Backdrop and colour come from `.tone` (tone.css), never from here.
+ */
+.section {
+  .section__head {
+    display: grid;
+    gap: var(--section-head-gap, 0.75rem);
+    align-content: start;
+  }
+
+  .section__kicker,
+  .section__title {
+    margin: 0;
+  }
+
+  .section__sub {
+    margin: 0;
+    max-inline-size: var(--width-measure, 65ch);
+  }
+
+  .section__body {
+    display: grid;
+    gap: var(--section-body-gap, 1.5rem);
+    min-inline-size: 0;
+  }
+
+  /* Head and body stack until there is room for two columns (below). */
+  &.section--split .section__inner {
+    display: grid;
+    gap: var(--section-split-gap, clamp(1.5rem, 4cqi, 3rem));
+  }
+
+  &.section--center .section__head {
+    text-align: center;
+    justify-items: center;
+  }
+}
+
+@container (min-width: 48rem) {
+  .section.section--split .section__inner {
+    grid-template-columns:
+      minmax(0, var(--section-split-head, 1fr))
+      minmax(0, var(--section-split-body, 2fr));
+    align-items: start;
+  }
+}
+
+/*
+ * A block given an anchor id (`@getvitops/emdash`'s `anchor` field). The offset keeps the target
+ * clear of a sticky header; set `--header-offset` to the header's height. All formats.
+ */
+.block-anchor {
+  scroll-margin-top: var(--header-offset, 5rem);
+}

package/assets/css/patterns/sitenav.css

@@ -425,3 +425,265 @@
     display: none;
   }
 }
+
+/* ── Tiers (`<SiteNav>`'s optional `primary-mobile` / `primary-mega` menus) ──────
+   Each tier is its own `<nav>` in a `.sitenav-tier` wrapper, and a wrapper is
+   `display: none` outside its container-width window — so exactly one tier is ever
+   in the accessibility tree. Same container as the `--bp-*` flag above (the nearest
+   ancestor `container-type`, `body` per layout.css), so the hand-over width and the
+   drawer→navbar flip can never disagree. One pair per breakpoint; `sitenav.ts`'s
+   `VISIBILITY_CLASSES` lists them and `sitenav.test.ts` checks each is defined here. */
+@container (width < 30rem) {
+  .sitenav-tier--from-sm {
+    display: none;
+  }
+}
+@container (width >= 30rem) {
+  .sitenav-tier--below-sm {
+    display: none;
+  }
+}
+@container (width < 48rem) {
+  .sitenav-tier--from-md {
+    display: none;
+  }
+}
+@container (width >= 48rem) {
+  .sitenav-tier--below-md {
+    display: none;
+  }
+}
+@container (width < 64rem) {
+  .sitenav-tier--from-lg {
+    display: none;
+  }
+}
+@container (width >= 64rem) {
+  .sitenav-tier--below-lg {
+    display: none;
+  }
+}
+@container (width < 80rem) {
+  .sitenav-tier--from-xl {
+    display: none;
+  }
+}
+@container (width >= 80rem) {
+  .sitenav-tier--below-xl {
+    display: none;
+  }
+}
+
+/* ── Item description (EmDash `titleAttr` convention — see SiteNav.astro) ───── */
+.sitenav__link--described {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+.sitenav__desc {
+  font-size: 0.875em;
+  opacity: 0.75;
+  font-weight: normal;
+}
+
+/* The current page. Text-weight + a non-colour cue, so it survives forced-colors. */
+.sitenav__link[aria-current='page'] {
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+}
+
+/* ── Mega variant — WIDE ONLY ───────────────────────────────────────────────
+   Top-level submenus become full-width panels of columns under the nav row. The
+   branch item stops being the positioning context so the panel anchors to
+   `.sitenav--mega` instead. Inside the wide branch, with the same reasoning as the
+   rest of the file: a rule here competes at its bare selector weight. */
+@container style(--_sitenav-wide: 1) {
+  .sitenav--mega {
+    position: relative;
+  }
+  .sitenav--mega .sitenav__list > .sitenav__item--branch {
+    position: static;
+  }
+  .sitenav--mega .sitenav__list > .sitenav__item--branch > .sitenav__submenu {
+    inset-inline: 0;
+    inline-size: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+  /* Third level is a column inside the panel, not a fly-out. */
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch {
+    position: static;
+    display: block;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    translate: none;
+    box-shadow: none;
+    border: none;
+    padding: 0.25rem 0 0;
+    min-inline-size: 0;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__disclosure {
+    display: none;
+  }
+}
+
+/* ── In-page menu (`vitops.nav` block) ─────────────────────────────────────────
+ *
+ * A menu read in the body of a page — a site map, a section's links, footer-style columns —
+ * as plain nested lists. No disclosure and no drawer: that is the header's job (`.sitenav`).
+ *
+ *   <nav aria-label="Services"><ul class="navlist navlist--columns">
+ *     <li class="navlist__item"><a class="navlist__link">…</a><ul class="navlist__sub">…</ul></li>
+ *
+ * Modifiers: `--inline` (one wrapping row) and `--columns` (an auto-fit grid, each top-level
+ * item a column with its sub-links beneath it). */
+.navlist,
+.navlist__sub {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* The rhythm utility's `li + li` margin is the flow's job; the list's own gap does it here. */
+.navlist__item {
+  margin: 0;
+}
+
+.navlist__sub {
+  margin-block-start: 0.25rem;
+  padding-inline-start: 1rem;
+}
+
+.navlist__link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  padding-block: 0.25rem;
+  border-radius: var(--br-control, 0.25rem);
+
+  &:focus-visible {
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
+    outline-offset: 2px;
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+  }
+}
+
+.navlist__label {
+  font-weight: 600;
+}
+
+.navlist--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+
+.navlist--columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  gap: 1.5rem;
+
+  > .navlist__item > :is(.navlist__link, .navlist__label) {
+    font-weight: 600;
+  }
+
+  > .navlist__item > .navlist__sub {
+    padding-inline-start: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  .navlist__link:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/* ── Footer (`<SiteFooter>`) ───────────────────────────────────────────────── */
+.sitefooter {
+  margin-block-start: var(--space-2xl, 3rem);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-block: var(--space-l, 2rem);
+  border-block-start: 1px solid var(--color-border-neutral, currentColor);
+}
+
+.sitefooter__nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 3rem;
+  justify-content: space-between;
+}
+
+.sitefooter__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+
+.sitefooter__link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  padding-block: 0.25rem;
+  border-radius: var(--br-control, 0.25rem);
+
+  &:focus-visible {
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
+    outline-offset: 2px;
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+  }
+}
+
+.sitefooter__copy {
+  margin: 0;
+  font-size: 0.875em;
+  opacity: 0.8;
+}
+
+/* ── Motion + forced colours (both site-nav and footer) ────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .sitenav__panel,
+  .sitenav__panel::backdrop,
+  .sitenav__submenu,
+  .sitenav__item--branch {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .sitenav__link:focus-visible,
+  .sitenav__toggle:focus-visible,
+  .sitenav__close:focus-visible,
+  .sitefooter__link:focus-visible {
+    outline-color: Highlight;
+  }
+  .sitenav__panel,
+  .sitenav__submenu {
+    border: 1px solid CanvasText;
+  }
+  .sitenav__link[aria-current='page'] {
+    text-decoration-thickness: 2px;
+  }
+}

package/assets/css/patterns/stats.css

@@ -0,0 +1,61 @@
+/**
+ * Stats — a row of headline figures ("11 hrs/week", "82%") and, as `.stats--tiles`, a
+ * grid of labelled tiles with a group, a delta and a state (the generic kernel of a
+ * dashboard mock: "Open jobs  24  +3 this week").
+ *
+ * The figure is the `.counter` pattern, so the count-up is `<wc-counter>`'s; this
+ * partial only lays the figures out. With no JS and no CSS each figure is plain text
+ * beside its label.
+ *
+ * `data-state` on a tile (`up` / `down`) drives the delta's colour through the semantic
+ * roles, so "good" and "bad" follow the site's own success/danger rather than a hard-coded
+ * green and red. The delta's words stay in the text: colour is never the only carrier.
+ */
+.stats {
+  display: grid;
+  gap: var(--stats-gap, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stats-min, 12rem)), 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .stats__item {
+    display: grid;
+    gap: 0.25rem;
+    align-content: start;
+    margin: 0;
+  }
+
+  .stats__figure,
+  .stats__label,
+  .stats__group,
+  .stats__delta {
+    margin: 0;
+  }
+
+  .stats__figure {
+    color: var(--tone-fg, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .stats__group {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.8;
+  }
+
+  .stats__item[data-state='up'] .stats__delta {
+    color: var(--color-text-success, inherit);
+  }
+
+  .stats__item[data-state='down'] .stats__delta {
+    color: var(--color-text-danger, inherit);
+  }
+
+  &.stats--tiles .stats__item {
+    padding: var(--stats-tile-padding, 1rem 1.25rem);
+    border: var(--b-card, var(--b-card-group, var(--b-default)));
+    border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+    background-color: var(--tone-bg, transparent);
+  }
+}