@attrus-ds/core 0.1.0 → 0.2.0

package/README.md

@@ -1,15 +1,18 @@
 # @attrus-ds/core
 
-Visual layer of the **ATTRUS / Cabiros** design system, packaged for npm.
+The **ATTRUS / Cabiros** design system, packaged for npm.
 
-This package ships **only the visual foundation** — design tokens, component
-styles, brand assets and self-hosted fonts. It contains **no framework
-components** (no React/Vue/etc.) and no application screens.
+The CSS is the single visual source of truth — design tokens, component styles,
+brand assets and self-hosted fonts. On top of that, an **optional typed React
+layer** ships as source (TSX + `.d.ts`) under `@attrus-ds/core/react`; it only
+composes the canonical class names, so the CSS-only / markup path stays fully
+valid. No application screens are included.
 
 What's inside:
 
 - **Design tokens** — colors, typography, spacing, radii, shadows, motion, data-viz (CSS custom properties + JSON).
-- **Component styles** — ready-to-use CSS for buttons, inputs, tables, pills, tabs, cards, callouts, overlays and more.
+- **Component styles** — ready-to-use CSS for buttons, inputs, tables, pills, tabs, cards, callouts, overlays, smart-search and more.
+- **React components** — 20 typed wrappers (Button, Pill, Card, DataTable, Combobox, SmartSearch, Modal, Drawer, AppSidebar…), shipped as source under `@attrus-ds/core/react`. `react` is an optional peer dependency.
 - **Brand assets** — logos, icons and country flags (SVG).
 - **Fonts** — Lato and JetBrains Mono, self-hosted (`.woff2`, no CDN).
 
@@ -74,8 +77,38 @@ import "@attrus-ds/core/components/table.css";
 Available component stylesheets:
 
 `buttons` · `callout` · `cards` · `combobox` · `empty-states` · `inputs` ·
-`number-input` · `overlays` · `primitives` · `sidebar` · `status-pills` ·
-`stepper` · `table` · `tabs` · `toast` · `tooltip` · `topbar`
+`number-input` · `overlays` · `primitives` · `sidebar` · `smart-search` ·
+`status-pills` · `stepper` · `table` · `tabs` · `toast` · `tooltip` · `topbar`
+
+### React components
+
+The typed React layer is shipped as TSX source under `@attrus-ds/core/react`.
+Your bundler/toolchain compiles it; `react` (>= 18) is an optional peer
+dependency. Import the styles once at your app root, then the components:
+
+```js
+import "@attrus-ds/core/css";              // styles (once, at the root)
+import { Button, Pill, DataTable } from "@attrus-ds/core/react";
+
+export function Example() {
+  return <Button variant="primary" size="sm">New transaction</Button>;
+}
+```
+
+Each component is also importable on its own path:
+
+```js
+import { Button } from "@attrus-ds/core/react/Button/Button";
+```
+
+The CSS stays the single visual source of truth — these wrappers add a typed API
+and compose the same canonical classes (`.btn btn-primary`, `.pill success`, …),
+so plain HTML consumers and React consumers render identically.
+
+Component roster: `Button` · `Pill` · `Callout` · `Tabs` · `Input` ·
+`SearchPill` · `Card` · `DataTable` · `Atoms` (Money/Metric/Avatar/Eyebrow/Flag/
+Divider…) · `Stepper` · `NumberInput` · `Combobox` · `SmartSearch` · `Toast` ·
+`Tooltip` · `ZeroState` · `Modal` · `Drawer` · `AppSidebar` · `AppTopbar`.
 
 ### Fonts
 
@@ -108,8 +141,31 @@ for additive changes, `major` for breaking token/API changes.
 
 ## Local development
 
+Source lives under `src/`, organized by concern:
+
+```
+src/
+├── index.css            # dev entry — fonts + tokens + typography + components
+├── tokens/              # design tokens, split by concern (3-layer architecture)
+│   ├── index.css        #   barrel (cascade order)
+│   ├── palette.css      #   layer 1 — raw, theme-agnostic primitives
+│   ├── color-semantic.css #  layer 2 — semantic color roles (components consume these)
+│   ├── gradients.css · data-viz.css · glass.css
+│   ├── radius.css · elevation.css · spacing.css · iconography.css · motion.css
+│   ├── typography.css   #   type scale / weights / line-height / tracking tokens
+│   └── theme-dark.css   #   [data-theme="dark"] semantic overrides
+├── typography/index.css # ready-to-use type classes + text utilities
+├── components/          # one stylesheet per component domain (+ index.css barrel)
+└── react/               # typed React layer — one folder per component
+    ├── index.ts         #   barrel re-exporting every component
+    └── <Name>/<Name>.tsx + <Name>.d.ts
+```
+
 The published artifact is assembled into `dist/` by a dependency-free Node
