@attrus-ds/core 1.0.6 → 1.0.11

package/dist/css/components/toggle-chip.css

@@ -0,0 +1,137 @@
+/* ============================================================
+   TOGGLE CHIP — components/toggle-chip.css
+   A chip that is a FORM CONTROL: multi-select filters, tag pickers,
+   preference pills. Uses aria-pressed (button) or a hidden checkbox.
+
+   Why it exists: `.chip` is a removable token (it ships `.chip-x`) and
+   `.pill.interactive` is a status pill — neither is a selection control.
+
+   Structure: .toggle-chip  >  [icon]  label  [.toggle-chip-count]
+   States:    :hover · [aria-pressed="true"] / .is-on · :disabled · :focus-visible
+   Variants:  .toggle-chip-sm · .on-inverse
+   ============================================================ */
+
+.toggle-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 32px;
+  padding: 0 var(--space-4);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-regular);
+  color: var(--color-foreground-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+.toggle-chip > input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+.toggle-chip svg,
+.toggle-chip i {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  stroke-width: var(--icon-stroke);
+  flex-shrink: 0;
+}
+.toggle-chip:hover {
+  border-color: var(--color-border-strong);
+  background: var(--color-background-hover);
+  color: var(--color-foreground-default);
+}
+
+/* Trailing count */
+.toggle-chip-count {
+  font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-regular);
+  color: var(--color-foreground-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- On ---------- */
+.toggle-chip[aria-pressed="true"],
+.toggle-chip.is-on,
+.toggle-chip:has(input:checked) {
+  background: var(--color-background-selected);
+  border-color: var(--color-brand-solid);
+  color: var(--color-foreground-brand);
+  font-weight: var(--w-regular);
+}
+.toggle-chip[aria-pressed="true"] .toggle-chip-count,
+.toggle-chip.is-on .toggle-chip-count,
+.toggle-chip:has(input:checked) .toggle-chip-count { color: var(--color-foreground-brand); }
+
+/* ---------- Focus ---------- */
+.toggle-chip:focus-visible,
+.toggle-chip:has(input:focus-visible) {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+/* ---------- Disabled ---------- */
+.toggle-chip:disabled,
+.toggle-chip[aria-disabled="true"],
+.toggle-chip:has(input:disabled) {
+  cursor: not-allowed;
+  background: var(--color-background-sunken);
+  border-color: var(--color-border-default);
+  color: var(--color-foreground-disabled);
+}
+.toggle-chip:disabled .toggle-chip-count,
+.toggle-chip[aria-disabled="true"] .toggle-chip-count,
+.toggle-chip:has(input:disabled) .toggle-chip-count { color: var(--color-foreground-disabled); }
+
+/* ---------- Dense ---------- */
+.toggle-chip-sm {
+  height: 26px;
+  padding: 0 var(--space-3);
+  font-size: var(--fs-xs);
+}
+.toggle-chip-sm svg,
+.toggle-chip-sm i { width: 12px; height: 12px; }
+
+/* ---------- On inverse ---------- */
+.toggle-chip.on-inverse {
+  background: color-mix(in srgb, var(--color-pure-white) 8%, transparent);
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-secondary);
+}
+.toggle-chip.on-inverse:hover {
+  background: color-mix(in srgb, var(--color-pure-white) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-pure-white) 30%, transparent);
+  color: var(--color-foreground-inverse-default);
+}
+.toggle-chip.on-inverse[aria-pressed="true"],
+.toggle-chip.on-inverse.is-on,
+.toggle-chip.on-inverse:has(input:checked) {
+  background: color-mix(in srgb, var(--color-accent-solid) 22%, transparent);
+  border-color: var(--color-accent-solid);
+  color: var(--color-foreground-inverse-default);
+}
+.toggle-chip.on-inverse .toggle-chip-count { color: var(--color-foreground-inverse-muted); }
+.toggle-chip.on-inverse:focus-visible,
+.toggle-chip.on-inverse:has(input:focus-visible) { box-shadow: var(--shadow-focus-inverse); }
+.toggle-chip.on-inverse:disabled,
+.toggle-chip.on-inverse[aria-disabled="true"] {
+  background: color-mix(in srgb, var(--color-pure-white) 3%, transparent);
+  color: var(--color-foreground-inverse-muted);
+  border-color: var(--color-border-inverse);
+}
+
+/* ---------- Group ---------- */
+.toggle-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}

