@lostgradient/cinder 0.2.0 → 0.4.0

package/src/styles/components.css

@@ -5,13 +5,16 @@
  */
 
 @import './components/_control-item.css';
+@import './components/_field-label.css';
 @import './components/_floating-surface.css';
 @import './components/_input-frame.css';
 
+@import '../components/access-gate/access-gate.css';
 @import '../components/accordion-item/accordion-item.css';
 @import '../components/accordion/accordion.css';
 @import '../components/alert/alert.css';
 @import '../components/alert-dialog/alert-dialog.css';
+@import '../components/approval-card/approval-card.css';
 @import '../components/area-chart/area-chart.css';
 @import '../components/autocomplete/autocomplete.css';
 @import '../components/aspect-ratio/aspect-ratio.css';
@@ -27,6 +30,8 @@
 @import '../components/callout/callout.css';
 @import '../components/card/card.css';
 @import '../components/capability-gate/capability-gate.css';
+@import '../components/chat-conversation-header/chat-conversation-header.css';
+@import '../components/chat-conversation-list/chat-conversation-list.css';
 @import '../components/chip/chip.css';
 @import '../components/choice-grid/choice-grid.css';
 @import '../components/checkbox/checkbox.css';
@@ -37,30 +42,36 @@
 @import '../components/color-picker/color-picker.css';
 @import '../components/color-swatch-picker/color-swatch-picker.css';
 @import '../components/combobox/combobox.css';
+@import '../components/command-menu/command-menu.css';
 @import '../components/command-palette/command-palette.css';
 @import '../components/confirm-dialog/confirm-dialog.css';
-@import '../components/connection-indicator/connection-indicator.css';
 @import '../components/container/container.css';
 @import '../components/context-menu/context-menu.css';
 @import '../components/copy-button/copy-button.css';
+@import '../components/data-grid/data-grid.css';
 @import '../components/data-list/data-list.css';
 @import '../components/data-table/data-table.css';
+@import '../components/date-range-field/date-range-field.css';
 @import '../components/description-list/description-list.css';
 @import '../components/diff-statistics/diff-statistics.css';
 @import '../components/divider/divider.css';
 @import '../components/drawer/drawer.css';
 @import '../components/dropdown/dropdown.css';
 @import '../components/empty-state/empty-state.css';
+@import '../components/event-stream-viewer/event-stream-viewer.css';
+@import '../components/faceted-filter-bar/faceted-filter-bar.css';
 @import '../components/feed/feed.css';
 @import './components/experimental.css';
 @import '../components/file-upload/file-upload.css';
 @import '../components/floating-action-button/floating-action-button.css';
 @import '../components/form-field/form-field.css';
 @import '../components/form-section/form-section.css';
+@import '../components/grid/grid.css';
 @import '../components/grid-list/grid-list.css';
 @import '../components/hover-card/hover-card.css';
 @import '../components/image/image.css';
 @import '../components/input/input.css';
+@import '../components/invocation-rule-builder/invocation-rule-builder.css';
 @import './components/json-highlight.css';
 @import '../components/json-schema-editor/json-schema-editor.css';
 @import '../components/json-viewer/json-viewer.css';
@@ -71,6 +82,7 @@
 @import '../components/line-chart/line-chart.css';
 @import '../components/link/link.css';
 @import '../components/matrix-chart/matrix-chart.css';
+@import '../components/masonry/masonry.css';
 @import '../components/load-more/load-more.css';
 @import '../components/media-controls/media-controls.css';
 @import '../components/menu-bar/menu-bar.css';
@@ -80,6 +92,8 @@
 @import '../components/navigation-item/navigation-item.css';
 @import '../components/number-input/number-input.css';
 @import '../components/pagination/pagination.css';
+@import '../components/payload-inspector/payload-inspector.css';
+@import '../components/permission-matrix/permission-matrix.css';
 @import '../components/phone-input/phone-input.css';
 @import '../components/pin-input/pin-input.css';
 @import '../components/popover/popover.css';
@@ -89,9 +103,12 @@
 @import '../components/radio-group/radio-group.css';
 @import '../components/rating/rating.css';
 @import '../components/resizable-panels/resizable-panels.css';
+@import '../components/run-step-timeline/run-step-timeline.css';
 @import '../components/review-editor/review-editor.css';
+@import '../components/schema-form/schema-form.css';
 @import '../components/scroll-area/scroll-area.css';
 @import '../components/search-field/search-field.css';
