@happyvertical/smrt-ui 0.55.17 → 0.55.19

package/dist/components/ui/Popover.svelte

@@ -114,14 +114,14 @@ $effect(() => {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .popover { position: relative; display: inline-flex; }
-  .popover__trigger { appearance: none; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); font: inherit; cursor: pointer; }
-  .popover__trigger:focus-visible, .popover__panel:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
-  .popover__trigger:disabled { opacity: .5; cursor: not-allowed; }
+  .popover__trigger { appearance: none; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: var(--smrt-hairline-strong); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-control); color: var(--smrt-color-on-surface); font: inherit; font-weight: var(--smrt-control-weight); cursor: pointer; }
+  .popover__trigger:focus-visible, .popover__panel:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .popover__trigger:disabled { opacity: var(--smrt-state-disabled); cursor: not-allowed; }
   /* Icon trigger: a 44px round glyph in the surrounding colour. Hover and open nudge the glyph; focus keeps the standard primary ring (a soft ring in the glyph's colour fell under 3:1 on ordinary surfaces). */
   .popover__trigger--icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: none; border-radius: var(--smrt-radius-full); background: transparent; color: inherit; }
   .popover__trigger--icon:hover:not(:disabled), .popover__trigger--icon[aria-expanded='true'] { background: transparent; color: color-mix(in srgb, currentColor 80%, var(--smrt-color-on-surface)); }
   .popover__trigger--icon:focus-visible { background: transparent; }
-  .popover__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); box-sizing: border-box; inline-size: var(--smrt-popover-panel-width, auto); min-width: min(16rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: var(--smrt-popover-panel-padding, var(--smrt-spacing-4)); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container); color: var(--smrt-color-on-surface); box-shadow: var(--smrt-elevation-3); }
+  .popover__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); box-sizing: border-box; inline-size: var(--smrt-popover-panel-width, auto); min-width: min(16rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: var(--smrt-popover-panel-padding, var(--smrt-spacing-4)); border: var(--smrt-hairline); border-radius: var(--smrt-radius-large); background: var(--smrt-glass-surface); backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); color: var(--smrt-color-on-surface); box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3); }
   .popover__panel--bottom-start { top: calc(100% + var(--smrt-spacing-1)); left: 0; }
   .popover__panel--bottom-end { top: calc(100% + var(--smrt-spacing-1)); right: 0; }
   .popover__panel--top-start { bottom: calc(100% + var(--smrt-spacing-1)); left: 0; }

package/dist/components/ui/Tooltip.svelte

@@ -88,6 +88,7 @@ function onKeydown(event: KeyboardEvent) {
     color: var(--smrt-color-inverse-on-surface);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     line-height: var(--smrt-typography-body-small-line-height, 1.4);
+    box-shadow: var(--smrt-elevation-3);
     pointer-events: none;
   }
 

package/dist/components/ui/Tree.svelte