package/dist/css/components/tooltip.css

@@ -19,7 +19,7 @@
   color: var(--color-foreground-inverse-default);
   font-family: var(--font-sans);
   font-size: var(--fs-xs);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   line-height: var(--lh-tight);
   letter-spacing: var(--ls-body);
   white-space: normal;
@@ -113,7 +113,7 @@
 .tooltip-rich.tooltip-left::before   { top: 0; bottom: 0; right: calc(-1 * var(--space-2)); width: var(--space-2); }
 .tooltip-rich.tooltip-right::before  { top: 0; bottom: 0; left: calc(-1 * var(--space-2)); width: var(--space-2); }
 .tooltip-rich .tooltip-title {
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   font-size: var(--fs-sm);
   margin: 0 0 var(--space-1);
   color: var(--color-foreground-inverse-default);
@@ -128,8 +128,9 @@
 .tooltip-rich .tooltip-meta {
   display: block;
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-caps);
   text-transform: uppercase;
   color: var(--color-foreground-inverse-muted);
@@ -190,8 +191,9 @@
 .tooltip-rich .tooltip-row .v {
   color: var(--color-foreground-inverse-default);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-variant-numeric: tabular-nums;
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
 }
 .tooltip-rich .tooltip-footer {
   margin-top: var(--space-3);
@@ -215,8 +217,9 @@
   border: 1px solid var(--color-border-inverse);
   border-radius: var(--radius-xs);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   line-height: 1;
 }
 

package/dist/css/components/topbar.css

@@ -40,7 +40,7 @@
   border: 1px solid var(--color-border-default);
   background: var(--color-background-surface);
   color: var(--color-foreground-secondary);
-  font-family: inherit; font-size: var(--fs-md); font-weight: var(--w-medium);
+  font-family: inherit; font-size: var(--fs-md); font-weight: var(--w-regular);
   white-space: nowrap; cursor: pointer;
   transition: var(--transition-fast);
 }
@@ -54,7 +54,7 @@
    (buttons.css), NOT a topbar-local style. Kept out of here on purpose for single source. */
 
 /* Lang label inside a control */
-.tb-control .tb-flag-label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-secondary); }
+.tb-control .tb-flag-label { font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
 .tb-control .chev { opacity: .6; }
 .tb-control .chev svg, .tb-control .chev i { width: 11px; height: 11px; }
 
@@ -66,8 +66,9 @@
   background: var(--color-success-500);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 15%, transparent);
 }
-.tb-live .lbl { font-size: var(--fs-sm); font-weight: var(--w-semibold); }
-.tb-clock { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--color-foreground-muted); margin-left: var(--space-1); }
+.tb-live .lbl { font-size: var(--fs-sm); font-weight: var(--w-regular); }
+.tb-clock { font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs); color: var(--color-foreground-muted); margin-left: var(--space-1); }
 
 /* Notification button + unread badge */
 .tb-bell .badge-anchor { position: relative; display: inline-flex; }
@@ -113,7 +114,7 @@
 .tb-account.is-open { border-color: var(--color-border-strong); background: var(--color-background-hover); }
 .tb-account .tb-avatar { width: 24px; height: 24px; font-size: 9px; margin-left: 0; }
 .tb-account-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
