@getvitops/core 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,225 @@
 # @getvitops/core
 
+## 7.0.0
+
+### Major Changes
+
+- aad43b7: A gallery/lightbox that is a fully working modal lightbox with **zero JavaScript**, plus
+  `ImageMetadata` support in `<Carousel />`.
+
+  Only `@getvitops/core`, `generator` and `astro` change here. This changeset makes **no
+  consumer-facing change** to `utils`, `cli` or `vite` — they still ship in this release because
+  the six share one version, but from a different changeset (`localbusiness-schema.md`) that
+  touches `utils` and `generator` for an unrelated reason.
+
+  **Breaking — `css`/`bricks`/`tailwind` (all formats):** the `.lightbox` thumbnail grid is now
+  `.gallery`, so it composes with the dialog it opens (`.lightbox-dialog`, unchanged) rather than
+  sharing its name. `vitops lint --fix` cannot cover this: `movedTokens()` renames colour token
+  names only, and there is no class-rename mechanism in `@getvitops/cli`. Migrate by hand:
+
+  | Old                | New               |
+  | ------------------ | ----------------- |
+  | `.lightbox`        | `.gallery`        |
+  | `.lightbox__item`  | `.gallery__item`  |
+  | `.lightbox__thumb` | `.gallery__thumb` |
+
+  `.lightbox-dialog` and its `__content` / `__image` / `__close` / `__nav` / `__nav-button` /
+  `__caption` parts are unchanged.
+
+  **Added — `css`/`bricks`/`tailwind` (all formats):** `patterns/gallery.css` — the `.gallery` grid,
+  now on the token cascade (`--br-gallery` etc.) it only half-had before.
+
+  **Added — `wc`:** `<wc-gallery>` (`@getvitops/core/elements`). Wraps a `.gallery` grid of
+  `command="show-modal"` triggers and the `.lightbox-dialog`s they open. With no JS, each trigger is
+  a real Invoker Commands button for its own dialog — open and close both work. `<wc-gallery>` adds
+  what the fallback deliberately cannot contain: prev/next, arrow keys, swipe (horizontal to step,
+  vertical to dismiss), an announced image counter, neighbour preload, and a thumbnail → full-image
+  `document.startViewTransition` morph where supported. Prev/next can't exist in the fallback — a
+  second `show-modal` invoker inside an already-open dialog stacks a second modal rather than
+  replacing the first — so it is generated by the element, never authored, the same rule
+  `<wc-tree>`'s search field follows.
+
+  **Added — `astro`:** `<Gallery />` (`@getvitops/astro/components/Gallery.astro`) — emits a
+  `.gallery` grid plus one `.lightbox-dialog` per image and its own `<wc-gallery>`; do not wrap it in
+  one. Images take `string | ImageMetadata`, rendered through a new internal `<ResponsiveImage />`
+  helper: a plain string renders the same raw `<img>` every component here used before, unchanged;
+  an `astro:assets` import renders through `<Picture />` for AVIF/WebP derivatives.
+
+  **Changed — `astro`:** `<Carousel />`'s `CarouselSlide.src` now also accepts `ImageMetadata`,
+  through the same `<ResponsiveImage />` helper, plus a new `formats` prop. Every existing
+  string-`src` call site renders byte-identical markup — purely additive.
+
+  **Added — `wc`:** the Invoker Commands API (`<button command commandfor>`) polyfill
+  (`invokers-polyfill`, feature-detected via `@getvitops/core/polyfills`) — resolves the TODO
+  `polyfills.ts` carried since 4.0. `<wc-gallery>`'s fallback and `<Drawer />` (which already emitted
+  `command="show-modal"` unconditionally) both now get real cross-browser coverage rather than
+  depending on it being "too new to rely on yet." Fetched only in an engine that doesn't support the
+  API natively, so a current browser downloads none of it.
+
+  **Migration:** rename `.lightbox` → `.gallery` and `.lightbox__item`/`.lightbox__thumb` →
+  `.gallery__item`/`.gallery__thumb` wherever authored (see table above); everything else is
+  additive. Consumers using the CSS pattern with no JS need no other change — the fallback markup is
+  unchanged in shape, only the class names moved.
+
+- eb9ac79: `<wc-tree>` gains WAI-ARIA tree semantics and roving-tabindex keyboard navigation, and the
+  keyboard-navigation code behind it lands as shared utilities the next roving-tabindex component
+  (Dropdown, Tabs, Combobox) can reuse.
+
+  **Breaking — `wc` (`@getvitops/core`).** On upgrade, `<wc-tree>` now unwraps every branch's
+  `<details>`/`<summary>` into a plain, JS-owned structure (`role="tree"` on the root,
+  `role="treeitem"` on every item, `role="group"` on every nested list, a roving `tabindex`, and
+  `aria-expanded` mirroring expand state). This is a deliberate, named exception to the framework's
+  normal "parse the fallback and augment it in place" rule — the alternative, an ARIA-attribute
+  overlay left on top of the native `<details>`/`<summary>` structure, was tried first and rejected
+  because `<summary>` stays focusable regardless, which leaves a permanent duplicate `role="button"`
+  node inside every branch. The no-JS fallback is completely unaffected: it is still native nested
+  `<details>`, exactly as `<Tree />` has always rendered it, and `enhance={false}` still gets the
+  bare fragment with no `<wc-tree>` at all.
+
+  Two concrete things break for a consumer that reached into the enhanced DOM directly:
+  - A script holding a reference to the original `<details>`/`<summary>` nodes — including one
+    captured via `getElementById` before upgrade, since the flat markup shape's `<details>` carries
+    the item's `id` — loses that reference once JS runs. `tree-toggle` (mirroring the existing
+    `tree-filter` custom event) is the replacement surface for reacting to expand/collapse.
+  - `<wc-tree>` becomes a single tab stop. Tabbing through every row in a large tree no longer
+    works; arrow keys replace it (Up/Down between visible nodes, Right/Left to open/close a branch or
+    step in/out, Home/End, type-ahead), matching the WAI-ARIA tree pattern. Left/Right flip under
+    `direction: rtl`.
+
+  **Fixed — `wc` (`@getvitops/core`).** `<wc-carousel>`'s dot-nav arrow keys now follow writing
+  direction. In an RTL document, `ArrowLeft` moves the roving tabindex to the visually-left dot and
+  `ArrowRight` to the visually-right one — previously both were index-based and moved the focus ring
+  against the direction the dots are actually drawn in. `ArrowUp`/`ArrowDown` are unchanged and never
+  flip (`direction` is a horizontal-axis property). The prev/next buttons are unchanged too — they
+  still step to the previous/next slide in both directions, and only their glyph flips. Also fixed:
+  two arrow presses faster than the dot nav's smooth scroll can settle now reliably advance two dots
+  instead of sometimes landing on the same one twice.
+
+  **Changed — `css`/`bricks`/`tailwind` (all formats).** `patterns/tree.css` gains a `.tree__summary`
+  row class (the enhanced-state replacement for `<summary>`), a hand-rolled expand/collapse animation
+  replacing the native `<details>` one that no longer applies post-upgrade, and a focus ring scoped to
+  the row rather than the whole item (the roving tabindex now lands on `.tree__item`, whose box wraps
+  its entire subtree once expanded). Visually equivalent to before; no consumer class rename needed.
+
+  **Added — `wc` (`@getvitops/core`, internal).** `web-components/utils/keynav.ts` (generic
+  key-decoding + type-ahead primitives) and `utils/tree-nav.ts` (tree-specific navigation decisions)
+  are new pure modules, and `utils/RovingTabindex.ts` is a new shared `ReactiveController` — modelled
+  on the existing `DragController` — that owns roving-tabindex bookkeeping for any keyboard-navigable
+  group. `<wc-carousel>`'s dot nav now runs on it too, and `<wc-gallery>` reuses `keynav.ts`'s
+  `stepIndex`. None of the three are in `@getvitops/core`'s public `exports` map. Only
+  `RovingTabindex` is re-exported from `web-components/index.ts`, the same way `DragController`
+  already is, not as new published API; `keynav.ts` and `tree-nav.ts` stay internal modules imported
+  directly by path (as `RovingTabindex.ts` and `gallery.ts` already do) since neither is consumed
+  outside the components that already import them directly.
+
+  **This changeset makes no consumer-facing change in `@getvitops/generator` beyond documentation
+  output.** `tiers.ts`'s `tree` entry gains `tree__summary` to its class list and describes the new
+  keyboard navigation and ARIA semantics — this changes what `vitops docs components` /
+  `concepts/components.md` render for the `tree` pattern, nothing else. `generator`'s real change in
+  this release is unrelated to `wc-tree` — see `localbusiness-schema.md`.
+
+### Minor Changes
+
+- a6a8b39: `radii.pill` / `--br-pill` is gone. `999px` is a shape, not a design decision, so it no longer
+  has a config-editable token of its own — it's now the `rounded-full` utility, named and valued
+  to match Tailwind's own class, alongside a new `rounded-none`.
+
+  **Breaking — `css`/`bricks` only** (the tailwind format never emitted `--br-pill`; Tailwind
+  already ships `rounded-full`/`rounded-none` natively and always has). A consumer who overrode
+  `--br-pill` directly, or set `radii.pill` in their own `design-system.json` expecting it to
+  reshape the switch track, the facet-list count or the badge-indicator bubble, has to migrate:
+  - The switch track, facet count and badge indicator each already had their own consumer hook
+    (`--br-switch-track`, `--br-count`, `--br-badge-indicator`) and now fall back straight to the
+    literal `999px` instead of chaining through `--br-pill`. Override the specific hook instead of
+    the removed shared one.
+  - `.badge` is unaffected — it already resolved to `999px` and still does, now via its own
+    override (`patterns.items.badge.overrides.br`) rather than a shared primitive.
+  - Anything that wants a fully round corner outside those three patterns should reach for
+    `class="rounded-full"` (or `rounded-none` to zero one out) rather than a `--br-*` variable.
+
+  This is **not** reachable by `vitops lint --fix` — its token-rename table is built from colour
+  role names, and there is no equivalent static table for a shape primitive going away — so this
+  entry is the migration.
+
+  `radii.circle` / `--br-circle` (50%) is untouched: `status`, the radio and the switch thumb all
+  depend on it, and Tailwind has no equivalent to defer to.
+
+- 7b391b3: Add `<wc-counter>` — animates a number from a start value to the value already in its fallback
+  text, on intersection. The stat/percentage figure in a media tile ("0 → 94%"), a KPI row, a
+  metrics band.
+
+  No consumer-facing change in this release outside `core`, `generator` and `astro` — `utils`,
+  `cli` and `vite` still ship in this release only because the six share one version.
+
+  **Added — `css`/`bricks`/`tailwind` (all formats):** `.counter` / `.counter__value` /
+  `.counter__presentation` (`patterns/counter.css`). A registered `--_n` custom property drives the
+  count via a plain CSS `@keyframes` animation — the interpolation and the easing curve are CSS's,
+  never duplicated in JS.
+
+  **Added — `wc` (`@getvitops/core`).** `<wc-counter>` parses the final value out of its own
+  `.counter__value` fallback text — never from a separate attribute, so the no-JS reading and the
+  animated reading can't disagree — and renders it back through `Intl.NumberFormat`, seeded from the
+  fallback text's own separators (a grouped `1,284` never animates through ungrouped intermediates).
+  `counter()` cannot do that part: no decimals, no locale grouping, which is the one thing here that
+  genuinely needs JavaScript.
+  - Triggers on intersection via a single shared `IntersectionObserver`, not on upgrade — a counter
+    below the fold that finished before the visitor scrolled to it would have done nothing.
+  - `prefers-reduced-motion: reduce` means don't animate at all, checked before the observer is even
+    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
+    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` |
+    `ease-in` | `ease-out` | `float-sine` | `float-bounce` — maps onto the real
+    `--custom-ease-*`/`--ease-float-*` tokens, so a curve edited in `animation.css` cannot drift out
+    of step with this element), `data-decimals` (inferred from the fallback text when absent).
+  - Never leaves an intermediate value on screen as the resting state: disconnecting mid-animation
+    restores the fallback immediately, and it was never mutated in the first place — only the
+    presentation span was ever written to.
+
+  **Added — `astro`.** `<Counter value="94%" />` emits its own `<wc-counter>` — do NOT wrap it in
+  one, same rule as `Gallery`/`Carousel`/`Tree`. `value` is the only source of the final figure;
+  there is no separate `to` prop, for the same one-source-of-truth reason the element itself parses
+  its fallback rather than taking a duplicate attribute. `enhance={false}` emits the bare fallback
+  for a page that cannot run `elements.js`.
+
+### Patch Changes
+
+- **Added — `utils`.** `itemListGraph()`, a pure schema.org `ItemList` JSON-LD builder — a sibling
+  of `breadcrumbGraph()`/`localBusinessGraph()`. Extracted from `@getvitops/astro`'s `<Carousel />`
+  so any consumer can build a valid `ItemList` (Google's "all-in-one page" carousel format:
+  `ListItem.item` carrying `@type`/`name`/`url`) for content that isn't one of the six Google
+  carousel rich-result types (`Article`/`Recipe`/`Movie`/`Course`/`Restaurant`/`Product`) — the
+  entity type is no longer constrained to that set.
+
+  **Changed — `astro`.** `<Carousel />`'s `CarouselItem['type']` now accepts any string, not just
+  the six carousel rich-result types — non-breaking, the union only widens. It's a thin wrapper
+  over `itemListGraph()` now; behaviour for existing callers is unchanged.
+
+  No consumer-facing change in this release outside `utils` and `astro` — `generator`, `cli` and
+  `vite` still ship in this release only because the six share one version.
+
+  **Fixed — `core` (`css`/`bricks`/`tailwind` build output, all formats).** The CSS and HTML
+  authored inside Lit's `css`/`html` tagged templates in `<wc-*>` component sources previously
+  survived JS minification verbatim — a JS minifier treats a template literal's cooked text as
+  opaque, so `elements.js` shipped ~690 lines of indented, unminified CSS (and the equivalent in
+  HTML) inside an otherwise-minified 886-line file. Two source-level build transforms now collapse
+  both before bundling: `postcss` + `postcss-lit` + `cssnano` for `css` templates, `minify-html-literals`
+  (`conservativeCollapse: true`, so whitespace between inline elements in light-DOM components never
+  collapses to zero) for `html` templates. `elements.js` drops from 886 lines / ~101 KB to 49 lines /
+  ~96 KB. A second build step deduplicates the 17 `@license` comment blocks (only 6 are textually
+  distinct) down to one verbatim copy of each — required by BSD-3/MIT/Apache-2.0's notice-retention
+  terms either way, just no longer repeated once per source file that carries it. No API change;
+  build-time only, and none of the added tooling (`postcss`, `postcss-lit`, `cssnano`,
+  `minify-html-literals`) is a runtime or published dependency.
+
+- Updated dependencies [c0c092b]
+- Updated dependencies
+- Updated dependencies [2b50f9e]
+  - @getvitops/utils@7.0.0
+
 ## 6.0.0
 
 ### Major Changes

package/css/animation.css

@@ -71,6 +71,15 @@
   animation-duration: var(--animation-duration-xslow);
 }
 
+/* The gallery/lightbox thumbnail → full-image morph (see patterns/lightbox.css)
+   needs a shorter duration than a whole-page navigation. Scoped to `*` because a
+   repo-wide `::view-transition-old/new` selector belongs at the engine layer, not
+   inside the one pattern partial that happens to use it first. */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 0.3s;
+}
+
 /* ===========================================
  * Keyframes - Layout Stage (most expensive)
  * =========================================== */

package/css/index.css

@@ -43,6 +43,7 @@
    panel surface navshell's desktop block has to undo. */
 @import './patterns/navshell.css';
 @import './patterns/notification.css';
+@import './patterns/gallery.css';
 @import './patterns/lightbox.css';
 @import './patterns/overlay.css';
 /* was forms.css */
@@ -69,6 +70,7 @@
 @import './patterns/text-effects.css';
 @import './patterns/svg.css';
 @import './patterns/marquee.css';
+@import './patterns/counter.css';
 @import './patterns/nav.css';
 @import './patterns/carousel.css';
 @import './patterns/copy.css';

package/css/patterns/counter.css

@@ -0,0 +1,50 @@
+/**
+ * Counter — animates a number from a start value to the value already in its
+ * fallback text (`.counter__value`), e.g. the "0 → 94%" stat in a media tile.
+ * Consumes the generated token cascade (src/css/generated/tokens.css) only for
+ * `--custom-ease-out` (animation.css's engine layer).
+ *
+ * `<wc-counter>` owns the reading; this partial owns the interpolation. `--_n`
+ * is a registered custom property so the browser can smoothly animate it as a
+ * number — `counter()` cannot do decimals or locale grouping, so JS mirrors
+ * `--_n` into `.counter__presentation`'s text each frame via
+ * `Intl.NumberFormat`, formatted the same way the fallback text was. CSS still
+ * owns the interpolation, the easing curve and (as a second belt alongside the
+ * JS check) `prefers-reduced-motion`.
+ *
+ * `.counter__value` is toggled to the framework's `.sr-only` utility while
+ * running, not hidden — an element pulled out of the accessibility tree via
+ * `display: none`/`visibility: hidden` stops contributing to the accessible
+ * name, and that name must read the final value for the whole animation, not
+ * just at rest.
+ */
+@property --_n {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: false;
+}
+
+.counter__presentation {
+  display: none;
+}
+
+wc-counter[running] .counter__presentation {
+  display: inline;
+  animation: counter-run var(--counter-duration, 1.2s) var(--counter-easing, var(--custom-ease-out))
+    forwards;
+}
+
+@keyframes counter-run {
+  from {
+    --_n: var(--counter-from, 0);
+  }
+  to {
+    --_n: var(--counter-to);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  wc-counter[running] .counter__presentation {
+    animation: none;
+  }
+}

package/css/patterns/forms.css

@@ -287,7 +287,7 @@ input[type='color'] {
     position: relative;
     inline-size: var(--_switch-width);
     block-size: var(--_switch-height);
-    border-radius: var(--br-switch-track, var(--br-pill, 999px));
+    border-radius: var(--br-switch-track, 999px);
     background: var(--color-bg-surface-muted);
     transition: background-color 0.2s ease;
   }

package/css/patterns/gallery.css

@@ -0,0 +1,60 @@
+/**
+ * Gallery — thumbnail grid whose triggers open a `.lightbox-dialog` (patterns/lightbox.css).
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ *
+ * Split out of what used to be `.lightbox`'s grid half. The two are separate
+ * concerns — "a grid of images" and "view one full-screen" — and only the dialog
+ * half needs the `lightbox` name; the grid never was one.
+ *
+ * `<wc-gallery>` wraps this and augments the per-image `.lightbox-dialog`s it finds
+ * with prev/next, arrow keys, swipe and a counter. With no JS each `.gallery__trigger`
+ * is a real `command="show-modal" commandfor="…"` invoker for its own dialog, so the
+ * grid + dialogs already form a working modal lightbox before any script runs.
+ */
+
+wc-gallery {
+  /* Unregistered custom elements default to `display: inline`, which forms an
+     inline box around this grid's block content until `elements.js` upgrades it. */
+  display: block;
+}
+
+.gallery {
+  --_br: var(--br-gallery, var(--br-gallery-group, var(--br-default)));
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-thumb-size, 150px), 1fr));
+  gap: var(--gallery-gap, 0.5rem);
+}
+
+.gallery__item {
+  aspect-ratio: var(--gallery-aspect, 1);
+  overflow: hidden;
+  border-radius: var(--_br);
+}
+
+.gallery__trigger {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--gallery-focus-color, currentColor);
+    outline-offset: 2px;
+  }
+}
+
+.gallery__thumb {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  transition: scale 0.3s ease;
+}
+
+.gallery__trigger:hover .gallery__thumb {
+  scale: 1.05;
+}

package/css/patterns/lightbox.css

@@ -1,42 +1,14 @@
 /**
- * Lightbox — pattern partial migrated from old-css-lib.
+ * Lightbox — the full-screen `<dialog>` a gallery trigger opens.
  * Consumes the generated token cascade (src/css/generated/tokens.css).
+ *
+ * The thumbnail grid that drives this moved to `patterns/gallery.css`
+ * (`.gallery` / `.gallery__item` / `.gallery__trigger` / `.gallery__thumb`) — this
+ * partial owns only the dialog a trigger opens. `<Gallery />` emits both; this
+ * file has no opinion on what triggers it.
  */
 
-/* ── Lightbox — thumbnail grid + full-screen dialog w/ view transitions ────── */
-.lightbox {
-  --_br: var(--br-lightbox, var(--br-lightbox-group, var(--br-default)));
-
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--lightbox-thumb-size, 150px), 1fr));
-  gap: var(--lightbox-gap, 0.5rem);
-
-  .lightbox__item {
-    position: relative;
-    aspect-ratio: var(--lightbox-aspect, 1);
-    overflow: hidden;
-    border-radius: var(--_br);
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: 2px solid var(--lightbox-focus-color, currentColor);
-      outline-offset: 2px;
-    }
-  }
-
-  .lightbox__thumb {
-    inline-size: 100%;
-    block-size: 100%;
-    object-fit: cover;
-    transition: scale 0.3s ease;
-    view-transition-name: match-element;
-  }
-
-  .lightbox__item:hover .lightbox__thumb {
-    scale: 1.05;
-  }
-}
-
+/* ── Lightbox dialog — full-screen, w/ view transitions ─────────────────────── */
 dialog.lightbox-dialog {
   position: fixed;
   inset: 0;
@@ -56,6 +28,14 @@ dialog.lightbox-dialog {
      ::backdrop rule, so it keeps the shared fade timing. */
   --scrim: transparent;
 
+  /* The entry, as effect vars rather than a keyframe — same approach as
+     dialog.css, and for the same reason: the top-layer driver in animation.css
+     then animates this OUT too, which an `animation:` on `[open]` never does
+     (it only ever plays once, on open). */
+  --opacity-from: 0;
+  --scale-x-from: 0.95;
+  --scale-y-from: 0.95;
+
   &[open] {
     display: grid;
   }
@@ -73,7 +53,13 @@ dialog.lightbox-dialog {
     max-inline-size: 100%;
     max-block-size: 90vh;
     object-fit: contain;
-    view-transition-name: match-element;
+
+    /* `<wc-gallery>` assigns `view-transition-name: lightbox-active` to this and
+       the originating thumbnail at the moment it opens, then clears it on close —
+       that shared, runtime-assigned name is what morphs one into the other.
+       `match-element` (the auto-generated per-element name) does NOT do this: it
+       names each element uniquely, so it can never morph a thumbnail into a
+       different `<img>`. Do not put a `view-transition-name` here statically. */
   }
 
   .lightbox-dialog__close {
@@ -149,8 +135,3 @@ dialog.lightbox-dialog {
     text-align: center;
   }
 }
-
-::view-transition-old(*),
-::view-transition-new(*) {
-  animation-duration: 0.3s;
-}

package/css/patterns/list.css

@@ -117,7 +117,7 @@
     flex-shrink: 0;
     font-size: 0.75em;
     padding: 0.125rem 0.375rem;
-    border-radius: var(--br-count, var(--br-pill, 999px));
+    border-radius: var(--br-count, 999px);
     background: var(--color-bg-surface-muted);
   }
 

package/css/patterns/tag.css

@@ -29,7 +29,6 @@
 /* ── Badge indicator — numeric notification bubble (distinct from .badge) ──── */
 .badge-indicator {
   --_size: var(--badge-size, 1.25rem);
-  --_br: var(--br-badge, var(--br-badge-group, var(--br-default)));
 
   display: inline-flex;
   align-items: center;
@@ -40,7 +39,7 @@
   font-size: var(--fs-badge, var(--fs-badge-group, var(--fs-default)));
   font-weight: 600;
   line-height: 1;
-  border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
+  border-radius: var(--br-badge-indicator, 999px);
   background: var(--color-text-danger);
   color: #fff;
 

package/css/patterns/tree.css

@@ -44,10 +44,16 @@ wc-tree {
     position: relative;
   }
 
-  /* Nested list indent. Two shapes are supported: the item may BE the
-     `<details>`, or be an `<li>` wrapping one — the latter is what `<Tree />`
-     emits, because `<ul>`/`<li>` is what gives assistive tech list position and
-     depth. Keep both; the flat shape is the pattern's original contract.
+  /* Nested list indent. Two shapes are supported IN THE NO-JS FALLBACK: the
+     item may BE the `<details>`, or be an `<li>` wrapping one — the latter is
+     what `<Tree />` emits, because `<ul>`/`<li>` is what gives assistive tech
+     list position and depth. `<wc-tree>` unwraps both shapes to one structure
+     on upgrade (`.tree__item` > `.tree__summary`/`.tree__content` + optional
+     nested `.tree`), which is why the first selector below already matches
+     the ENHANCED state for both former shapes with no changes — only the
+     second (`.tree__item > details > .tree`) is fallback-only now, kept for
+     the no-JS list shape. Same split applies to every other
+     `details`/`summary`-keyed selector in this file below.
 
      Indent is ONE `--tree-indent` per level, not two. This used to set both
      `margin-inline-start` and `padding-inline-start` to it, putting the guide
@@ -85,6 +91,7 @@ wc-tree {
   }
 
   .tree__content,
+  .tree__summary,
   details.tree__item > summary,
   .tree__item > details > summary {
     display: flex;
@@ -100,6 +107,26 @@ wc-tree {
     padding-inline-start: var(--_leaf-indent);
   }
 
+  /* `.tree__summary` — the enhanced-state row `<wc-tree>` builds on upgrade,
+     replacing `<summary>`. Not `.tree__content`: that class's
+     `padding-inline-start: var(--_leaf-indent)` exists specifically to make a
+     TOGGLE-LESS row line up with one that has a toggle — applying it to a row
+     that DOES have a toggle would double-indent every branch, the mirror
+     image of the 24px-misalignment bug the comment above this block
+     documents fixing. */
+  .tree__summary {
+    cursor: pointer;
+    /* Only source of this in the enhanced state — `<summary>`'s own
+       `user-select: none` came from `details.css`'s bare `details` selector,
+       which no longer matches once `<details>` is gone. Without it, a
+       drag-select across a label also fires a `click` and toggles the row. */
+    user-select: none;
+  }
+
+  /* Fallback-only from here: no-JS renders `<details>`/`<summary>`, which
+     `<wc-tree>` unwraps on upgrade (see the class docblock in `WCTree.ts`).
+     Kept for the two SSR'd shapes; nothing in the enhanced state matches
+     these. */
   details.tree__item > summary,
   .tree__item > details > summary {
     cursor: pointer;
@@ -127,6 +154,13 @@ wc-tree {
     transition: transform 0.2s ease;
   }
 
+  /* Enhanced state: `aria-expanded` is the mirror `#setExpanded` writes
+     alongside the group's `hidden`, kept in sync with it — see WCTree.ts. */
+  .tree__item[aria-expanded='true'] > .tree__summary .tree__toggle {
+    transform: rotate(90deg);
+  }
+
+  /* Fallback-only — see the note above `details.tree__item > summary`. */
   details.tree__item[open] > summary .tree__toggle,
   .tree__item > details[open] > summary .tree__toggle {
     transform: rotate(90deg);
@@ -165,8 +199,12 @@ wc-tree {
     transition: opacity 0.15s ease;
   }
 
-  .tree__item:hover .tree__actions,
-  .tree__item:focus-within .tree__actions {
+  /* `>`, not a descendant selector: `.tree__item` now carries the roving
+     tabindex directly, so arrow-keying to a deep item would otherwise light
+     up every ANCESTOR branch's own actions row too, not just the row hovered
+     or focused. */
+  .tree__item:hover > .tree__actions,
+  .tree__item:focus-within > .tree__actions {
     opacity: 1;
   }
 
@@ -174,6 +212,65 @@ wc-tree {
     opacity: 0.5;
   }
 
+  /* Focus now lands on `.tree__item` itself (the roving tabindex target), a
+     block box that — for an expanded branch — wraps its entire subtree. An
+     outline on it would ring every descendant, so it's suppressed there and
+     drawn on the ROW instead. */
+  .tree__item:focus {
+    outline: none;
+  }
+
+  /* `:focus-visible` alone under-covers a real case: script-moved focus only
+     matches `:focus-visible` if the PREVIOUSLY focused element did, so a
+     mouse click (which doesn't match) followed immediately by an arrow key
+     shows no ring at all in Chrome/Safari until the visitor tabs fully out
+     and back in. `[data-tree-keyboard]` is `<wc-tree>`'s own signal — set on
+     any handled navigation keydown, cleared on `pointerdown` — and covers
+     exactly that gap; `happy-dom` implements neither `:focus-visible` nor
+     layout, so this needs a manual browser check, not a unit test. */
+  .tree__item:focus-visible > .tree__summary,
+  .tree__item:focus-visible > .tree__content,
+  &[data-tree-keyboard] .tree__item:focus > .tree__summary,
+  &[data-tree-keyboard] .tree__item:focus > .tree__content {
+    outline: 2px solid var(--tree-focus-color, currentColor);
+    /* Inset, not the pattern's usual positive offset: the nested group below
+       clips its content (`overflow: clip`, next rule), so a positive offset
+       on the first or last row of an expanded subtree would be cut off by
+       its own ancestor. */
+    outline-offset: -2px;
+  }
+
+  /* Animated collapse — the enhanced-state replacement for `details.css`'s
+     `::details-content` transition, which no longer applies once `<details>`
+     is gone. Keyed on `[hidden]` itself, NOT on `[aria-expanded]`: the
+     browser's own find-in-page / fragment-navigation reveal removes `hidden`
+     directly or CSS anchored to a JS-set `aria-expanded` mirror would leave a
+     UA-revealed branch visually still collapsed until a `beforematch` handler
+     caught up (see WCTree.ts). Same idiom `details.css` verified working, and
+     the same warning applies: the tell of a regression is a branch that
+     doesn't open on the FIRST click, not a syntax error — check a real
+     interaction. */
+  .tree__item > .tree {
+    /* `clip` + a small margin, not `hidden`: an `overflow: hidden` group
+       would clip the focus ring (`outline-offset: -2px` above still needs a
+       few px of headroom) of its own first/last child row. */
+    overflow: clip;
+    overflow-clip-margin: 3px;
+
+    @media (prefers-reduced-motion: no-preference) {
+      block-size: auto;
+      transition:
+        block-size var(--animation-duration) var(--custom-ease-out),
+        content-visibility var(--animation-duration) allow-discrete;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .tree__item > .tree[hidden] {
+      block-size: 0;
+    }
+  }
+
   &.tree--lines .tree__item {
     position: relative;
 
@@ -195,10 +292,16 @@ wc-tree {
 
   /* A node's own prose. `.tree__label` is `nowrap` + ellipsis for file-tree-style
      single-line names, so a description can't live in it — it sits below the
-     summary row and wraps. Indented to the label, past the toggle. */
+     summary row and wraps. Indented to the label, past the toggle.
+
+     `margin-inline-end` is set here rather than left to come from an
+     ancestor: a BRANCH description used to get it incidentally from
+     `details.css`'s `<details>` margins (now gone — see the class docblock in
+     `WCTree.ts`), while a LEAF description, never inside a `<details>`, never
+     got one at all. Self-contained now, and consistent between the two. */
   .tree__desc {
     margin-block: 0.125rem 0.25rem;
-    margin-inline-start: var(--_leaf-indent);
+    margin-inline: var(--_leaf-indent) 0.25rem;
     color: var(--color-text-surface-muted);
     text-wrap: pretty;
   }