@@ -181,8 +181,8 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
     background: var(--smrt-color-surface-container-high);
   }
   .tree__item:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
   .tree__item.selected {
     background: var(--smrt-color-primary-container);

package/dist/themes/CUSTOM_THEME_GUIDE.md

@@ -330,19 +330,34 @@ Every theme (presets and `createTheme()` output) must define these names. Genera
 `scripts/generate-smrt-required-tokens.mjs`; do not edit by hand. Component-private
 `--smrt-<component>-*` knobs are excluded.
 
-- **color** (40): `--smrt-color-background`, `--smrt-color-error`, `--smrt-color-error-container`, `--smrt-color-inverse-on-surface`, `--smrt-color-inverse-surface`, `--smrt-color-on-background`, `--smrt-color-on-error`, `--smrt-color-on-error-container`, `--smrt-color-on-primary`, `--smrt-color-on-primary-container`, `--smrt-color-on-secondary`, `--smrt-color-on-secondary-container`, `--smrt-color-on-success-container`, `--smrt-color-on-surface`, `--smrt-color-on-surface-variant`, `--smrt-color-on-tertiary`, `--smrt-color-on-tertiary-container`, `--smrt-color-on-warning-container`, `--smrt-color-outline`, `--smrt-color-outline-variant`, `--smrt-color-primary`, `--smrt-color-primary-container`, `--smrt-color-scrim`, `--smrt-color-secondary`, `--smrt-color-secondary-container`, `--smrt-color-shadow`, `--smrt-color-success`, `--smrt-color-success-container`, `--smrt-color-surface`, `--smrt-color-surface-container`, `--smrt-color-surface-container-high`, `--smrt-color-surface-container-highest`, `--smrt-color-surface-container-low`, `--smrt-color-surface-container-lowest`, `--smrt-color-surface-dim`, `--smrt-color-surface-variant`, `--smrt-color-tertiary`, `--smrt-color-tertiary-container`, `--smrt-color-warning`, `--smrt-color-warning-container`
+- **color** (42): `--smrt-color-background`, `--smrt-color-error`, `--smrt-color-error-container`, `--smrt-color-info`, `--smrt-color-info-container`, `--smrt-color-inverse-on-surface`, `--smrt-color-inverse-surface`, `--smrt-color-on-background`, `--smrt-color-on-error`, `--smrt-color-on-error-container`, `--smrt-color-on-primary`, `--smrt-color-on-primary-container`, `--smrt-color-on-secondary`, `--smrt-color-on-secondary-container`, `--smrt-color-on-success-container`, `--smrt-color-on-surface`, `--smrt-color-on-surface-variant`, `--smrt-color-on-tertiary`, `--smrt-color-on-tertiary-container`, `--smrt-color-on-warning-container`, `--smrt-color-outline`, `--smrt-color-outline-variant`, `--smrt-color-primary`, `--smrt-color-primary-container`, `--smrt-color-scrim`, `--smrt-color-secondary`, `--smrt-color-secondary-container`, `--smrt-color-shadow`, `--smrt-color-success`, `--smrt-color-success-container`, `--smrt-color-surface`, `--smrt-color-surface-container`, `--smrt-color-surface-container-high`, `--smrt-color-surface-container-highest`, `--smrt-color-surface-container-low`, `--smrt-color-surface-container-lowest`, `--smrt-color-surface-dim`, `--smrt-color-surface-variant`, `--smrt-color-tertiary`, `--smrt-color-tertiary-container`, `--smrt-color-warning`, `--smrt-color-warning-container`
+- **control** (4): `--smrt-control-height`, `--smrt-control-height-small`, `--smrt-control-radius`, `--smrt-control-radius-small`
 - **duration** (6): `--smrt-duration-fast`, `--smrt-duration-medium1`, `--smrt-duration-normal`, `--smrt-duration-short2`, `--smrt-duration-short3`, `--smrt-duration-short4`
 - **easing** (3): `--smrt-easing-emphasized`, `--smrt-easing-emphasized-decelerate`, `--smrt-easing-standard`
 - **elevation** (5): `--smrt-elevation-1`, `--smrt-elevation-2`, `--smrt-elevation-3`, `--smrt-elevation-4`, `--smrt-elevation-5`
+- **focus** (3): `--smrt-focus-ring-color`, `--smrt-focus-ring-offset`, `--smrt-focus-ring-width`
 - **font** (2): `--smrt-font-family`, `--smrt-font-family-mono`
+- **glass** (4): `--smrt-glass-blur`, `--smrt-glass-saturation`, `--smrt-glass-surface`, `--smrt-glass-surface-strong`
+- **hairline** (4): `--smrt-hairline`, `--smrt-hairline-color`, `--smrt-hairline-strong`, `--smrt-hairline-strong-color`
+- **inset** (1): `--smrt-inset-highlight`
 - **radius** (11): `--smrt-radius-2xl`, `--smrt-radius-extra-large`, `--smrt-radius-extra-small`, `--smrt-radius-full`, `--smrt-radius-large`, `--smrt-radius-lg`, `--smrt-radius-md`, `--smrt-radius-medium`, `--smrt-radius-sm`, `--smrt-radius-small`, `--smrt-radius-xl`
+- **scrollbar** (2): `--smrt-scrollbar-thumb`, `--smrt-scrollbar-track`
 - **spacing** (19): `--smrt-spacing-0_5`, `--smrt-spacing-1`, `--smrt-spacing-10`, `--smrt-spacing-11`, `--smrt-spacing-12`, `--smrt-spacing-1_5`, `--smrt-spacing-2`, `--smrt-spacing-2xl`, `--smrt-spacing-3`, `--smrt-spacing-3xl`, `--smrt-spacing-4`, `--smrt-spacing-5`, `--smrt-spacing-6`, `--smrt-spacing-8`, `--smrt-spacing-lg`, `--smrt-spacing-md`, `--smrt-spacing-sm`, `--smrt-spacing-xl`, `--smrt-spacing-xs`
+- **state** (5): `--smrt-state-disabled`, `--smrt-state-dragged`, `--smrt-state-hover`, `--smrt-state-pressed`, `--smrt-state-selected`
+- **surface** (6): `--smrt-surface-control`, `--smrt-surface-ground`, `--smrt-surface-overlay`, `--smrt-surface-panel`, `--smrt-surface-raised`, `--smrt-surface-sunken`
 - **touch** (1): `--smrt-touch-target-min`
 - **typography** (56): `--smrt-typography-body-large-font`, `--smrt-typography-body-large-line-height`, `--smrt-typography-body-large-size`, `--smrt-typography-body-large-tracking`, `--smrt-typography-body-medium-font`, `--smrt-typography-body-medium-line-height`, `--smrt-typography-body-medium-size`, `--smrt-typography-body-medium-tracking`, `--smrt-typography-body-medium-weight`, `--smrt-typography-body-small-font`, `--smrt-typography-body-small-line-height`, `--smrt-typography-body-small-size`, `--smrt-typography-body-small-weight`, `--smrt-typography-display-medium-line-height`, `--smrt-typography-display-medium-size`, `--smrt-typography-display-small-size`, `--smrt-typography-headline-large-line-height`, `--smrt-typography-headline-large-size`, `--smrt-typography-headline-large-weight`, `--smrt-typography-headline-medium-line-height`, `--smrt-typography-headline-medium-size`, `--smrt-typography-headline-medium-weight`, `--smrt-typography-headline-small-font`, `--smrt-typography-headline-small-line-height`, `--smrt-typography-headline-small-size`, `--smrt-typography-headline-small-weight`, `--smrt-typography-label-large-font`, `--smrt-typography-label-large-size`, `--smrt-typography-label-large-tracking`, `--smrt-typography-label-large-weight`, `--smrt-typography-label-medium-font`, `--smrt-typography-label-medium-size`, `--smrt-typography-label-medium-tracking`, `--smrt-typography-label-medium-weight`, `--smrt-typography-label-small-font`, `--smrt-typography-label-small-line-height`, `--smrt-typography-label-small-size`, `--smrt-typography-label-small-tracking`, `--smrt-typography-label-small-weight`, `--smrt-typography-title-large-font`, `--smrt-typography-title-large-line-height`, `--smrt-typography-title-large-size`, `--smrt-typography-title-medium-font`, `--smrt-typography-title-medium-font-family`, `--smrt-typography-title-medium-line-height`, `--smrt-typography-title-medium-size`, `--smrt-typography-title-medium-tracking`, `--smrt-typography-title-medium-weight`, `--smrt-typography-title-small-font`, `--smrt-typography-title-small-size`, `--smrt-typography-title-small-tracking`, `--smrt-typography-title-small-weight`, `--smrt-typography-weight-bold`, `--smrt-typography-weight-medium`, `--smrt-typography-weight-normal`, `--smrt-typography-weight-semibold`
 - **z** (7): `--smrt-z-index-dialog`, `--smrt-z-index-dropdown`, `--smrt-z-index-modal`, `--smrt-z-index-overlay`, `--smrt-z-index-sticky`, `--smrt-z-index-toast`, `--smrt-z-index-tooltip`
 
 <!-- smrt-required-tokens:end -->
 
+## Runtime overrides
+
+`ThemeProvider` layers user choices over a theme without touching the theme itself:
+`borderRadius` (control radius tokens), `primaryColor` (full derived primary set, also
+available as `derivePrimaryOverrides(color, scheme)`), `density` and `contrast`. See the
+ThemeProvider props table in the README for the exact behaviour.
+
 ## Best Practices
 
 1. **Extend a base theme**: Start with `extend: 'material'` or another base to get sensible defaults

package/dist/themes/README.md

@@ -305,8 +305,29 @@ import '@happyvertical/smrt-ui/themes/styles/happyvertical.css';
 | `borderRadius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Border radius scale |
 | `overrides` | `Record<string, string>` | `{}` | Custom CSS variable overrides |
 | `persist` | `boolean` | `true` | Persist to localStorage |
+| `density` | `'comfortable' \| 'touch'` | - | Default control target size (`--smrt-control-target-min`); persisted |
+| `contrast` | `'auto' \| 'standard' \| 'more'` | `'auto'` | `auto` follows `prefers-contrast: more`; persisted when explicit |
 | `storageKey` | `string` | `'smrt-theme'` | localStorage key |
 
+Behaviour notes (state exposed on context: `contrast`, `isChangingScheme`):
+
+- `borderRadius` other than `md` is emitted inline as `--smrt-control-radius` /
+  `--smrt-control-radius-small` (one scale step smaller for the small radius);
+  `md` leaves the preset's own control radius in place. The generic
+  `--smrt-radius-*` scale is not changed.
+- `primaryColor` emits the whole derived set for the resolved scheme through
+  `derivePrimaryOverrides(color, scheme)` (also exported): `color-primary`, `on-primary`
+  (best of white/black), `primary-container`, `on-primary-container`, `inverse-primary`,
+  and the focus ring, accent, caret and selection tokens.
+- After the resolved scheme changes post-mount, `data-smrt-theme-changing` is set on
+  the root and `<html>` for one `--smrt-duration-scheme`, so styles can crossfade.
+  Never on first paint; skipped under `prefers-reduced-motion: reduce`.
+- Contrast: `data-contrast="standard|more|forced"` on `<html>` and the root;
+  `forced-colors: active` also sets `data-forced-colors`. Contract for components in
+  forced-colors mode: do not paint over system colours, hairlines become `CanvasText`
+  and focus rings `Highlight` (component side: #3867 follow-up).
+- `themeScript()` stamps `data-contrast` and (when persisted) `data-density` pre-paint.
+
 ## Theme Switching
 
 Use the context to switch themes programmatically:
@@ -630,6 +651,111 @@ on any custom property outside `--smrt-*` in `packages/*/src`. The one-time rewr
 was `scripts/codemod-smrt-tokens.mjs`; it is idempotent, so re-run it after a rebase
 instead of hand-merging renamed names.
 
+### Premium baseline token vocabulary
+
+Every preset and every `createTheme()` result defines all of these in both schemes
+(sections of `Theme` in `types.ts`; defaults derived in `derive.ts`; emitted by
+`generateThemeVariables`). Themes and presets define them; **components only consume
+them**. Do not redeclare a theme token on a component root (CSS or `style:`): the
+required-tokens scanner (`scripts/smrt-token-scan-lib.mjs`) treats any `--smrt-*` name
+a component defines on its own root as component-private and drops it from the required
+list repo-wide. A per-variant override uses a component-prefixed name that falls back to
+the theme token, for example `background: color-mix(in srgb, currentColor
+calc(var(--smrt-button-state-hover, var(--smrt-state-hover)) * 100%), transparent)`.
+
+| Token | Meaning | Consumed by |
+| --- | --- | --- |
+| `--smrt-surface-ground` | Page ground | `body`/shell background |
+| `--smrt-surface-panel` | Cards, sidebars, panels on the ground | `background` of Card, sidebars, header, footer |
+| `--smrt-surface-control` | Input and control fill | `background` of Input, Select, Textarea, Button (outlined/tonal) |
+| `--smrt-surface-raised` | Menus, popovers, dialogs above panels | `background` of overlays |
+| `--smrt-surface-sunken` | Wells and recessed regions | `background` of tables headers, code, inset areas |
+| `--smrt-surface-overlay` | Modal scrim | `background` of Modal/Drawer backdrops |
+| `--smrt-hairline-color` / `-strong-color` | Quiet and strong edge colours | `border-color`, `outline-color`, dividers |
+| `--smrt-hairline` / `--smrt-hairline-strong` | `1px solid` edge shorthands | `border`, `border-top` etc. on panels (quiet) and controls (strong) |
+| `--smrt-inset-highlight` | Top inner light line (`none` on light) | `box-shadow` (layer with an elevation) on raised dark surfaces |
+| `--smrt-state-{hover,pressed,selected,focus,dragged,disabled}` | Unitless state-layer opacities, 0 to 1 | Mix percentage of a state overlay (`calc(var(--smrt-state-hover) * 100%)`); `disabled` as `opacity` |
+| `--smrt-shadow-color` | `rgb(r g b)` shadow base, per scheme | `box-shadow` colour: `rgb(from var(--smrt-shadow-color) r g b / 0.2)` |
+| `--smrt-elevation-0..5` | Existing shadow scale | `box-shadow` |
+| `--smrt-control-radius` / `-radius-small` | Control corner radii | `border-radius` of controls |
+| `--smrt-control-height` / `-height-small` | Control heights | `min-height`/`block-size` of controls |
+| `--smrt-control-weight` | Control label weight | `font-weight` of buttons and inputs |
+| `--smrt-control-border` | Control edge shorthand (`var(--smrt-hairline-strong)`) | `border` of controls |
+| `--smrt-control-target-min` | Density-driven minimum hit size (set by ThemeProvider `density`) | `min-height`/`min-width` of interactive controls |
+| `--smrt-control-hit-size` | Hit area of small icon controls | `inline-size`/`block-size` of icon buttons |
+| `--smrt-focus-ring-{color,width,offset}` | Focus indicator | `outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color)`, `outline-offset` on `:focus-visible` |
+| `--smrt-accent-color` | Native control accent | `accent-color` (checkbox, radio, range, date pickers) |
+| `--smrt-selection-{background,color}` | Text selection | `::selection` |
+| `--smrt-caret-color` | Text caret | `caret-color` |
+| `--smrt-scrollbar-{thumb,track}` | Scrollbar colours | `scrollbar-color: thumb track` |
+| `--smrt-glass-blur` / `-saturation` | Backdrop filter amounts (`0px`/`100%` outside Glass) | `backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation))` |
+| `--smrt-glass-surface` / `-surface-strong` | Translucent (Glass) or opaque surface fills; opacity is part of the colour | `background` of floating chrome and overlays |
+| `--smrt-glass-border` | Glass edge colour | `border-color` of glass surfaces |
+| `--smrt-duration-scheme` | Scheme crossfade duration | `transition-duration` when the colour scheme changes |
+| `--smrt-font-feature-settings` | OpenType features (`"tnum" 1, "cv11" 1` on Inter presets) | `font-feature-settings` on the root and numeric cells |
+
+#### Semantic info colour
+
+`ColorPalette` carries an info family beside success, warning and error:
+`--smrt-color-info`, `--smrt-color-on-info`, `--smrt-color-info-container` and
+`--smrt-color-on-info-container`. Presets without a distinct information hue define
+it as their tertiary family (Material, Glass, Studio, Day Shift); **smrt** uses a
+steel blue (`#2c6a96` light, `#6fa8d6` dark) so Information no longer shares amber
+with Warning. `createTheme()` follows a supplied `tertiary` unless `info` is also
+given. Components that show information status (for example `Alert` `variant="info"`)
+should consume these, not tertiary.
+
+#### Preset identities on the baseline
+
+| Preset | Dark ladder (ground / panel / control / raised) | Depth | State layers (hover / pressed / selected) | Controls |
+| --- | --- | --- | --- | --- |
+| Material | `#121316` / `#1b1c20` / `#26282c` / `#34363a` (M3 tonal, no borders needed; control border is transparent) | contact + ambient; dark adds the inset highlight | .08 / .12 / .12 | radius md / sm, 2.75rem |
+| Glass | `#0b0b0f` ground; panel 72% and popover 88% frosted glass, input a recessed 28% black well; blur 20px, saturation 180% | softest, widest ambient | .10 / .14 / .14 | radius lg / md, 2.75rem |
+| Studio | `#131416` / `#131416` / `#1c1d20` / `#292a2d` (flat, crisp hairlines, panel equals ground) | elevation 1 is the hairline; tight shadows | .06 / .10 / .10 | radius 0.375rem / sm, 2.5rem |
+| smrt | `#0b0c0e` / `#121417` / `#181b1f` / `#1d2126` (instrument dark, amber signal, steel-blue info) | elevation 1 is the hairline; calm two-layer shadows (no far-spread) | .10 / .16 / .14 | radius sm, 2.5rem |
+| Day Shift | enamel ground, faceplate panel, control a hair lighter, raised = faceplate; hairlines are the bezel | elevation 1 is the bezel hairline; minimal | .06 / .10 / .10 | radius md (6px) / sm, 2.5rem |
+
+Elevation 2 to 5 are two-layer shadows built with `shadow()` in `shared.ts`: a contact
+layer (`0 1px 2px`) plus an ambient layer (`0 Npx Mpx` with negative spread), both
+`color-mix`ed from `--smrt-shadow-color`. Dark schemes prepend
+`var(--smrt-inset-highlight)`. Weight is 500 on every preset. Native chrome follows the
+baseline: accent and caret are primary, selection is the primary container, and the
+scrollbar thumb is the strong hairline over a transparent track.
+
+`--smrt-glass-border-opacity` and `--smrt-glass-background-opacity` are deprecated: still emitted (from `GlassEffects.borderOpacity`/`backgroundOpacity`, `1` when unset) for one release and removed in the next minor; the former
+tokens, and the ThemeProvider-local `--smrt-glass-surface`/`--smrt-glass-border`,
+were folded into the glass surface colours above.
+
+### Typography
+
+`themes/styles/base.css` (import once at the app entry) maps headings to type roles
+inside `@layer smrt.structure`, scoped under `body` and `.smrt-theme-root`, so presets'
+display faces reach plain markup. Hosts restyle with unlayered CSS.
+
+| Element | Role |
+| --- | --- |
+| `h1` | `display-small` |
+| `h2` | `headline-large` |
+| `h3` | `headline-medium` |
+| `h4` | `headline-small` |
+| `h5` | `title-large` |
+| `h6` | `title-medium` |
+
+Each heading takes `font-family`, `font-size`, `line-height`, `font-weight` and
+`letter-spacing` from the role's typography tokens (for example `--smrt-typography-headline-large-size`), and a `margin-block` from
+`--smrt-spacing-*` (first children lose the top margin). Utilities
+`.smrt-{display,headline,title,body,label}-{large,medium,small}` apply the same five
+properties to any element.
+
+Tabular figures: the root sets `font-feature-settings: var(--smrt-font-feature-settings)`,
+and `table`, `time`, `[data-smrt-component="DataTable"]`, `[data-smrt-component="Badge"]`
+and `.smrt-tabular` set `font-variant-numeric: tabular-nums`.
+
+Preset rhythm: display tracking tightens with size (about -0.02em at display, -0.01em at
+headline, 0 at title), labels weigh 500 (Day Shift keeps its documented bold B612 labels),
+body is 400, and display plus headline roles use the preset's display face where it has one
+(smrt: Space Grotesk; Day Shift: its documented stack).
+
 ## Advanced Usage
 
 ### Build-Time Theming

package/dist/themes/ThemeProvider.svelte

@@ -3,10 +3,13 @@ import type { Snippet } from 'svelte';
 import { onMount, untrack } from 'svelte';
 import { SMRT_CASCADE_LAYERS_CSS } from '../styles/layers.js';
 import { setThemeContext, type ThemeContext } from './context.svelte.js';
+import { derivePrimaryOverrides } from './create-theme.js';
 import { generateThemeVariables } from './css-generator.js';
 import { availablePresets, getTheme, isValidPreset } from './registry.js';
 import type {
   ColorScheme,
+  ContrastPreference,
+  ResolvedContrast,
   Theme,
   ThemeConfig,
   ThemePreset,
@@ -16,7 +19,12 @@ import { defaultThemeConfig } from './types.js';
 
 interface Props {
   /** Default control target density for descendants; individual controls may override. */
-  density?: 'comfortable' | 'touch';
+  density?: ThemeConfig['density'];
+  /**
+   * Contrast preference. `auto` (default) follows `prefers-contrast: more`;
+   * `forced-colors: active` always wins. Persisted when set explicitly.
+   */
+  contrast?: ContrastPreference;
   /** Theme preset to use */
   preset?: ThemePreset;
   /** Color scheme preference */
@@ -63,6 +71,7 @@ let {
   inlineVariables,
   children,
   density,
+  contrast = 'auto',
 }: Props = $props();
 
 // Internal state — seed from the props (which already default to
@@ -78,6 +87,8 @@ let config = $state<ThemeConfig>(
     colorScheme,
     primaryColor,
     borderRadius,
+    density,
+    contrast,
     overrides,
     persist,
     storageKey,
@@ -85,8 +96,33 @@ let config = $state<ThemeConfig>(
 );
 
 let systemPrefersDark = $state(false);
+let systemContrastMore = $state(false);
+let systemForcedColors = $state(false);
+let isChangingScheme = $state(false);
 let mounted = $state(false);
 
+/** Control radius per `borderRadius` choice: [control, small]. `md` is the preset default. */
+const CONTROL_RADIUS: Record<
+  NonNullable<ThemeConfig['borderRadius']>,
+  [string, string]
+> = {
+  none: ['var(--smrt-radius-none)', 'var(--smrt-radius-none)'],
+  sm: ['var(--smrt-radius-sm)', 'var(--smrt-radius-sm)'],
+  md: ['var(--smrt-radius-md)', 'var(--smrt-radius-sm)'],
+  lg: ['var(--smrt-radius-lg)', 'var(--smrt-radius-md)'],
+  xl: ['var(--smrt-radius-xl)', 'var(--smrt-radius-lg)'],
+  full: ['var(--smrt-radius-full)', 'var(--smrt-radius-full)'],
+};
+
+const resolvedContrast = $derived<ResolvedContrast>(
+  systemForcedColors
+    ? 'forced'
+    : config.contrast === 'more' ||
+        (config.contrast !== 'standard' && systemContrastMore)
+      ? 'more'
+      : 'standard',
+);
+
 // Derived state
 const currentTheme = $derived<Theme>(getTheme(config.preset));
 
@@ -123,15 +159,34 @@ const styleString = $derived.by(() => {
     }
   }
 
-  // Apply primary color override
+  // Border radius: only a non-default choice is emitted, so `md` keeps the
+  // preset's own control radius from the static stylesheet.
+  if (config.borderRadius && config.borderRadius !== 'md') {
+    const [control, small] = CONTROL_RADIUS[config.borderRadius];
+    declarations.push(
+      `--smrt-control-radius: ${control}`,
+      `--smrt-control-radius-small: ${small}`,
+    );
+  }
+
+  // Primary colour override: the whole derived set for the resolved scheme so
+  // on-primary / container / focus / accent never stay mismatched.
   if (config.primaryColor) {
-    declarations.push(`--smrt-color-primary: ${config.primaryColor}`);
-    // Recalculate dependent colors would go here in a full implementation
+    try {
+      for (const [key, value] of Object.entries(
+        derivePrimaryOverrides(config.primaryColor, resolvedScheme),
+      )) {
+        declarations.push(`${key}: ${value}`);
+      }
+    } catch {
+      // Unparseable colour (e.g. a named colour): keep the single variable.
+      declarations.push(`--smrt-color-primary: ${config.primaryColor}`);
+    }
   }
 
-  if (density !== undefined) {
+  if (config.density !== undefined) {
     declarations.push(
-      `--smrt-control-target-min: ${density === 'touch' ? 'var(--smrt-touch-target-min)' : '0px'}`,
+      `--smrt-control-target-min: ${config.density === 'touch' ? 'var(--smrt-touch-target-min)' : '0px'}`,
     );
   }
 
@@ -149,6 +204,8 @@ const themeState = $derived<ThemeStateType>({
   colorScheme: config.colorScheme,
   resolvedScheme,
   isDark,
+  contrast: resolvedContrast,
+  isChangingScheme,
   config,
   theme: currentTheme,
 });
@@ -183,6 +240,10 @@ function persistConfig(): void {
       preset: config.preset,
       colorScheme: config.colorScheme,
       borderRadius: config.borderRadius,
+      ...(config.density ? { density: config.density } : {}),
+      ...(config.contrast && config.contrast !== 'auto'
+        ? { contrast: config.contrast }
+        : {}),
     });
     localStorage.setItem(config.storageKey!, data);
   } catch {
@@ -222,6 +283,15 @@ function loadPersistedConfig(): void {
       ) {
         config.borderRadius = persisted.borderRadius;
       }
+      if (
+        persisted.density === 'comfortable' ||
+        persisted.density === 'touch'
+      ) {
+        config.density = persisted.density;
+      }
+      if (persisted.contrast === 'standard' || persisted.contrast === 'more') {
+        config.contrast = persisted.contrast;
+      }
     }
   } catch {
     // Ignore storage errors (e.g., corrupted data, JSON parse errors)
@@ -253,6 +323,20 @@ onMount(() => {
     };
     mediaQuery.addEventListener('change', handler);
 
+    // Contrast preferences (guarded: matchMedia stubs may omit these queries)
+    const moreQuery = window.matchMedia('(prefers-contrast: more)');
+    const forcedQuery = window.matchMedia('(forced-colors: active)');
+    systemContrastMore = !!moreQuery?.matches;
+    systemForcedColors = !!forcedQuery?.matches;
+    const moreHandler = (e: MediaQueryListEvent) => {
+      systemContrastMore = e.matches;
+    };
+    const forcedHandler = (e: MediaQueryListEvent) => {
+      systemForcedColors = e.matches;
+    };
+    moreQuery?.addEventListener?.('change', moreHandler);
+    forcedQuery?.addEventListener?.('change', forcedHandler);
+
     // Load persisted preferences
     loadPersistedConfig();
 
@@ -260,6 +344,9 @@ onMount(() => {
 
     return () => {
       mediaQuery.removeEventListener('change', handler);
+      moreQuery?.removeEventListener?.('change', moreHandler);
+      forcedQuery?.removeEventListener?.('change', forcedHandler);
+      if (schemeTimer) clearTimeout(schemeTimer);
     };
   }
 });
@@ -278,9 +365,61 @@ $effect(() => {
 
     // Color scheme for browser UI
     html.style.colorScheme = resolvedScheme;
+
+    // Contrast / density contract (themeScript stamps the same pre-paint)
+    html.setAttribute('data-contrast', resolvedContrast);
+    html.toggleAttribute('data-forced-colors', resolvedContrast === 'forced');
+    if (config.density) html.setAttribute('data-density', config.density);
+    else html.removeAttribute('data-density');
   }
 });
 
