@getvitops/core 8.2.0-alpha.0 → 8.3.0-alpha.0

package/CHANGELOG.md

@@ -1,12 +1,194 @@
 # @getvitops/core
 
+## 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.
+
+- 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.
+
+## 8.2.0
+
+### Minor Changes
+
+- c3c1bcb: **New: the design-system editor, mounted inside the EmDash admin.** `vitopsEmdash({
+  designSystemEditor: { config } })` (`config` is your `site.json`, e.g. `import config from
+  './site.json' with { type: 'json' }`) adds a `/design-system` admin page mounting
+  `<wc-theme-editor>` — the same live token editor `@getvitops/vite`'s dev server has always
+  offered, now usable by the client directly, no dev server required. An edit is visible
+  site-wide immediately (a runtime `:root` override, served via a new plugin API route and
+  `page:fragments`) and — once `site.deployment.repo`/`branch` and a `VITOPS_GITHUB_TOKEN`
+  secret are set (see the scaffold's `SETUP.html`) — auto-commits to your `dev` branch, so it
+  reaches the git-tracked `site.json` through your repo's normal review path rather than
+  becoming a second, unreviewed source of truth. Until that's configured, the live half still
+  works; only the auto-commit half is skipped (and says so in the admin page). The save route
+  runs the exact same accessibility (APCA contrast) gate `generate()` enforces at build time,
+  synchronously, before persisting — nothing non-compliant ever goes live even momentarily.
+
+  Requires `@astrojs/react` + `react` + `react-dom` (already scaffold dependencies, for
+  EmDash's own admin) and `@getvitops/core` (added as a new scaffold dependency this release).
+  Declares two new plugin capabilities when enabled: `network:request` (for the GitHub
+  auto-commit) and `hooks.page-fragments:register` (for the live override) — reviewed once at
+  plugin-install time.
+
+  **Breaking for `@getvitops/emdash`**: `vitopsEmdash()`'s `hooks.page-fragments:register`
+  capability is now also granted whenever `designSystemEditor` is set, independent of the
+  existing `scripts: 'fragments'` option (which governs something unrelated — web-component
+  script delivery). No change if you don't use `designSystemEditor`.
+
+  Also new, supporting the above:
+
+  - `@getvitops/generator`: `validateColorContract()` and `buildReverseIndex()` (both
+    `/tokens` subpath, Worker-safe) — the monotonicity/contrast gate and the
+    `design-manifest.json` reverse-index, each extracted from `generate()`'s `build()` into
+    standalone, non-throwing functions. `patchToOverrideCss()` turns a design-system patch
+    into the `:root` override `<style>` block. `designSystemPath`/`getAt`/`setAt`/
+    `mergePatch`/`formatConfig` moved from `@getvitops/vite` into `@getvitops/generator/config`
+    (re-exported from `@getvitops/vite` unchanged) — one "patch a config file's design-system
+    subtree" implementation shared by the dev endpoint and the new plugin route. New
+    `site.deployment.repo`/`branch` config fields.
+  - `@getvitops/utils`: new `/git` subpath — `commitFile()`, a Worker-safe (fetch-only)
+    wrapper over GitHub's Contents API.
+  - `@getvitops/core`: `<wc-theme-editor>` gains a `save-endpoint` attribute (default
+    unchanged — `/__vitops/design-system`) so the same element can target the new plugin
+    route instead of the dev-only Vite endpoint.
+
+- 88b465a: **Accessibility and layout fixes for the web components.**
+
+  - **`<wc-entries>`: the column selector is no longer `aria-hidden`.** Its buttons are real and
+    focusable, so hiding the `<nav>` left a keyboard user on a control that assistive tech never
+    announced. It is now exposed as a `Column selector` navigation. The generated table stays
+    `aria-hidden` (it duplicates the `<dl>`, which is what assistive tech reads) and contains nothing
+    focusable.
+  - **`prefers-reduced-motion` is honoured by programmatic scrolling.** `<wc-carousel>` (prev/next and
+    marker clicks) and `<wc-tree>` (deep-link scroll) always passed `behavior: 'smooth'` to
+    `scrollIntoView`, which overrides the stylesheet's `scroll-behavior` and so ignored the setting.
+    They now scroll instantly when it is set, reading the preference at call time.
+  - **Pre-upgrade `display` for six more elements** — `wc-entries`, `wc-image-compare`,
+    `wc-split-panel`, `wc-multi-field`, `wc-dismissable` (all `block`), `wc-copy` (`inline-flex`) and
+    `wc-marquee` (`block`, as a fallback under the `.marquee` class). Each is declared in its pattern's
+    partial inside `:where()` (zero specificity, so any consumer rule wins) and matches the element's
+    upgraded `:host`, so registering no longer shifts layout. `wc-split-panel`, which declared no
+    display at all, is now a block after upgrade too — a visible change if a layout relied on it being
+    inline. `wc-counter` is deliberately left inline.
+  - **A dismiss button no longer shows before it can work.**
+    `wc-dismissable:not(:defined)` hides `.banner__close`, `.notification__close` and `[data-dismiss]`
+    buttons, so with no JS a banner has no dead ✕. (`:not(:defined)` is also true until `elements.js`
+    has run, so the button appears on upgrade.)
+
+  Formats reached for the CSS changes: all formats (the partials are components-layer patterns, inlined
+  by the tailwind format as well). Other packages in the `fixed` group: No consumer-facing change in this
+  package.
+
+### Patch Changes
+
+- 734ab60: EmDash gallery and carousel blocks now derive their element id from the block's `_key`, so two blocks with the same label on one page no longer open each other's dialog. `<wc-entries>` column navigation now honours `prefers-reduced-motion`.
+- 0574388: Bump `emdash`/`@emdash-cms/cloudflare` peers to `>=1.0.0 <2` and `vite-plus` to `^1.0.0`, following
+  both projects' GA releases.
+
+  **Breaking for `@getvitops/emdash` consumers on EmDash 0.x**: the peer range no longer admits
+  `emdash@0.31.x`/`@emdash-cms/cloudflare@0.31.x`. Upgrade `emdash` and `@emdash-cms/cloudflare` to
+  `^1.0.1` first — nothing in `@getvitops/emdash`'s own plugin surface (`admin.portableTextBlocks`,
+  the `hooks.page-fragments:register` capability, `definePlugin()`) changed against EmDash 1.0, so no
+  code here needed to change, only the declared range.
+
+  The `emdash` scaffold template (`vp create @getvitops:emdash`) picks up several fixes alongside
+  the version bump:
+
+  - `tailwindcss`/`@tailwindcss/vite` are now real dependencies — the template selected
+    `css.format: 'tailwind'` without installing either, which threw on build.
+  - `site.json` now sets `site.icons.sprite: true` plus the full `semantic` list the
+    `vitops.actionLink` block's icon picker offers — previously its sprite icons pointed at a file
+    the build never generated.
+  - `astro.config.mjs` sets `migrations: { runtime: 'check', dev: 'auto' }`, and
+    `site-deploy-emdash.yml` runs EmDash 1.0's documented `build → status → apply → deploy → check`
+    migration sequence explicitly, rather than relying solely on first-request auto-migration. This
+    needs a new GitHub Environment variable, `EMDASH_TARGET_FINGERPRINT` (one per environment),
+    which only a human can set — run `emdash migrate --status` against the real deployed database,
+    review the printed identity, then `gh variable set EMDASH_TARGET_FINGERPRINT --env <env> --body
+    <value>`. Deploys fail clearly on the migration-apply step until it's set.
+  - `lint.options.typeAware`/`typeCheck` in the template's own `vite.config.ts` are commented out,
+    not deleted: vite-plus 1.0 only honours that option in a project's actual root config, and hard
+    errors on it in a nested one (which this file is, sitting inside the `design-system` monorepo).
+    Uncomment it once scaffolded into its own repo.
+
+  No config schema changes. `@getvitops/generator` also switches from the `zod/mini` subpath import
+  to the standalone `@zod/mini` package (zod 4.5+; same API) and fixes `validateConfig()` silently
+  losing the offending key name on an `unrecognized_keys` error (e.g. a typo'd `site.ads` platform
+  now names the bad key instead of reporting a bare "Invalid input").
+
+  Also fixed: `vp check`'s `tsconfig-error` for `packages/create/templates/emdash/tsconfig.json`
+  (`extends: "astro/tsconfigs/strict"`, unresolvable from inside this monorepo since the template
+  has no `node_modules` of its own — a pre-existing, structural gap, newly surfaced as a hard error
+  by oxlint 1.85's deeper config discovery, and blocking on every commit since this repo's pre-commit
+  hook runs `vp check --fix`). Fixed with a new `scripts/link-template-deps.mjs`, wired as the root
+  `postinstall` script: symlinks `astro`/`emdash`/`@emdash-cms/cloudflare` into the template's own
+  `node_modules/` (resolved fresh from sibling packages that already depend on them for real, not a
+  hardcoded `.pnpm` hash) and writes a minimal `astro:content` ambient shim at `.astro/types.d.ts`
+  (the same path `astro sync` would generate for real). Both are gitignored and only ever exist
+  inside this monorepo's copy of the template — a real scaffold installs its own real copies instead.
+  Considered and rejected first: inlining astro's strict preset (drift risk against astro's own
+  evolving default) and making the template a real pnpm workspace member (would change how its
+  `@getvitops/*: "latest"` deps resolve locally, which `templates.test.ts` exists to protect).
+
+  **Known gap, not fixed here**: `packages/astro/src/components/container.test.ts` (the
+  `AstroContainer`-based render tests) fails to even load under vite-plus 1.0's Vite 8 — direct
+  `.astro` imports in a Vitest file need the Astro Vite plugin registered, which nothing in this
+  repo's test config actually does (Astro's own docs call for `getViteConfig()`, which doesn't
+  compose with vite-plus's own `defineConfig`). A type-level shim
+  (`packages/astro/src/components/astro-modules.d.ts`) fixes `vp check`'s type-aware pass, but the
+  runtime `vp test` failure for this one file is still open.
+
+- fdc3f7e: `<wc-marquee>` adds a "Pause animation" button beside the track (WCAG 2.2.2), and the marquee also pauses while focus is inside it (`data-paused` and `:focus-within`). Pattern CSS: all formats. `<wc-consent>` moves focus into the banner when a visitor opens it from a settings control and returns it on close; an unprompted banner still doesn't take focus. `<wc-image-compare>`'s before/after panes are `role="group"` so their labels are announced. The conversion route format-checks `phone`/`email` beacon payloads and imports the Worker-safe `@getvitops/utils/content` instead of the utils root barrel.
+
 ## 8.2.0-alpha.0
 
 ### Minor Changes
 
 - c3c1bcb: **New: the design-system editor, mounted inside the EmDash admin.** `vitopsEmdash({
-designSystemEditor: { config } })` (`config` is your `site.json`, e.g. `import config from
-'./site.json' with { type: 'json' }`) adds a `/design-system` admin page mounting
+  designSystemEditor: { config } })` (`config` is your `site.json`, e.g. `import config from
+  './site.json' with { type: 'json' }`) adds a `/design-system` admin page mounting
   `<wc-theme-editor>` — the same live token editor `@getvitops/vite`'s dev server has always
   offered, now usable by the client directly, no dev server required. An edit is visible
   site-wide immediately (a runtime `:root` override, served via a new plugin API route and
@@ -69,7 +251,7 @@ designSystemEditor: { config } })` (`config` is your `site.json`, e.g. `import c
     needs a new GitHub Environment variable, `EMDASH_TARGET_FINGERPRINT` (one per environment),
     which only a human can set — run `emdash migrate --status` against the real deployed database,
     review the printed identity, then `gh variable set EMDASH_TARGET_FINGERPRINT --env <env> --body
-<value>`. Deploys fail clearly on the migration-apply step until it's set.
+    <value>`. Deploys fail clearly on the migration-apply step until it's set.
   - `lint.options.typeAware`/`typeCheck` in the template's own `vite.config.ts` are commented out,
     not deleted: vite-plus 1.0 only honours that option in a project's actual root config, and hard
     errors on it in a nested one (which this file is, sitting inside the `design-system` monorepo).
@@ -431,7 +613,7 @@ designSystemEditor: { config } })` (`config` is your `site.json`, e.g. `import c
     created, with `patterns/counter.css`'s own reduced-motion query as a second belt.
   - The accessible name stays the final value for the whole animation: `.counter__value` is toggled
     to the framework's `.sr-only` utility while running, never hidden — `display: none`/`visibility:
-hidden` would pull it out of the accessible-name computation along with the visual hiding, and a
+    hidden` would pull it out of the accessible-name computation along with the visual hiding, and a
     screen reader must never be read ~60 intermediate numbers. The animated text lives in a separate
     `aria-hidden` presentation span it never reaches.
   - `data-from` (default `0`), `data-duration` (ms, default `1200`), `data-easing` (`linear` |
@@ -978,28 +1160,20 @@ hidden` would pull it out of the accessible-name computation along with the visu
   {
     "designSystem": {
       "themes": {
-        "default": {
-          /* … */
-        },
+        "default": {/* … */},
       },
     },
     "organization": {
       "name": "Acme",
       "contact": "hq",
       "locations": {
-        "hq": {
-          /* … */
-        },
+        "hq": {/* … */},
       },
     },
     "site": {
       "defaultLocale": "en",
-      "domains": {
-        /* … */
-      },
-      "analytics": {
-        /* … */
-      },
+      "domains": {/* … */},
+      "analytics": {/* … */},
     },
   }
   ```
@@ -1093,7 +1267,7 @@ hidden` would pull it out of the accessible-name computation along with the visu
     `animate-view` / `animate-scroll` / `animate-trigger` / `transition`, and every effect
     gained an `open-<fx>` state variant. Overlays now state _where they start_
     (`--translate-x-from`) instead of owning a keyframe: `class="drawer drawer--right
-open-fade-in"` composes slide and fade. Applied at zero specificity with identity
+    open-fade-in"` composes slide and fade. Applied at zero specificity with identity
     defaults, so a popover that sets no effect vars is unchanged.
   - **One scrim.** `--scrim` / `--scrim-filter` tokens and `.no-scrim` in `popover.css`,
     replacing 18 `::backdrop` blocks across seven partials. `.drawer--modeless` is aliased.
@@ -1296,8 +1470,8 @@ open-fade-in"` composes slide and fade. Applied at zero specificity with identit
   replace it with `--anim-range`. `--stagger-range-step` is now a viewport length (`5vh`) to match.
 
   **Fixed: every journey ran on a truncated range.** The generator emitted `animation-range: entry
-exit`; lightningcss parsed the end of that shorthand as `exit 0%` rather than the spec's `exit
-100%`, so the bundle shipped `entry exit 0%`. Journeys reach their `100%` keyframe — the hidden
+  exit`; lightningcss parsed the end of that shorthand as `exit 0%` rather than the spec's `exit
+  100%`, so the bundle shipped `entry exit 0%`. Journeys reach their `100%` keyframe — the hidden
   `from` state — as the element hits the top of the viewport, which is to say they faded out while
   still fully on screen. Journeys now run `entry calc(50% + 10vh) → exit 100%`: they start on the same
   midpoint pivot as everything else and keep the full entry → hold → exit arc, so the hold sits in the
@@ -1310,7 +1484,7 @@ exit`; lightningcss parsed the end of that shorthand as `exit 0%` rather than th
   so one knob tunes both. If your own config has an empty `slide` base, add the same line.
 
   **Fixed: `reveal-*` on hover was unreachable.** A `hover-reveal-left` element rests at `clip-path:
-inset(0 100% 0 0)`, and `clip-path` clips **hit-testing** as well as painting — so it had zero
+  inset(0 100% 0 0)`, and `clip-path` clips **hit-testing** as well as painting — so it had zero
   hittable area and could never receive the hover that would reveal it. The state variants now match
   the element **or its direct parent**, mirroring what `animation.css` already did for the trigger
   driver (`:is(.is-active, [data-active]) > .animate-trigger`):

package/css/index.css

@@ -72,6 +72,13 @@
 @import './patterns/text-effects.css';
 @import './patterns/svg.css';
 @import './patterns/marquee.css';
+@import './patterns/tone.css';
+@import './patterns/section.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/css/patterns/banner.css

@@ -69,3 +69,23 @@
 .banner[hidden] {
   display: none;
 }
+
+/*
+ * `<wc-dismissable>` wraps a banner or notification — block content — and animates its own
+ * opacity/scale on dismiss, so it needs a box of its own: `display: contents` would drop
+ * that animation. Pre-upgrade it would otherwise be an inline box around a block child.
+ */
+:where(wc-dismissable) {
+  display: block;
+}
+
+/*
+ * A dismiss button does nothing until `<wc-dismissable>` upgrades — an inert control that
+ * looks live is worse than none. `:not(:defined)` is true with no JS (and until elements.js
+ * has run), so the close affordance only appears once something can act on it. The banner
+ * itself stays fully readable. Markup that puts a `[data-dismiss]` button inside the element
+ * gets the same treatment, whatever its class.
+ */
+wc-dismissable:not(:defined) :is(.banner__close, .notification__close, [data-dismiss]) {
+  display: none;
+}

package/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/css/patterns/copy.css

@@ -80,3 +80,8 @@
     visibility: visible;
   }
 }
+
+/* Matches `<wc-copy>`'s upgraded `:host` (inline-flex) so registering causes no reflow. */
+:where(wc-copy) {
+  display: inline-flex;
+}

package/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/css/patterns/forms.css

@@ -364,3 +364,22 @@ select.custom-select {
     outline-offset: 2px;
   }
 }
+
+/* `<wc-multi-field>` is a group of controls, a block. Its shadow `:host` declares no display. */
+: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/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/css/patterns/marquee.css

@@ -56,6 +56,13 @@
     animation-play-state: paused;
   }
 
+  /* Keyboard users can't hover; focusing anything inside (a link in an item) also pauses, and
+     `<wc-marquee>`'s pause button sets `data-paused` (WCAG 2.2.2). */
+  &:focus-within .marquee__content,
+  &[data-paused] .marquee__content {
+    animation-play-state: paused;
+  }
+
   &.marquee--reverse {
     --_marquee-direction: reverse;
   }
@@ -100,3 +107,12 @@
     translate: 0 calc(-1 * var(--_marquee-distance, calc(100% + var(--marquee-gap, 1rem))));
   }
 }
+
+/*
+ * The `.marquee` class carries `display: flex` when present (the Astro component always sets
+ * it). This is the fallback for a hand-written `<wc-marquee>` without the class, and it is
+ * zero specificity so `.marquee` still wins.
+ */
+:where(wc-marquee) {
+  display: block;
+}

package/css/patterns/section.css

@@ -0,0 +1,53 @@
+/**
+ * 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;
+  }
+}