@tensor_1/tokens 2.55.3 → 2.57.0

package/styles/components/file-kit.css

@@ -0,0 +1,155 @@
+/* uix file kit (2.57) — FileKindIcon, FileRow, FileDrop. One hue per kind of file (--uix-file-<kind>):
+   the icon draws in it, a row's left edge carries its tint, an upload fills with it, and a drop row
+   takes the colours of what is dragged over it. Depends only on --uix-* tokens. */
+@layer uix.components {
+  /* Kind plumbing: every piece reads --file-kind*. */
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="img"] { --file-kind: var(--uix-file-img); --file-kind-soft: var(--uix-file-img-soft); --file-kind-strong: var(--uix-file-img-strong); --file-kind-edge: var(--uix-file-img-edge); --file-kind-label: var(--uix-file-img-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="doc"] { --file-kind: var(--uix-file-doc); --file-kind-soft: var(--uix-file-doc-soft); --file-kind-strong: var(--uix-file-doc-strong); --file-kind-edge: var(--uix-file-doc-edge); --file-kind-label: var(--uix-file-doc-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="sheet"] { --file-kind: var(--uix-file-sheet); --file-kind-soft: var(--uix-file-sheet-soft); --file-kind-strong: var(--uix-file-sheet-strong); --file-kind-edge: var(--uix-file-sheet-edge); --file-kind-label: var(--uix-file-sheet-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="mail"] { --file-kind: var(--uix-file-mail); --file-kind-soft: var(--uix-file-mail-soft); --file-kind-strong: var(--uix-file-mail-strong); --file-kind-edge: var(--uix-file-mail-edge); --file-kind-label: var(--uix-file-mail-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="code"] { --file-kind: var(--uix-file-code); --file-kind-soft: var(--uix-file-code-soft); --file-kind-strong: var(--uix-file-code-strong); --file-kind-edge: var(--uix-file-code-edge); --file-kind-label: var(--uix-file-code-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="log"] { --file-kind: var(--uix-file-log); --file-kind-soft: var(--uix-file-log-soft); --file-kind-strong: var(--uix-file-log-strong); --file-kind-edge: var(--uix-file-log-edge); --file-kind-label: var(--uix-file-log-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="archive"] { --file-kind: var(--uix-file-archive); --file-kind-soft: var(--uix-file-archive-soft); --file-kind-strong: var(--uix-file-archive-strong); --file-kind-edge: var(--uix-file-archive-edge); --file-kind-label: var(--uix-file-archive-label); }
+  :is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="other"] { --file-kind: var(--uix-file-other); --file-kind-soft: var(--uix-file-other-soft); --file-kind-strong: var(--uix-file-other-strong); --file-kind-edge: var(--uix-file-other-edge); --file-kind-label: var(--uix-file-other-label); }
+
+  /* A blocked file is amber and a failed upload red, in place of the kind (icon included). */
+  .uix-file-row[data-state="blocked"], .uix-file-row[data-state="blocked"] .uix-file-icon {
+    --file-kind: var(--uix-warning-text); --file-kind-soft: var(--uix-warning-bg); --file-kind-strong: var(--uix-warning-bg);
+    --file-kind-edge: color-mix(in srgb, var(--uix-warning-border) 30%, var(--uix-border)); --file-kind-label: var(--uix-warning-text);
+  }
+  .uix-file-row[data-state="failed"], .uix-file-row[data-state="failed"] .uix-file-icon {
+    --file-kind: var(--uix-danger-text); --file-kind-soft: var(--uix-danger-bg); --file-kind-strong: var(--uix-danger-bg);
+    --file-kind-edge: color-mix(in srgb, var(--uix-danger-border) 28%, var(--uix-border)); --file-kind-label: var(--uix-danger-text);
+  }
+
+  /* ── FileKindIcon: the kind's glyph in its colour, the type as a solid label on the corner ── */
+  .uix-file-icon { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--file-kind, var(--uix-file-other)); }
+  .uix-file-icon .uix-file-icon__glyph { width: 28px; height: 28px; transform: translateX(-3px); }
+  .uix-file-icon__type {
+    position: absolute; right: -4px; bottom: 3px; padding: calc(var(--uix-space-1) / 2) var(--uix-space-1);
+    border-radius: var(--uix-radius-xs); background: var(--file-kind-label, var(--uix-file-other-label)); color: var(--uix-file-label-fg);
+    font-family: var(--uix-font-sans); font-size: 7.5px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
+    box-shadow: 0 0 0 1.5px var(--uix-surface);
+  }
+  .uix-file-icon--sm { width: 30px; height: 30px; }
+  .uix-file-icon--sm .uix-file-icon__glyph { width: 25px; height: 25px; }
+  .uix-file-icon--lg { width: 52px; height: 52px; }
+  .uix-file-icon--lg .uix-file-icon__glyph { width: 42px; height: 42px; }
+  .uix-file-icon--lg .uix-file-icon__type { right: -2px; bottom: 5px; font-size: 9px; }
+
+  /* ── FileRow ── */
+  .uix-file-rows { display: grid; gap: var(--uix-space-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
+  .uix-file-row {
+    position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--uix-space-3); min-width: 0;
+    padding: var(--uix-space-2) var(--uix-space-2) var(--uix-space-2) var(--uix-space-3);
+    border: 1px solid var(--file-kind-edge); border-radius: var(--uix-radius-md);
+    background: linear-gradient(to right, var(--file-kind-soft), transparent 55%) var(--uix-surface);
+    color: var(--uix-text);
+    transition: border-color var(--uix-dur-change) var(--uix-ease-out);
+  }
+  .uix-file-row:dir(rtl) { background: linear-gradient(to left, var(--file-kind-soft), transparent 55%) var(--uix-surface); }
+  .uix-file-row--compact { gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-1) var(--uix-space-2) var(--uix-space-2); }
+  .uix-file-row > :is(.uix-file-row__icon, .uix-file-row__text, .uix-file-row__actions) { position: relative; }
+
+  /* The upload fill: the same tint, soft to strong, scaled to the real progress, with a thin leading edge. */
+  .uix-file-row__fill {
+    position: absolute; inset: 0; pointer-events: none; transform-origin: left center; transform: scaleX(var(--file-progress, 0));
+    background: linear-gradient(to right, var(--file-kind-soft), var(--file-kind-strong));
+    transition: transform var(--uix-dur-slow) linear, opacity var(--uix-dur-change) var(--uix-ease-out);
+  }
+  .uix-file-row__edge {
+    position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none;
+    border-right: 2px solid color-mix(in srgb, var(--file-kind) 55%, transparent);
+    transform: translateX(calc((var(--file-progress, 0) - 1) * 100%));
+    transition: transform var(--uix-dur-slow) linear;
+  }
+  .uix-file-row:dir(rtl) .uix-file-row__fill { transform-origin: right center; background: linear-gradient(to left, var(--file-kind-soft), var(--file-kind-strong)); }
+  .uix-file-row:dir(rtl) .uix-file-row__edge { left: auto; right: 0; border-right: 0; border-left: 2px solid color-mix(in srgb, var(--file-kind) 55%, transparent); transform: translateX(calc((1 - var(--file-progress, 0)) * 100%)); }
+  /* Done: the fill completes, then fades back to the resting edge. */
+  .uix-file-row[data-state="done"] .uix-file-row__fill { opacity: 0; }
+
+  .uix-file-row__icon { flex: none; display: grid; }
+  /* The check draws at the icon's corner, holds, and leaves. */
+  .uix-file-row__check {
+    position: absolute; right: -4px; top: -3px; width: 16px; height: 16px; display: grid; place-items: center;
+    border-radius: var(--uix-radius-pill); background: var(--uix-surface);
+    animation: uix-file-check-in var(--uix-dur-slower) var(--uix-ease-out) both, uix-file-check-out var(--uix-dur-exit) var(--uix-ease-out) calc(var(--uix-dur-change) + var(--uix-hold-result)) forwards;
+  }
+  .uix-file-row__check svg { width: 12px; height: 12px; fill: none; stroke: var(--uix-success-solid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+  .uix-file-row__check path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: uix-file-check-draw var(--uix-dur-slower) var(--uix-ease-out) var(--uix-dur-fast) both; }
+
+  /* The kit's title rhythm (HAR-1577): a name and its secondary line are --uix-space-1 apart. */
+  .uix-file-row__text { flex: 1; min-width: 0; display: grid; gap: var(--uix-space-1); }
+  .uix-file-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--uix-text-body); font-weight: 600; }
+  .uix-file-row__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--uix-text-meta); color: var(--uix-text-muted); font-variant-numeric: tabular-nums; }
+  .uix-file-row__kind { color: var(--file-kind-label); font-weight: 600; }
+  /* A refusal is read whole: it wraps instead of ending in an ellipsis. */
+  .uix-file-row:is([data-state="blocked"], [data-state="failed"]) .uix-file-row__meta { white-space: normal; overflow-wrap: anywhere; }
+  /* In a narrow panel its button moves under the words rather than squeezing them to a column. */
+  .uix-file-row:is([data-state="blocked"], [data-state="failed"]) { flex-wrap: wrap; row-gap: var(--uix-space-2); }
+  .uix-file-row:is([data-state="blocked"], [data-state="failed"]) .uix-file-row__text { flex: 1 1 12rem; }
+  .uix-file-row:is([data-state="blocked"], [data-state="failed"]) .uix-file-row__actions { margin-inline-start: auto; }
+  .uix-file-row[data-state="blocked"] .uix-file-row__meta { color: var(--uix-warning-text); }
+  .uix-file-row[data-state="failed"] .uix-file-row__meta { color: var(--uix-danger-text); }
+  .uix-file-row--compact .uix-file-row__name { font-size: calc(var(--uix-text-body) * .9643); }
+
+  .uix-file-row__actions { flex: none; display: flex; align-items: center; gap: var(--uix-space-1); }
+  /* With a fine pointer the resting actions wait for hover or focus; touch always shows them. */
+  @media (hover: hover) and (pointer: fine) {
+    .uix-file-row__actions > :not(.uix-file-row__keep) { opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+    .uix-file-row:hover .uix-file-row__actions > *,
+    .uix-file-row:focus-within .uix-file-row__actions > *,
+    .uix-file-row__actions > [aria-expanded="true"] { opacity: 1; }
+  }
+
+  /* ── FileDrop (slim) ── */
+  .uix-file-drop {
+    position: relative; display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0;
+    padding: var(--uix-space-2) var(--uix-space-3);
+    border: 1.5px dashed var(--uix-border-strong); border-radius: var(--uix-radius-md);
+    background: var(--uix-surface); color: var(--uix-text-muted); font-size: var(--uix-text-meta); cursor: pointer;
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-file-drop:not([data-disabled]):hover { border-color: var(--uix-text-muted); }
+  }
+  .uix-file-drop > :not(.uix-file-drop__aura) { position: relative; }
+  .uix-file-drop__aura { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--uix-dur-slow) var(--uix-ease-out); }
+  .uix-file-drop[data-dragging] { border-color: color-mix(in srgb, var(--file-kind) 55%, var(--uix-border)); color: var(--uix-text); }
+  .uix-file-drop[data-dragging] .uix-file-drop__aura { opacity: 1; }
+  .uix-file-drop__icon { color: var(--uix-text-muted); }
+  .uix-file-drop__line { flex: 1; min-width: 0; display: grid; }
+  .uix-file-drop__line > * { grid-area: 1 / 1; min-width: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  /* The summary sits over the sentence in the same cell; it must never take the button's clicks. */
+  .uix-file-drop__summary { pointer-events: none; opacity: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--uix-text); }
+  .uix-file-drop[data-dragging] .uix-file-drop__text { opacity: 0; }
+  .uix-file-drop[data-dragging] .uix-file-drop__summary { opacity: 1; }
+  .uix-file-drop__choose {
+    margin: 0; padding: 0; border: 0; border-radius: var(--uix-radius-xs); background: none; font: inherit; font-weight: 600; color: var(--uix-link); cursor: pointer;
+    text-decoration: underline; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--uix-link) 40%, transparent);
+  }
+  .uix-file-drop__choose:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-file-drop[data-disabled] { cursor: not-allowed; opacity: .6; }
+  .uix-file-drop__choose:disabled { cursor: not-allowed; }
+
+  /* Forced colours drop the label's fill and ring: an outline keeps it a label over the glyph. */
+  @media (forced-colors: active) {
+    .uix-file-icon__type { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
+    .uix-file-row:not([data-state="done"]) .uix-file-row__fill { background: Highlight; opacity: .35; }
+  }
+
+  /* Reduced motion keeps only the fades: the fill jumps (the global policy drops transform), and the check fades in and out instead of growing and drawing. */
+  @media (prefers-reduced-motion: reduce) {
+    .uix-file-row__check { animation: uix-file-check-fade calc(var(--uix-dur-change) + var(--uix-hold-result) + var(--uix-dur-exit)) linear both !important; }
+    .uix-file-row__check path { animation: none !important; }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-file-row__check { animation: uix-file-check-fade calc(var(--uix-dur-change) + var(--uix-hold-result) + var(--uix-dur-exit)) linear both !important; }
+    :root[data-motion="reduce"] .uix-file-row__check path { animation: none !important; }
+  }
+}
+
+@keyframes uix-file-check-in { from { opacity: 0; transform: scale(.6); } }
+@keyframes uix-file-check-draw { from { stroke-dashoffset: 1; } }
+@keyframes uix-file-check-out { to { opacity: 0; } }
+@keyframes uix-file-check-fade { 0% { opacity: 0; } 12% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }

package/styles/components/flow.css

@@ -118,13 +118,12 @@
   .uix-flow__edge-label { fill: var(--uix-text-muted); font-family: var(--uix-font-sans); font-size: var(--uix-text-eyebrow); }
   .uix-flow__edge-label--loop { fill: var(--uix-accent); }
 
-  /* hovering/focusing a diagram sets its edges "flowing" (marching dashes) to read direction */
+  /* the edges never march (2.57, Rules for apps: no decorative loops); the arrowheads give direction.
+     Hovering or focusing a diagram only thickens its edges, at once (no transition). */
   @media (hover: hover) and (pointer: fine) {
-    .uix-flow:hover .uix-flow__edge,
-    .uix-flow:focus-within .uix-flow__edge {
-      stroke-dasharray: 5 4; animation: uix-flow-march var(--uix-dur-slow) linear infinite;
-    }
+    .uix-flow:hover .uix-flow__edge { stroke-width: 2; }
   }
+  .uix-flow:focus-within .uix-flow__edge { stroke-width: 2; }
 
   /* ---- linear: flex row of nodes + pure-CSS connectors (no SVG) ---- */
   .uix-flow--linear .uix-flow__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--uix-space-1); }
@@ -206,13 +205,10 @@
 
   /* ============================================================ motion */
   @keyframes uix-flow-spin  { to { transform: rotate(360deg); } }