+// Scheme crossfade: flag the root for one --smrt-duration-scheme after the
+// resolved scheme CHANGES post-mount (never on first paint, never under
+// prefers-reduced-motion) so base.css/components can transition colours.
+const FALLBACK_SCHEME_MS = 250;
+let schemeTimer: ReturnType<typeof setTimeout> | undefined;
+let lastScheme: 'light' | 'dark' | undefined;
+
+function parseDurationMs(value: string): number | undefined {
+  const m = /^\s*(\d*\.?\d+)(ms|s)\s*$/.exec(value);
+  if (!m) return undefined;
+  return Number(m[1]) * (m[2] === 's' ? 1000 : 1);
+}
+
+function schemeDurationMs(): number {
+  const style = getComputedStyle(rootEl ?? document.documentElement);
+  return (
+    parseDurationMs(style.getPropertyValue('--smrt-duration-scheme')) ??
+    parseDurationMs(style.getPropertyValue('--smrt-duration-medium1')) ??
+    FALLBACK_SCHEME_MS
+  );
+}
+
+$effect(() => {
+  const scheme = resolvedScheme;
+  if (!mounted || typeof document === 'undefined') return;
+  const previous = lastScheme;
+  lastScheme = scheme;
+  if (previous === undefined || previous === scheme) return;
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) return;
+  const ms = untrack(schemeDurationMs);
+  isChangingScheme = true;
+  if (schemeTimer) clearTimeout(schemeTimer);
+  schemeTimer = setTimeout(() => {
+    isChangingScheme = false;
+    schemeTimer = undefined;
+  }, ms);
+});
+
+$effect(() => {
+  if (typeof document === 'undefined' || !mounted) return;
+  document.documentElement.toggleAttribute(
+    'data-smrt-theme-changing',
+    isChangingScheme,
+  );
+});
+
 // Sync props to state — but only on actual prop changes. config is seeded
 // from the initial props above and onMount applies persisted preferences, so
 // re-asserting the initial prop values here would clobber the persisted