-script from the source files at the repo root:
+script (`scripts/build.mjs`). The token partials are concatenated into a single
+`dist/css/tokens.css`, the component CSS is copied per-file, and the React
+sources are copied verbatim to `dist/react/` (no compilation — consumers build
+them), so consumer import paths are unchanged.
 
 ```bash
 npm install
@@ -117,6 +173,22 @@ npm run build      # writes dist/
 npm pack           # inspect the tarball before publishing
 ```
 
+### Components showcase
+
+`preview/components.html` is the design-system home — a navigable index of foundations, components, brand assets and package entry points (same structure as the Cabiros `design-system.html`).
+
+Each component has a dedicated spec page under `preview/` (e.g. `buttons.html`, `inputs.html`) with anatomy, variants, states, composition, don'ts, accessibility and token tables.
+
+`preview/gallery.html` is a compact live-specimen reference — useful for quick visual checks, but not the full documentation.
+
+Build first, then open the home page in a browser:
+
+```bash
+npm run build
+node scripts/port-preview.mjs   # re-sync spec pages from cabiros when upstream changes
+# then open preview/components.html
+```
+
 ## License
 
 See [LICENSE](LICENSE). Bundled fonts (Lato, JetBrains Mono) are distributed

package/dist/css/components/buttons.css

@@ -206,7 +206,7 @@
   border-color: var(--color-feedback-danger-border);
 }
 .btn-danger-outline:hover  { background: var(--color-feedback-danger-background); border-color: var(--color-danger-500); }
-.btn-danger-outline:active { background: color-mix(in srgb, var(--color-feedback-danger-background) 60%, var(--color-danger-100)); }
+.btn-danger-outline:active { background: color-mix(in srgb, var(--color-feedback-danger-background) 85%, var(--color-danger-500)); }
 .btn-danger-outline:focus-visible { box-shadow: var(--shadow-focus-danger); }
 
 

package/dist/css/components/combobox.css

@@ -171,7 +171,7 @@
   background: var(--color-background-hover);
 }
 .combobox-option.is-selected {
-  background: var(--color-brand-secondary-50);
+  background: var(--color-background-selected);
   color: var(--color-foreground-accent);
   font-weight: var(--w-semibold);
 }
@@ -296,6 +296,22 @@
   box-shadow: 0 0 0 3px var(--color-feedback-danger-background);
 }
 
+
+/* ----------------------------------------------------------------
+   LISTING POPOVER EXTRAS — optional rows inside the popover:
+   filter-chip row (below search), results meta (above list),
+   foot meta (below list). Exposed via Combobox props
+   `filters` / `meta` / `footMeta`.
+   ---------------------------------------------------------------- */
+.combobox-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
+.combobox-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); 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-xs); font-weight: var(--w-medium); color: var(--color-foreground-secondary); cursor: pointer; transition: var(--transition-fast); }
+.combobox-filter-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); color: var(--color-foreground-default); }
+.combobox-filter-chip.is-active { background: var(--color-background-selected); border-color: var(--color-brand-secondary-200); color: var(--color-foreground-brand); font-weight: var(--w-semibold); }
+.combobox-filter-chip .count { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
+.combobox-filter-chip.is-active .count { color: var(--color-brand-secondary-600); }
+.combobox-meta { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); border-bottom: 1px solid var(--color-border-subtle); }
+.combobox-foot-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-foreground-muted); border-top: 1px solid var(--color-border-subtle); }
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .combobox-chevron { transition: none; }

package/dist/css/components/inputs.css

@@ -455,59 +455,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 
 