-  @keyframes uix-flow-march { to { stroke-dashoffset: -18; } }
 
   @media (prefers-reduced-motion: reduce) {
     /* a running node keeps showing it runs: the icon breathes instead of turning */
     .uix-node--running .uix-node__icon svg { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
-    .uix-flow:hover .uix-flow__edge,
-    .uix-flow:focus-within .uix-flow__edge { animation: none; }
   }
 
   @media (max-width: 720px) {

package/styles/components/heartbeat.css

@@ -1,25 +1,12 @@
-/* uix heartbeat / live status indicator — a pulsing ping. Under reduced motion the ping (it grows) goes
-   and the dot itself breathes, so "live" is still visible. */
+/* uix heartbeat / live status indicator — a still dot in the state's colour (2.57, Rules for apps:
+   no pulsing or looping on status). "Live" is said by the words beside it (LiveIndicator), never by
+   motion. The ring span stays in the markup for compatibility and is not drawn. */
 @layer uix.components {
   .uix-heartbeat { position: relative; display: inline-grid; place-items: center; width: 8px; height: 8px; flex: none; }
   .uix-heartbeat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-success); z-index: var(--uix-z-raised); }
-  .uix-heartbeat__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--uix-success); animation: uix-ping var(--uix-loop-ping) var(--uix-ease-out) infinite; }
-  @keyframes uix-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
-  .uix-heartbeat--warning .uix-heartbeat__dot, .uix-heartbeat--warning .uix-heartbeat__ping { background: var(--uix-warning); }
-  .uix-heartbeat--danger  .uix-heartbeat__dot, .uix-heartbeat--danger  .uix-heartbeat__ping { background: var(--uix-danger); }
+  .uix-heartbeat__ping { display: none; }
+  .uix-heartbeat--warning .uix-heartbeat__dot { background: var(--uix-warning); }
+  .uix-heartbeat--danger  .uix-heartbeat__dot { background: var(--uix-danger); }
   .uix-heartbeat--idle .uix-heartbeat__dot { background: var(--uix-text-muted); }
