@attrus-ds/core 0.1.0

package/dist/css/components/primitives.css

@@ -0,0 +1,305 @@
+/* ============================================================
+   PRIMITIVES — Avatar · Money · Stat · Divider · Pill
+   Atoms used across every product surface. All values from tokens.
+   (Tabs moved to components/tabs.css — it's a stateful nav component.)
+   ============================================================ */
+
+/* =================== AVATAR =================== */
+.av {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--av-size, 36px);
+  height: var(--av-size, 36px);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: var(--av-fs, var(--fs-xs));
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  user-select: none;
+  overflow: hidden;
+  position: relative;
+}
+.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.av-xs { --av-size: 20px; --av-fs: 9px; }
+.av-sm { --av-size: 28px; --av-fs: var(--fs-xxs); }
+.av-md { --av-size: 36px; --av-fs: var(--fs-xs); }
+.av-lg { --av-size: 48px; --av-fs: var(--fs-sm); }
+.av-xl { --av-size: 64px; --av-fs: var(--fs-md); }
+
+/* Tone — accent-on-tinted-bg uses the same background+foreground pair as feedback pills,
+   so an Avatar reads as the same "object" as a status pill that references it. */
+.av-brand   { background: var(--color-brand-secondary-50);          color: var(--color-brand-secondary-700); }
+.av-success { background: var(--color-feedback-success-background); color: var(--color-feedback-success-foreground); }
+.av-warning { background: var(--color-feedback-warning-background); color: var(--color-feedback-warning-foreground); }
+.av-danger  { background: var(--color-feedback-danger-background);  color: var(--color-feedback-danger-foreground); }
+.av-info    { background: var(--color-feedback-info-background);    color: var(--color-feedback-info-foreground); }
+.av-neutral { background: var(--color-background-subtle);           color: var(--color-foreground-muted); }
+
+/* Status dot — overlay for presence/online state */
+.av-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 30%;
+  height: 30%;
+  min-width: 8px;
+  min-height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-success-500);
+  box-shadow: 0 0 0 2px var(--color-background-surface);
+}
+.av-dot-busy { background: var(--color-feedback-danger-foreground); }
+.av-dot-away { background: var(--color-feedback-warning-foreground); }
+.av-dot-off  { background: var(--color-foreground-muted); }
+
+/* Avatar group — overlapping stack */
+.av-group {
+  display: inline-flex;
+  align-items: center;
+  isolation: isolate;
+}
+.av-group .av {
+  margin-left: -8px;
+  border: 2px solid var(--color-background-surface);
+}
+.av-group .av:first-child { margin-left: 0; }
+.av-group .av-more {
+  background: var(--color-background-surface);
+  color: var(--color-foreground-secondary);
+  border: 1px dashed var(--color-border-default);
+}
+
+/* =================== MONEY =================== */
+.money {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--money-fs, var(--fs-sm));
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-default);
+  white-space: nowrap;
+}
+.money-cur {
+  font-size: 0.78em;
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+}
+.money-frac { color: var(--color-foreground-secondary); font-weight: var(--w-medium); }
+
+.money-sm { --money-fs: var(--fs-xs); }
+.money-md { --money-fs: var(--fs-sm); }
+.money-lg { --money-fs: var(--fs-md); font-weight: var(--w-bold); }
+.money-xl { --money-fs: var(--fs-2xl); font-weight: var(--w-bold); letter-spacing: var(--ls-tight); }
+.money-display { --money-fs: var(--fs-4xl); font-weight: var(--w-bold); letter-spacing: var(--ls-display); }
+
+.money-pos { color: var(--color-feedback-success-foreground); }
+.money-neg { color: var(--color-feedback-danger-foreground); }
+.money-muted { color: var(--color-foreground-muted); font-weight: var(--w-medium); }
+
+/* =================== METRIC (hero display number) ===================
+   Big, display-weight figure for hero/KPI moments. Distinct from .money
+   (mono, inline): .metric is SANS display, tabular, with a dimmed currency
+   prefix and dimmed fraction. Colour INHERITS (works on light + inverse);
+   dimming uses opacity so it reads on any surface. Tone via inline color
+   or a utility (e.g. success). Size via .metric-{sm,md,lg}. */
+.metric {
+  font-family: var(--font-display);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-display);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+  white-space: nowrap;
+  font-size: var(--metric-fs, 38px);
+}
+.metric-cur { font-size: 0.58em; font-weight: var(--w-semibold); opacity: 0.55; margin-right: 0.32em; }
+.metric-frac { font-size: 0.68em; opacity: 0.55; }
+.metric-sm { --metric-fs: 30px; }
+.metric-md { --metric-fs: 38px; }
+.metric-lg { --metric-fs: var(--fs-5xl); }
+.metric-pos { color: var(--color-success-700); }
+.metric-neg { color: var(--color-danger-700); }
+
+/* =================== STAT =================== */
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(var(--stat-cols, 3), 1fr);
+  gap: var(--space-3);
+}
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-5);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+}
+.stat-label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+}
+.stat-value {
+  font-size: var(--fs-3xl);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-tight);
+  color: var(--color-foreground-default);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+}
+.stat-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-semibold);
+}
+.stat-delta i, .stat-delta svg { width: 14px; height: 14px; stroke-width: 2.25; }
+.stat-delta-up   { color: var(--color-feedback-success-foreground); }
+.stat-delta-down { color: var(--color-feedback-danger-foreground); }
+.stat-delta-flat { color: var(--color-foreground-muted); }
+
+.stat-foot {
+  font-size: var(--fs-xs);
+  color: var(--color-foreground-secondary);
+  margin-top: var(--space-1);
+}
+
+/* Compact variant — for sidebars / dense headers */
+.stat-compact {
+  padding: var(--space-3) var(--space-4);
+  background: transparent;
+  border: 0;
+}
+.stat-compact .stat-value { font-size: var(--fs-xl); }
+
+/* =================== DIVIDER =================== */
+.divider {
+  border: 0;
+  border-top: 1px solid var(--color-border-default);
+  margin: var(--space-4) 0;
+}
+.divider-subtle { border-top-color: var(--color-border-subtle); }
+.divider-strong { border-top-color: var(--color-border-strong); }
+.divider-dashed { border-top-style: dashed; }
+
+.divider-vertical {
+  width: 1px;
+  height: 1em;
+  border-top: 0;
+  border-left: 1px solid var(--color-border-default);
+  display: inline-block;
+  margin: 0 var(--space-3);
+  vertical-align: middle;
+}
+
+/* Labelled divider — splits content with a midline label */
+.divider-labelled {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin: var(--space-5) 0;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+}
+.divider-labelled::before,
+.divider-labelled::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border-default);
+}
+
+/* =================== PILL =================== */
+/* Canonical pill lives in components/status-pills.css (single source:
+   Lato, chained tones .pill.success / sizes .pill.sm). This file no
+   longer re-defines .pill — primitives.html loads status-pills.css. */
+
+/* =================== EYEBROW =================== */
+/* Uppercase micro-label. size = xs|sm|md, tone maps to a foreground role.
+   When an icon sits inline, add .has-icon (the JS wrapper does this). */
+.eyebrow {
+  display: block;
+  font-size: var(--fs-xs);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+}
+.eyebrow.has-icon { display: inline-flex; align-items: center; gap: var(--space-2-5); }
+.eyebrow-xs { font-size: var(--fs-xxs); font-weight: var(--w-bold); }
+.eyebrow-xs.has-icon { gap: var(--space-2); }
+.eyebrow-sm { font-size: var(--fs-xxs); font-weight: var(--w-semibold); }
+.eyebrow-md { font-size: var(--fs-xs); font-weight: var(--w-semibold); }
+.eyebrow-muted     { color: var(--color-foreground-muted); }
+.eyebrow-secondary { color: var(--color-foreground-secondary); }
+.eyebrow-default   { color: var(--color-foreground-default); }
+.eyebrow-brand     { color: var(--color-brand-secondary-700); }
+.eyebrow-inverse   { color: var(--color-foreground-inverse-muted); }
+
+/* =================== FILTER CHIP =================== */
+/* Pill-button used in filter rows. Control height matches .input / .btn (40px). */
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2-5);
+  height: 40px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-background-surface);
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  font-weight: var(--w-medium);
+  color: var(--color-foreground-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+.filter-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.filter-chip:active { background: var(--color-background-press); }
+.filter-chip .chip-chevron { opacity: .55; }
+
+/* =================== PROGRESS BAR =================== */
+/* Slim track + fill. Width of fill is data-driven (set inline). */
+.progress {
+  height: var(--progress-h, 6px);
+  background: var(--progress-track, var(--color-neutral-100));
+  border-radius: var(--radius-pill);
+  position: relative;
+  overflow: hidden;
+}
+.progress-fill {
+  position: absolute;
+  inset: 0;
+  background: var(--progress-fill, var(--grad-brand-soft));
+  border-radius: var(--radius-pill);
+}
+
+/* =================== DESC TERM =================== */
+/* Labelled term-definition pair (receipts, detail drawers). */
+.desc-term-label {
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+  margin-bottom: var(--space-2-5);
+}

package/dist/css/components/sidebar.css

@@ -0,0 +1,179 @@
+/* ============================================================
+   SIDEBAR NAVIGATION — ATTRUS Design System
+   Canonical component CSS. SINGLE SOURCE consumed by BOTH the
+   live app shell (ui_kits/dashboard/Shell.jsx) and the doc page
+   (preview/sidebar-nav.html). Token-driven → themes automatically.
+
+   Class map:
+     .sb            component root (card framing — doc demos)
+     .sb.sb-app     app modifier: full-height rail, border-right only
+     .sb.collapsed  60px icon rail
+     .sb-head/-body/-section/-item/-foot
+     .sb-item.active · .ic · .label · .badge · .count
+     .sb-group / .sb-children / .sb-subitem (collapsible groups)
+
+   Canonical row height: 36px (comfortable — operational platform).
+   ============================================================ */
+
+.sb {
+  width: 216px;
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+/* App rail: full-height, no card framing, animates width */
+.sb.sb-app {
+  border: 0;
+  border-right: 1px solid var(--color-border-default);
+  border-radius: 0;
+  box-shadow: none;
+  height: 100%;
+  transition: width var(--duration-base) var(--ease-standard);
+}
+
+/* Header — matches TopBar (60px) so logos align */
+.sb-head {
+  height: 60px; padding: 0 var(--space-2-5) 0 18px;
+  display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+.sb-head img { height: 14px; width: auto; }
+.sb-head .toggle {
+  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 0; padding: 0;
+  background: transparent; color: var(--color-foreground-muted); cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: var(--transition-fast);
+}
+.sb-head .toggle:hover { background: var(--color-background-hover); color: var(--color-foreground-secondary); }
+.sb-head .toggle svg, .sb-head .toggle i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+
+.sb-body { flex: 1; padding: var(--space-3) 0; overflow-y: auto; overflow-x: hidden; }
+
+.sb-section {
+  padding: var(--space-6) var(--space-5) var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xxs); font-weight: var(--w-semibold);
+  color: var(--color-foreground-muted);
+  letter-spacing: var(--ls-caps); text-transform: uppercase;
+}
+
+.sb-item {
+  display: flex; align-items: center; gap: 11px;
+  padding: 8px 10px; margin: 3px 10px;
+  height: 36px; box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground-secondary);
+  font-size: var(--fs-md); font-weight: var(--w-medium);
+  cursor: pointer; position: relative;
+  white-space: nowrap; overflow: hidden;
+  transition: background .15s, color .15s;
+}
+.sb-item:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.sb-item.active {
+  background: var(--color-brand-secondary-50);
+  color: var(--color-brand-secondary-700);
+  font-weight: var(--w-semibold);
+}
+.sb-item.active::before {
+  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
+  width: 2px; border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500);
+}
+.sb-item .ic { width: 15px; height: 15px; stroke-width: var(--icon-stroke); flex-shrink: 0; opacity: 0.85; }
+.sb-item.active .ic { color: var(--color-brand-secondary-500); opacity: 1; }
+.sb-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-item.disabled { color: var(--color-foreground-placeholder); cursor: not-allowed; }
+.sb-item.disabled:hover { background: transparent; }
+
+/* Trailing decoration — badge (status) OR count (numeric), never both */
+.sb-badge {
+  font-family: var(--font-sans); font-size: 9px; font-weight: var(--w-bold);
+  letter-spacing: .06em; line-height: 1.4;
+  padding: 1px var(--space-2-5); border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+}
+.sb-badge.alert { background: var(--color-danger-500); }
+.sb-badge.warning { background: var(--color-warning-500); }
+.sb-count {
+  font-family: var(--font-mono); font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  background: var(--color-background-subtle);
+  padding: 1px 6px; border-radius: var(--radius-xs);
+}
+.sb-item.active .sb-count { background: color-mix(in srgb, var(--color-brand-secondary-200) 70%, transparent); color: var(--color-brand-secondary-700); }
+
+/* Footer — user mini-card */
+.sb-foot {
+  border-top: 1px solid var(--color-border-subtle);
+  padding: var(--space-3);
+  display: flex; align-items: center; gap: var(--space-3);
+  flex-shrink: 0;
+}
+.sb-foot .avatar {
+  width: 26px; height: 26px; border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+  font-size: 10px; font-weight: var(--w-bold);
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.sb-foot .meta { flex: 1; min-width: 0; }
+.sb-foot .meta .name { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-foot .meta .role { font-size: var(--fs-xxs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-foot .logout { color: var(--color-foreground-muted); cursor: pointer; flex-shrink: 0; display: inline-flex; }
+.sb-foot .logout svg, .sb-foot .logout i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+
+/* ===== Collapsed (60px icon rail) ===== */
+.sb.collapsed { width: 60px; }
+.sb.collapsed .sb-head { padding: 0 var(--space-3); justify-content: center; }
+.sb.collapsed .sb-section { padding: 0; margin: var(--space-3) var(--space-4); height: 1px; background: var(--color-border-subtle); font-size: 0; color: transparent; }
+.sb.collapsed .sb-item { justify-content: center; padding: 8px 0; gap: 0; margin: 1px 10px; }
+.sb.collapsed .sb-item .label, .sb.collapsed .sb-badge, .sb.collapsed .sb-count, .sb.collapsed .sb-item .chev { display: none; }
+.sb.collapsed .sb-item.active::before { display: none; }
+.sb.collapsed .sb-foot { justify-content: center; padding: var(--space-3) 0; }
+.sb.collapsed .sb-foot .meta, .sb.collapsed .sb-foot .logout { display: none; }
+
+/* ===== Groups & dropdowns ===== */
+.sb-group { position: relative; }
+.sb-group > .sb-item .chev {
+  width: 14px; height: 14px; stroke-width: var(--icon-stroke);
+  margin-left: auto; opacity: 0.7;
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.sb-group[aria-expanded="true"] > .sb-item .chev { transform: rotate(90deg); opacity: 1; }
+.sb-children {
+  overflow: hidden; display: grid; grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-base) var(--ease-standard);
+}
+.sb-children > .sb-children-inner { min-height: 0; }
+.sb-group[aria-expanded="true"] .sb-children { grid-template-rows: 1fr; }
+.sb-children-inner { padding: var(--space-1) 0; }
+.sb-children .sb-subitem {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px 8px 38px; margin: 2px 10px;
+  height: 38px; box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground-secondary);
+  font-size: var(--fs-sm); font-weight: var(--w-medium);
+  cursor: pointer; position: relative;
+  transition: var(--transition-fast);
+}
+.sb-children .sb-subitem::before {
+  content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
+  width: 5px; height: 5px; border-radius: var(--radius-pill);
+  background: var(--color-border-strong); opacity: .55;
+  transition: var(--transition-fast);
+}
+.sb-children .sb-subitem:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.sb-children .sb-subitem:hover::before { opacity: 1; background: var(--color-foreground-muted); }
+.sb-children .sb-subitem.active { color: var(--color-brand-secondary-700); font-weight: var(--w-semibold); background: var(--color-brand-secondary-50); }
+.sb-children .sb-subitem.active::before { background: var(--color-brand-secondary-500); opacity: 1; }
+.sb-children .sb-subitem .count, .sb-children .sb-subitem .sb-count {
+  margin-left: auto;
+  font-family: var(--font-mono); font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  background: var(--color-background-subtle);
+  padding: 1px 6px; border-radius: var(--radius-xs);
+}

package/dist/css/components/status-pills.css

@@ -0,0 +1,207 @@
+/* ================================================================
+   STATUS PILLS — components/status-pills.css
+   The single source of truth for status feedback.
+   100% token-driven; consumed by status-pills.html and any product UI.
+   ================================================================ */
+
+/* ----------------------------------------------------------------
+   Base — .pill
+   Inline pill with optional leading dot and trailing close (×).
+   ---------------------------------------------------------------- */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 24px;            /* default md */
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-semibold);
+  line-height: 1;
+  letter-spacing: var(--ls-caps);
+  white-space: nowrap;
+  user-select: none;
+  vertical-align: middle;
+  font-feature-settings: "tnum" 1;
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+/* Leading dot — purely decorative; meaning lives in label + variant */
+.pill > .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  flex-shrink: 0;
+  background: currentColor;
+  align-self: center;
+}
+
+/* Label wrapper — runtime-injected; nudges text up 0.5px to compensate for
+   Lato's optical descender offset, leaving the dot at geometric centre. */
+.pill > .pill-label {
+  display: inline-block;
+  transform: translateY(-0.5px);
+}
+
+/* Trailing icon (e.g. clock, arrow) */
+.pill > i, .pill > svg,
+.pill > svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  stroke-width: var(--icon-stroke);
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.pill > svg, .pill > i > svg { display: block; }
+
+/* Removable close (×) — interactive */
+.pill > .pill-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-right: -4px;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity var(--transition-fast), background var(--transition-fast);
+}
+.pill > .pill-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
+.pill > .pill-x svg, .pill > .pill-x i { width: 10px; height: 10px; stroke-width: 2.25; }
+
+
+/* ----------------------------------------------------------------
+   Sizes
+   ---------------------------------------------------------------- */
+.pill.sm {
+  height: 20px;
+  padding: 0 8px;
+  font-size: var(--fs-xxs);
+  gap: 4px;
+}
+.pill.sm > .dot { width: 5px; height: 5px; }
+.pill.sm > i, .pill.sm > svg, .pill.sm > svg { width: 10px; height: 10px; }
+
+/* md is default (24px) */
+
+.pill.lg {
+  height: 28px;
+  padding: 0 14px;
+  font-size: var(--fs-xs);   /* keep label compact — lg = bigger pill, not bigger type */
+  gap: 8px;
+}
+.pill.lg > .dot { width: 6px; height: 6px; }
+.pill.lg > i, .pill.lg > svg, .pill.lg > svg { width: 12px; height: 12px; }
+
+
+/* ----------------------------------------------------------------
+   Variants — semantic
+   Each = bg + fg + border. Variant carries meaning; label is required.
+   ---------------------------------------------------------------- */
+.pill.success { background: var(--color-feedback-success-background); color: var(--color-feedback-success-foreground); border-color: var(--color-feedback-success-border); }
+.pill.warning { background: var(--color-feedback-warning-background); color: var(--color-feedback-warning-foreground); border-color: var(--color-feedback-warning-border); }
+.pill.danger  { background: var(--color-feedback-danger-background);  color: var(--color-feedback-danger-foreground);  border-color: var(--color-feedback-danger-border);  }
+.pill.info    { background: var(--color-feedback-info-background);    color: var(--color-feedback-info-foreground);    border-color: var(--color-feedback-info-border);    }
+.pill.neutral { background: var(--color-background-subtle);  color: var(--color-foreground-secondary); border-color: var(--color-border-default); }
+
+/* Brand — for "in progress under our system" / featured states */
+.pill.brand   { background: var(--color-background-selected); color: var(--color-foreground-accent); border-color: color-mix(in srgb, var(--color-foreground-accent) 22%, transparent); }
+
+
+/* ----------------------------------------------------------------
+   Style modifiers
+   .solid    — filled (use sparingly, for very high salience)
+   .outline  — transparent bg, color from variant
+   ---------------------------------------------------------------- */
+.pill.solid.success { background: var(--color-success-500); color: var(--color-pure-white); border-color: transparent; }
+.pill.solid.warning { background: var(--color-warning-500); color: var(--color-ink-base);    border-color: transparent; }
+.pill.solid.danger  { background: var(--color-danger-500);  color: var(--color-pure-white); border-color: transparent; }
+.pill.solid.info    { background: var(--color-info-500);    color: var(--color-pure-white); border-color: transparent; }
+.pill.solid.neutral { background: var(--color-neutral-700); color: var(--color-pure-white); border-color: transparent; }
+.pill.solid.brand   { background: var(--color-brand-secondary-500);    color: var(--color-foreground-on-solid); border-color: transparent; }
+.pill.solid > .dot  { background: currentColor; }
+
+.pill.outline.success { background: transparent; color: var(--color-feedback-success-foreground); border-color: var(--color-success-500); }
+.pill.outline.warning { background: transparent; color: var(--color-feedback-warning-foreground); border-color: var(--color-warning-500); }
+.pill.outline.danger  { background: transparent; color: var(--color-feedback-danger-foreground);  border-color: var(--color-danger-500);  }
+.pill.outline.info    { background: transparent; color: var(--color-feedback-info-foreground);    border-color: var(--color-info-500);    }
+.pill.outline.neutral { background: transparent; color: var(--color-foreground-secondary); border-color: var(--color-border-strong); }
+.pill.outline.brand   { background: transparent; color: var(--color-foreground-accent);  border-color: var(--color-brand-secondary-500);    }
+
+
+/* ----------------------------------------------------------------
+   Interactive — for filter chips / clickable state pills
+   ---------------------------------------------------------------- */
+.pill.interactive { cursor: pointer; }
+.pill.interactive:hover {
+  border-color: color-mix(in srgb, currentColor 50%, transparent);
+}
+.pill.interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+.pill.interactive[aria-pressed="true"],
+.pill.interactive.is-selected {
+  background: var(--color-foreground-accent);
+  color: var(--color-foreground-on-solid);
+  border-color: var(--color-foreground-accent);
+}
+.pill.interactive[aria-pressed="true"] > .dot,
+.pill.interactive.is-selected > .dot { background: currentColor; }
+
+
+/* ----------------------------------------------------------------
+   On inverse — pills over dark surfaces
+   ---------------------------------------------------------------- */
+.pill.success.on-inverse {
+  background: color-mix(in srgb, var(--color-success-500) 18%, transparent);
+  color: var(--color-feedback-success-foreground-on-inverse);
+  border-color: color-mix(in srgb, var(--color-success-500) 38%, transparent);
+}
+.pill.warning.on-inverse {
+  background: color-mix(in srgb, var(--color-warning-500) 18%, transparent);
+  color: var(--color-feedback-warning-foreground-on-inverse);
+  border-color: color-mix(in srgb, var(--color-warning-500) 38%, transparent);
+}
+.pill.danger.on-inverse {
+  background: color-mix(in srgb, var(--color-danger-500) 18%, transparent);
+  color: var(--color-feedback-danger-foreground-on-inverse);
+  border-color: color-mix(in srgb, var(--color-danger-500) 38%, transparent);
+}
+.pill.info.on-inverse {
+  background: color-mix(in srgb, var(--color-info-500) 18%, transparent);
+  color: var(--color-feedback-info-foreground-on-inverse, var(--color-info-100));
+  border-color: color-mix(in srgb, var(--color-info-500) 38%, transparent);
+}
+.pill.neutral.on-inverse {
+  background: var(--color-background-inverse-subtle);
+  color: var(--color-foreground-inverse-muted);
+  border-color: var(--color-border-inverse);
+}
+.pill.brand.on-inverse {
+  background: color-mix(in srgb, var(--color-brand-accent-500) 18%, transparent);
+  color: var(--color-brand-accent-300, var(--color-brand-accent-500));
+  border-color: color-mix(in srgb, var(--color-brand-accent-500) 38%, transparent);
+}
+
+
+/* Disabled */
+.pill[aria-disabled="true"],
+.pill:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}