-/* ----------------------------------------------------------------
-   10. NUMBER INPUT (with +/- buttons)
-   ---------------------------------------------------------------- */
-.number-input {
-  display: inline-flex;
-  align-items: stretch;
-  height: 40px;
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
-  background: var(--color-background-surface);
-  overflow: hidden;
-  transition:
-    border-color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-.number-input:focus-within {
-  border-color: var(--color-border-focus);
-  box-shadow: var(--shadow-focus);
-}
-.number-input button {
-  width: 36px;
-  border: 0;
-  background: var(--color-background-subtle);
-  color: var(--color-foreground-default);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-  font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
-  transition: background var(--transition-fast);
-}
-.number-input button:hover { background: var(--color-background-hover); }
-.number-input button:active { background: var(--color-background-press); }
-.number-input button:disabled { opacity: 0.4; cursor: not-allowed; }
-.number-input button.minus { border-right: 1px solid var(--color-border-default); }
-.number-input button.plus  { border-left:  1px solid var(--color-border-default); }
-.number-input > input {
-  width: 64px;
-  border: 0;
-  outline: none;
-  text-align: center;
-  font-family: var(--font-mono);
-  font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
-  background: transparent;
-  color: var(--color-foreground-default);
-  -moz-appearance: textfield;
-}
-.number-input > input::-webkit-outer-spin-button,
-.number-input > input::-webkit-inner-spin-button { appearance: none; margin: 0; }
-
+/* (NUMBER INPUT moved to number-input.css — canonical single source) */
 
 /* ----------------------------------------------------------------
    11. OTP — one-time password digit cells
@@ -927,12 +875,12 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .slider::-webkit-slider-runnable-track {
   height: 4px;
-  background: var(--color-neutral-150);
+  background: var(--color-border-default);
   border-radius: var(--radius-pill);
 }
 .slider::-moz-range-track {
   height: 4px;
-  background: var(--color-neutral-150);
+  background: var(--color-border-default);
   border-radius: var(--radius-pill);
 }
 .slider::-webkit-slider-thumb {

package/dist/css/components/overlays.css

@@ -186,76 +186,27 @@
     opacity var(--duration-slower) var(--ease-standard);
 }
 
-/* Right (default).
-   --drawer-w drives both the width AND stack offsets so size variants
-   automatically scale the stacking math. --drawer-offset shifts the panel
-   inward when stacked behind another drawer. */
+/* Right (default). --drawer-w drives the width per size variant. */
 .drawer-right {
-  --drawer-w: min(440px, 90vw);
-  --drawer-offset: 0px;
+  --drawer-w: min(440px, 90vw);  /* @kind spacing */
   top: 0; right: 0; bottom: 0;
   width: var(--drawer-w);
   border-top-left-radius: var(--radius-xs);
   border-bottom-left-radius: var(--radius-xs);
   transform: translateX(100%);
 }
-.drawer-right.is-open { transform: translateX(calc(-1 * var(--drawer-offset))); }
+.drawer-right.is-open { transform: translateX(0); }
 
 /* Left */
 .drawer-left {
-  --drawer-w: min(320px, 85vw);
-  --drawer-offset: 0px;
+  --drawer-w: min(320px, 85vw);  /* @kind spacing */
   top: 0; left: 0; bottom: 0;
   width: var(--drawer-w);
   border-top-right-radius: var(--radius-xs);
   border-bottom-right-radius: var(--radius-xs);
   transform: translateX(-100%);
 }
-.drawer-left.is-open { transform: translateX(var(--drawer-offset)); }
-
-/* =================== STACKED DRAWERS ===================
-   Open a second drawer alongside the first instead of replacing it.
-   --drawer-stack = how many slots inward to shift; 0 = frontmost panel.
-   Slot width derived from --drawer-w so size variants stack correctly.
-   Cap at 3 stacked panels for screens ≥1280px; 2 below.
-   Usage: <aside class="drawer drawer-right drawer-md" data-stack="1"> */
-.drawer-right[data-stack="1"], .drawer-left[data-stack="1"] { --drawer-offset: var(--drawer-w); }
-.drawer-right[data-stack="2"], .drawer-left[data-stack="2"] { --drawer-offset: calc(var(--drawer-w) * 2); }
-.drawer-right[data-stack="3"], .drawer-left[data-stack="3"] { --drawer-offset: calc(var(--drawer-w) * 3); }
-
-/* Stacked panels lose their inner radius — they butt up against a sibling.
-   Separator is placed on the edge that TOUCHES the adjacent panel.
-   `:has(~)` only matches FOLLOWING siblings, so we apply rules from the
-   panel that comes EARLIER in the DOM (the back panel, which is rendered
-   before the front panel in modal-drawer.html). */
-
-/* Back panel (stack ≥ 1): when followed by an open front panel,
-   only flatten the INNER edge (right side) and add separator there.
-   Outer edge (left side) keeps the rounded corners. */
-.drawer-right[data-stack]:not([data-stack="0"]).is-open:has(~ .drawer-right[data-stack="0"].is-open) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 2px solid var(--color-border-default);
-}
-.drawer-left[data-stack]:not([data-stack="0"]).is-open:has(~ .drawer-left[data-stack="0"].is-open) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: 2px solid var(--color-border-default);
-}
-
-/* Front panel (stack=0): when PRECEDED by an open back panel, flatten
-   the inner-side radius and add the matching separator. Use the parent's
-   `:has` to detect the configuration, then target the front. */
-:has(> .drawer-right[data-stack]:not([data-stack="0"]).is-open) > .drawer-right[data-stack="0"].is-open {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: 2px solid var(--color-border-default);
-}
-:has(> .drawer-left[data-stack]:not([data-stack="0"]).is-open) > .drawer-left[data-stack="0"].is-open {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 2px solid var(--color-border-default);
-}
+.drawer-left.is-open { transform: translateX(0); }
 
 /* Bottom */
 .drawer-bottom {
@@ -267,11 +218,11 @@
 }
 .drawer-bottom.is-open { transform: translateY(0); }
 