+@import '../components/secret-value-field/secret-value-field.css';
 @import '../components/share-card/share-card.css';
 @import '../components/section-heading/section-heading.css';
 @import '../components/select/select.css';
@@ -108,12 +125,12 @@
 @import '../components/slider/slider.css';
 @import '../components/sortable-list/sortable-list.css';
 @import '../components/spinner/spinner.css';
+@import '../components/speed-dial/speed-dial.css';
 @import '../components/stacked-list-item/stacked-list-item.css';
 @import '../components/stat/stat.css';
 @import '../components/stat-group/stat-group.css';
 @import '../components/status-dot/status-dot.css';
 @import '../components/steps/steps.css';
-@import '../components/subscription-badge/subscription-badge.css';
 @import '../components/surface/surface.css';
 @import '../components/tab/tab.css';
 @import '../components/tab-list/tab-list.css';
@@ -127,15 +144,16 @@
 @import '../components/table-row/table-row.css';
 @import '../components/tabs/tabs.css';
 @import '../components/textarea/textarea.css';
+@import '../components/time-field/time-field.css';
 @import '../components/timeline/timeline.css';
-@import '../components/timeline-item/timeline-item.css';
 @import '../components/toast-region/toast-region.css';
+@import '../components/transfer-list/transfer-list.css';
 @import '../components/toggle/toggle.css';
 @import '../components/toolbar/toolbar.css';
 @import '../components/tooltip/tooltip.css';
 @import '../components/tree/tree.css';
-@import '../components/_tree-select-all/tree-select-all.css';
 @import '../components/typography/typography.css';
+@import '../components/virtual-list/virtual-list.css';
 @import '../components/waveform/waveform.css';
 
 /* Shared internal partial — base chrome for Alert/Banner dismiss buttons.

package/src/styles/foundation.css.d.ts

@@ -0,0 +1,7 @@
+// Type stub for the CSS-only `@lostgradient/cinder/styles[...]` subpath. The
+// matching `types` condition in package.json#exports points here so a
+// side-effect `import` of the stylesheet typechecks under
+// `moduleResolution: bundler` (an ambient `declare module` in the consumer is
+// ignored once the specifier resolves to a real file). `export {}` makes this
+// a module (not a global script) exposing no bindings — a CSS side-effect import.
+export {};

package/src/styles/index.css

@@ -32,6 +32,7 @@
 @import './_base-marker.css' layer(cinder.tokens);
 @import './foundation.css' layer(cinder.foundation);
 @import './components/_dismiss-button.css';
+@import './components/_field-label.css';
 @import './components/_floating-surface.css';
 @import './components/_control-item.css';
 @import './components/_input-frame.css';

package/src/styles/index.css.d.ts

@@ -0,0 +1,7 @@
+// Type stub for the CSS-only `@lostgradient/cinder/styles[...]` subpath. The
+// matching `types` condition in package.json#exports points here so a
+// side-effect `import` of the stylesheet typechecks under
+// `moduleResolution: bundler` (an ambient `declare module` in the consumer is
+// ignored once the specifier resolves to a real file). `export {}` makes this
+// a module (not a global script) exposing no bindings — a CSS side-effect import.
+export {};

package/src/styles/tokens-base.css

@@ -70,6 +70,9 @@
   --cinder-shadow-lg:
     0 10px 15px -3px light-dark(oklch(0% 0 0 / 0.14), oklch(100% 0 0 / 0.11)),
     0 4px 6px -4px light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.07));
+  --cinder-shadow-overlay:
+    0 10px 15px -3px light-dark(oklch(0% 0 0 / 0.14), oklch(0% 0 0 / 0.45)),
+    0 4px 6px -4px light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.32));
 
   /* ========================================
    * CONTROL HEIGHTS
@@ -162,7 +165,11 @@
   --cinder-ease-decelerate: cubic-bezier(0, 0, 0, 1);
   --cinder-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
   --cinder-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --cinder-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* A fast, settled ease-out. Previously cubic-bezier(0.34, 1.56, 0.64, 1) — a
+     back-ease whose y1=1.56 overshot to 156% of travel, which on the sheet/drawer
+     (100%-of-panel translate) flung the panel past the viewport edge before
+     settling. This curve keeps the snappy decelerate-in feel with no overshoot. */
+  --cinder-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
 
   /* ========================================
    * SEMANTIC ALIASES
@@ -188,6 +195,20 @@
   --cinder-surface: light-dark(oklch(98.5% 0.008 245), oklch(20% 0.04 245));
   --cinder-surface-raised: light-dark(oklch(100% 0.006 245), oklch(26% 0.045 245));
   --cinder-surface-inset: light-dark(oklch(95.5% 0.01 245), oklch(11% 0.03 245));
+
+  /* Upcoming step marker background — keeps the inset treatment in light mode
+     (surface-inset is visibly recessed vs surface), but lifts to surface in dark
+     mode where surface-inset (0.11) is nearly invisible against dark stage (0.15-0.20). */
+  --cinder-surface-upcoming-marker: light-dark(var(--cinder-surface-inset), var(--cinder-surface));
+
+  /* Inverse surface — used by Tooltip to stay a dark overlay in both themes.
+   * Light arm mirrors the text/surface swap (dark bg, light fg).
+   * Dark arm uses the elevated surface + near-white text so the tooltip reads as
+   * a dark elevated layer rather than inverting to light.
+   * --cinder-border-inverse adds a 1px delineation in dark mode only. */
+  --cinder-surface-inverse: light-dark(var(--cinder-text), var(--cinder-surface-raised));
+  --cinder-text-inverse: light-dark(var(--cinder-surface), var(--cinder-text));
+  --cinder-border-inverse: light-dark(transparent, var(--cinder-border-strong));
   /* Hover/pressed surface derivatives. The mix DIRECTION is per-theme — the
      `light-dark(black, white)` mix target darkens the surface in light mode and
      lightens it in dark mode — so only the PERCENTAGE is shared across themes.
@@ -215,33 +236,44 @@
      inert. NOTE the glyph on top must use --cinder-text-disabled, NOT --cinder-accent-contrast:
      accent-contrast is dark ink in both arms and would be ~1.45:1 on the dark-arm fill (0.30) —
      invisible. --cinder-text-disabled clears the 3:1 UI floor in both themes (light ~3.8:1, dark ~4.1:1). */