-  .uix-heartbeat--idle .uix-heartbeat__ping { display: none; }
-  @media (prefers-reduced-motion: reduce) {
-    .uix-heartbeat__ping { display: none; }
-    .uix-heartbeat:not(.uix-heartbeat--idle) .uix-heartbeat__dot { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
-  }
   .uix-live { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text-hushed); }
 }
-
-/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same rule */
-@layer uix.components {
-  @media (prefers-reduced-motion: no-preference) {
-    :root[data-motion="reduce"] .uix-heartbeat__ping { display: none; }
-    :root[data-motion="reduce"] .uix-heartbeat:not(.uix-heartbeat--idle) .uix-heartbeat__dot { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
-  }
-}

package/styles/components/meter.css

@@ -15,4 +15,16 @@
      --uix-accent-text, not --uix-accent: the raw accent of a bright brand is 2.62:1 on the track. */
   .uix-meter__fill[data-tone="neutral"]   { background: var(--uix-text-muted); }
   .uix-meter__fill[data-tone="accent"]    { background: var(--uix-accent-text); }
+
+  /* A target (calm kit 2.56): a thin ink mark across the track where the goal is ("Ziel 95 %"),
+     so "under target" reads from the bar itself. The track stops clipping so the mark can stand
+     a little proud of it; the fill keeps its rounded clip in __clip. --target is 0-1. */
+  .uix-meter--target { position: relative; overflow: visible; }
+  .uix-meter__clip { height: 100%; border-radius: inherit; overflow: hidden; }
+  .uix-meter__target {
+    position: absolute; top: calc(-1 * var(--uix-space-1)); bottom: calc(-1 * var(--uix-space-1));
+    inset-inline-start: calc(var(--target, 1) * 100%); width: 2px;
+    border-radius: var(--uix-radius-xs); background: var(--uix-text-hushed);
+  }
+  @media (forced-colors: active) { .uix-meter__target { background: CanvasText; } }
 }

package/styles/components/status-pill.css

@@ -11,8 +11,11 @@
   .uix-pill--info    { --tone-bg: var(--uix-info-bg);    --tone-fg: var(--uix-info-text);    --tone-dot: var(--uix-info); }
   .uix-pill--warning { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
   .uix-pill--danger  { --tone-bg: var(--uix-danger-bg);  --tone-fg: var(--uix-danger-text);  --tone-dot: var(--uix-danger); }
-  /* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
-  .uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
+  /* critical (calm kit 2.56): no longer a solid red fill. The danger tint with the danger words
+     in semibold and the danger dot, so the one thing that is broken now reads apart from a plain
+     danger pill without shouting. A solid red fill is kept for the destructive button only. */
+  .uix-pill--critical { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger-solid); font-weight: 600; }
+  /* muted = a quiet, chrome-less label */
   .uix-pill--muted    { --tone-bg: transparent;       --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
   /* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
   .uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
@@ -65,3 +68,32 @@
   /* the dot treatment has no box at any size: its label lines up with the cell's other text */
   .uix-pill--dot:is(.uix-pill--sm, .uix-pill--lg) { padding-inline: 0; }
 }
+
+/* StatusDot (calm kit 2.56): a dot and a word, no box, for the signal ladder on a glance page.
+   neutral is ink, info the accent, warning amber and critical red: the word carries the meaning,
+   the dot is the glance. Word and dot wear the tone's TEXT role: AA on the surface, the app
+   background and the tone's own tint in both modes, so the dot clears 3:1 wherever the word can
+   sit (the SOLID role measured 2.78:1 for success and 2.91:1 for warning on their light tints).
+   Never pulses. */
+@layer uix.components {
+  .uix-status-dot {
+    display: inline-flex; align-items: baseline; gap: var(--uix-space-2);
+    font-size: var(--uix-text-meta); font-weight: 600; line-height: 1.4; color: var(--tone-fg, var(--uix-text-hushed));
+  }
+  .uix-status-dot::before {
+    content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%;
+    background: var(--tone-dot, var(--uix-text-hushed));
+  }
+  .uix-status-dot--neutral  { --tone-fg: var(--uix-text-hushed);  --tone-dot: var(--uix-text-hushed); font-weight: 500; }
+  .uix-status-dot--info     { --tone-fg: var(--uix-info-text);    --tone-dot: var(--uix-info-text); }
+  .uix-status-dot--success  { --tone-fg: var(--uix-success-text); --tone-dot: var(--uix-success-text); }
+  .uix-status-dot--warning  { --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning-text); }
+  .uix-status-dot--critical { --tone-fg: var(--uix-danger-text);  --tone-dot: var(--uix-danger-text); }
+  /* quiet: the word in ink, only the dot keeps the hue (a list of services, a legend line) */
+  .uix-status-dot--quiet { color: var(--uix-text-hushed); font-weight: 500; }
+  .uix-status-dot--sm { gap: var(--uix-space-1); font-size: var(--uix-text-eyebrow); }
+  .uix-status-dot--sm::before { width: 6px; height: 6px; }
+  @media (forced-colors: active) {
+    .uix-status-dot::before { background: CanvasText; }
+  }
+}

package/tokens/base/color.json

@@ -25,24 +25,24 @@
   "ring":         { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
   "brand-muted":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 12%, transparent)", "$description": "Runtime: color-mix of the live accent." },
 