-/* Drawer sizes (right/left) — feed --drawer-w so stacking math scales */
-.drawer-sm  { --drawer-w: min(360px, 90vw); width: var(--drawer-w); }
-.drawer-md  { --drawer-w: min(440px, 90vw); width: var(--drawer-w); }
-.drawer-lg  { --drawer-w: min(560px, 92vw); width: var(--drawer-w); }
-.drawer-xl  { --drawer-w: min(720px, 94vw); width: var(--drawer-w); }
+/* Drawer sizes (right/left) — feed --drawer-w so widths scale per variant */
+.drawer-sm  { --drawer-w: min(360px, 90vw);  /* @kind spacing */ width: var(--drawer-w); }
+.drawer-md  { --drawer-w: min(440px, 90vw);  /* @kind spacing */ width: var(--drawer-w); }
+.drawer-lg  { --drawer-w: min(560px, 92vw);  /* @kind spacing */ width: var(--drawer-w); }
+.drawer-xl  { --drawer-w: min(720px, 94vw);  /* @kind spacing */ width: var(--drawer-w); }
 
 /* Drawer parts (mirror modal vocabulary).
    Header and footer are STICKY with a liquid-glass background: body
@@ -326,6 +277,24 @@
   transition: var(--transition-fast);
 }
 .drawer-close:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+
+/* Footer aux — left-side total/note when the footer is space-between (footerAux prop) */
+.drawer-footer-aux { font-size: var(--fs-xs); color: var(--color-foreground-muted); min-width: 0; }
+
+/* Mobile: footer actions stack full-width (doc §Header & Footer, variant 7) */
+@media (max-width: 560px) {
+  .drawer-footer { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
+  .drawer-footer .btn { width: 100%; justify-content: center; }
+  .drawer-footer-aux { text-align: center; margin-bottom: var(--space-1); }
+}
+
+/* Dense header — tight chrome for utility drawers (filters) */
+.drawer-header.is-dense { padding: var(--space-3) var(--space-4); }
+.drawer-header.is-dense .drawer-title { font-size: var(--fs-md); }
+
+/* Header with a second control row (search pill, tabs) */
+.drawer-header.has-extra { flex-wrap: wrap; }
+.drawer-header > .drawer-header-extra { flex-basis: 100%; min-width: 0; }
 .drawer-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 .drawer-close i, .drawer-close svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
 

package/dist/css/components/primitives.css

@@ -177,6 +177,8 @@
   color: var(--color-foreground-secondary);
   margin-top: var(--space-1);
 }
+/* Bare stat — figure block without tile chrome, for use inside a Card */
+.stat.is-bare { background: none; border: 0; padding: 0; border-radius: 0; }
 
 /* Compact variant — for sidebars / dense headers */
 .stat-compact {
@@ -275,13 +277,20 @@
 }
 .filter-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
 .filter-chip:active { background: var(--color-background-press); }
+/* Selected (aria-pressed via FilterChip TSX) — same active treatment as combobox filter chips */
+.filter-chip[aria-pressed="true"] {
+  background: var(--color-background-selected);
+  border-color: var(--color-brand-secondary-200);
+  color: var(--color-foreground-brand);
+  font-weight: var(--w-semibold);
+}
 .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));
+  background: var(--progress-track, var(--color-border-default));
   border-radius: var(--radius-pill);
   position: relative;
   overflow: hidden;