-.tb-account-id .nm { font-size: var(--fs-xs); font-weight: var(--w-semibold); color: var(--color-foreground-default); white-space: nowrap; }
+.tb-account-id .nm { font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-default); white-space: nowrap; }
 .tb-account-id .co { font-size: var(--fs-xxs); color: var(--color-foreground-muted); white-space: nowrap; }
 .tb-account .chev { display: inline-flex; color: var(--color-foreground-muted); margin-left: var(--space-1); }
 .tb-account .chev svg, .tb-account .chev i { width: 12px; height: 12px; }
@@ -129,14 +130,14 @@
 .tb-account-menu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3); }
 .tb-account-menu .tb-avatar.lg { width: 36px; height: 36px; font-size: var(--fs-sm); margin-left: 0; }
 .tb-account-menu-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
-.tb-account-menu-id .nm { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); white-space: nowrap; }
+.tb-account-menu-id .nm { font-size: var(--fs-md); font-weight: var(--w-regular); color: var(--color-foreground-default); white-space: nowrap; }
 .tb-account-menu-id .co { font-size: var(--fs-xs); color: var(--color-foreground-muted); white-space: nowrap; }
 .tb-account-menu-sep { height: 1px; background: var(--color-border-subtle); margin: var(--space-1) calc(-1 * var(--space-2)); }
 .tb-account-menu-item {
   display: flex; align-items: center; gap: var(--space-3); width: 100%;
   padding: var(--space-2-5) var(--space-2); margin: 1px 0;
   border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
-  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--w-medium);
+  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--w-regular);
   color: var(--color-foreground-secondary); text-align: left; white-space: nowrap;
   transition: background var(--transition-fast), color var(--transition-fast);
 }

package/dist/css/index.css

@@ -4,6 +4,9 @@
 @import "./fonts.css";
 @import "./tokens.css";
 
+@import "./components/action-bar.css";
+@import "./components/ambient.css";
+@import "./components/animated-bg.css";
 @import "./components/buttons.css";
 @import "./components/callout.css";
 @import "./components/cards.css";
@@ -13,6 +16,7 @@
 @import "./components/number-input.css";
 @import "./components/overlays.css";
 @import "./components/primitives.css";
+@import "./components/sel-card.css";
 @import "./components/sidebar.css";
 @import "./components/smart-search.css";
 @import "./components/status-pills.css";
@@ -20,5 +24,6 @@
 @import "./components/table.css";
 @import "./components/tabs.css";
 @import "./components/toast.css";
+@import "./components/toggle-chip.css";
 @import "./components/tooltip.css";
 @import "./components/topbar.css";

package/dist/css/tokens.css

@@ -182,7 +182,12 @@
   --color-brand-solid:    var(--color-brand-primary-500);  /* Enterprise primary — ATTRUS Navy #002142 (buttons, avatars, toggles, badges, hero) */
   --color-brand-solid-hover:  color-mix(in srgb, var(--color-pure-white) 12%, var(--color-brand-primary-500));  /* navy is near-ink → states LIGHTEN */
   --color-brand-solid-active: color-mix(in srgb, var(--color-pure-white) 6%,  var(--color-brand-primary-500));
-  --color-brand-text:     var(--color-brand-primary-500);  /* navy as text — 15:1 on white */
+  /* Brand text on a FIXED LIGHT background (white / --color-brand-subtle-solid).
+     Stays navy in both themes on purpose — 15:1 there. NEVER use on the ambient
+     surface: it resolves 1.05:1 in dark. For ambient brand text use the
+     theme-aware --color-foreground-brand. */
+  --color-brand-text-on-light: var(--color-brand-primary-500);
+  --color-brand-text:     var(--color-brand-text-on-light);  /* DEPRECATED alias — use -on-light (fixed bg) or --color-foreground-brand (ambient) */
   --color-brand-text-strong: var(--color-brand-primary-700);  /* brand text pressed/emphasis */
   --color-brand-subtle:   color-mix(in srgb, var(--color-brand-primary-500) 12%, transparent);  /* tints: brand chips, selected, tags */
   --color-brand-subtle-solid: var(--color-brand-primary-50);   /* opaque light brand tint: brand avatars, selected-row base */
