@xenosystem/elements-react 0.0.1

package/src/size.css

@@ -0,0 +1,179 @@
+/*
+ * Control size metrics, as CSS.
+ *
+ * These four numbers used to be written onto every control as an INLINE style, computed in JS from
+ * `controlSize` at render time. That worked, but it put the box metrics in the one place nothing can
+ * override: an inline style beats every stylesheet rule there is. Which means a surface — a product
+ * rendering the same elements for touch instead of a mouse — had no seam to reach them through.
+ *
+ * Here they are ambient instead. A control emits `data-xeno-size="md"` and reads the four variables;
+ * a surface redefines the variables for the sizes it wants bigger, once, at the root:
+ *
+ *   .xeno[data-surface='mobile'] [data-xeno-size='md'] { --xeno-h: 44px; }
+ *
+ * Nothing at the call site changes, no context is threaded through the tree, and a product that sets
+ * no surface keeps exactly what it had.
+ *
+ * The attribute is namespaced (`data-xeno-size`, not `data-size`) for two reasons: it cannot collide
+ * with a host application's own `data-size`, and it therefore does not need to be scoped under
+ * `.xeno` — a control rendered outside the theme root still gets its metrics.
+ *
+ * DRIFT: the numbers below mirror `controlSize` in `@xenosystem/elements/tokens`, which stays the
+ * source of truth. `size.test.ts` fails if the two ever disagree.
+ *
+ * NOT here: glyph px. A `<XenoElement>` takes its size as a number prop, so an icon's scale is still
+ * resolved in JS (`iconPx`). Making icons follow a surface too is a separate change.
+ */
+
+[data-xeno-size='xs'] {
+  --xeno-h: 24px;
+  --xeno-padx: 8px;
+  --xeno-gap: 5px;
+  --xeno-font: 12px;
+  --xeno-icon: 15px;
+}
+[data-xeno-size='sm'] {
+  --xeno-h: 28px;
+  --xeno-padx: 10px;
+  --xeno-gap: 6px;
+  --xeno-font: 13px;
+  --xeno-icon: 16px;
+}
+[data-xeno-size='md'] {
+  --xeno-h: 32px;
+  --xeno-padx: 12px;
+  --xeno-gap: 6px;
+  --xeno-font: 14px;
+  --xeno-icon: 16px;
+}
+[data-xeno-size='lg'] {
+  --xeno-h: 36px;
+  --xeno-padx: 14px;
+  --xeno-gap: 7px;
+  --xeno-font: 14px;
+  --xeno-icon: 18px;
+}
+
+/* ── The touch surface ────────────────────────────────────────────────────────────────
+ * One block, declared by the product at its root:
+ *
+ *   <div className="xeno" data-surface="mobile">
+ *
+ * `font` at md is 16px and that is not a taste call — iOS Safari ZOOMS the page when a focused input
+ * has a font under 16px, so a 14px text field makes the whole layout jump the instant it is tapped. */
+.xeno[data-surface='mobile'] [data-xeno-size='xs'] {
+  --xeno-h: 28px;
+  --xeno-padx: 10px;
+  --xeno-gap: 6px;
+  --xeno-font: 13px;
+  --xeno-icon: 16px;
+}
+.xeno[data-surface='mobile'] [data-xeno-size='sm'] {
+  --xeno-h: 32px;
+  --xeno-padx: 12px;
+  --xeno-gap: 7px;
+  --xeno-font: 14px;
+  --xeno-icon: 17px;
+}
+.xeno[data-surface='mobile'] [data-xeno-size='md'] {
+  --xeno-h: 40px;
+  --xeno-padx: 16px;
+  --xeno-gap: 8px;
+  --xeno-font: 16px;
+  --xeno-icon: 20px;
+}
+.xeno[data-surface='mobile'] [data-xeno-size='lg'] {
+  --xeno-h: 48px;
+  --xeno-padx: 18px;
+  --xeno-gap: 9px;
+  --xeno-font: 16px;
+  --xeno-icon: 22px;
+}
+
+/* ── Glyphs follow the surface ────────────────────────────────────────────────────────
+ * A 16px glyph inside a 40px button is not the same design as a 16px glyph inside a 32px one — the
+ * ratio is what reads, and it has to hold. Desktop md is 32/16; touch md is 40/20. Same 50%.
+ *
+ * The renderer writes `width`/`height` as ATTRIBUTES on the svg, and a CSS rule outranks a
+ * presentation attribute — so this needs no renderer change, no new prop and no context, and the
+ * attributes stay put for the "renders correctly with no stylesheet" invariant.
+ *
+ * Only under a surface: with no surface declared the attribute already carries the right number, and
+ * a rule competing with it by default would be pure risk for no gain.
+ *
+ * Each owner is named rather than reaching every descendant, and that is the whole point — a blanket
+ * rule would also flatten the glyphs that are deliberately SMALLER than the control's own. The chip's
+ * remove × and the model picker's are `glyph - 2` by decision, and they keep their attribute. */
+.xeno[data-surface='mobile'] .xeno-btn > .xeno-element,
+.xeno[data-surface='mobile'] .xeno-input-icon > .xeno-element,
+.xeno[data-surface='mobile'] .xeno-tab > .xeno-element,
+.xeno[data-surface='mobile'] .xeno-chip-body > .xeno-element {
+  width: var(--xeno-icon);
+  height: var(--xeno-icon);
+}
+
+/* ── The hit target ───────────────────────────────────────────────────────────────────
+ * 44px square, Apple's HIG minimum and WCAG 2.1 AAA. It is the TAPPABLE area, not the visual one —
+ * keeping those separate is what lets the interface stay dense under a finger instead of becoming a
+ * column of slabs. Material does the same thing: 24dp of ink inside a 48dp target.
+ *
+ * It is gated on `pointer: coarse`, NOT on the surface, and the distinction matters. The surface is a
+ * decision the PRODUCT makes about density; the hit target answers a fact about the DEVICE. A phone
+ * opening the web platform has fingers whether or not anyone declared a surface, and it gets safe
+ * targets either way.
+ *
+ * The pseudo-element only exists inside the query, so on a precise pointer there is no extra layer
+ * over any control at all. `::after` on purpose: `::before` is already the goo fill on the toggle and
+ * the filter pill. Rows that can hold their own actions (list rows, table rows) are left out — an
+ * overlay across them would swallow clicks meant for a trailing button. */
+.xeno {
+  --xeno-hit: 44px;
+}
+
+@media (pointer: coarse) {
+  .xeno-btn,
+  .xeno-icon-btn,
+  .xeno-chip,
+  .xeno-pill,
+  .xeno-tab,
+  .xeno-segmented-option,
+  .xeno-switch,
+  .xeno-checkbox,
+  .xeno-radio,
+  .xeno-sidebar-item {
+    position: relative;
+  }
+  .xeno-btn::after,
+  .xeno-icon-btn::after,
+  .xeno-chip::after,
+  .xeno-pill::after,
+  .xeno-tab::after,
+  .xeno-segmented-option::after,
+  .xeno-switch::after,
+  .xeno-checkbox::after,
+  .xeno-radio::after,
+  .xeno-sidebar-item::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+    width: 100%;
+    height: 100%;
+    min-width: var(--xeno-hit, 44px);
+    min-height: var(--xeno-hit, 44px);
+    /* Invisible, and it must never paint over the control it is extending. */
+    background: none;
+    border-radius: inherit;
+  }
+
+  /*
+   * Text fields are the exception, and they have to be: an overlay across a field would take the tap
+   * that was meant to focus it — a pseudo-element belongs to the wrapper, and clicking a div does not
+   * put a caret in the input inside it. A field cannot fake its target, so it earns one for real.
+   */
+  .xeno-input,
+  .xeno-textarea {
+    min-height: var(--xeno-hit, 44px);
+  }
+}