package/dist/css/components/sidebar.css

@@ -74,8 +74,8 @@
 }
 .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);
+  background: var(--color-background-selected);
+  color: var(--color-foreground-brand);
   font-weight: var(--w-semibold);
 }
 .sb-item.active::before {
@@ -168,7 +168,7 @@
 }
 .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 { color: var(--color-foreground-brand); font-weight: var(--w-semibold); background: var(--color-background-selected); }
 .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;

package/dist/css/components/smart-search.css

@@ -0,0 +1,91 @@
+/* ============================================================
+   SMART SEARCH — global command palette (⌘K) shell
+   Promoted from combobox.html §03 (2026-06-11): the 8 canonical
+   states (inactive · active · word · similar · id · partial-id ·
+   no-results · loading · error) compose from these pieces.
+   Consumed by the SmartSearch TSX component.
+   ============================================================ */
+/* Smart-search combobox */
+.ss { width: 100%; max-width: 380px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--fs-sm); }
+.ss-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
+.ss-input.ss-input-flat { border-bottom: 0; }
+.ss-input svg, .ss-input i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); flex-shrink: 0; }
+.ss-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--color-foreground-default); }
+.ss-input input::placeholder { color: var(--color-foreground-placeholder); }
+.ss-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-foreground-muted); cursor: pointer; }
+.ss-clear:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.ss-clear svg, .ss-clear i { width: 12px; height: 12px; }
+
+.ss-section { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
+.ss-section:last-of-type { border-bottom: 0; }
+.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
+
+/* Suggestion chips (active state) */
+.ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2); }
+.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
+.ss-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.ss-chip svg, .ss-chip i { width: 11px; height: 11px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
+
+/* List rows */
+.ss-list { list-style: none; margin: 0; padding: 0; }
+.ss-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); }
+.ss-list-item:hover, .ss-list-item.is-active { background: var(--color-background-hover); }
+.ss-list-item .icon-leading { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
+.ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-list-item .icon-leading.brand { background: var(--color-brand-secondary-50); color: var(--color-brand-secondary-700); }
+.ss-list-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.ss-list-item .text .meta { font-size: var(--fs-xs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-list-item .icon-trailing { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--color-foreground-muted); }
+.ss-list-item .icon-trailing svg, .ss-list-item .icon-trailing i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+
+/* Recent searches — clock icon + dim text */
+.ss-recent .ss-list-item .icon-leading { background: transparent; border: 0; width: 18px; height: 18px; }
+.ss-recent .ss-list-item .icon-leading svg, .ss-recent .ss-list-item .icon-leading i { width: 13px; height: 13px; color: var(--color-foreground-muted); }
+.ss-recent .ss-list-item .text .label { font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
+
+/* Empty/result label */
+.ss-result-label { padding: 0 var(--space-2) var(--space-2); }
+.ss-result-label .l { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); }
+.ss-no-result { padding: 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-foreground-muted); }
+.ss-no-result strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+
+/* Tip / hint card (similar match suggestion, ID format hint) */
+.ss-hint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-background-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: var(--space-3) var(--space-2) 0; }
+.ss-hint .icon-leading { color: var(--color-foreground-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
+.ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-hint .body { font-size: var(--fs-sm); color: var(--color-foreground-secondary); line-height: var(--lh-relaxed); }
+.ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+.ss-hint .body code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: color-mix(in srgb, var(--color-brand-secondary-500) 12%, transparent); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
+
+/* ID type-picker buttons */
+.ss-typebtns { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
+.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
+.ss-typebtn:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.ss-typebtn svg, .ss-typebtn i { width: 16px; height: 16px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
+.ss-typebtn .grow { flex: 1; }
+.ss-typebtn .chev { color: var(--color-foreground-muted); }
+
+/* Loading skeleton + spinner illustration */
+.ss-skeleton { padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); }
+.ss-skel-row { display: flex; align-items: center; gap: var(--space-3); }
+.ss-skel-circle { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-border-default); flex-shrink: 0; }
+.ss-skel-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
+.ss-skel-bar { height: 8px; border-radius: var(--radius-xs); background: var(--color-border-default); }
+.ss-skel-bar.short { width: 40%; }
+.ss-skel-bar.long { width: 70%; }
+.ss-skel-shimmer { background: linear-gradient(90deg, var(--color-border-default) 0%, var(--color-border-subtle) 50%, var(--color-border-default) 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
+@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+.ss-illo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
+.ss-illo svg.illustration { width: 84px; height: 60px; }
+.ss-illo .title { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.ss-illo .body { font-size: var(--fs-xs); color: var(--color-foreground-muted); max-width: 32ch; line-height: var(--lh-relaxed); }
+
+/* Footer with keyboard shortcuts */
+.ss-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-background-subtle); border-top: 1px solid var(--color-border-subtle); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
+.ss-foot .kbd-group { display: inline-flex; align-items: center; gap: 4px; }
+kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-semibold); color: var(--color-foreground-secondary); }
+.ss-foot .sep { width: 1px; height: 12px; background: var(--color-border-default); }
+
+

package/dist/css/components/table.css

@@ -138,9 +138,9 @@
 .dt-pagination .page-btn:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
 .dt-pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .dt-pagination .page-btn.is-current {
-  background: var(--color-brand-accent-50);
-  border-color: var(--color-brand-accent-200);
-  color: var(--color-brand-accent-700);
+  background: color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-brand-accent-500) 36%, transparent);
+  color: var(--color-foreground-accent);
 }
 .dt-pagination .page-btn > i, .dt-pagination .page-btn > svg,
 .dt-pagination .page-btn > svg { width: 12px; height: 12px; stroke-width: var(--icon-stroke); }