@@ -251,9 +256,13 @@
   --color-foreground-inverse-disabled:    var(--color-neutral-600);
 
   /* Borders */
-  --color-border-subtle:    var(--color-neutral-100);
-  --color-border-default:   var(--color-neutral-150);
-  --color-border-strong:    var(--color-neutral-200);
+  /* Borders — ink-alpha hairlines. Transparency instead of a fixed neutral so the
+     line takes the hue of whatever sits under it: it reads as a seam, not a rule.
+     Semantic borders below (focus, accent, feedback) stay solid — they carry
+     meaning and must remain legible. */
+  --color-border-subtle:    color-mix(in srgb, var(--color-ink-base) 4%,  transparent);
+  --color-border-default:   color-mix(in srgb, var(--color-ink-base) 7%,  transparent);
+  --color-border-strong:    color-mix(in srgb, var(--color-ink-base) 12%, transparent);
   --color-border-focus:     var(--color-accent-solid);   /* per-theme accent (Sky default) — follows the product's accent */
   --color-border-accent:    var(--color-accent-solid);
   --color-border-success:   var(--color-success-500);
@@ -414,6 +423,7 @@
      4.  LIQUID GLASS  —  transparent / frosted layers
      Use with backdrop-filter: blur().
      ============================================================ */
+  /* ── RAW primitives (not theme-aware — do NOT use directly on themed chrome) ── */
   --glass-white:     color-mix(in srgb, var(--color-pure-white) 58%, transparent);
   --glass-white-hi:  color-mix(in srgb, var(--color-pure-white) 78%, transparent);
   --glass-white-lo:  color-mix(in srgb, var(--color-pure-white) 38%, transparent);
@@ -421,9 +431,22 @@
   --glass-ink:       color-mix(in srgb, var(--color-background-inverse) 55%, transparent);   /* dark navy */
   --glass-ink-hi:    color-mix(in srgb, var(--color-background-inverse) 78%, transparent);
   --glass-ink-lo:    color-mix(in srgb, var(--color-background-inverse) 35%, transparent);
-  /* Theme-aware frosted chrome (drawer/modal header+footer): white glass in light,
-     ink glass in dark. Use this — NOT raw --glass-white — on themed chrome. */
-  --glass-chrome:    var(--glass-white);
+
+  /* ── SEMANTIC glass (theme-aware) — ALWAYS prefer these ──────────────────
+     Four roles, each with a paired -fg so text contrast comes with the surface:
+       surface  frosted card / panel over content
+       chrome   drawer + modal header/footer, action bars
+       overlay  floating menus, popovers, command palettes
+       hero     marketing/hero glass — stays DARK in both themes by design
+     Remapped in [data-theme="dark"] below. */
+  --glass-surface:     var(--glass-white);
+  --glass-surface-fg:  var(--color-foreground-default);
+  --glass-chrome:      var(--glass-white);
+  --glass-chrome-fg:   var(--color-foreground-default);
+  --glass-overlay:     var(--glass-white-hi);
+  --glass-overlay-fg:  var(--color-foreground-default);
+  --glass-hero:        var(--glass-ink);
+  --glass-hero-fg:     var(--color-foreground-inverse-default);
   --glass-blur:      saturate(140%) blur(18px);  /* @kind other */
   --glass-blur-sm:   saturate(130%) blur(10px);  /* @kind other */
   --glass-blur-lg:   saturate(160%) blur(28px);  /* @kind other */
@@ -487,6 +510,17 @@
   --shadow-focus-warning: 0 0 0 4px color-mix(in srgb, var(--color-warning-500) 22%, transparent);
   --shadow-focus-danger:  0 0 0 4px color-mix(in srgb, var(--color-danger-500)  22%, transparent);
   --shadow-focus-info:    0 0 0 4px color-mix(in srgb, var(--color-info-500)    22%, transparent);
