@teamblind-chorus/ui 1.1.0 → 1.2.0

package/dist/styles.css

@@ -2615,6 +2615,31 @@ a.chorus-metadata__name:focus-visible {
   margin-left: var(--sys-layout-inline-md);
 }
 
+/* Embedded-Banner row — a Standard row whose text group stacks over a
+   Banner that spans the row's full content width. The row flips from a
+   single horizontal line to a vertical stack: the normal leading + label
+   + trailing line (`__row-main`) sits on top, the Banner `stack.xs` (8)
+   below it. The stack fills the row's content box so the Banner aligns to
+   the same 16px inline inset as the text group above it. The Banner owns
+   its own tinted fill / radius / padding; the slot only spaces it and
+   marks it a nested-action region (its controls never commit the row). */
+.chorus-list__stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-layout-stack-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.chorus-list__row-main {
+  display: flex;
+  align-items: center;
+}
+
+.chorus-list__banner {
+  display: block;
+}
+
 /* Entry variant — directory-entry row with selectable leading Thumbnail
    (32 / 40 / 48 / 56 via `data-size="small|medium|large|xlarge"`), an
    identity group (label + optional inline count Badge + optional stacked
@@ -3278,6 +3303,65 @@ a.chorus-metadata__name:focus-visible {
    rule already excludes `[data-divider="false"]`, so no extra CSS
    is needed to hide it here. */
 
+/* ============================================================
+   EmptyState — centered no-data composition. Painted inside the
+   surface that would otherwise hold the data: an optional monochrome
+   illustration, a required headline, optional body copy, and an
+   optional primary-Button CTA. Ships no surface fill of its own —
+   the host supplies the surface tier and the bounding box; EmptyState
+   only centers its column inside it. Inter-slot rhythm follows the
+   stack tokens (illustration→headline 12, headline→body 4, body→CTA
+   16). Distinct from Skeleton (an in-flight loading placeholder).
+============================================================ */
+.chorus-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Optional illustration — a glyph / illustration sized to a 48-box
+   (larger than `sys.icon.lg`, realizing the 'icon.xl or larger' intent
+   since no `sys.icon.xl` rung exists), painted monochrome in
+   `onSurfaceVariant` via `currentColor` so it reads as quiet chrome,
+   not a brand moment. 12 below it to the headline. */
+.chorus-empty-state__illustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--empty-state-illustration-size);
+  height: var(--empty-state-illustration-size);
+  margin-bottom: var(--empty-state-illustration-gap);
+  color: var(--empty-state-illustration-color);
+}
+
+.chorus-empty-state__illustration img,
+.chorus-empty-state__illustration svg {
+  width: var(--empty-state-illustration-size);
+  height: var(--empty-state-illustration-size);
+  display: block;
+  color: currentColor;
+}
+
+/* Required headline — heading.sm in `onSurface`. Typography vars are
+   emitted inline by the React file (typoStyles). */
+.chorus-empty-state__headline {
+  margin: 0;
+  color: var(--empty-state-headline-color);
+}
+
+/* Optional body — body.sm in `onSurfaceVariant`, 4 below the headline. */
+.chorus-empty-state__body {
+  margin: 0;
+  margin-top: var(--empty-state-body-gap);
+  color: var(--empty-state-body-color);
+}
+
+/* Optional CTA — a default-size primary Button, 16 below the body. */
+.chorus-empty-state__action {
+  margin-top: var(--empty-state-action-gap);
+}
+
 /* ============================================================
    Banner — in-body explanation block (info / neutral)
 ============================================================ */
@@ -3417,6 +3501,21 @@ a.chorus-metadata__name:focus-visible {
   color: var(--sys-color-primary);
 }
 