-  --cinder-fill-disabled: light-dark(oklch(88% 0.01 245), oklch(30% 0.04 245));
+  --cinder-fill-disabled: light-dark(oklch(88% 0.01 245), oklch(30% 0.015 245));
 
   /* Borders */
   --cinder-border: light-dark(oklch(79% 0.013 245), oklch(40% 0.05 245));
   --cinder-border-muted: light-dark(oklch(88% 0.01 245), oklch(30% 0.04 245));
   --cinder-border-strong: light-dark(oklch(72% 0.014 245), oklch(45% 0.06 245));
 
-  /* Accent - cyan (hue 195) */
-  --cinder-accent: light-dark(oklch(66% 0.16 195), oklch(78% 0.13 195));
-  --cinder-accent-contrast: light-dark(oklch(15% 0.035 245), oklch(15% 0.035 245));
+  /* Toggle track off-state defaults — encode dark-arm contrast improvement here
+     so toggle.css uses only var() references and stays guard-clean.
+     Light arm preserves existing --cinder-border-muted look; dark arm raises L
+     to 0.45 (vs surface 0.20) for ≥3:1 shape contrast. Chroma kept at 0.02
+     (near-neutral). Hover steps up by 0.07 to be distinguishable from rest. */
+  --cinder-toggle-track-off-resting: light-dark(var(--cinder-border-muted), oklch(45% 0.02 245));
+  --cinder-toggle-track-off-hover-resting: light-dark(var(--cinder-border), oklch(52% 0.02 245));
+
+  /* Accent - indigo (hue 270). Light arm is a deep indigo at L=0.50 — dark enough
+     that WHITE clears WCAG AA on it (6.45:1), so the brand fill carries white labels
+     in light mode. Dark arm is a bright periwinkle-indigo (chroma clamped to 0.14 to
+     stay in sRGB gamut at L=0.72) that carries the dark-ink contrast label (7.77:1). */
+  --cinder-accent: light-dark(oklch(50% 0.22 270), oklch(72% 0.14 270));
+  /* Light arm flips to WHITE (the indigo fill is dark enough); dark arm keeps dark ink
+     against the bright dark-mode fill. */
+  --cinder-accent-contrast: light-dark(oklch(100% 0 0), oklch(15% 0.035 245));
   --cinder-accent-hover: oklch(from var(--cinder-accent) calc(l - 0.08) c h);
   --cinder-accent-active: oklch(from var(--cinder-accent) calc(l - 0.15) c h);
