@getvitops/generator 4.1.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,241 @@
 # @getvitops/generator
 
+## 5.0.0
+
+### Major Changes
+
+- **Dangling token references are now a build failure.** `validate()` resolves every `var(--…)` a
+  config authors — in `patterns.defaults` / `radii` / `groups` / `items.*.{base,overrides,states}`,
+  `typography.roles` and `shadows` — against the tokens that config actually emits. A reference to a
+  token that does not exist used to validate, generate, minify and ship, then resolve to nothing in
+  the browser: one downstream config shipped a `.cta` whose `color` fell back to `inherit` on a brand
+  fill (unreadable text on every filled button), and two of its four dead references had been dead for
+  several releases with nothing ever reporting them.
+
+  The check is deliberately anchored to the namespaces the generator owns — `--color-*`, `--shadow-*`,
+  `--z-tier-*`, `--surface-glass`, `--overlay` — the same discipline `vitops lint` follows. A pattern
+  may legitimately reference a framework token from `@getvitops/core` or a hook of your own, and
+  enumerating "every valid token" would make those false positives. A reference carrying a fallback
+  (`var(--x, 0.25rem)`) is never flagged: that is you saying what happens when the token is absent.
+  Errors name the config path and suggest the nearest token that does exist.
+
+  Two related diagnostics ship with it:
+  - **Pre-1.0 colour-grammar references are reported as one rename table**, not as a dozen separate
+    "no such token" errors — the shape the 3.0 flat-config detector uses, applied to the 1.0 colour
+    change. It is built from your own role names, and it says to apply the renames _simultaneously_,
+    because several of them rotate (`--surface-bg` → `--color-bg-surface-muted`,
+    `--surface-bg-bold` → `--color-bg-surface`) and sequential replacement compounds them.
+  - **A surface-shaped role declared chromatic now warns.** A bare hue string is shorthand for
+    `kind: "chromatic"`, which emits no bare `--color-bg-<role>` and no `.bg-<role>` — so writing
+    `"surface": "ink"` silently removed `--color-bg-surface` and the 36 references the framework's own
+    CSS makes to it. Relatedly, `--surface-glass`, `--overlay` and `.glass` are no longer emitted when
+    `surface` is chromatic: they read `--color-bg-surface`, so emitting them pointed at nothing.
+
+  **`vitops lint --fix` is now the migration tool.** It reads `var(--…)` out of CSS and `<style>`
+  blocks (not just `class` attributes) and rewrites pre-1.0 token references in a **single pass**, so
+  the rotating renames cannot compound. Nothing else is rewritten — every other finding it reports is
+  a judgement call. Run it after a major bump.
+
+  **`--help` works on every subcommand.** `vitops lint --help` used to exit non-zero with
+  `Unknown option '--help'`; every leaf subcommand parsed its own argv strictly and none declared the
+  option. It is now answered before dispatch, so no command can forget it, and a drift guard fails the
+  build if a command has no documented options. (`validate`'s options were genuinely undocumented and
+  now are.)
+
+  **The Astro integration reads `site.tracking` and `site.legal.cookieConsent`.** These drive the
+  generated cookie notice, while `vitops({ consent, tracking })` drove the runtime — two hand-synced
+  declarations of the same fact with nothing comparing them, so a site could ship a notice naming
+  categories its banner never offered, or disclosing an `_ac` cookie no capture script ever wrote, and
+  the build was clean. The config blocks are now defaults (as `css` / `fonts` / `favicon` / `ads`
+  already were) and a genuine contradiction — `true` against `false` on the same fact — **fails the
+  build**, naming both sides. An absent option is not a contradiction; it just takes the config's
+  value.
+
+  Also fixed, each from a downstream report:
+  - **`@getvitops/astro/tracking`** re-exports `@getvitops/utils/tracking` (plus `TRACKING_ENDPOINT`),
+    so the documented conversion flow works with one install. Under strict pnpm app code cannot
+    resolve a transitive dependency, and the obvious workaround — importing the same symbols from the
+    package index — is the one that drags the integration's Node builtins toward a Worker bundle. This
+    entry and `./routes` are both clean.
+  - **`createConversionRoute`'s example was broken on every supported Astro.** It read the binding off
+    `locals.runtime.env`, removed in Astro v6, while the package peers on `>= 7` — and because the
+    throw precedes the response, Astro re-reads the request and reports a misleading "Body has already
+    been used". It also called a `toNotifyContext()` helper that does not exist. The example now uses
+    `import { env } from 'cloudflare:workers'` and a plain `NotifyContext`.
+  - **`/api/track` is exported as `TRACKING_ENDPOINT`**, and the integration warns at build when
+    tracking is on and no route answers it. It was a bare literal inside the inlined capture script:
+    name the route file anything else and every `tel:` beacon 404s, conversions vanish, and nothing
+    errors anywhere.
+  - **`describeEvent` no longer reports "from Unknown"** for forms that don't have a field literally
+    named `name`. It now falls back through `first_name`/`last_name`, `full_name`, and finally the
+    email address.
+  - **`sendEmail` takes `timeoutMs` (default 10s).** `binding.send()` had no deadline, so one hung
+    attempt hung the request that produced it — indefinitely, in the one module otherwise built on
+    always saying why. A timeout is retried, like any other transient failure.
+  - **`vitops search notify` warns when the sitemap's URLs aren't on the configured origin.** A 404
+    fails loudly; a well-formed sitemap belonging to someone else did not — a route collision served a
+    valid document listing another site's pages and the run reported a healthy submission. Surfaces at
+    `--dry`.
+  - **`require()` warns when the page has no `<wc-consent>`.** The demand can never be granted, so
+    whatever waited on it never runs — silently. Hit by rendering `<Tracking />` on pages where
+    `<CookieConsent />` wasn't.
+  - **`vitops agents` no longer writes a path it guessed.** It used to warn and then write "tokens
+    live in `design-system.json`" into a project whose tokens are in `company.json`, with the four
+    emitted `vitops generate` commands hard-coded to match — copy-paste-broken in exactly the projects
+    that most need the block to be right. It now finds the config by shape, interpolates the resolved
+    path into every emitted command, and fails rather than guessing when there is nothing to name.
+  - **`vitops search setup --dry` and `vitops ads setup --dry` run without credentials.** A dry run
+    that mutates nothing should not demand the token to mutate; with none set it plans from scratch
+    and says so. (`--check` still needs them — drift is a comparison against live state.) Both now
+    also mention that the Cloudflare token needs `Zone:Read` alongside `Zone:DNS:Edit` — the
+    zone-by-name lookup uses it, and its absence read as "the zone isn't in this account".
+  - **`vitops legal` names the files it wrote and flags new ones.** Enabling `cookieConsent` silently
+    produced a `cookie-notice` document that then needs a page, a route, a link and a `policyUrl`; the
+    command said only "3 files". The review reminder is also printed on the stdout path, where it was
+    missing entirely.
+  - **`vitops init` writes a versioned `$schema`** — `./node_modules/@getvitops/generator/schema.json`,
+    following wrangler — instead of an unpinned unpkg URL that resolved to whatever was newest, so an
+    editor validated a pinned project against a schema it wasn't built with.
+  - **`favicon.backgroundColor` and `favicon.name` are described accurately.** `backgroundColor` is
+    not manifest-only: it fills the opaque `apple-touch-icon.png` and `icon-mask.png`, which are
+    written whether or not a manifest is. `name` documents that it and `themeColor` **together** are
+    what make a site installable. The missing-background warning now also fires for a dark opaque mark,
+    not only a transparent source — `apple-touch-icon` insets the logo and fills the surround either
+    way.
+
+- **The framework now says out loud which patterns are foundational, and reports it when you
+  reach past them.** From repeated downstream reports: sites were inventing a `.wrap` class and
+  using it everywhere instead of `.centered`, and `.subgrid` — the class for any set of cards —
+  was going essentially unused. Neither failure is visible in a build: every class involved is
+  real, nothing errors, and the page renders.
+
+  **`.subgrid` was missing from the generated class reference entirely.** So was `.cluster`, and
+  so was `.region`. `vitops docs classes` is the doc an agent is told to fetch for "which class
+  do I apply", and the framework's answer for a set of cards was not in it — which is most of why
+  it never got used. All three are now documented, along with `grid-auto`, and the reference opens
+  with a **Foundations** section that states the six substitutions as
+  _temptation → what to write instead_ rather than as a vocabulary list. The same table is now in
+  the shipped agent skill and in the `@getvitops/create` template's `AGENTS.md`, because a pointer
+  to a doc only helps someone who already suspects there is something to look up. (`css`/`bricks`
+  and `tailwind` alike — this is documentation and the `TIERS` manifest, not emitted CSS.)
+
+  **`vitops lint` gained three reuse rules and a markup pass.** The existing `.centered` rule only
+  fired when the hand-written CSS already referenced `--width-measure`, which is precisely the
+  author who was never going to hand-roll a container. It now also catches a page-scale
+  `max-width` (≥ 48rem, or a `ch` reading measure) with auto margins, and a
+  container-shaped class name — `wrap`, `wrapper`, `container`, `inner`, `shell`, … — carrying any
+  width cap at all. Reading the cap out of `min()` / `clamp()` too. New rules report a
+  hand-written `repeat()` grid as `.subgrid` (or `.grid-auto`), and a new **markup** pass reports a
+  repeated card set laid out without either — a loop that renders a card, or three or more cards
+  written out. That last one is the only check that can see this drift at all, since a card list
+  built from utility classes contains no bad class and no hand-written CSS.
+
+  All of these are `suggestion` severity, so they do not fail your build unless you pass
+  `--strict`. They found five real instances in this repo's own docs site.
+
+  **`vitops lint [files...]`** now takes explicit paths instead of scanning `--src`, so it can be
+  wired into a pre-commit hook — `vp`'s `staged` key appends the staged files to whatever it runs,
+  and a command that refused positionals could not be put in the one place the feedback lands at
+  the moment the code is written. Unreadable and non-source paths are skipped rather than fatal. The
+  `@getvitops/create` emdash template wires it up with `--strict` and adds a `lint:design` script.
+
+  **Two answers for "the whole card is a link", because one cannot exist.** Reported downstream:
+  agents dislike the `<li>` wrapper when a card is a link and write `<li><a class="card">` instead.
+  That shape is **wrong in a way that renders fine**, which is why it survives review — the `<li>`
+  is the grid item, so the anchor is an ordinary block inside it and the tranches within the anchor
+  never reach the parent's shared row lines. The alignment `.subgrid` exists for silently does not
+  happen, and the anchor does not fill the cell either. Putting the anchor in the grid's place
+  (`<ul><a></ul>`) is invalid HTML, so there was genuinely no correct shape to reach for.
+
+  There are now two, and they trade against each other because **no CSS-only technique can make a
+  whole card clickable and leave its text selectable** — a transparent overlay necessarily receives
+  the pointer-drag:
+
+  | Want                                     | Use                                         |
+  | ---------------------------------------- | ------------------------------------------- |
+  | zero JS, whole card clickable            | `.stretched-link` — **text not selectable** |
+  | selectable text **and** a clickable card | `<Cards>` / `<wc-cards>` — needs JS         |
+
+  `.stretched-link` goes on a link inside the card; its `::after` covers the card.
+  **`<wc-cards>` is a new tier-2 element** that adds no overlay and instead tells a click apart from
+  the end of a drag, so text selection survives. Its fallback is the card's own link, fully usable
+  with no JS, and the pointer cursor is applied by the element — so the affordance never appears
+  without the behaviour. `<Cards>` emits it for you. They are alternatives, never layered: with an
+  overlay present the JS has nothing to do, and `vitops lint` reports the combination. (All formats
+  — pattern partials, deliberately not `utilities.css`, which the tailwind format skips on the
+  invariant that everything left in it is a name Tailwind ships itself.)
+
+  ### Breaking
+  - **`<Subgrid />` renders its slot verbatim — author the `<li>` items yourself.**
+
+    ```diff
+      <Subgrid>
+    -   <article class="card">…</article>
+    +   <li class="card subgrid-card">…</li>
+      </Subgrid>
+    ```
+
+    It used to parse the slotted HTML and rebuild each child as an `<li>`, carrying over only
+    `class` and `style`. That existed solely because a `<ul>` may contain nothing else, and it cost
+    more than it bought: the child's tag was discarded, `id`/`data-*`/`aria-*` were silently
+    dropped, and `href` could not survive at all. Nothing is copied now, so nothing is lost. `as`
+    picks the container (`ul` by default, `ol`, `div`), and all other props are forwarded — they
+    were previously discarded, including `role`.
+
+  - **`<Subgrid />` and `<Tree />` now emit `role="list"`,** as does the Bricks `sitenav` element.
+    `list-style: none` stops Safari + VoiceOver announcing a `<ul>` as a list, so every marker-less
+    framework list was silently losing the semantics its `<ul>` was chosen for. If you hand-write
+    `.subgrid`, `.list`, `.facet-list`, `.nav-items`, `.collapse-menu` or `.tree` markup, add
+    `role="list"` yourself — the framework cannot add it to markup it does not render, and each
+    partial now says so at the `list-style` reset.
+  - **`<Cards />` no longer adds `class="card"` to slotted children,** because it no longer parses
+    them. Write the class on the item. It now emits `<wc-cards>` around a `<Subgrid>`, which is what
+    makes the whole card clickable — and like `<Tree />`, **it emits its own element, so do not wrap
+    it in `<wc-cards>` yourself.** It also previously passed a `role="list"` that `<Subgrid>` silently
+    discarded, so that never took effect.
+  - **`.subgrid-card` now sets `position: relative`**, so `stretched-link` inside it needs no extra
+    class. If you were absolutely positioning a descendant of a `.subgrid-card` against an ancestor
+    _outside_ that card, it will now resolve against the card. Move the positioning context
+    explicitly. (`css`/`bricks`/`tailwind` — the pattern partial is inlined into all three.) Not
+    reachable by `vitops lint --fix`: the fix depends on which ancestor you meant, which the
+    linter cannot know.
+
+  ### Fixed
+  - **`packages/generator/src/docs.ts` contained a literal NUL byte** (`CODE_SLOT`, written as the
+    raw character rather than an escape). libmagic classified the file as `data` rather than text, so
+    grep and ripgrep treated the largest doc emitter in the repo as **binary and silently skipped
+    it** — every search for a string in it returned nothing, with no error. It is now written as the `\u0000` escape.
+    Behaviour is identical; the file is searchable.
+  - **`.grid-auto` is documented.** It was a real framework class for auto-fit card grids with no
+    entry in the class reference, so the honest alternative to `subgrid` was as invisible as
+    `subgrid` itself.
+  - **`.raised` replaces the advice to use `.relative` above a `stretched-link` overlay**, which
+    could not work: a positioned element at `z-index: auto` does not rise above an explicit
+    `z-index` regardless of DOM order, so a second link or button in the card stayed underneath and
+    unclickable. `.raised` sets both, against the same `--z-tier-raised` token the overlay now uses
+    instead of a hard-coded `1`.
+
+### Patch Changes
+
+- **Astro and Bricks are documented as the same tier, because they are.** Both are platform
+  wrappers that generate HTML from the classes and elements of tiers 1 and 2 — siblings chosen by
+  which platform you are on, not steps in a ladder. No project uses both, and neither outranks the
+  other.
+
+  They were published as tier 3 and **tier 4**, in `vitops docs components`, the shipped agent
+  skill and the docs site. The cause was a projection axis being read as a hierarchy: `Tier` has
+  four keys (`css` `wc` `astro` `bricks`) because there are four tables to render, and the tier
+  number was being derived from that key order — so the last key became "tier 4". The advice next
+  to it inherited the error, telling readers to "use the highest-**numbered** tier your stack has",
+  which reads as Bricks outranking Astro.
+
+  Nothing about which patterns each tier provides has changed; this is the numbering and the prose
+  around it. `Tier` keeps its four keys — that part was never wrong — and now says in its own type
+  docs why four keys are three levels, so the next renderer cannot repeat the derivation.
+
+- Updated dependencies
+  - @getvitops/utils@5.0.0
+
 ## 4.1.0
 
 ### Minor Changes