package/src/status/progress-bar.css

@@ -0,0 +1,88 @@
+/*
+ * ProgressBar — a determinate progress meter. A flat track (`--xeno-control`, `radius-sm`, ~4px tall)
+ * holds a fill (`--xeno-text`) whose width is the clamped value (0..1) as a percentage. An optional
+ * header row carries the label + a tabular percent readout; it is `aria-hidden` because the track
+ * (`role="progressbar"`) already announces name + value. Rounded squares, monochrome shell, theme
+ * tokens only — no literal colours.
+ */
+.xeno-progressbar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+/* label + percent readout above the track */
+.xeno-progressbar-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--xeno-muted);
+}
+.xeno-progressbar-value {
+  font-variant-numeric: tabular-nums;
+  color: var(--xeno-text);
+}
+
+/* The track IS the progressbar element.
+ *
+ * A radius only reads as a CORNER while it stays well under half the smaller dimension; at half it is
+ * a semicircle and the bar is a capsule, whatever the token was called. `--xeno-radius-sm` (5px) on a
+ * 4px bar was 125% of its own height — as round as a rounded shape can get.
+ *
+ * The fix is height, not a smaller number: 6px with `--xeno-radius-hair` puts it at 25%, the same
+ * ratio as the scrollbar thumb, and the corner is actually visible at that size. Squeezing the radius
+ * instead would have meant a sub-token literal for a bar too thin to show it anyway. */
+.xeno-progressbar-track {
+  display: block;
+  width: 100%;
+  height: 6px;
+  background: var(--xeno-control);
+  border-radius: var(--xeno-radius-hair);
+  overflow: hidden;
+}
+
+.xeno-progressbar-fill {
+  display: block;
+  height: 100%;
+  min-width: 0;
+  background: var(--xeno-text);
+  border-radius: inherit;
+  transition: width var(--xeno-dur) var(--xeno-ease);
+}
+
+/* ── Indeterminate ────────────────────────────────────────────────────────────────────
+ * Work is happening; how much is left is not known. A short segment sweeps the track end to end,
+ * because that is the one motion that says "running" without also claiming a position — a bar that
+ * grows says something about progress whether or not it means to.
+ *
+ * The sweep is deliberately not symmetric: it enters at speed, slows across the middle where the eye
+ * can read it, then leaves. `translate` on a fixed-width segment, so nothing is laid out per frame.
+ * The track already clips (`overflow: hidden`), so the segment simply runs off both ends. */
+.xeno-progressbar-track[data-state='indeterminate'] .xeno-progressbar-fill {
+  width: 34%;
+  transition: none;
+  animation: xeno-progress-sweep 1400ms var(--xeno-ease-stagger, cubic-bezier(0.22, 0.7, 0.2, 1))
+    infinite;
+}
+@keyframes xeno-progress-sweep {
+  from { translate: -110% 0; }
+  to { translate: 330% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-progressbar-fill {
+    transition: none;
+  }
+  /* A perpetual sweep is exactly what reduced-motion is asking not to see. The bar still says "busy"
+     — it just says it by sitting there at a partial width instead of running. */
+  .xeno-progressbar-track[data-state='indeterminate'] .xeno-progressbar-fill {
+    animation: none;
+    width: 100%;
+    opacity: 0.45;
+  }
+}

package/src/status/spinner.css

@@ -0,0 +1,33 @@
+/*
+ * Spinner — an indeterminate loader. A small rounded SQUARE outline (never a circle): all four edges
+ * sit in `--xeno-muted` as the track and the top edge burns to `--xeno-text` as the bright leading
+ * edge, the whole square rotating. Size + stroke arrive as inline vars (`--xeno-spinner-size`/
+ * `--xeno-spinner-stroke`) set by the component from `size`, so the metrics never drift from the data.
+ * Motion is gated behind `prefers-reduced-motion: no-preference`. Monochrome shell, theme tokens only.
+ */
+.xeno-spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--xeno-spinner-size, 16px);
+  height: var(--xeno-spinner-size, 16px);
+  /* Track and leading edge are named, and default to the two inks. A consumer that needs the loader
+     to belong to something coloured — a status row for one live activity, say — can say so here
+     instead of reassigning `--xeno-text` on the element, which is the whole app's ink and means
+     something else. Omit them and nothing changes. */
+  border: var(--xeno-spinner-stroke, 2px) solid var(--xeno-spinner-track, var(--xeno-muted));
+  border-top-color: var(--xeno-spinner-edge, var(--xeno-text));
+  border-radius: var(--xeno-radius-xs);
+  vertical-align: middle;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-spinner {
+    animation: xeno-spinner-rot 0.7s linear infinite;
+  }
+}
+
+@keyframes xeno-spinner-rot {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/status/statusindicator.css

@@ -0,0 +1,65 @@
+/*
+ * StatusIndicator — an inline square mark + label.
+ *
+ * CSS-first: the mark's paint is driven by `data-tone`. The mark is a rounded SQUARE (radius-xs),
+ * never a circle. `neutral`/`active` stay monochrome (theme greys); `success` colours from the injected
+ * `--xeno-status-tone` var (set from the status token by the renderer); `danger` uses `--xeno-danger`.
+ * The only motion is the `active` mark's breathing, gated behind `prefers-reduced-motion: no-preference`.
+ * No literal colours here.
+ */
+
+.xeno-statusindicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--xeno-text);
+}
+
+.xeno-statusindicator-mark {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--xeno-radius-xs);
+  background: var(--xeno-muted);
+}
+
+.xeno-statusindicator[data-tone='active'] .xeno-statusindicator-mark {
+  background: var(--xeno-active);
+}
+
+.xeno-statusindicator[data-tone='success'] .xeno-statusindicator-mark {
+  background: var(--xeno-status-tone);
+}
+
+.xeno-statusindicator[data-tone='danger'] .xeno-statusindicator-mark {
+  background: var(--xeno-danger);
+}
+
+/* neutral label reads a touch dimmer; the tonal ones keep the mark as the accent */
+.xeno-statusindicator[data-tone='neutral'] .xeno-statusindicator-label {
+  color: var(--xeno-muted);
+}
+
+.xeno-statusindicator[data-tone='danger'] .xeno-statusindicator-label {
+  color: var(--xeno-danger);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes xeno-statusindicator-breathe {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(0.72);
+      opacity: 0.6;
+    }
+  }
+  .xeno-statusindicator[data-tone='active'] .xeno-statusindicator-mark {
+    animation: xeno-statusindicator-breathe 1.6s var(--xeno-ease) infinite;
+  }
+}