+/* neutral-body — keeps the `accent` fill but lays the Default
+   appearance's neutral foreground over it: title + body re-tone to
+   `onSurface` (quiet, high-legibility body copy) while the action
+   steps to `primary`, exactly as on `default`. The accent tint still
+   pulls the eye; the text just stops shouting in the primary family.
+   Only meaningful combined with `--accent` (default is already
+   `onSurface`; destructive must carry the warning tone through copy). */
+.chorus-banner--accent.chorus-banner--neutral-body {
+  color: var(--sys-color-onSurface);
+}
+
+.chorus-banner--accent.chorus-banner--neutral-body .chorus-banner__action {
+  color: var(--sys-color-primary);
+}
+
 /* Trailing icon slot — a 16 × 16 glyph (`sys.icon.md`) at the trailing
    edge, vertically centered against the whole block (`align-self:
    center` overrides the container's flex-start). Paints in the
@@ -3439,6 +3538,23 @@ a.chorus-metadata__name:focus-visible {
   color: currentColor;
 }
 
+/* Trailing action slot — hosts an inline Text Button (`<Button
+   variant="text">`) at the trailing edge, vertically centered against
+   the whole block (`align-self: center` overrides the container's
+   flex-start) and footprint-preserving (`flex: 0 0 auto`). The Button
+   owns its own size + appearance per the button/text spec; by default
+   pick the appearance whose color family matches the banner fill
+   (accent → accent, default → default, destructive → destructive
+   flavor) so the commit reads as part of the tinted block. Unlike the
+   trailing icon it is a real interactive control, so it is not
+   aria-hidden. The Text Button's optical-alignment margin lets its
+   visible label sit flush against the container's trailing padding. */
+.chorus-banner__trailing-action {
+  flex: 0 0 auto;
+  align-self: center;
+  display: inline-flex;
+}
+
 /* ============================================================
    Divider — section-break band between adjacent regions that
    don't share an enclosing container. Single full-bleed block
@@ -5505,6 +5621,72 @@ a.chorus-metadata__name:focus-visible {
   }
 }
 
+/* ============================================================
+   Spinner — indeterminate rotating-arc loading indicator
+============================================================ */
+/* A rotating ring for short, progress-unknown waits (< ~1s) on a
+   neutral host surface. The arc paints `sys.color.primary` as the
+   foreground motion over a faint `sys.color.scrimSubtle` track ring
+   (inverse-tone ~8% tint) so the rotation reads on any surface tier.
+   The ring is drawn with a conic gradient masked to an annulus — no
+   `border:` (per the no-layout-strokes rule). Diameter rides the
+   icon.* ladder via the `--spinner-diameter` plumbing var (sys.icon.lg
+   medium / sys.icon.md small). Rotation modulates position, not
+   luminance, and is suppressed under `prefers-reduced-motion: reduce`,
+   leaving the full ring static as a quiet loading mark. */
+@keyframes chorus-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+.chorus-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spinner-gap);
+}
+
+.chorus-spinner__arc {
+  display: block;
+  flex: none;
+  width: var(--spinner-diameter);
+  height: var(--spinner-diameter);
+  border-radius: var(--sys-radius-full);
+  /* Foreground arc sweeps from primary to transparent over the track. */
+  background:
+    conic-gradient(var(--sys-color-primary), color-mix(in srgb, var(--sys-color-primary) 0%, transparent) 75%, color-mix(in srgb, var(--sys-color-primary) 0%, transparent));
+  /* Annulus mask: punch out the centre so it reads as a ring, 2px thick.
+     The mask fill is alpha-only — the opaque keep-region of the mask is
+     not a design color, so it is not a token binding. */
+  /* chorus-token-exempt */
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  /* chorus-token-exempt */
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  animation: chorus-spinner-rotate 0.8s linear infinite;
+}
+
+/* Faint full track ring under the rotating arc, painted via box-shadow
+   inset so the bare ring stays visible on any surface tier. */
+.chorus-spinner__arc::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 2px var(--sys-color-scrimSubtle);
+}
+
+.chorus-spinner__arc {
+  position: relative;
+}
+
+.chorus-spinner__label {
+  color: var(--sys-color-onSurfaceVariant);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chorus-spinner__arc {
+    animation: none;
+  }
+}
+
 /* ============================================================
    Switch — binary active/inactive pill with translating thumb
 ============================================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamblind-chorus/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Chorus React components. Ships prebuilt ESM + CJS bundles (`dist/`) and a single `styles.css`; import `@teamblind-chorus/tokens/tokens.css` + `@teamblind-chorus/ui/styles.css` once at the app entry. The contract every component honors lives in schema/components/<family>/<sub>.spec.json; see schema/manifest.json for the inventory.",
   "license": "MIT",
   "author": "Teamblind, Inc.",