+  /* Focus ring for dark/inverse surfaces — the 22% accent ring vanishes over ink */
+  --shadow-focus-inverse: 0 0 0 4px color-mix(in srgb, var(--color-pure-white) 34%, transparent);
+
+  /* Glow — colored ambient halos that survive a dark surface (all --shadow-* above
+     are neutral bluish and disappear there). For CTAs, active cards, hero accents. */
+  --shadow-glow-accent:  0 0 0 1px color-mix(in srgb, var(--color-accent-solid) 26%, transparent),
+                         0 8px 32px color-mix(in srgb, var(--color-accent-solid) 34%, transparent);
+  --shadow-glow-brand:   0 0 0 1px color-mix(in srgb, var(--color-brand-solid) 26%, transparent),
+                         0 8px 32px color-mix(in srgb, var(--color-brand-solid) 34%, transparent);
+  --shadow-glow-success: 0 0 0 1px color-mix(in srgb, var(--color-success-500) 26%, transparent),
+                         0 8px 32px color-mix(in srgb, var(--color-success-500) 34%, transparent);
 
   /* Semantic elevation — for status cards, toasts, banners, action buttons */
   --shadow-success-sm: 0 1px 2px  color-mix(in srgb, var(--shadow-tint-success-color)  8%, transparent),
@@ -532,6 +566,8 @@
   --space-6:   20px;
   --space-7:   24px;
   --space-8:   32px;
+  /* Indent step for a table subrow, multiplied by its depth (see table.css §12) */
+  --subrow-indent: 24px;  /* @kind spacing */
   --space-9:   40px;
   --space-10:  48px;
   --space-12:  64px;
@@ -569,6 +605,9 @@
   --ease-standard: cubic-bezier(.2, .8, .2, 1);  /* @kind other */
   --ease-emphasis: cubic-bezier(.2, .9, .15, 1);  /* @kind other */   /* slightly more overshoot — for entries */
   --ease-linear:   linear;  /* @kind other */                         /* loading bars, scrubbers */
+  /* Entrance choreography — the eases above cover microinteraction; this one is for
+     elements arriving on screen (hero, wizard steps, staggered lists). */
+  --ease-entrance: cubic-bezier(.16, 1, .3, 1);  /* @kind other */
 
   /* Durations — paired with --ease-standard unless noted */
   --duration-instant: 80ms;  /* @kind other */     /* micro feedback (tap echo) */
@@ -577,6 +616,20 @@
   --duration-slow:    320ms;  /* @kind other */    /* expansions, reveals */
   --duration-slower:  480ms;  /* @kind other */    /* page-level transitions */
   --duration-deliberate: 640ms;  /* @kind other */ /* overlays — modal/drawer entry */
+  --duration-entrance:   720ms;  /* @kind other */ /* on-screen arrival, paired with --ease-entrance */
+
+  /* Stagger — delay step between siblings in a choreographed entrance */
+  --stagger-tight: 40ms;  /* @kind other */
+  --stagger-base:  80ms;  /* @kind other */
+  --stagger-loose: 140ms;  /* @kind other */
+
+  /* Breakpoints — single source for JS, docs and the token export. NOTE: custom
+     properties do NOT work inside @media queries; author media with the literal
+     px and keep these as the canonical reference. */
+  --bp-sm: 640px;  /* @kind other */
+  --bp-md: 900px;  /* @kind other */
+  --bp-lg: 1200px;  /* @kind other */
+  --bp-xl: 1440px;  /* @kind other */
 
   /* Pre-composed transition shorthand (most common cases) */
   --transition-fast:  140ms var(--ease-standard);  /* @kind other */   /* default for buttons/inputs */
@@ -593,16 +646,30 @@
      ============================================================ */
   --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