-  /* Pressed fill for SOLID accent surfaces that carry the dark-ink --cinder-accent-contrast
-     label (primary Button, FloatingActionButton). The general --cinder-accent-active darkens by
-     0.15; on the L=0.66 light accent that resolves to L=0.51, where the dark-ink label drops to
-     ~4.09:1 — below WCAG AA. This token darkens by a gentler 0.11 (light → L=0.55, ~4.79:1; dark →
-     L=0.67, ~7.1:1) so the pressed label stays AA-legible in both arms. Non-label-bearing
-     consumers keep using --cinder-accent-active. */
+  /* Pressed fill for SOLID accent surfaces that carry the --cinder-accent-contrast label
+     (primary Button, FloatingActionButton). The indigo accent darkens on press; the white
+     light-mode label only gets MORE legible as the fill darkens (l-0.11 → L=0.39 → white at
+     10.5:1), so this token tracks the general pressed darkening. Kept distinct from
+     --cinder-accent-active so label-bearing and non-label consumers can diverge if ever needed. */
   --cinder-accent-active-on-fill: oklch(from var(--cinder-accent) calc(l - 0.11) c h);
-  /* Accent used AS TEXT/ICON on light surfaces. The fill-accent was darkened to a more ink-like
-     cyan (now L=0.66); as a FOREGROUND its contrast improves (≈2.7:1 on raised, ≈2.4:1 on bg/inset)
-     but still does NOT clear the 3:1 UI floor, so a separate foreground token stays necessary. This
-     darker on-brand cyan clears 4.5:1 on every surface and every accent/tree/info tint (verified:
-     surface 5.43, bg 5.12, inset 4.82, accent-chip tint 4.98). --cinder-accent is a FILL (it carries
-     the dark-ink --cinder-accent-contrast label at ≈7.2:1); all foreground/icon usages adopt this
-     token. */
-  --cinder-accent-text: light-dark(oklch(47% 0.16 195), oklch(78% 0.13 195));
+  /* Accent used AS TEXT/ICON on light surfaces. The light-mode fill accent (L=0.50) reads as a
+     foreground at ~4.7:1, only just clearing AA, so a slightly darker dedicated foreground token
+     stays necessary for comfortable link/icon legibility. This deep indigo (L=0.45) clears 4.5:1
+     on every surface (verified: surface 7.73, bg 7.19, inset 7.09). The dark arm matches the
+     dark-mode accent fill. --cinder-accent is a FILL (it carries the white --cinder-accent-contrast
+     label in light mode); all foreground/icon usages adopt this token. */
+  --cinder-accent-text: light-dark(oklch(45% 0.22 270), oklch(72% 0.14 270));
   /* Hover step for text/icon links. Derived as a DARKER step of --cinder-accent-text (not the
      bright fill-derived --cinder-accent-hover, which is LIGHTER than the resting text color and
      drops to ~2.75:1 on near-white — below WCAG AA). Light arm resolves to ~oklch(0.39 0.16 195)
@@ -249,27 +281,47 @@
   --cinder-accent-text-hover: oklch(from var(--cinder-accent-text) calc(l - 0.08) c h);
 
   /* Status — solid (legacy single-value tokens, retained for back-compat) */
-  --cinder-info: light-dark(oklch(50% 0.15 245), oklch(78% 0.13 245));
-  --cinder-success: light-dark(oklch(50% 0.16 145), oklch(78% 0.14 145));
-  --cinder-warning: light-dark(oklch(54% 0.165 75), oklch(82% 0.16 75));
-  --cinder-danger: light-dark(oklch(50% 0.21 25), oklch(72% 0.18 25));
+  /* Info nudged from hue 245 → 230: with the brand now indigo (h270), a 245 info sat only
+     25° away and competed with it; 230 reads as an unambiguous blue 40° off the brand.
+     Chroma fitted to 0.098 to stay in sRGB gamut at L=0.50 (white label clears 5.86:1). */
+  --cinder-info: light-dark(oklch(50% 0.098 230), oklch(78% 0.13 230));
+  /* Chroma values fitted to the sRGB gamut so the browser renders the authored color
+     instead of silently clamping it (warning-light especially was over-saturated at
+     0.165 and rendered nearer 0.113). Contrast labels re-verified by check-token-contrast. */
+  --cinder-success: light-dark(oklch(50% 0.157 145), oklch(78% 0.14 145));
+  --cinder-warning: light-dark(oklch(54% 0.113 75), oklch(82% 0.156 75));
+  --cinder-danger: light-dark(oklch(50% 0.202 25), oklch(72% 0.172 25));
   /* Text against the danger background. Dark-mode danger is ~72% lightness; pure white fails WCAG AA on it. */
   --cinder-danger-contrast: light-dark(oklch(100% 0 0), oklch(12% 0.02 25));
   /* Text against solid status backgrounds. Light-mode accents are dark enough for white; dark-mode accents are
    * high-lightness, so a dark same-hue color wins. All clear WCAG AA (≥4.5:1) — see chip pressed-state verification. */
   --cinder-success-contrast: light-dark(oklch(100% 0 0), oklch(15% 0.03 145));
   --cinder-warning-contrast: light-dark(oklch(100% 0 0), oklch(20% 0.04 75));