-  "success":    { "$type": "color", "$value": "#047857" },
+  "success":    { "$type": "color", "$value": "#2B7752", "$description": "Success role, light: the TEXT colour (--uix-success-text aliases it) and the fill of a success button with white --uix-success-fg (5.4:1). Calm kit (2.56): chroma 0.096, was #047857. 4.8:1 on its own tint." },
   "success-fg": { "$type": "color", "$value": "#FFFFFF" },
-  "success-bg": { "$type": "color", "$value": "#D0FAE5" },
+  "success-bg": { "$type": "color", "$value": "#E8F4ED" },
   "success-text": { "$type": "color", "$value": "var(--uix-success)", "$description": "Success-toned TEXT (pill, alert icon, stat trend, SLA ok). Light aliases --uix-success (#047857, already AA on the pale tint), so a theme's light success override still reaches text; dark sets its own value in the calibrated status-text band (HAR-1562). Paint text with this, not with --uix-success, which is the solid/dot role on dark." },
-  "warning":      { "$type": "color", "$value": "#F99C00" },
+  "warning":      { "$type": "color", "$value": "#D4A03A", "$description": "Warning FILL, light (a warning button or banner bar with the dark --uix-warning-fg, 7.4:1). Calm kit (2.56): a softer amber, was #F99C00. Text is --uix-warning-text; a dot is --uix-warning-solid." },
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
-  "warning-bg":   { "$type": "color", "$value": "#FEF3D6" },
-  "warning-text": { "$type": "color", "$value": "#92400E", "$description": "Warning-toned TEXT, legible on the faint --uix-warning-bg in light mode — the bright --uix-warning (#F99C00) fails contrast on pale yellow, so the foreground is a hand-darkened amber. Dark mode overrides to track --uix-warning. Used by status-pill --warning." },
-  "warning-border": { "$type": "color", "$value": "#D97706", "$description": "Warning-toned BORDER for an outlined container on a neutral surface (stat tile --warning). The bright --uix-warning is 2.1:1 on white; this amber clears the 3:1 non-text minimum on --uix-surface and --uix-bg-app." },
-  "info":       { "$type": "color", "$value": "#1447E6" },
+  "warning-bg":   { "$type": "color", "$value": "#FAF2E1" },
+  "warning-text": { "$type": "color", "$value": "#8F6213", "$description": "Warning-toned TEXT, light: 5.4:1 on --uix-surface and 4.8:1 on --uix-warning-bg (calm kit 2.56, was #92400E). Dark mode overrides to track --uix-warning. Used by status-pill --warning." },
+  "warning-border": { "$type": "color", "$value": "#B8862C", "$description": "Warning-toned BORDER for an outlined container on a neutral surface (stat tile --warning): 3.2:1 on --uix-surface, so it clears the 3:1 non-text minimum (calm kit 2.56, was #D97706)." },
+  "info":       { "$type": "color", "$value": "#3A5BD0", "$description": "Info role, light: the TEXT colour on --uix-info-bg (5.1:1) and the fill of an info badge with white --uix-info-fg (5.9:1). Calm kit (2.56): no longer the brand blue #1447E6." },
   "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
-  "info-bg":    { "$type": "color", "$value": "#E3EBFF" },
-  "info-text":  { "$type": "color", "$value": "#1447E6", "$description": "Info-toned TEXT, legible on --uix-info-bg and dark surfaces. Light = --uix-info (already AA on the pale tint); dark brightens it (the deep --uix-info #2563EB fails as text on the dark tint). Used by status-pill/alert/node --info. See --uix-warning-text for the same TEXT-vs-SOLID split." },
-  "danger":     { "$type": "color", "$value": "#E40014" },
+  "info-bg":    { "$type": "color", "$value": "#ECF0FC" },
+  "info-text":  { "$type": "color", "$value": "#3A5BD0", "$description": "Info-toned TEXT, legible on --uix-info-bg and the surfaces (5.9:1 on white). Light = --uix-info; dark brightens it. Used by status-pill/alert/node --info." },
+  "danger":     { "$type": "color", "$value": "#B8433C", "$description": "Danger FILL, light: the destructive button and the solid critical pill (treatment=\"solid\") with white --uix-danger-fg, 5.4:1. Calm kit (2.56): chroma 0.15, was the saturated #E40014 (C 0.24). Text is --uix-danger-text; a dot is --uix-danger-solid." },
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
-  "danger-bg":  { "$type": "color", "$value": "#FFE4E6" },
-  "danger-border": { "$type": "color", "$value": "#E40014", "$description": "Danger-toned BORDER for an outlined container on a neutral surface (stat tile --danger). 4.9:1 on white, so it clears the 3:1 non-text minimum; a separate role so a theme can soften the outline without touching the solid --uix-danger." },
-  "danger-text": { "$type": "color", "$value": "#C20012", "$description": "Danger-toned TEXT, legible on --uix-danger-bg (the bright --uix-danger #E40014 is only 4.05:1 on #FFE4E6). A hand-darkened red for text; --uix-danger stays the SOLID role (danger button bg, critical pill, dots). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger." },
+  "danger-bg":  { "$type": "color", "$value": "#FBEDEB" },
+  "danger-border": { "$type": "color", "$value": "#D65A50", "$description": "Danger-toned BORDER for an outlined container on a neutral surface (stat tile --danger): 3.9:1 on white, so it clears the 3:1 non-text minimum. Calm kit (2.56), was #E40014." },
+  "danger-text": { "$type": "color", "$value": "#B9423C", "$description": "Danger-toned TEXT: 5.4:1 on --uix-surface and 4.7:1 on --uix-danger-bg (calm kit 2.56, was #C20012). --uix-danger stays the FILL role (destructive button, solid critical pill). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger and StatusDot critical." },
   "amber":      { "$type": "color", "$value": "#C98A1E", "$description": "SEV-3 / medium-severity tone — the third tier of the severity ramp (danger = SEV-1, warning = SEV-2, amber = SEV-3). A muted ochre, deliberately distinct from the brighter --uix-warning so the three tiers read apart." },
   "amber-text": { "$type": "color", "$value": "#795006", "$description": "Amber-toned TEXT, legible on a faint amber tint and on dark surfaces (the SEV-3 ochre is too light as text on pale fills). Dark mode brightens it to track --uix-amber. Used by severity-3 badges." },
   "amber-bg":   { "$type": "color", "$value": "#FEFCE8", "$description": "Amber-toned wash for SEV-3 pill backgrounds. Completes the amber ramp (amber / amber-text / amber-bg) to match the depth of the warning/danger/info ramps." },