package/src/status/steptimeline.css

@@ -0,0 +1,137 @@
+/*
+ * StepTimeline — a vertical run of steps threaded by a hairline spine.
+ *
+ * CSS-first: paint is driven by `data-status` on each step; the size mark is a rounded SQUARE
+ * (radius-xs), never a circle. Monochrome throughout — spine + marks are greys from `xeno-theme.css`.
+ * The only motion is the `active` mark's breathing, gated behind `prefers-reduced-motion: no-preference`.
+ * No literal colours here.
+ */
+
+.xeno-steptimeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Two columns: the rail (fixed mark width) + the body. Rows stack with no gap so the spine of one
+   step reaches the mark of the next. */
+.xeno-steptimeline-step {
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  column-gap: 12px;
+}
+
+/* ── Rail (mark + spine) — decorative, aria-hidden ───────────────────────────────────── */
+.xeno-steptimeline-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* stretch to the row height so the spine's flex fill spans down to the next mark */
+}
+
+.xeno-steptimeline-mark {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  border-radius: var(--xeno-radius-xs);
+}
+
+/* pending — an outline square, not yet reached */
+.xeno-steptimeline-step[data-status='pending'] .xeno-steptimeline-mark {
+  background: transparent;
+  border: 1.5px solid var(--xeno-muted);
+}
+
+/* active — a filled square, breathing (see reduced-motion gate below) */
+.xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-mark {
+  background: var(--xeno-active);
+}
+
+/* done — filled to text colour; the check glyph inherits `--xeno-on-accent` via currentColor */
+.xeno-steptimeline-step[data-status='done'] .xeno-steptimeline-mark {
+  background: var(--xeno-text);
+  color: var(--xeno-on-accent);
+}
+
+/* the connecting spine — a 1.5px rounded border-coloured bar filling to the next mark */
+.xeno-steptimeline-spine {
+  flex: 1 1 auto;
+  width: 1.5px;
+  min-height: 12px;
+  margin: 2px 0;
+  background: var(--xeno-border);
+  border-radius: var(--xeno-radius-hair);
+}
+
+/* ── Body (label + optional time) ────────────────────────────────────────────────────── */
+.xeno-steptimeline-body {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-height: 18px;
+}
+
+/* space between steps — every step but the last pads its body so the spine has length */
+.xeno-steptimeline-step:not(:last-child) .xeno-steptimeline-body {
+  padding-bottom: 20px;
+}
+
+.xeno-steptimeline-label {
+  flex: 1 1 auto;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.3;
+  color: var(--xeno-text);
+}
+
+.xeno-steptimeline-step[data-status='pending'] .xeno-steptimeline-label {
+  color: var(--xeno-muted);
+}
+
+.xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-label {
+  font-weight: 500;
+}
+
+.xeno-steptimeline-time {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
+  color: var(--xeno-muted);
+}
+
+/* screen-reader-only status word — the visible mark is decorative */
+.xeno-steptimeline-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes xeno-steptimeline-breathe {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(0.78);
+      opacity: 0.6;
+    }
+  }
+  .xeno-steptimeline-step[data-status='active'] .xeno-steptimeline-mark {
+    animation: xeno-steptimeline-breathe 1.8s var(--xeno-ease) infinite;
+  }
+}

