Shared Transition-Class Chips

A removable filter/amenity-chip row (e.g. a real-estate 'Hardwood floors / Attached garage / Fenced yard' feature list) where removing one chip morphs the rest into their new position using the native View Transitions API — but styled with the newer `view-transition-class` CSS property instead of this catalog's existing 'View Transition Toggle' entry's approach. That entry gives each morphing element its own unique `view-transition-name` (required by the API) but never assigns a class, so per-group styling (duration, easing, a distinct exit treatment) would have to be repeated once per name if ever needed — checked directly against that entry's own code before building this, genuinely separate, narrow ground. `view-transition-class` solves exactly that: it assigns one or more class-like custom-idents to an element's view-transition pseudo-elements, selectable as `::view-transition-group(.my-class)`, so every chip can share ONE grouped rule (`.stc-chip{view-transition-class:stc-chip}` → `::view-transition-group(.stc-chip){...}`) while the one chip actually being removed gets a second class added only for that moment (`.stc-chip-leaving{view-transition-class:stc-chip stc-chip-leaving}`) to layer a distinct fade+shrink on top of the shared group timing — never needing a per-name selector. **Real, current, cross-checked support (sourced via MDN and caniuse, checked this run):** Baseline 'newly available' since October 2025 — meaningfully wider than most Chromium-only entries in this catalog: Chrome/Edge 125+, Firefox 144+, Safari 18.2+ (desktop and iOS). Same same-document scope as the existing 'View Transition Toggle' entry (not the separate cross-document/MPA flavor). **Verified this run with a real headless-Chromium behavioral check, not just a CSS-parses check:** `CSS.supports('view-transition-class','a')` returns true in this sandbox's pinned Chromium, and — the actual test that matters — calling `document.startViewTransition()` and inspecting `document.getAnimations()` while the transition is live shows the shared `::view-transition-group(.stc-chip)` rule's `animation-duration:.32s` genuinely applied across multiple separate chips' group pseudo-elements at once (several distinct 320ms-duration animations observed, one per remaining chip), while the single removed chip's own `::view-transition-old(.stc-chip-leaving)` override produced one distinct 280ms fade-to-0-opacity-and-scale animation layered on just that element — confirming the class-based grouped selector and the one-off per-element override both actually fire as described, not asserted from the spec alone. Feature-detects with `if (document.startViewTransition)` (instant reorder, no error, for unsupported browsers) and is wrapped in `@supports (view-transition-class: a)` so an engine that parses `startViewTransition` but not yet `view-transition-class` (there are none in the sourced support table above, but kept for defense) just gets the plain unstyled default transition instead of a broken rule; honors `prefers-reduced-motion` by disabling all view-transition pseudo-element animation outright, same convention as 'View Transition Toggle'. Zero WebGL, zero scroll-jacking, one small `startViewTransition` call for the whole interaction — a plainly DIY-$999-tier-fittable pattern (a removable feature-chip list is exactly the kind of small-business-site UI that tier sells), though it can't actually be added to `docs/diy-website-style-catalog.md` this run since that doc is still missing (see this run's log entry). (Vanilla example: live iframe preview + HTML/CSS/JS tabs — click a chip's × to remove it.)

<div class="stc-wrap">
  <div class="stc-chips" id="stc-chips">
    <span class="stc-chip" id="stc-chip-1" style="view-transition-name:stc-1">Hardwood floors <button class="stc-x" data-remove="stc-chip-1">×</button></span>
    <span class="stc-chip" id="stc-chip-2" style="view-transition-name:stc-2">Attached garage <button class="stc-x" data-remove="stc-chip-2">×</button></span>
    <span class="stc-chip" id="stc-chip-3" style="view-transition-name:stc-3">Fenced yard <button class="stc-x" data-remove="stc-chip-3">×</button></span>
    <span class="stc-chip" id="stc-chip-4" style="view-transition-name:stc-4">In-unit laundry <button class="stc-x" data-remove="stc-chip-4">×</button></span>
  </div>
</div>