@@ -218,8 +218,8 @@
 .dt tbody tr.is-muted td,
 .dt tbody tr.is-muted .dt-cell-stack > .sub { opacity: 0.55; }
 
-.dt tbody tr.is-error { background: color-mix(in srgb, var(--color-danger-50) 60%, transparent); }
-.dt tbody tr.is-error:hover { background: color-mix(in srgb, var(--color-danger-50) 100%, transparent); }
+.dt tbody tr.is-error { background: color-mix(in srgb, var(--color-feedback-danger-background) 60%, transparent); }
+.dt tbody tr.is-error:hover { background: var(--color-feedback-danger-background); }
 
 
 /* ----------------------------------------------------------------
@@ -437,11 +437,13 @@
   display: inline-block;
   height: 12px;
   border-radius: var(--radius-2xs);
+  /* theme-aware: border tokens are light-gray hairlines in light and
+     white-alpha in dark — raw neutral-50/100 read near-white on ink */
   background:
     linear-gradient(90deg,
-      var(--color-neutral-100) 0%,
-      var(--color-neutral-50) 40%,
-      var(--color-neutral-100) 80%);
+      var(--color-border-default) 0%,
+      var(--color-border-subtle) 40%,
+      var(--color-border-default) 80%);
   background-size: 480px 100%;
   animation: dt-shimmer 1.4s var(--ease-linear) infinite;
 }

package/dist/css/components/tabs.css

@@ -83,8 +83,8 @@
 }
 .tab[aria-selected="true"] .tab-count,
 .tab.is-active .tab-count {
-  background: var(--color-brand-accent-50);
-  color: var(--color-brand-accent-700);
+  background: color-mix(in srgb, var(--color-brand-accent-500) 16%, transparent);
+  color: var(--color-foreground-accent);
 }
 
 /* Pill tabs — alternative for compact, segmented contexts */

package/dist/css/components/toast.css

@@ -130,6 +130,10 @@
   to   { transform: scaleX(0); }
 }
 
+/* Auto-dismiss must pause while the user inspects (doc a11y contract) */
+.toast:hover .toast-progress::after,
+.toast:focus-within .toast-progress::after { animation-play-state: paused; }
+
 /* ============================================================
    VARIANTS — semantic
    ============================================================ */

package/dist/css/components/tooltip.css

@@ -220,6 +220,11 @@
   line-height: 1;
 }
 
+/* Esc suppression — hide while focus stays on the target (doc a11y contract).
+   The TSX toggles .is-suppressed on Escape; clears on blur / mouse re-enter. */
+.tooltip-target.is-suppressed > .tooltip,
+.tooltip-target.is-suppressed > .tooltip-rich { opacity: 0; pointer-events: none; }
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .tooltip { transition: opacity var(--duration-instant) linear; transform: none !important; transition-delay: 0s !important; }

package/dist/css/index.css

@@ -14,6 +14,7 @@
 @import "./components/overlays.css";
 @import "./components/primitives.css";
 @import "./components/sidebar.css";
+@import "./components/smart-search.css";
 @import "./components/status-pills.css";
 @import "./components/stepper.css";
 @import "./components/table.css";