@@ -289,6 +428,9 @@ let prevPreset = untrack(() => preset);
 let prevColorScheme = untrack(() => colorScheme);
 let prevPrimaryColor = untrack(() => primaryColor);
 let prevBorderRadius = untrack(() => borderRadius);
+let prevDensity = untrack(() => density);
+let prevContrast = untrack(() => contrast);
+let rootEl = $state<HTMLElement | undefined>();
 
 $effect(() => {
   if (preset !== prevPreset) {
@@ -328,6 +470,24 @@ $effect(() => {
   }
 });
 
+$effect(() => {
+  if (density !== prevDensity) {
+    prevDensity = density;
+    untrack(() => {
+      config.density = density;
+    });
+  }
+});
+
+$effect(() => {
+  if (contrast !== prevContrast) {
+    prevContrast = contrast;
+    untrack(() => {
+      config.contrast = contrast;
+    });
+  }
+});
+
 // Sync overrides prop to state
 $effect(() => {
   config.overrides = overrides;
@@ -348,13 +508,19 @@ $effect(() => {
 </svelte:head>
 
 <div
+  bind:this={rootEl}
   class="smrt-theme-root"
   class:dark={isDark}
   class:no-paint={!paintSurface}
   class:smrt-theme-glass={config.preset === 'glass'}
   style={styleString || undefined}
   data-theme={config.preset}
-  data-color-scheme={resolvedScheme} data-smrt-component="ThemeProvider"
+  data-color-scheme={resolvedScheme}
+  data-contrast={resolvedContrast}
+  data-forced-colors={resolvedContrast === 'forced' ? '' : undefined}
+  data-density={config.density}
+  data-smrt-theme-changing={isChangingScheme ? '' : undefined}
+  data-smrt-component="ThemeProvider"
 >
   {@render children()}
 </div>
@@ -377,12 +543,6 @@ $effect(() => {
     font-family: inherit;
   }
 
-  /* Glass theme specific base styles */
-  :global(.smrt-theme-glass) {
-    --smrt-glass-surface: var(--smrt-color-surface);
-    --smrt-glass-border: var(--smrt-color-outline);
-  }
-
   /* HappyVertical ("Day Shift") focus indicator (#2318).
    * The brand focus ring is part of the preset, so it has to travel on BOTH
    * delivery paths: this mirrors the identical rule in

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -1,8 +1,13 @@
 import type { Snippet } from 'svelte';
-import type { ColorScheme, ThemeConfig, ThemePreset } from './types.js';
+import type { ColorScheme, ContrastPreference, ThemeConfig, ThemePreset } from './types.js';
 interface Props {
     /** Default control target density for descendants; individual controls may override. */
-    density?: 'comfortable' | 'touch';
+    density?: ThemeConfig['density'];
+    /**
+     * Contrast preference. `auto` (default) follows `prefers-contrast: more`;
+     * `forced-colors: active` always wins. Persisted when set explicitly.
+     */
+    contrast?: ContrastPreference;
     /** Theme preset to use */
     preset?: ThemePreset;
     /** Color scheme preference */

package/dist/themes/ThemeProvider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AA4TD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAGlB,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqdD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/create-theme.d.ts

@@ -22,8 +22,18 @@ export interface CreateThemeOptions {
     elevation?: Partial<ElevationScale>;
     /** Custom easing curves (optional) */
     easing?: Partial<EasingScale>;
-    /** Glass effects (optional) */
+    /** Glass effects (optional; defaults to opaque) */
     glass?: GlassEffects;
+    /** Optional overrides for the premium-baseline token families */
+    surfaces?: Theme['surfaces'];
+    hairlines?: Theme['hairlines'];
+    states?: Theme['states'];
+    shadowColor?: Theme['shadowColor'];
+    controls?: Theme['controls'];
+    focus?: Theme['focus'];
+    native?: Theme['native'];
+    schemeDuration?: string;
+    fontFeatureSettings?: string;
     /** Font family */
     fontFamily?: string;
     /** Base theme to extend (copies all tokens as starting point) */
@@ -96,4 +106,15 @@ export declare function isThemeRegistered(id: string): Promise<boolean>;
  * ```
  */
 export declare function createThemeFromColor(primaryColor: string, id: string, name: string, options?: Omit<CreateThemeOptions, 'id' | 'name' | 'light'>): Theme;
+/**
+ * Derive the primary-dependent token overrides for a user-chosen primary colour
+ * in one resolved scheme, using the same derivation as `createThemeFromColor`
+ * (light: the colour itself with a ~12.5% container; dark: the tonal primary
+ * pair from `generateTheme`). `on-primary` is the higher-contrast of white and
+ * black on the final primary so an override never leaves it mismatched. Focus,
+ * accent, caret and selection tokens follow the primary via `var()`.
+ *
+ * Returns `--smrt-*` declarations; throws on an unparseable colour.
+ */
+export declare function derivePrimaryOverrides(color: string, scheme: 'light' | 'dark'): Record<string, string>;
 //# sourceMappingURL=create-theme.d.ts.map

package/dist/themes/create-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAsPD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CAsD9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP"}
+{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoBH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAkRD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CA8E9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP;AAID;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,GAAG,MAAM,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkCxB"}