package/assets/bricks/elements/sitenav.php

@@ -203,7 +203,10 @@ class Vitops_Element_Sitenav extends \Bricks\Element {
 		}
 
 		$list_class = $top ? 'sitenav__list' : 'sitenav__submenu';
-		$html       = '<ul class="' . $list_class . '">';
+		// `role="list"` restores what `list-style: none` takes away: Safari + VoiceOver
+		// stop announcing a marker-less <ul> as a list, so the reset silently costs the
+		// semantics the <ul> was chosen for. Both classes set it (sitenav.css).
+		$html = '<ul class="' . $list_class . '" role="list">';
 
 		foreach ( $by_parent[ $parent_id ] as $item ) {
 			$id          = (int) $item->ID;

package/assets/css/index.css

@@ -16,6 +16,9 @@
 @import './patterns/cluster.css';
 @import './patterns/grouped.css';
 @import './patterns/subgrid.css';
+/* After subgrid: `.subgrid-card` is the usual card and this sets the `<wc-cards>`
+   host plus the upgraded-card affordance. */
+@import './patterns/card.css';
 @import './patterns/masonry.css';
 @import './patterns/media.css';
 @import './patterns/separator.css';

package/assets/css/patterns/anchor-link.css

@@ -100,3 +100,70 @@ a[target='_blank'].link--external::after {
   color: var(--color-text-surface);
   border-radius: var(--br-control, 0.375rem);
 }
+
+/* ── stretched-link — the whole card is a link ──
+   One link inside a container covers it, so the entire card is clickable while the
+   accessible name stays on real text. `.subgrid-card` already carries the
+   `position: relative` this resolves against; on a bare `.card`, add `relative`.
+
+     <li class="card subgrid-card">
+       <p class="font-eyebrow">Service</p>
+       <p class="font-heading"><a class="link stretched-link" href="/x">Title</a></p>
+       <p>Blurb…</p>
+     </li>
+
+   WHY THIS RATHER THAN MAKING THE ANCHOR THE CARD. `<li><a class="card">` is the
+   shape that gets reached for, and it is wrong in a way that renders fine: the LI is
+   the grid item, so the anchor is an ordinary block inside it — its tranches never
+   land on the parent's shared row lines, and the alignment `.subgrid` exists for
+   silently does not happen. (Nor does an inline anchor fill the cell.) Putting the
+   anchor in the grid's place instead means `<ul><a></ul>`, which is invalid.
+
+   THE COST, AND THE ALTERNATIVE. The overlay receives the pointer-drag over
+   everything it covers, so **the card's text can no longer be selected**. That is
+   inherent to the technique, not a bug to fix here — any transparent layer over text
+   takes the drag. Where selectable text matters, use `<wc-cards>`
+   (src/web-components/WCCards.ts) instead: no overlay, and JS tells a click apart
+   from the end of a drag. The two are alternatives, never layered — with this
+   overlay present, that element has nothing left to do.
+
+   It lives HERE, in a pattern partial, and not in `utilities.css`: that file is in
+   the generator's TAILWIND_SKIP on the stated invariant that everything left in it
+   is a TW_CLASH name Tailwind ships itself. `stretched-link` is ours, so putting it
+   there would emit it in css/bricks and silently not in tailwind — the exact
+   cross-format hole `format-parity.test.ts` exists to catch.
+
+   Another interactive element inside the same card must sit above the overlay: give
+   it `.raised`, NOT `.relative`. A positioned element at `z-index: auto` does not
+   rise above an explicit z-index no matter its DOM order, so `.relative` alone left
+   the control underneath and unclickable. ── */
+.stretched-link::after {
+  content: '';
+  position: absolute;
+  /* Covers the nearest positioned ancestor, which is the card. */
+  inset: 0;
+  /* The shared z-scale rather than a bare 1, so `.raised` can be defined in terms of
+     the same token instead of guessing a number that beats it. */
+  z-index: var(--z-tier-raised);
+  border-radius: inherit;
+}
+
+/* ── raised — lift content above a `.stretched-link` overlay ──
+   For the second link, the button, or the text you want selectable inside a card
+   whose whole area is otherwise clickable.
+
+   It carries `position: relative` AND a z-index, and both are required: z-index has
+   no effect on a static element, and a positioned element at `z-index: auto` does not
+   rise above an explicit z-index regardless of DOM order. That second half is why
+   telling people to use `.relative` here did not work.
+
+   Defined against the same token as the overlay, so the two cannot drift apart the
+   way two hand-picked numbers would.
+
+   Here rather than in `utilities.css` for the reason given above `.stretched-link`:
+   that file is in TAILWIND_SKIP on the invariant that everything left in it is a name
+   Tailwind ships itself, and Tailwind has no `raised`. ── */
+.raised {
+  position: relative;
+  z-index: calc(var(--z-tier-raised) + 1);
+}

package/assets/css/patterns/card.css

@@ -0,0 +1,35 @@
+/**
+ * Card — the `<wc-cards>` host and the marker its enhancement applies.
+ *
+ * The `.card` pattern itself is CONFIG-GENERATED (`patterns.items.card` in
+ * design-system.json), so its border, padding, background and shadow are not here.
+ * This partial holds only what the framework owns: the custom element's box, and the
+ * affordance for a card the element has taken over.
+ */
+
+/* ── wc-cards — the whole-card click enhancement (src/web-components/WCCards.ts) ──
+   A custom element defaults to `display: inline`, and this one wraps a block
+   container — a `<ul class="subgrid">` in the documented shape — so an inline box
+   around a block child is exactly the KNOWN GAP recorded in `js/elements.ts`.
+
+   `block`, matched to the content it wraps, following the one precedent:
+   `patterns/tree.css` declares `wc-tree { display: block }` around a
+   `<ul class="tree">`. Deliberately NOT `display: contents`, whose support has been
+   uneven — the accessibility tree in particular — and this is not a place to depend
+   on it.
+
+   The cost of a real box: where the grid is nested in a parent flex/grid, `wc-cards`
+   rather than the `<ul>` becomes the item. Restyle the element in that case; it
+   carries no other styling to lose. ── */
+wc-cards {
+  display: block;
+}
+
+/* ── The card the element has taken over ──
+   Written by `WCCards` at upgrade, and only onto cards it found a link in — so the
+   pointer cursor cannot appear on a card with nothing to click, and cannot appear at
+   all when `elements.js` never loads. That is the point of stamping it from JS
+   rather than authoring it: the affordance and the behaviour arrive together. ── */
+[data-card-link] {
+  cursor: pointer;
+}

package/assets/css/patterns/list.css

@@ -11,6 +11,10 @@
   --_ds: var(--ds-list, var(--ds-list-group, var(--ds-default)));
   --_fs: var(--fs-list, var(--fs-list-group, var(--fs-default)));
 
+  /* Markerless — so ADD `role="list"` to the element. Safari + VoiceOver stop
+     announcing a marker-less <ul> as a list, so this reset silently costs the
+     semantics the <ul> was chosen for. Nothing in the framework emits this markup,
+     so only the author can restore it. */
   list-style: none;
   margin: 0;
   padding: var(--_p);
@@ -75,6 +79,10 @@
 }
 
 .facet-list {
+  /* Markerless — so ADD `role="list"` to the element. Safari + VoiceOver stop
+     announcing a marker-less <ul> as a list, so this reset silently costs the
+     semantics the <ul> was chosen for. Nothing in the framework emits this markup,
+     so only the author can restore it. */
   list-style: none;
   margin: 0;
   padding: 0;

package/assets/css/patterns/nav.css

@@ -30,6 +30,10 @@ nav:has(> .nav-items) {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  /* Markerless — so ADD `role="list"` to the element. Safari + VoiceOver stop
+     announcing a marker-less <ul> as a list, so this reset silently costs the
+     semantics the <ul> was chosen for. Nothing in the framework emits this markup,
+     so only the author can restore it. */
   list-style: none;
   padding: 0;
   margin: 0;
@@ -99,6 +103,10 @@ nav:has(> .nav-items) {
 }
 
 .collapse-menu {
+  /* Markerless — so ADD `role="list"` to the element. Safari + VoiceOver stop
+     announcing a marker-less <ul> as a list, so this reset silently costs the
+     semantics the <ul> was chosen for. Nothing in the framework emits this markup,
+     so only the author can restore it. */
   list-style: none;
   padding-inline-start: 1.5rem;
   margin-block-start: 0.5rem;

package/assets/css/patterns/subgrid.css

@@ -63,7 +63,12 @@
   }
 
   /* Markerless when it's a list — a subgrid of cards is a list of things, and
-     the markers would sit in the gutter. */
+     the markers would sit in the gutter.
+
+     ADD `role="list"` to the element. Safari + VoiceOver stop announcing a
+     marker-less <ul> as a list, so this reset silently costs the semantics the <ul>
+     was chosen for — "3 items" becomes nothing at all. `<Subgrid>` does it for you;
+     hand-written markup must say it. */
   &:is(ul, ol) {
     list-style: none;
     margin: 0;
@@ -111,6 +116,16 @@
   display: grid;
   grid-template-rows: subgrid;
   grid-row: span var(--_card-rows);
+  /* The containing block for a `.stretched-link` inside it (utilities.css), so a
+     whole-card link needs no extra class here. Costs nothing otherwise.
+
+     This is the framework's answer to "the card IS a link", and the shape it
+     replaces is wrong in a way that looks fine: `<li><a class="card">` makes the
+     LI the grid item, so the anchor is an ordinary block and the tranches inside
+     it never land on the shared row lines — the alignment subgrid exists for
+     silently does not happen, and the anchor doesn't fill the cell either. Keep
+     the card as the grid item and stretch a link inside it. */
+  position: relative;
   padding: var(--_card-padding);
   border: var(--b-card, var(--b-card-group, var(--b-default)));
   border-radius: var(--br-card, var(--br-card-group, var(--br-default)));

package/assets/css/utilities.css

@@ -272,3 +272,15 @@
 .text-pretty {
   text-wrap: pretty;
 }
+
+/* ── position — a containing block for anything absolutely positioned inside, e.g.
+   a `.stretched-link` overlay on a bare `.card` (`.subgrid-card` already has one).
+   `relative` is in TW_CLASH: Tailwind ships it natively, so the tailwind format
+   drops this copy.
+
+   To lift content ABOVE a stretched-link overlay this is not enough — see `.raised`
+   in patterns/anchor-link.css, which has to live there because Tailwind has no
+   equivalent name and this file is in TAILWIND_SKIP. ── */
+.relative {
+  position: relative;
+}

package/assets/js/consent.js

@@ -1 +1 @@
-const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops:consent`,n=`vitops:consent-open`,r=`vitops_consent`,i=[`analytics`,`marketing`,`preferences`];function a(e){return{analytics:e,marketing:e,preferences:e}}function o(){return{ts:null,choices:a(null)}}function s(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function c(e){if(!e)return o();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return o()}if(typeof t!=`object`||!t)return o();let n=t;if(n.v!==2||typeof n.c!=`object`||n.c===null)return o();let r=n.c,s=a(null);for(let e of i){let t=r[e];typeof t==`boolean`&&(s[e]=t)}return{ts:typeof n.ts==`number`?n.ts:null,choices:s}}function l(e){let t={};for(let n of i){let r=e.choices[n];typeof r==`boolean`&&(t[n]=r)}return encodeURIComponent(JSON.stringify({v:2,ts:e.ts??0,c:t}))}function u(e,t){return t===`necessary`?!0:e.choices[t]===!0}function d(e,t){return t===`necessary`?!0:e.choices[t]!==null}function f(e,t){for(let n of t)if(!d(e,n))return!0;return!1}function p(e,t){return{ts:t,choices:a(e)}}function m(e,t,n){let r={...e.choices};for(let e of i){let n=t[e];typeof n==`boolean`&&(r[e]=n)}return{ts:n,choices:r}}function h(e,t){return i.filter(n=>u(e,n)&&!u(t,n))}function g(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const _=location.protocol===`https:`;let v=c(s(document.cookie,r));const y=new Set,b=new WeakSet,x=new Set,S=new Set,C=new Map;function w(e){S.has(e)||(S.add(e),R())}function T(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const E={idle:[],async:[],interaction:[]},D={idle:!1,async:!0,interaction:!1};function O(e){if(D[e])return;D[e]=!0;let t=E[e];E[e]=[];for(let e of t)e()}function k(e,t){D[e]?t():E[e].push(t)}function A(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}A(()=>{let e=globalThis.requestIdleCallback;e?e(()=>O(`idle`),{timeout:3e3}):setTimeout(()=>O(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);O(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});A(()=>setTimeout(()=>O(`interaction`),8e3))}const j=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function M(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function N(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))j.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function P(e){if(!b.has(e)){if(b.add(e),x.add(M(e)),e instanceof HTMLScriptElement)N(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function F(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){let e=t.getAttribute(`data-strategy`);k(e===`async`||e===`interaction`?e:`idle`,()=>{let e=M(t);u(v,e)?P(t):w(e)})}}function I(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function L(e,t){let n=h(v,e),i=v;v=e,t?document.cookie=`${r}=${l(e)}${g(_)}`:document.cookie=`${r}=; path=/; max-age=0`,R(),F(),n.length&&(I(n),n.some(e=>x.has(e)&&u(i,e))&&z.reloadOnRevoke&&location.reload())}function R(){T();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const z={categories:e,reloadOnRevoke:!0,get:()=>v,granted:e=>u(v,e),needed:()=>f(v,S),demanded:()=>e.filter(e=>S.has(e)),require(e){return w(e),u(v,e)},request(e){return w(e),d(v,e)?Promise.resolve(u(v,e)):new Promise(t=>{let n=C.get(e);n?n.push(t):C.set(e,[t])})},set:e=>L(m(v,e,Date.now()),!0),acceptAll:()=>L(p(!0,Date.now()),!0),rejectAll:()=>L(p(!1,Date.now()),!0),reset:()=>L(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},B=window.vitopsConsent?.q;if(window.vitopsConsent=z,B)for(let[e,t]of B)t?z.request(e).then(t):z.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),z.open())}),document.addEventListener(`astro:page-load`,F),F(),R();var V=class extends HTMLElement{#e;#t=`prompt`;#n=!1;get#r(){return window.vitopsConsent}get#i(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#r;if(!e)return;let t=this.#i;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#p),this.addEventListener(`submit`,this.#o),document.addEventListener(n,this.#a),this.#e=e.subscribe(()=>{this.#n&&this.#t===`settings`?this.#f():e.needed()?this.#u(`prompt`):this.#d()})}disconnectedCallback(){this.removeEventListener(`click`,this.#p),this.removeEventListener(`submit`,this.#o),document.removeEventListener(n,this.#a),this.#e?.()}#a=()=>this.#u(`settings`);#o=e=>e.preventDefault();#s(e){return this.querySelector(`[data-consent-row="${e}"]`)??this.#c(e)?.closest(`label`)??null}#c(e){return this.querySelector(`input[name="${e}"]`)}#l(e){let t=this.#r;if(!t)return[];if(e===`settings`){let e=i.filter(e=>this.#s(e));return e.length?e:[...i]}let n=t.get();return i.filter(e=>t.demanded().includes(e)&&!d(n,e))}#u(e){if(!this.#l(e).length)return;this.#t=e,this.#f(),this.hidden=!1,this.#n=!0;let t=this.#i;t?.isConnected&&!t.matches(`:popover-open`)&&t.showPopover()}#d(){this.#n=!1,this.#i?.hidePopover?.(),this.hidden=!0}#f(){let e=this.#r;if(!e)return;let t=this.#l(this.#t);for(let n of i){let r=this.#s(n);r&&(r.hidden=!t.includes(n));let i=this.#c(n);i&&(i.checked=e.granted(n))}this.#i?.classList.toggle(`consent--single`,t.length<2)}#p=e=>{let t=this.#r,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);if(!t||!n)return;e.preventDefault();let r=this.#l(this.#t);n.hasAttribute(`data-consent-accept`)?t.set(this.#m(r,()=>!0)):n.hasAttribute(`data-consent-reject`)?t.set(this.#m(r,()=>!1)):t.set(this.#m(r,e=>this.#c(e)?.checked===!0)),this.#d()};#m(e,t){let n={};for(let r of e)n[r]=t(r);return n}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,V);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,z as consent};
+const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops:consent`,n=`vitops:consent-open`,r=`vitops_consent`,i=[`analytics`,`marketing`,`preferences`];function a(e){return{analytics:e,marketing:e,preferences:e}}function o(){return{ts:null,choices:a(null)}}function s(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function c(e){if(!e)return o();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return o()}if(typeof t!=`object`||!t)return o();let n=t;if(n.v!==2||typeof n.c!=`object`||n.c===null)return o();let r=n.c,s=a(null);for(let e of i){let t=r[e];typeof t==`boolean`&&(s[e]=t)}return{ts:typeof n.ts==`number`?n.ts:null,choices:s}}function l(e){let t={};for(let n of i){let r=e.choices[n];typeof r==`boolean`&&(t[n]=r)}return encodeURIComponent(JSON.stringify({v:2,ts:e.ts??0,c:t}))}function u(e,t){return t===`necessary`?!0:e.choices[t]===!0}function d(e,t){return t===`necessary`?!0:e.choices[t]!==null}function f(e,t){for(let n of t)if(!d(e,n))return!0;return!1}function p(e,t){return{ts:t,choices:a(e)}}function m(e,t,n){let r={...e.choices};for(let e of i){let n=t[e];typeof n==`boolean`&&(r[e]=n)}return{ts:n,choices:r}}function h(e,t){return i.filter(n=>u(e,n)&&!u(t,n))}function g(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const _=location.protocol===`https:`;let v=c(s(document.cookie,r));const y=new Set,b=new WeakSet,x=new Set,S=new Set,C=new Map,w=new Set;function T(e){w.has(e)||(w.add(e),queueMicrotask(()=>{document.querySelector(`wc-consent`)||console.warn(`[vitops] something requested the "${e}" consent category, but this page has no <wc-consent> element to ask with — so the request can never be granted and whatever waited on it will not run. Render <CookieConsent /> on every page that gates anything.`)}))}function E(e){S.has(e)||(S.add(e),T(e),B())}function D(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const O={idle:[],async:[],interaction:[]},k={idle:!1,async:!0,interaction:!1};function A(e){if(k[e])return;k[e]=!0;let t=O[e];O[e]=[];for(let e of t)e()}function j(e,t){k[e]?t():O[e].push(t)}function M(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}M(()=>{let e=globalThis.requestIdleCallback;e?e(()=>A(`idle`),{timeout:3e3}):setTimeout(()=>A(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);A(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});M(()=>setTimeout(()=>A(`interaction`),8e3))}const N=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function P(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function F(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))N.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function I(e){if(!b.has(e)){if(b.add(e),x.add(P(e)),e instanceof HTMLScriptElement)F(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function L(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){let e=t.getAttribute(`data-strategy`);j(e===`async`||e===`interaction`?e:`idle`,()=>{let e=P(t);u(v,e)?I(t):E(e)})}}function R(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function z(e,t){let n=h(v,e),i=v;v=e,t?document.cookie=`${r}=${l(e)}${g(_)}`:document.cookie=`${r}=; path=/; max-age=0`,B(),L(),n.length&&(R(n),n.some(e=>x.has(e)&&u(i,e))&&V.reloadOnRevoke&&location.reload())}function B(){D();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const V={categories:e,reloadOnRevoke:!0,get:()=>v,granted:e=>u(v,e),needed:()=>f(v,S),demanded:()=>e.filter(e=>S.has(e)),require(e){return E(e),u(v,e)},request(e){return E(e),d(v,e)?Promise.resolve(u(v,e)):new Promise(t=>{let n=C.get(e);n?n.push(t):C.set(e,[t])})},set:e=>z(m(v,e,Date.now()),!0),acceptAll:()=>z(p(!0,Date.now()),!0),rejectAll:()=>z(p(!1,Date.now()),!0),reset:()=>z(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},H=window.vitopsConsent?.q;if(window.vitopsConsent=V,H)for(let[e,t]of H)t?V.request(e).then(t):V.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),V.open())}),document.addEventListener(`astro:page-load`,L),L(),B();var U=class extends HTMLElement{#e;#t=`prompt`;#n=!1;get#r(){return window.vitopsConsent}get#i(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#r;if(!e)return;let t=this.#i;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#p),this.addEventListener(`submit`,this.#o),document.addEventListener(n,this.#a),this.#e=e.subscribe(()=>{this.#n&&this.#t===`settings`?this.#f():e.needed()?this.#u(`prompt`):this.#d()})}disconnectedCallback(){this.removeEventListener(`click`,this.#p),this.removeEventListener(`submit`,this.#o),document.removeEventListener(n,this.#a),this.#e?.()}#a=()=>this.#u(`settings`);#o=e=>e.preventDefault();#s(e){return this.querySelector(`[data-consent-row="${e}"]`)??this.#c(e)?.closest(`label`)??null}#c(e){return this.querySelector(`input[name="${e}"]`)}#l(e){let t=this.#r;if(!t)return[];if(e===`settings`){let e=i.filter(e=>this.#s(e));return e.length?e:[...i]}let n=t.get();return i.filter(e=>t.demanded().includes(e)&&!d(n,e))}#u(e){if(!this.#l(e).length)return;this.#t=e,this.#f(),this.hidden=!1,this.#n=!0;let t=this.#i;t?.isConnected&&!t.matches(`:popover-open`)&&t.showPopover()}#d(){this.#n=!1,this.#i?.hidePopover?.(),this.hidden=!0}#f(){let e=this.#r;if(!e)return;let t=this.#l(this.#t);for(let n of i){let r=this.#s(n);r&&(r.hidden=!t.includes(n));let i=this.#c(n);i&&(i.checked=e.granted(n))}this.#i?.classList.toggle(`consent--single`,t.length<2)}#p=e=>{let t=this.#r,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);if(!t||!n)return;e.preventDefault();let r=this.#l(this.#t);n.hasAttribute(`data-consent-accept`)?t.set(this.#m(r,()=>!0)):n.hasAttribute(`data-consent-reject`)?t.set(this.#m(r,()=>!1)):t.set(this.#m(r,e=>this.#c(e)?.checked===!0)),this.#d()};#m(e,t){let n={};for(let r of e)n[r]=t(r);return n}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,U);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,V as consent};