@@ -52,10 +52,10 @@
   "attention-text":  { "$type": "color", "$value": "#9A3412", "$description": "Attention-toned TEXT legible on --uix-attention-bg (#FFEDD5). Dark mode brightens to track --uix-attention." },
   "attention-solid": { "$type": "color", "$value": "#EA580C", "$description": "SOLID role for attention fills/dots/pulses (see success-solid)." },
 
-  "overdue":       { "$type": "color", "$value": "#DC2626", "$description": "Time-pressure semantic — 'breached / past due'. Same hue family as danger but a SEPARATE role so products retheme breach independently of validation error. Covers SLA breach and hard-deadline misses." },
-  "overdue-bg":    { "$type": "color", "$value": "#FEE2E2" },
-  "overdue-text":  { "$type": "color", "$value": "#991B1B", "$description": "Overdue-toned TEXT legible on --uix-overdue-bg (#FEE2E2). Dark mode brightens." },
-  "overdue-solid": { "$type": "color", "$value": "#EF4444", "$description": "SOLID role for overdue fills/dots (see success-solid)." },
+  "overdue":       { "$type": "color", "$value": "#B8433C", "$description": "Time-pressure semantic, 'breached / past due'. The danger family as a SEPARATE role so products retheme breach independently of validation error. Calm kit (2.56): follows the softened danger values, was #DC2626." },
+  "overdue-bg":    { "$type": "color", "$value": "#FBEDEB" },
+  "overdue-text":  { "$type": "color", "$value": "#B9423C", "$description": "Overdue-toned TEXT legible on --uix-overdue-bg (4.7:1). Calm kit (2.56), was #991B1B. Dark mode brightens." },
+  "overdue-solid": { "$type": "color", "$value": "#D65A50", "$description": "SOLID role for overdue fills/dots: 3.9:1 on white (calm kit 2.56, was #EF4444)." },
 
   "sev-4":      { "$type": "color", "$value": "var(--uix-info)",       "$description": "SEV-4 alias → info tone. Full severity ramp: SEV-1=danger, SEV-2=warning, SEV-3=amber, SEV-4=info, SEV-5=neutral. var() reference — no dark override needed." },
   "sev-4-bg":   { "$type": "color", "$value": "var(--uix-info-bg)" },
@@ -64,35 +64,79 @@
   "sev-5-bg":   { "$type": "color", "$value": "var(--uix-bg-active)" },
   "sev-5-text": { "$type": "color", "$value": "var(--uix-text-hushed)" },
 
-  "success-solid": { "$type": "color", "$value": "#10B981", "$description": "SOLID status role — the vivid fill/dot/pulse color, distinct from the legible TEXT role (--uix-success). Products override per brand." },
-  "warning-solid": { "$type": "color", "$value": "#F59E0B", "$description": "SOLID status role (see success-solid)." },
-  "info-solid":    { "$type": "color", "$value": "#2563EB", "$description": "SOLID status role (see success-solid)." },
-  "danger-solid":  { "$type": "color", "$value": "#EF4444", "$description": "SOLID status role (see success-solid)." },
+  "success-solid": { "$type": "color", "$value": "#3FA373", "$description": "SOLID status role: the dot/fill/pulse colour, 3.1:1 on white (calm kit 2.56, was #10B981). Distinct from the legible TEXT role (--uix-success). Products override per brand." },
+  "warning-solid": { "$type": "color", "$value": "#B8862C", "$description": "SOLID status role (see success-solid): 3.2:1 on white (calm kit 2.56, was #F59E0B, 2.1:1)." },
+  "info-solid":    { "$type": "color", "$value": "#5B7BE3", "$description": "SOLID status role (see success-solid): 3.9:1 on white (calm kit 2.56, was #2563EB)." },
+  "danger-solid":  { "$type": "color", "$value": "#D65A50", "$description": "SOLID status role: the critical DOT (StatusDot, the dot pill), 3.9:1 on white. Calm kit (2.56): was #EF4444. Not a fill for text; that is --uix-danger." },
 
   "neutral-solid":  { "$type": "color", "$value": "#8A8A8A", "$description": "NEUTRAL status family (HAR-1562): the default, non-alarming status tone (open, scheduled, draft, in progress). Solid = the dot/fill, 3:1 non-text on white. Dark overrides." },
   "neutral-text":   { "$type": "color", "$value": "var(--uix-text-hushed)", "$description": "Neutral status TEXT, alias of --uix-text-hushed. var() reference, no dark override needed." },
   "neutral-bg":     { "$type": "color", "$value": "var(--uix-bg-active)", "$description": "Neutral status tint, alias of --uix-bg-active." },
   "neutral-border": { "$type": "color", "$value": "var(--uix-border-strong)", "$description": "Neutral status outline, alias of --uix-border-strong." },
 