-  --cinder-info-contrast: light-dark(oklch(100% 0 0), oklch(15% 0.03 245));
-  --cinder-danger-hover: oklch(from var(--cinder-danger) calc(l - 0.08) c h);
-  --cinder-danger-active: oklch(from var(--cinder-danger) calc(l - 0.15) c h);
+  --cinder-info-contrast: light-dark(oklch(100% 0 0), oklch(15% 0.03 230));
+  /* Danger hover/active are authored explicitly rather than derived as
+     oklch(from --cinder-danger calc(l - X) c h). The relative-color form holds the
+     fill's chroma (0.202) constant while dropping lightness, but red (h 25) is near the
+     sRGB gamut boundary — at the light-arm hover/active lightnesses (l 0.50 → 0.42 → 0.35)
+     the maximum in-gamut chroma falls to ~0.171 / ~0.142, so a held 0.202 would silently
+     clamp and render desaturated. Each light-arm state is therefore pinned to its own
+     in-gamut chroma maximum (fitted, not capped on the fill — the fill keeps full 0.202),
+     keeping the darkening monotonic AND in gamut. The dark arm (base l 0.72) stays well
+     clear of the boundary, so it keeps the same l-0.08 / l-0.15 step at chroma 0.172.
+     White labels clear WCAG AA on every state (6.7 / 9.3 / 12.1 : 1). Gated by
+     check-token-contrast.test.ts. */
+  --cinder-danger-hover: light-dark(oklch(42% 0.171 25), oklch(64% 0.172 25));
+  --cinder-danger-active: light-dark(oklch(35% 0.142 25), oklch(57% 0.172 25));
 
   /* Status — semantic triples (foreground / background / border) for soft surfaces.
      Use these in components like Alert and Toast where you need a soft tinted surface
      with semantically-paired text and border colors. The solid `--cinder-info|success|
      warning|danger` tokens above remain for accent fills (e.g. solid badges). */
-  --cinder-color-info-bg: light-dark(oklch(96% 0.025 245), oklch(28% 0.06 245));
-  --cinder-color-info-fg: light-dark(oklch(40% 0.13 245), oklch(88% 0.1 245));
-  --cinder-color-info-border: light-dark(oklch(80% 0.05 245), oklch(45% 0.08 245));
+  /* Info soft-surface triple — moved to hue 230 with the info solid; chroma fitted to
+     sRGB gamut (fg L=0.40 → c 0.079, bg L=0.96 → c 0.023). fg-on-bg clears 8.1:1 light /
+     10.2:1 dark. */
+  --cinder-color-info-bg: light-dark(oklch(96% 0.023 230), oklch(28% 0.057 230));
+  --cinder-color-info-fg: light-dark(oklch(40% 0.079 230), oklch(88% 0.071 230));
+  --cinder-color-info-border: light-dark(oklch(80% 0.05 230), oklch(45% 0.08 230));
 
   --cinder-color-success-bg: light-dark(oklch(96% 0.04 145), oklch(28% 0.07 145));
   --cinder-color-success-fg: light-dark(oklch(40% 0.13 145), oklch(88% 0.11 145));
@@ -299,15 +351,24 @@
   --cinder-scrollbar-thumb: light-dark(oklch(0% 0 0 / 0.45), oklch(100% 0 0 / 0.45));
   --cinder-scrollbar-thumb-hover: light-dark(oklch(0% 0 0 / 0.65), oklch(100% 0 0 / 0.65));
 