+  /* Optical size for the mono family. JetBrains Mono is drawn for code editors:
+     its x-height is 0.550 against Lato's 0.5065, so at the same px it reads ~8.6%
+     larger in mixed UI text. Every rule that sets --font-mono also sets
+     font-size-adjust to this value, which scales the glyph to Lato's x-height.
+     Swapping the mono family = change the two lines above/below (and a product
+     theme may override the pair). Set to `none` to disable the whole mechanism. */
+  --font-mono-adjust: 0.5065;  /* @kind font */
   --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
 
   /* Weights (per manual) */
   --w-light: 300;  /* @kind font */
   --w-regular: 400;  /* @kind font */
-  --w-medium: 500;  /* @kind font */  /* Lato doesn't ship 500 natively; maps to 400 */
-  --w-semibold: 600;  /* @kind font */
   --w-bold: 700;  /* @kind font */
-  --w-extrabold: 800;  /* @kind font */
   --w-black: 900;  /* @kind font */
+  /* RETIRED — Lato has no Medium, SemiBold or ExtraBold. Requesting them from
+     Google Fonts returns nothing and the browser rounds silently (500→400,
+     600→700, 800→900), so the scale advertised 7 steps while rendering 4.
+     --w-semibold was the most used token in the system (99 rules) and rendered
+     BOLD everywhere, which is why the UI read heavier than the scale implied.
+     Kept as deprecated aliases so a consuming project does not break; new code
+     must use one of the four real weights above. */
+  --w-medium: var(--w-regular);     /* DEPRECATED → 400 */
+  --w-semibold: var(--w-regular);   /* DEPRECATED → 400 */
+  --w-extrabold: var(--w-black);    /* DEPRECATED → 900 */
 
   /* Type scale  (px) */
   --fs-xxs: 10px;
@@ -619,6 +686,7 @@
   --fs-6xl: 40px;
   --fs-7xl: 56px;
   --fs-8xl: 72px;
+  --fs-9xl: 96px;  /* marketing/editorial hero — the scale used to stop at 72 */
 
   /* Line heights */
   --lh-tight:   1.15;  /* @kind font */
@@ -628,6 +696,7 @@
 
   /* Letter spacing — per Lato manual rules */
   --ls-display: -0.03em;  /* @kind font */  /* 32–80px headlines */
+  --ls-display-xl: -0.04em;  /* @kind font */  /* >80px — -3% reads loose at hero sizes */
   --ls-tight:   -0.01em;  /* @kind font */  /* large numerics / stat values — between display and body */
   --ls-title:   -0.015em;  /* @kind font */ /* 16–32px titles (manual says -5%, but -5% looks tight on screens; using -1.5%) */
   --ls-body:    0em;  /* @kind font */      /* <16px body */
@@ -675,9 +744,9 @@
   /* --color-foreground-on-solid stays neutral-0 (white text on Royal/accent fills) */
 
   /* Borders — white-alpha hairlines */
-  --color-border-subtle:  color-mix(in srgb, var(--color-pure-white) 8%,  transparent);
-  --color-border-default: color-mix(in srgb, var(--color-pure-white) 12%, transparent);
-  --color-border-strong:  color-mix(in srgb, var(--color-pure-white) 20%, transparent);
+  --color-border-subtle:  color-mix(in srgb, var(--color-pure-white) 4%,  transparent);
+  --color-border-default: color-mix(in srgb, var(--color-pure-white) 6%,  transparent);
+  --color-border-strong:  color-mix(in srgb, var(--color-pure-white) 10%, transparent);
   /* focus / accent borders stay Sky-500 — reads well on dark */
 
   /* Feedback pairs flip: light foreground + dark-tinted background */
@@ -698,6 +767,12 @@
   --grad-surface-top: linear-gradient(180deg, color-mix(in srgb, var(--color-pure-white) 6%, transparent) 0%, transparent 100%);  /* @kind color */
   /* Frosted chrome flips to ink glass on dark (drawer/modal header+footer) */
   --glass-chrome: var(--glass-ink);