-  "chart-1": { "$type": "color", "$value": "#0455E6", "$description": "Categorical palette, light. Fixed hue order (blue, cyan, green, ochre, orange, crimson, violet, pink), re-stepped so the dataviz validator passes on --uix-surface and --uix-bg-app: L 0.43-0.77, C >= 0.10, adjacent CVD dE >= 8, normal-vision dE >= 15, >= 3:1 (HAR-1552)." },
-  "chart-2": { "$type": "color", "$value": "#249BC8" },
-  "chart-3": { "$type": "color", "$value": "#06A543" },
-  "chart-4": { "$type": "color", "$value": "#905709" },
-  "chart-5": { "$type": "color", "$value": "#F25C1B" },
-  "chart-6": { "$type": "color", "$value": "#B00825" },
-  "chart-7": { "$type": "color", "$value": "#8143E6" },
-  "chart-8": { "$type": "color", "$value": "#DB2579" },
+  "chart-1": { "$type": "color", "$value": "#0455E6", "$description": "Categorical palette v2 (calm kit 2.56), light. The first slot is THE series colour (--uix-chart-series) and the brand blue (#0455E6, unchanged from 2.55); 2 teal and 3 violet are the three quiet category hues; 4-8 extend it for report charts. No red slot (red never encodes a series) and no amber slot (amber is reserved for attention). Validated on --uix-surface and --uix-bg-app: L 0.43-0.77, C >= 0.10, adjacent CVD dE >= 8, normal-vision dE >= 15, >= 3:1 (chart-palette.test.mjs)." },
+  "chart-2": { "$type": "color", "$value": "#1F978A" },
+  "chart-3": { "$type": "color", "$value": "#8C72D6" },
+  "chart-4": { "$type": "color", "$value": "#4C9A5A" },
+  "chart-5": { "$type": "color", "$value": "#B45E9A" },
+  "chart-6": { "$type": "color", "$value": "#7F8A2E" },
+  "chart-7": { "$type": "color", "$value": "#2F8FC2" },
+  "chart-8": { "$type": "color", "$value": "#5E7D3A" },
+  "chart-series": { "$type": "color", "$value": "var(--uix-chart-1)", "$description": "THE series colour of a glance chart (calm kit 2.56): one series in blue, any second one in --uix-chart-comparison grey. Alias of --uix-chart-1, so a theme that re-steps the palette moves it too." },
+  "chart-series-soft": { "$type": "color", "$value": "rgba(4,85,230,.14)", "$description": "The series colour as a faint wash: an area under a glance line, a highlighted bucket. Dark overrides." },
   "chart-neutral": { "$type": "color", "$value": "#64748B" },
   "chart-grid": { "$type": "color", "$value": "#EDEDED", "$description": "Chart gridline: a SOLID 1px hairline, recessive. Dashes are reserved for projections and thresholds (HAR-1552)." },
   "chart-axis": { "$type": "color", "$value": "#D4D4D4", "$description": "Chart axis line (labels use --uix-text-muted)." },
   "chart-reference": { "$type": "color", "$value": "#525252", "$description": "Neutral ink for target, budget and baseline reference lines: 7.8:1 on --uix-surface. Not a status colour." },
   "chart-zone-warning": { "$type": "color", "$value": "rgba(217,119,6,.10)", "$description": "Alpha fill for a warning threshold zone behind the series." },
-  "chart-zone-danger": { "$type": "color", "$value": "rgba(228,0,20,.07)", "$description": "Alpha fill for a danger threshold zone behind the series." },
+  "chart-zone-danger": { "$type": "color", "$value": "rgba(214,90,80,.08)", "$description": "Alpha fill for a danger threshold zone behind the series (the calm danger dot at 8 %)." },
   "chart-forecast-band": { "$type": "color", "$value": "rgba(10,10,10,.06)", "$description": "Alpha fill for a forecast / confidence band; neutral so it works under any series hue." },
   "chart-event": { "$type": "color", "$value": "#737373", "$description": "Event-marker line and label ink (deploys, incidents, releases): 4.7:1 on --uix-surface." },
   "chart-partial": { "$type": "color", "$value": "rgba(10,10,10,.10)", "$description": "Hatch base for a partial (incomplete) period." },
   "chart-comparison": { "$type": "color", "$value": "#B8B8B8", "$description": "Muted ghost line for the comparison period (last week, last year)." },
 