+  /* Ring color tuned for use on solid accent/fill surfaces. Light arm is a
+   * near-black that contrasts both the accent fill (≥11:1) and the page bg
+   * (≥19:1). Dark arm is a near-white that contrasts the bright dark-mode
+   * accent (≥5:1) and the dark page bg (≥18:1). Used by FloatingActionButton
+   * primary variant. Raw oklch is legitimate here (tokens-base.css is the
+   * one place raw colors are allowed). */
+  --cinder-ring-on-accent: light-dark(oklch(20% 0.02 245), oklch(95% 0.01 245));
+
   /* Focus ring */
   --cinder-ring-width: 3px;
   --cinder-ring-offset: 1px;
   --cinder-ring-offset-color: var(--cinder-bg);
   /* Relative to --cinder-accent so a consumer override re-derives the ring hue.
-     The light arm clamps L to 0.58 (the bright fill-accent at L 0.72 is too light
-     to clear 3:1 as a ring against near-white surfaces); `h` tracks the accent hue. */
+     The light arm clamps L to 0.55 (indigo has a lower luminance-per-lightness than the
+     old cyan, so the prior 0.58 clamp dropped to a marginal 3.0:1 against near-white;
+     0.55 gives 4.48:1, clearing WCAG 1.4.11 with margin); `h` tracks the accent hue. */
   --cinder-ring-color: light-dark(
-    oklch(from var(--cinder-accent) 0.58 0.16 h),
+    oklch(from var(--cinder-accent) 0.55 0.16 h),
     oklch(from var(--cinder-accent) 0.7 0.14 h)
   );
 
@@ -343,7 +404,7 @@
   /* Base button tokens (secondary defaults) */
   --cinder-button-bg: var(--cinder-surface-raised);
   --cinder-button-fg: var(--cinder-text);
-  --cinder-button-border: var(--cinder-border);
+  --cinder-button-border: light-dark(var(--cinder-border), var(--cinder-border-strong));
   --cinder-button-radius: var(--cinder-radius-md);
 
   /* Size: xs */
@@ -381,15 +442,25 @@
   --cinder-button-font-size-xl: var(--cinder-text-lg);
   --cinder-button-radius-xl: var(--cinder-radius-md);
 
-  /* Chart series palette */
-  --cinder-chart-series-1: light-dark(oklch(48% 0.17 255), oklch(72% 0.13 255));
-  --cinder-chart-series-2: light-dark(oklch(51% 0.16 145), oklch(74% 0.14 145));
-  --cinder-chart-series-3: light-dark(oklch(55% 0.18 35), oklch(76% 0.13 35));
-  --cinder-chart-series-4: light-dark(oklch(50% 0.15 315), oklch(73% 0.13 315));
-  --cinder-chart-series-5: light-dark(oklch(47% 0.14 205), oklch(71% 0.12 205));
-  --cinder-chart-series-6: light-dark(oklch(53% 0.15 85), oklch(75% 0.13 85));
-  --cinder-chart-series-7: light-dark(oklch(46% 0.13 15), oklch(72% 0.12 15));
-  --cinder-chart-series-8: light-dark(oklch(49% 0.13 280), oklch(72% 0.12 280));
+  /* Chart series palette — 8 categorical colors retuned for the indigo brand.
+     Solved so the set is (a) brand-safe (no hue in 248–292), (b) mutually distinguishable
+     in normal vision (min CIEDE2000 ΔE00 ≥ 12 in both arms), and (c) carries a minimum
+     pairwise CIE L* separation ≥ 4 in each arm — lightness as a SECONDARY distinguishing
+     channel for colour-vision-deficient viewers when hue contrast degrades (a supporting
+     cue, not a standalone CVD-safety proof; post-CVD ΔE00 is tracked as a diagnostic only).
+     Every colour is in sRGB gamut, chroma ≥ 0.06, and ≥ 3:1 on its theme's chart background.
+     The light and dark arms are tuned INDEPENDENTLY for in-theme contrast and gamut, so a
+     series is not guaranteed the same hue across themes — that is a deliberate trade-off
+     (cross-theme contrast over cross-theme colour memory) for a surface rendered one theme
+     at a time. Gated by check-token-contrast.test.ts. */
+  --cinder-chart-series-1: light-dark(oklch(33% 0.121 8), oklch(58% 0.089 205));
+  --cinder-chart-series-2: light-dark(oklch(36% 0.069 80), oklch(67% 0.275 330));
+  --cinder-chart-series-3: light-dark(oklch(40% 0.082 160), oklch(69% 0.182 44));
+  --cinder-chart-series-4: light-dark(oklch(45% 0.087 235), oklch(70% 0.144 160));
+  --cinder-chart-series-5: light-dark(oklch(53% 0.218 330), oklch(78% 0.12 8));
+  --cinder-chart-series-6: light-dark(oklch(56% 0.148 44), oklch(81% 0.152 80));
+  --cinder-chart-series-7: light-dark(oklch(59% 0.126 120), oklch(85% 0.078 235));
+  --cinder-chart-series-8: light-dark(oklch(63% 0.098 205), oklch(89% 0.19 120));
 }
 
 :root[data-theme='dark'] {

package/src/styles/tokens.css.d.ts

@@ -0,0 +1,7 @@
+// Type stub for the CSS-only `@lostgradient/cinder/styles[...]` subpath. The
+// matching `types` condition in package.json#exports points here so a
+// side-effect `import` of the stylesheet typechecks under
+// `moduleResolution: bundler` (an ambient `declare module` in the consumer is
+// ignored once the specifier resolves to a real file). `export {}` makes this
+// a module (not a global script) exposing no bindings — a CSS side-effect import.
+export {};

package/src/styles/utilities.css.d.ts

@@ -0,0 +1,7 @@
+// Type stub for the CSS-only `@lostgradient/cinder/styles[...]` subpath. The
+// matching `types` condition in package.json#exports points here so a
+// side-effect `import` of the stylesheet typechecks under
+// `moduleResolution: bundler` (an ambient `declare module` in the consumer is
+// ignored once the specifier resolves to a real file). `export {}` makes this
+// a module (not a global script) exposing no bindings — a CSS side-effect import.
+export {};

package/src/utilities/attachments.ts

@@ -22,8 +22,8 @@ export function createBodyScrollLock(): Attachment<HTMLElement> {
   };
 }
 