+  --glass-chrome-fg: var(--color-foreground-inverse-default);
+  --glass-surface: var(--glass-ink-lo);
+  --glass-surface-fg: var(--color-foreground-default);
+  --glass-overlay: var(--glass-ink-hi);
+  --glass-overlay-fg: var(--color-foreground-default);
+  /* --glass-hero stays ink in both themes (by design) */
 
   /* Data-viz categorical — lift the dark hues so every series reads on dark ink.
      Ramps (seq/div) + structure follow the semantic tokens already remapped above. */
@@ -728,29 +803,58 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.display-xl { font-family: var(--font-display); font-weight: var(--w-black);    font-size: var(--fs-8xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
-.display-lg { font-family: var(--font-display); font-weight: var(--w-extrabold);font-size: var(--fs-7xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
+.display-hero-xl { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--fs-9xl); line-height: 0.98; letter-spacing: var(--ls-display-xl); }
+.display-hero    { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--fs-8xl); line-height: 1.02; letter-spacing: var(--ls-display-xl); }
+.display-xl { font-family: var(--font-display); font-weight: var(--w-black);    font-size: var(--fs-8xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }.display-lg { font-family: var(--font-display); font-weight: var(--w-black);font-size: var(--fs-7xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
 .display    { font-family: var(--font-display); font-weight: var(--w-bold);     font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
 
 h1, .h1 { font-weight: var(--w-bold);     font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
 h2, .h2 { font-weight: var(--w-bold);     font-size: var(--fs-4xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
 h3, .h3 { font-weight: var(--w-bold);     font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h4, .h4 { font-weight: var(--w-semibold); font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h5, .h5 { font-weight: var(--w-semibold); font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-body);  }
+h4, .h4 { font-weight: var(--w-regular); font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
+h5, .h5 { font-weight: var(--w-regular); font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
+h6, .h6 { font-weight: var(--w-regular); font-size: var(--fs-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-body);  }
 
 .body-lg  { font-size: var(--fs-lg);  line-height: var(--lh-relaxed); }
 .body     { font-size: var(--fs-base);line-height: var(--lh-normal);  }
 .body-sm  { font-size: var(--fs-md);  line-height: var(--lh-normal);  }
 .caption  { font-size: var(--fs-sm);  line-height: var(--lh-normal); color: var(--color-foreground-muted); }
-.overline { font-size: var(--fs-xs);  line-height: var(--lh-normal); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); font-weight: var(--w-semibold); }
-.label    { font-size: var(--fs-sm);  font-weight: var(--w-semibold); letter-spacing: var(--ls-label); }
+.overline { font-size: var(--fs-xs);  line-height: var(--lh-normal); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); font-weight: var(--w-regular); }
+.overline-mono { font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs); line-height: var(--lh-normal); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); font-weight: var(--w-regular); }
+.label    { font-size: var(--fs-sm);  font-weight: var(--w-regular); letter-spacing: var(--ls-label); }
 
-.mono, code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
+.mono, code, pre, kbd { font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: .92em; }
 
 /* Numbers that must line up in tables */
 .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'lnum' on; }
 
+/* ============================================================
+   ENTRANCE CHOREOGRAPHY — .enter + .enter-1..5
+   Fade/rise for elements arriving on screen. Use .enter alone, or the
+   numbered variants on siblings for a staggered reveal.
+   ============================================================ */
+@keyframes ds-enter {
+  from { opacity: 0; transform: translate3d(0, 14px, 0); }
+  to   { opacity: 1; transform: none; }
+}
+.enter {
+  animation: ds-enter var(--duration-entrance) var(--ease-entrance) both;
+}
+.enter-1 { animation: ds-enter var(--duration-entrance) var(--ease-entrance) both; animation-delay: calc(var(--stagger-base) * 0); }
+.enter-2 { animation: ds-enter var(--duration-entrance) var(--ease-entrance) both; animation-delay: calc(var(--stagger-base) * 1); }
+.enter-3 { animation: ds-enter var(--duration-entrance) var(--ease-entrance) both; animation-delay: calc(var(--stagger-base) * 2); }
+.enter-4 { animation: ds-enter var(--duration-entrance) var(--ease-entrance) both; animation-delay: calc(var(--stagger-base) * 3); }
+.enter-5 { animation: ds-enter var(--duration-entrance) var(--ease-entrance) both; animation-delay: calc(var(--stagger-base) * 4); }
+@media (prefers-reduced-motion: reduce) {
+  .enter, .enter-1, .enter-2, .enter-3, .enter-4, .enter-5 {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* Utility text colors */
 .fg-default     { color: var(--color-foreground-default); }
 .fg-secondary   { color: var(--color-foreground-secondary); }
@@ -780,7 +884,7 @@ h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height:
   gap: var(--space-2);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: 0;
   text-transform: none;
   color: var(--color-foreground-default);

package/dist/react/ActionBar/ActionBar.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left cluster — back / secondary actions. */
+  lead?: React.ReactNode;
+  /** Middle context — progress text, count, hint. */
+  context?: React.ReactNode;
+  /** Right cluster — primary action(s). Right-aligned via margin-left:auto. */
+  actions?: React.ReactNode;
+  /** Pin to the viewport bottom. */
+  fixed?: boolean;
+  size?: 'md' | 'sm';
+  /** Dark-surface treatment. */
+  onInverse?: boolean;
+}
+
+export declare const ActionBar: React.FC<ActionBarProps>;
+
+export default ActionBar;

package/dist/react/ActionBar/ActionBar.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS ActionBar — typed wrapper over the canonical `.action-bar`
+ * (preview/components/action-bar.css): persistent action strip for wizards,
+ * drawers and editors.
+ *
+ * The right cluster uses `margin-left:auto` (never a flex:1 spacer — a spacer
+ * competing with a Stepper in the same row collapses it).
+ */
+export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left cluster — back / secondary actions. */
+  lead?: React.ReactNode;
+  /** Middle context — progress text, count, hint. */
+  context?: React.ReactNode;
+  /** Right cluster — primary action(s). */
+  actions?: React.ReactNode;
+  /** Pin to the viewport bottom. */
+  fixed?: boolean;
+  size?: 'md' | 'sm';
+  /** Dark-surface treatment. */
+  onInverse?: boolean;
+}
+
+export const ActionBar: React.FC<ActionBarProps> = ({
+  lead,
+  context,
+  actions,
+  fixed = false,
+  size = 'md',
+  onInverse = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const cls = [
+    'action-bar',
+    size === 'sm' ? 'action-bar-sm' : '',
+    fixed ? 'is-fixed' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={cls} {...rest}>
+      {lead != null ? <div className="action-bar-lead">{lead}</div> : null}
+      {context != null ? <div className="action-bar-context">{context}</div> : null}
+      {children}
+      {actions != null ? <div className="action-bar-actions">{actions}</div> : null}
+    </div>
+  );
+};
+
+export default ActionBar;

package/dist/react/AmbientBackdrop/AmbientBackdrop.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface AmbientBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  /** How many blobs to render (1–3). */
+  blobs?: 1 | 2 | 3;
+  /** Blob opacity preset. */
+  intensity?: 'subtle' | 'default' | 'strong';
+  /** Dark hero: ink background + ink scrim. */
+  onInverse?: boolean;
+  /** Drop the readability veil. Only for decorative strips with no text. */
+  noScrim?: boolean;
+}
+
+export declare const AmbientBackdrop: React.FC<AmbientBackdropProps>;
+
+export default AmbientBackdrop;