+  "file-img": { "$type": "color", "$value": "var(--uix-chart-3)", "$description": "File kinds (file kit 2.57): one hue per kind of attachment, drawn by FileIcon, FileRow and FileDrop. None is red (red stays for broken) and none is the brand blue (blue stays for actions). Five equal a calm chart slot in light and alias it, so a file and a chart never fight: img chart-3, doc chart-5, mail chart-7, code chart-2, log chart-6. Every kind clears 3:1 on --uix-surface and --uix-bg-app as an icon stroke (file-kinds.test.mjs)." },
+  "file-img-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-img) 12%, transparent)", "$description": "The kind as a resting tint: the left edge of a FileRow, the start of an upload fill. Dark 15 %." },
+  "file-img-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-img) 22%, transparent)", "$description": "The leading end of an upload fill. Dark 26 %." },
+  "file-img-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-img) 28%, var(--uix-border))", "$description": "A FileRow border: the kind mixed into the line colour. Dark 32 %." },
+  "file-img-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-img) 86%, #000000)", "$description": "The fill of the type label on a FileIcon corner, under --uix-file-label-fg. Light deepens the kind by 14 % black so white label text clears 4.5:1 on every kind (the plain kinds give white 3.6-4.2:1); dark uses the kind itself." },
+  "file-doc": { "$type": "color", "$value": "var(--uix-chart-5)", "$description": "Dokument. Alias of --uix-chart-5 (#B45E9A)." },
+  "file-doc-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-doc) 12%, transparent)" },
+  "file-doc-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-doc) 22%, transparent)" },
+  "file-doc-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-doc) 28%, var(--uix-border))" },
+  "file-doc-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-doc) 86%, #000000)" },
+  "file-sheet": { "$type": "color", "$value": "#3F8F55", "$description": "Tabelle (#3F8F55)." },
+  "file-sheet-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-sheet) 12%, transparent)" },
+  "file-sheet-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-sheet) 22%, transparent)" },
+  "file-sheet-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-sheet) 28%, var(--uix-border))" },
+  "file-sheet-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-sheet) 86%, #000000)" },
+  "file-mail": { "$type": "color", "$value": "var(--uix-chart-7)", "$description": "E-Mail. Alias of --uix-chart-7 (#2F8FC2)." },
+  "file-mail-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-mail) 12%, transparent)" },
+  "file-mail-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-mail) 22%, transparent)" },
+  "file-mail-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-mail) 28%, var(--uix-border))" },
+  "file-mail-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-mail) 86%, #000000)" },
+  "file-code": { "$type": "color", "$value": "var(--uix-chart-2)", "$description": "Code & Konfiguration. Alias of --uix-chart-2 (#1F978A)." },
+  "file-code-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-code) 12%, transparent)" },
+  "file-code-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-code) 22%, transparent)" },
+  "file-code-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-code) 28%, var(--uix-border))" },
+  "file-code-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-code) 86%, #000000)" },
+  "file-log": { "$type": "color", "$value": "var(--uix-chart-6)", "$description": "Protokoll. Alias of --uix-chart-6 (#7F8A2E)." },
+  "file-log-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-log) 12%, transparent)" },
+  "file-log-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-log) 22%, transparent)" },
+  "file-log-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-log) 28%, var(--uix-border))" },
+  "file-log-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-log) 86%, #000000)" },
+  "file-archive": { "$type": "color", "$value": "#8A7A66", "$description": "Archiv (#8A7A66)." },
+  "file-archive-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-archive) 12%, transparent)" },
+  "file-archive-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-archive) 22%, transparent)" },
+  "file-archive-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-archive) 28%, var(--uix-border))" },
+  "file-archive-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-archive) 86%, #000000)" },
+  "file-other": { "$type": "color", "$value": "#808080", "$description": "Datei (#808080)." },
+  "file-other-soft": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-other) 12%, transparent)" },
+  "file-other-strong": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-other) 22%, transparent)" },
+  "file-other-edge": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-other) 28%, var(--uix-border))" },
+  "file-other-label": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-file-other) 86%, #000000)" },
+  "file-label-fg": { "$type": "color", "$value": "#FFFFFF", "$description": "Text on a file type label: white in light, ink in dark. 4.5:1 or more on every --uix-file-*-label." },
+
   "row":           { "$type": "color", "$value": "#FFFFFF" },
   "row-alt":       { "$type": "color", "$value": "#FAFAFA" },
   "row-pinned-bg":    { "$type": "color", "$value": "#F4F7FF" },

package/tokens/base/effect.json

@@ -37,7 +37,16 @@
   "loop-blink":    { "$type": "duration", "$value": "1100ms", "$description": "One caret blink cycle." },
   "loop-pulse":    { "$type": "duration", "$value": "2000ms", "$description": "One cycle of the reduced-motion opacity pulse that replaces spinners, shimmer and indeterminate progress, so a still-working indicator stays visibly alive without movement." },
 
+  "dur-arrive":          { "$type": "duration", "$value": "420ms", "$description": "Arrival (calm kit 2.56): how long one card of a glance page takes to fade and rise into place on the first paint of a session. Never on a refresh or a data change." },
+  "stagger-arrive":      { "$type": "duration", "$value": "45ms",  "$description": "Arrival: the gap between one card starting and the next, in reading order." },
+  "delay-arrive-trace":  { "$type": "duration", "$value": "150ms", "$description": "Arrival: how long after its card starts a chart begins to draw (a line traces, bars grow)." },
+  "dur-arrive-trace":    { "$type": "duration", "$value": "700ms", "$description": "Arrival: a line or sparkline tracing in from the left." },
+  "dur-arrive-grow":     { "$type": "duration", "$value": "500ms", "$description": "Arrival: one bar growing from its baseline (paired bars, a bar list, a meter)." },
+  "stagger-arrive-grow": { "$type": "duration", "$value": "25ms",  "$description": "Arrival: the gap between one bar (or bucket) starting to grow and the next." },
+  "dur-arrive-count":    { "$type": "duration", "$value": "600ms", "$description": "Arrival: a headline number counting up from zero (Count arrive). Later changes tick once instead." },
+
   "lift": { "$type": "dimension", "$value": "4px" },
+  "arrive-rise": { "$type": "dimension", "$value": "8px", "$description": "Arrival: how far a card rises while it fades in." },
 
   "z-raised":   { "$type": "number", "$value": "1",   "$description": "z-index ladder (semantic stacking order). raised = locally lifted within a component: a sticky table header & first column, a flow node title over its diamond, a heartbeat dot over its ping." },
   "z-sticky":   { "$type": "number", "$value": "3",   "$description": "A sticky plane that must outrank raised siblings — the pinned-column header corner, which sits above both the sticky row and the sticky column." },