package/src/status/thinkingcube.css

@@ -0,0 +1,75 @@
+/*
+ * ThinkingCube — the LOCKED branded model avatar. A single rounded SQUARE that either BREATHES
+ * (thinking: one continuous rotate + scale loop) or LANDS (settled: a one-shot grow while the fill
+ * grows opaque canvas → muted). Monochrome shell: muted hairline outline, canvas/muted fill only.
+ * No circles, no coloured glow. Motion is transform/opacity + background-color; a reduced-motion
+ * override stills the spin and leaves `settled` as a static filled square.
+ */
+
+.xeno-cube {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--xeno-cube-size, 24px);
+  height: var(--xeno-cube-size, 24px);
+  line-height: 0;
+  flex: none;
+}
+
+.xeno-cube-body {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid var(--xeno-muted);
+  border-radius: var(--xeno-radius-xs);
+  background-color: var(--xeno-canvas);
+  transform-origin: center;
+  will-change: transform, background-color;
+}
+
+/* thinking — ONE continuous loop: rotate 0→360° while the scale breathes 1 → .52 → 1. */
+.xeno-cube[data-state='thinking'] .xeno-cube-body {
+  background-color: var(--xeno-canvas);
+  animation: xeno-cube-life 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+/* settled — runs ONCE: grow .8 → 1.14 → 1 while the SAME square fills canvas → muted, then holds. */
+.xeno-cube[data-state='settled'] .xeno-cube-body {
+  background-color: var(--xeno-muted);
+  animation: xeno-cube-settle 0.52s var(--xeno-ease) both;
+}
+
+@keyframes xeno-cube-life {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.52);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes xeno-cube-settle {
+  0% {
+    transform: scale(0.8);
+    background-color: var(--xeno-canvas);
+  }
+  60% {
+    transform: scale(1.14);
+  }
+  100% {
+    transform: scale(1);
+    background-color: var(--xeno-muted);
+  }
+}
+
+/* Reduced motion: no spin, no grow. `settled` still rests as its filled muted square (base rule above);
+   `thinking` rests as a still, muted-outlined canvas square. */
+@media (prefers-reduced-motion: reduce) {
+  .xeno-cube[data-state='thinking'] .xeno-cube-body,
+  .xeno-cube[data-state='settled'] .xeno-cube-body {
+    animation: none;
+  }
+}

package/src/xeno-element.css

@@ -0,0 +1,60 @@
+/*
+ * Base presentation for a XENO element. CSS-FIRST, 0 kb JS: an element's discrete state lives in
+ * `data-<axis>` attributes on the root, and this stylesheet is where any transition attaches — never a
+ * JavaScript animation runtime (SPEC §6, so elements survive sandboxed iframes and web export).
+ *
+ * Geometry variant swaps (bookmark off↔on) are re-rendered from `state` by the renderer. Channel
+ * transitions declared as BINDINGS (opacity/scale/fill over ms) land here as they are added; the axis
+ * attributes below are the selectors they will hang off. `currentColor` keeps every glyph monochrome
+ * and inheriting the surrounding text colour.
+ */
+
+.xeno-element {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+  color: inherit;
+}
+
+/* An element the product marks unavailable reads as dimmed everywhere, from one rule. */
+.xeno-element[data-availability='disabled'] {
+  opacity: 0.4;
+}
+.xeno-element[data-availability='busy'] {
+  cursor: progress;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-element,
+  .xeno-element * {
+    transition:
+      opacity 160ms ease,
+      transform 160ms ease,
+      fill 160ms ease,
+      stroke 160ms ease;
+  }
+}
+
+
+/* ── Morphing between geometry variants ───────────────────────────────────────────────
+ * When a declaration's active variant is interpolable with `base` — same primitive count, same kind at
+ * every index — the renderer marks the icon `data-morph="on"` and hands each path its own `d` a second
+ * time, as `--part-d`. That is all the seam needs: `d` is an animatable CSS property, a custom property
+ * changing is a computed-value change, so the swap becomes a transition and the icon draws itself from
+ * one shape into the other.
+ *
+ * Still no animation runtime. The renderer never animates; it states that an animation is possible and
+ * the stylesheet decides whether to take it — the same division the rest of this system runs on.
+ *
+ * Behind `@supports` because `d` as a CSS property is not universal. Where it is missing, the `d`
+ * ATTRIBUTE is still correct and still swapped on re-render, so the icon changes instantly instead of
+ * morphing: the worse animation, never the wrong picture. */
+@supports (d: path('M0 0')) {
+  .xeno-element[data-morph='on'] .xeno-part {
+    d: var(--part-d);
+    transition: d var(--xeno-dur-morph, 320ms) var(--xeno-ease-morph, cubic-bezier(0.22, 0.7, 0.2, 1));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .xeno-element[data-morph='on'] .xeno-part { transition: none; }
+  }
+}