-/** Pointer/click events the outside-dismiss listener can key off. */
-export type ClickOutsideEventType = 'click' | 'pointerdown' | 'mousedown';
+/** Pointer/click/touch events the outside-dismiss listener can key off. */
+export type ClickOutsideEventType = 'click' | 'pointerdown' | 'mousedown' | 'touchstart';
 
 export type ClickOutsideOptions = {
   /** Callback when an outside interaction occurs */
@@ -50,12 +50,17 @@ export type ClickOutsideOptions = {
   ignoreRefs?: Array<() => Element | null>;
 };
 
+function isInsideEventPath(event: Event, element: Element): boolean {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
+
 /**
  * Creates an outside-interaction attachment that calls a handler when a `click`, `pointerdown`,
- * or `mousedown` lands outside the attached element (and outside any `ignoreRefs`). This is the
- * single canonical mechanism for overlay light-dismiss — dropdowns, menus, popovers — so each
- * overlay does not hand-roll its own `document` listener and inside/trigger exclusion (see
- * `OVERLAY-POLICY.md` § Outside-click).
+ * `mousedown`, or `touchstart` lands outside the attached element (and outside any `ignoreRefs`).
+ * This is the single canonical mechanism for overlay light-dismiss — dropdowns, menus, popovers —
+ * so each overlay does not hand-roll its own `document` listener and inside/trigger exclusion
+ * (see `OVERLAY-POLICY.md` § Outside-click).
  *
  * @example
  * ```svelte
@@ -78,23 +83,21 @@ export function createClickOutside(options: ClickOutsideOptions): Attachment<HTM
   const { handler, enabled = true, eventType = 'click', capture = true, ignoreRefs } = options;
 
   return (node: HTMLElement) => {
-    // All three event types (click, pointerdown, mousedown) produce MouseEvent or its
-    // subtype PointerEvent — typing as MouseEvent is accurate and preserves mouse properties
-    // should the handler or future callers need them.
-    function handleEvent(event: MouseEvent) {
+    function handleEvent(event: MouseEvent | PointerEvent | TouchEvent) {
       const isEnabled = typeof enabled === 'function' ? enabled() : enabled;
       if (!isEnabled) return;
+      if (event.type === 'touchstart' && !event.cancelable) return;
       const target = event.target;
       // A non-Node (or null) target is treated as outside the node.
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target)) return;
+      if (isInsideEventPath(event, node)) return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target)) return;
+          if (element && isInsideEventPath(event, element)) return;
         }
       }
       handler();

package/src/utilities/clipboard.ts

@@ -36,6 +36,8 @@ function legacyCopy(text: string): boolean {
   const textarea = document.createElement('textarea');
   textarea.value = text;
   textarea.setAttribute('readonly', '');
+  textarea.setAttribute('aria-hidden', 'true');
+  textarea.setAttribute('tabindex', '-1');
   textarea.style.position = 'absolute';
   textarea.style.left = '-9999px';
   document.body.appendChild(textarea);

package/src/utilities/fixed-virtual-window.ts

@@ -0,0 +1,99 @@
+export type VirtualListKey = string | number;
+
+export type FixedVirtualWindowItem = {
+  readonly index: number;
+  readonly key: VirtualListKey;
+  readonly start: number;
+  readonly size: number;
+};
+
+export type FixedVirtualWindow = {
+  readonly items: readonly FixedVirtualWindowItem[];
+  readonly totalSize: number;
+  readonly leadingSize: number;
+  readonly trailingSize: number;
+  readonly startIndex: number;
+  readonly endIndex: number;
+};
+
+export type FixedVirtualWindowOptions = {
+  itemCount: number;
+  itemHeight: number;
+  scrollOffset: number;
+  viewportHeight: number;
+  overscan: number;
+  getKey?: (index: number) => VirtualListKey;
+};
+
+export function resolveVirtualItemHeight(itemHeight: number, fallback = 1): number {
+  if (Number.isFinite(itemHeight) && itemHeight > 0) return itemHeight;
+  return fallback;
+}
+
+export function resolveVirtualOverscan(overscan: number | undefined): number {
+  if (!Number.isFinite(overscan) || overscan === undefined) return 0;
+  return Math.max(0, Math.floor(overscan));
+}
+
+export function parsePixelLength(value: string | undefined): number | undefined {
+  if (value === undefined) return undefined;
+  const match = /^([0-9]+(?:\.[0-9]+)?)px$/.exec(value.trim());
+  if (!match) return undefined;
+  return Number(match[1]);
+}
+
+export function getFixedVirtualWindow({
+  itemCount,
+  itemHeight,
+  scrollOffset,
+  viewportHeight,
+  overscan,
+  getKey,
+}: FixedVirtualWindowOptions): FixedVirtualWindow {
+  const count = Math.max(0, Math.floor(itemCount));
+  const size = resolveVirtualItemHeight(itemHeight);
+  const totalSize = count * size;
+
+  if (count === 0) {
+    return {
+      items: [],
+      totalSize,
+      leadingSize: 0,
+      trailingSize: 0,
+      startIndex: 0,
+      endIndex: 0,
+    };
+  }
+
+  const resolvedViewportHeight =
+    Number.isFinite(viewportHeight) && viewportHeight > 0 ? viewportHeight : size * 10;
+  const resolvedOverscan = resolveVirtualOverscan(overscan);
+  const maxScrollOffset = Math.max(0, totalSize - resolvedViewportHeight);
+  const offset = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
+  const visibleStartIndex = Math.min(count - 1, Math.floor(offset / size));
+  const visibleCount = Math.max(1, Math.ceil(resolvedViewportHeight / size));
+  const startIndex = Math.max(0, visibleStartIndex - resolvedOverscan);
+  const endIndex = Math.min(count, startIndex + visibleCount + resolvedOverscan * 2);
+  const items = Array.from({ length: endIndex - startIndex }, (_, indexOffset) => {
+    const index = startIndex + indexOffset;
+    return {
+      index,
+      key: getKey?.(index) ?? index,
+      start: index * size,
+      size,
+    };
+  });
+  const firstItem = items[0];
+  const lastItem = items.at(-1);
+  const leadingSize = firstItem?.start ?? 0;
+  const trailingSize = lastItem ? Math.max(0, totalSize - (lastItem.start + lastItem.size)) : 0;
+
+  return {
+    items,
+    totalSize,
+    leadingSize,
+    trailingSize,
+    startIndex,
+    endIndex,
+  };
+}

package/src/utilities/value-change.ts

@@ -0,0 +1,11 @@
+export type ValueChangeHandler<T> = (next: T) => T | void;
+
+export function commitValue<T>(
+  proposed: T,
+  onValueChange: ValueChangeHandler<T> | undefined,
+  setValue: (next: T) => void,
+): T {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}

package/dist/components/accordion/accordion.fixture.svelte.d.ts

@@ -1,8 +0,0 @@
-import { Accordion } from './index.ts';
-type FixtureProps = {
-    expandedIds?: string[];
-    multiple?: boolean;
-};
-declare const Accordion: import("svelte").Component<FixtureProps, {}, "">;
-type Accordion = ReturnType<typeof Accordion>;
-export default Accordion;