@happyvertical/smrt-ui 0.40.68 → 0.40.70

package/dist/components/data/DataTable.svelte

@@ -529,7 +529,7 @@ const sizeClasses = {
   }
 
   .data-table__cell--expand { width: 2.75rem; text-align: center; }
-  .data-table__expand-button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-full); background: transparent; color: var(--smrt-color-on-surface); cursor: pointer; }
+  .data-table__expand-button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: transparent; color: var(--smrt-color-on-surface); cursor: pointer; }
   .data-table__expand-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .data-table__cell--expanded { padding: var(--smrt-spacing-4); background: var(--smrt-color-surface-container-low); }
   .data-table__footer { border-top: 2px solid var(--smrt-color-outline-variant); font-weight: var(--smrt-typography-weight-medium); }

package/dist/components/feedback/LoadingOverlay.svelte

@@ -259,7 +259,7 @@ function handleKeydown(e: KeyboardEvent) {
 		font-size: var(--smrt-typography-label-large-size, 0.875rem);
 		color: var(--smrt-color-on-surface-variant, #6b7280);
 		background: transparent;
-		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border: 1px solid var(--smrt-color-outline, #9ca3af);
 		border-radius: var(--smrt-radius-md, 8px);
 		cursor: pointer;
 		transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);

package/dist/components/forms/Combobox.svelte

@@ -165,7 +165,7 @@ useControlRegistration(() => {
 </div>
 <style>
   .combobox { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }
-  label { font: var(--smrt-typography-label-large-font); } input { width: 100%; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; }
+  label { font: var(--smrt-typography-label-large-font); } input { width: 100%; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; }
   input:focus { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-extra-small); background: transparent; color: var(--smrt-color-on-surface); text-align: left; } .options button.active { background: var(--smrt-color-secondary-container); }
   :global(.combobox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }

package/dist/components/forms/FilePicker.svelte

@@ -106,7 +106,7 @@ useControlRegistration(() => {
   <span class="label">{label}</span><span class="description">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected` : description}</span>
 </label>
 <style>
-  .file-picker { display: inline-flex; flex-direction: column; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
+  .file-picker { display: inline-flex; flex-direction: column; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   .file-picker.dropzone { width: 100%; min-height: 8rem; align-items: center; justify-content: center; border-style: dashed; text-align: center; }
   .file-picker.dragging { border-color: var(--smrt-color-primary); background: var(--smrt-color-primary-container); }
   .file-picker.disabled { opacity: .5; cursor: not-allowed; } input { position: absolute; width: 1px; height: 1px; opacity: 0; }

package/dist/components/forms/Input.svelte

@@ -179,7 +179,7 @@ export function getElement(): HTMLInputElement | null {
 		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
 		color: var(--smrt-color-on-surface, #1f2937);
 		background-color: var(--smrt-color-surface, #fff);
-		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border: 1px solid var(--smrt-color-outline, #6b7280);
 		border-radius: var(--smrt-radius-small, 0.375rem);
 		transition:
 			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),

package/dist/components/forms/InputGroup.svelte

@@ -10,7 +10,7 @@ let { prefix, suffix, children, class: className = '' }: Props = $props();
 </script>
 <div class="input-group {className}">{#if prefix}<span class="adornment">{@render prefix()}</span>{/if}<div class="control">{@render children()}</div>{#if suffix}<span class="adornment">{@render suffix()}</span>{/if}</div>
 <style>
-  .input-group { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); overflow: hidden; }
+  .input-group { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); overflow: hidden; }
   .adornment { display: inline-flex; align-items: center; padding: 0 var(--smrt-spacing-3); background: var(--smrt-color-surface-container-low); color: var(--smrt-color-on-surface-variant); }
   .control { flex: 1; min-width: 0; } .control :global(input), .control :global(select), .control :global(textarea) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
   .input-group:focus-within { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; }

package/dist/components/forms/Listbox.svelte

@@ -90,7 +90,7 @@ useControlRegistration(() => {
     onkeydown={(event) => move(event, index)} onclick={() => select(option.value)}>{option.label}</button>{/each}
 </div>
 <style>
-  .listbox { display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
+  .listbox { display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   button { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-extra-small); background: transparent; color: var(--smrt-color-on-surface); text-align: left; cursor: pointer; }
   button[aria-selected='true'] { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); } button:focus-visible { outline: 2px solid var(--smrt-color-primary); }
   button:disabled { opacity: .5; cursor: not-allowed; } :global(.listbox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }

package/dist/components/forms/MultiSelect.svelte

@@ -152,7 +152,7 @@ useControlRegistration(() => {
 </div>
 <style>
   .multi-select { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } .label { font: var(--smrt-typography-label-large-font); }
-  .trigger { width: 100%; min-height: 2.5rem; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; text-align: left; }
+  .trigger { width: 100%; min-height: 2.5rem; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; text-align: left; }
   .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2); border: 0; background: transparent; color: inherit; text-align: left; } .options button[aria-selected='true'] { background: var(--smrt-color-secondary-container); }
   :global(.multi-select[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }

package/dist/components/forms/RangeSlider.svelte

@@ -131,7 +131,7 @@ useControlRegistration(() => {
   .range-slider__track input::-moz-range-thumb { pointer-events: auto; }
   .range-slider__inputs { display: flex; gap: var(--smrt-spacing-3); }
   .range-slider__inputs label { display: grid; gap: var(--smrt-spacing-1); flex: 1; font: var(--smrt-typography-label-small-font); color: var(--smrt-color-on-surface-variant); }
-  .range-slider__inputs input { width: 100%; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
+  .range-slider__inputs input { width: 100%; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
   input:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
   :global(.range-slider[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
 </style>

package/dist/components/forms/Select.svelte

@@ -136,7 +136,7 @@ export function getElement(): HTMLSelectElement | null {
 		background-position: right 0.5rem center;
 		background-repeat: no-repeat;
 		background-size: 1.5em 1.5em;
-		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border: 1px solid var(--smrt-color-outline, #6b7280);
 		border-radius: 0.375rem;
 		appearance: none;
 		cursor: pointer;

package/dist/components/forms/Slider.svelte

@@ -125,7 +125,7 @@ useControlRegistration(() => {
   .slider__header { justify-content: space-between; font: var(--smrt-typography-label-large-font); }
   output { color: var(--smrt-color-primary); font-variant-numeric: tabular-nums; }
   input[type='range'] { flex: 1; min-width: 8rem; accent-color: var(--smrt-color-primary); cursor: pointer; }
-  .slider__number { width: 5.5rem; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
+  .slider__number { width: 5.5rem; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
   input:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
   .slider[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
 </style>

package/dist/components/forms/TagsInput.svelte

@@ -99,7 +99,7 @@ useControlRegistration(() => {
 </div></div>
 <style>
   .tags-field { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } label { font: var(--smrt-typography-label-large-font); }
-  .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
+  .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   .tag { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
   .tag button { border: 0; background: transparent; color: inherit; cursor: pointer; } .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
   :global(.tags[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }

package/dist/components/forms/Textarea.svelte

@@ -134,7 +134,7 @@ export function getElement(): HTMLTextAreaElement | null {
 		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
 		color: var(--smrt-color-on-surface, #1f2937);
 		background-color: var(--smrt-color-surface, #fff);
-		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border: 1px solid var(--smrt-color-outline, #6b7280);
 		border-radius: 0.375rem;
 		resize: vertical;
 		min-height: 80px;

package/dist/components/roles/RoleSelector.svelte

@@ -199,7 +199,7 @@ $effect(() => {
     width: 100%;
     padding: 0.5rem 0.75rem;
     background: var(--smrt-color-surface, white);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border: 1px solid var(--smrt-color-outline, #6b7280);
     border-radius: var(--smrt-radius-small, 0.375rem);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -270,10 +270,17 @@ $effect(() => {
     text-align: left;
   }
 
-  .option:hover,
+  .option:hover {
+    background: var(--smrt-color-surface-container-high, #f3f4f6);
+  }
+  /* Keyboard focus needs its own indicator: the hover background alone is a
+     ~1.1:1 change against the list surface in every preset, which is invisible
+     and fails WCAG 2.4.11. Inset so it is not clipped by the list's overflow
+     (#2322). */
   .option:focus-visible {
     background: var(--smrt-color-surface-container-high, #f3f4f6);
-    outline: none;
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
   }
 
   .option.selected {

package/dist/components/ui/Dropdown.svelte

@@ -179,7 +179,7 @@ $effect(() => {
     cursor: pointer;
     padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
     border-radius: var(--smrt-radius-medium, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border: 1px solid var(--smrt-color-outline, #79747e);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
   }
@@ -236,10 +236,18 @@ $effect(() => {
     color: var(--smrt-color-on-surface);
     white-space: nowrap;
   }
-  .dropdown__item:hover:not(:disabled),
+  .dropdown__item:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-high);
+  }
+  /* Keyboard focus needs its own indicator: the hover background alone is a
+     ~1.1:1 change against the menu surface in every preset (1.00:1 in glass
+     light), which is invisible and fails WCAG 2.4.11. The ring is inset so it
+     sits inside the item's padding box rather than overlapping the neighbouring
+     item or the menu's edge (#2322). */
   .dropdown__item:focus-visible {
     background: var(--smrt-color-surface-container-high);
-    outline: none;
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
   }
   .dropdown__item:disabled {
     opacity: 0.5;

package/dist/components/ui/Popover.svelte

@@ -91,7 +91,7 @@ $effect(() => {
 
 <style>
   .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-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); font: inherit; cursor: pointer; }
+  .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__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); min-width: 16rem; 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); }

package/dist/themes/ThemeProvider.svelte

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 import { onMount, untrack } from 'svelte';
 import { setThemeContext, type ThemeContext } from './context.svelte.js';
 import { generateThemeVariables } from './css-generator.js';
-import { getTheme, isValidPreset } from './registry.js';
+import { availablePresets, getTheme, isValidPreset } from './registry.js';
 import type {
   ColorScheme,
   Theme,
@@ -34,6 +34,16 @@ interface Props {
   persist?: boolean;
   /** Storage key for persistence */
   storageKey?: string;
+  /**
+   * Force runtime generation of the full CSS variable set onto the wrapper's
+   * inline style (the legacy delivery path). Defaults to `true` for custom
+   * registered themes — they have no static stylesheet — and `false` for
+   * built-in presets, whose variables ship as static CSS
+   * (`themes/styles/<preset>.css`) selected by the `data-theme` /
+   * `data-color-scheme` attributes. Leave unset unless you cannot import the
+   * static stylesheet for a built-in preset.
+   */
+  inlineVariables?: boolean;
   /** Content */
   children: Snippet;
 }
@@ -47,6 +57,7 @@ let {
   paintSurface = true,
   persist = defaultThemeConfig.persist,
   storageKey = defaultThemeConfig.storageKey,
+  inlineVariables,
   children,
 }: Props = $props();
 
@@ -85,39 +96,41 @@ const resolvedScheme = $derived<'light' | 'dark'>(
 
 const isDark = $derived(resolvedScheme === 'dark');
 
-// Generate CSS variables - using $derived with immediate value
-const cssVariables = $derived.by(() => {
-  const vars = generateThemeVariables(currentTheme, isDark);
+// Static-first variable delivery: built-in presets ship their full variable
+// set as static stylesheets (`themes/styles/<preset>.css`) selected by the
+// data-theme/data-color-scheme attributes, so the wrapper carries no ~200-var
+// inline style. Custom registered themes have no static file, so they keep the
+// legacy runtime generation (opt built-ins back in with `inlineVariables`).
+const isBuiltInPreset = $derived(
+  (availablePresets as string[]).includes(config.preset),
+);
+const useInlineVariables = $derived(inlineVariables ?? !isBuiltInPreset);
+
+// Convert to style string — full variable set only on the runtime path;
+// otherwise just the explicit accent/overrides so they layer over static CSS.
+const styleString = $derived.by(() => {
+  const declarations: string[] = [];
+
+  if (useInlineVariables) {
+    for (const [key, value] of Object.entries(
+      generateThemeVariables(currentTheme, isDark),
+    )) {
+      declarations.push(`${key}: ${value}`);
+    }
+  }
 
   // Apply primary color override
   if (config.primaryColor) {
-    vars['--smrt-color-primary'] = config.primaryColor;
+    declarations.push(`--smrt-color-primary: ${config.primaryColor}`);
     // Recalculate dependent colors would go here in a full implementation
   }
 
-  // Apply border radius override
-  if (config.borderRadius && config.borderRadius !== 'md') {
-    // The border radius values are already in CSS vars, but we could
-    // add logic here to override specific radius values
-  }
-
   // Apply custom overrides
-  return { ...vars, ...config.overrides };
-});
+  for (const [key, value] of Object.entries(config.overrides ?? {})) {
+    declarations.push(`${key}: ${value}`);
+  }
 
-// Convert to style string
-const styleString = $derived.by(() => {
-  return Object.entries(cssVariables)
-    .map(([key, value]) => {
-      const isExplicitOverride =
-        Object.hasOwn(config.overrides ?? {}, key) ||
-        (key === '--smrt-color-primary' && config.primaryColor);
-      const bootstrapKey = key.replace(/^--smrt-/, '--smrt-bootstrap-');
-      return `${key}: ${
-        isExplicitOverride ? value : `var(${bootstrapKey}, ${value})`
-      }`;
-    })
-    .join('; ');
+  return declarations.join('; ');
 });
 
 // Theme state for context
@@ -258,21 +271,6 @@ $effect(() => {
   }
 });
 
-// The pre-paint aliases only bridge SSR to the hydrated provider. Remove them
-// after the provider has applied the persisted config so later runtime theme
-// changes use the component's reactive variables normally.
-$effect(() => {
-  if (typeof document !== 'undefined' && mounted) {
-    const html = document.documentElement;
-    for (const property of Array.from(html.style)) {
-      if (property.startsWith('--smrt-bootstrap-')) {
-        html.style.removeProperty(property);
-      }
-    }
-    html.removeAttribute('data-smrt-theme-bootstrap');
-  }
-});
-
 // 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
@@ -339,7 +337,7 @@ $effect(() => {
   class:dark={isDark}
   class:no-paint={!paintSurface}
   class:smrt-theme-glass={config.preset === 'glass'}
-  style={styleString}
+  style={styleString || undefined}
   data-theme={config.preset}
   data-color-scheme={resolvedScheme}
 >

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

@@ -21,6 +21,16 @@ interface Props {
     persist?: boolean;
     /** Storage key for persistence */
     storageKey?: string;
+    /**
+     * Force runtime generation of the full CSS variable set onto the wrapper's
+     * inline style (the legacy delivery path). Defaults to `true` for custom
+     * registered themes — they have no static stylesheet — and `false` for
+     * built-in presets, whose variables ship as static CSS
+     * (`themes/styles/<preset>.css`) selected by the `data-theme` /
+     * `data-color-scheme` attributes. Leave unset unless you cannot import the
+     * static stylesheet for a built-in preset.
+     */
+    inlineVariables?: boolean;
     /** Content */
     children: Snippet;
 }

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;AAKtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,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,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AA2TD,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;AAKtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,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;AA+SD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/__tests__/control-boundary-contrast.test.js

@@ -0,0 +1,112 @@
+/**
+ * Control-boundary contrast floor, every preset (#2322).
+ *
+ * WCAG 2.2 SC 1.4.11 requires the visual boundary that identifies a UI
+ * component to clear 3:1 against its adjacent background. The form primitives
+ * used to draw their resting border with `outline-variant` — the divider role,
+ * which measures 1.2–1.7:1 in every preset — so an input's edge was effectively
+ * invisible. They now consume `outline`, and this test pins the other half of
+ * that contract: `outline` must actually be a boundary-strength value in every
+ * preset and scheme, on every surface a control can sit on.
+ *
+ * `outlineVariant` is deliberately NOT held to this floor. It is the quiet
+ * hairline for dividers, panel edges, and readout rows; raising it would erase
+ * the distinction the two tokens exist to draw.
+ */
+import { describe, expect, it } from 'vitest';
+import { themes } from '../registry.js';
+/** Every surface role a control can be placed on. */
+const SURFACES = [
+    'surface',
+    'surfaceVariant',
+    'surfaceContainer',
+    'surfaceContainerLow',
+    'surfaceContainerHigh',
+    'surfaceContainerHighest',
+    'surfaceContainerLowest',
+    'surfaceDim',
+    'surfaceBright',
+    'background',
+];
+/**
+ * Parse `#rrggbb` or `rgba(r, g, b, a)` into a straight-alpha colour.
+ *
+ * The glass preset expresses its surfaces and outlines as `rgba(...)`, so a
+ * hex-only parser silently skips exactly the preset whose translucency makes
+ * contrast hardest to reason about — which is how glass sat at 1.42:1 unnoticed.
+ */
+function parseColor(value) {
+    const hex = value.trim().match(/^#([0-9a-f]{6})$/i);
+    if (hex) {
+        const n = Number.parseInt(hex[1], 16);
+        return { rgb: [(n >> 16) & 255, (n >> 8) & 255, n & 255], alpha: 1 };
+    }
+    const rgba = value
+        .trim()
+        .match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+))?\s*\)$/i);
+    if (rgba) {
+        return {
+            rgb: [Number(rgba[1]), Number(rgba[2]), Number(rgba[3])],
+            alpha: rgba[4] === undefined ? 1 : Number(rgba[4]),
+        };
+    }
+    return null;
+}
+/** Composite `value` over an opaque backdrop, resolving any alpha. */
+function flatten(value, backdrop) {
+    const parsed = parseColor(value);
+    if (!parsed)
+        return null;
+    const { rgb, alpha } = parsed;
+    return rgb.map((c, i) => Math.round(c * alpha + backdrop[i] * (1 - alpha)));
+}
+function relativeLuminance([r, g, b]) {
+    const [rr, gg, bb] = [r, g, b].map((n) => {
+        const s = n / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * rr + 0.7152 * gg + 0.0722 * bb;
+}
+function contrast(a, b) {
+    const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+describe('control boundaries clear the 3:1 non-text floor (#2322)', () => {
+    for (const theme of Object.values(themes)) {
+        for (const scheme of ['light', 'dark']) {
+            const palette = theme[scheme];
+            it(`${theme.id} ${scheme}: outline is boundary-strength on every surface`, () => {
+                // Translucent surfaces resolve against the scheme's own background,
+                // which is the only backdrop the theme can promise.
+                const page = flatten(palette.background, [255, 255, 255]);
+                expect(page, `${theme.id} ${scheme} background must be parseable`).not.toBeNull();
+                const failures = [];
+                for (const surfaceName of SURFACES) {
+                    // Assert each parse BEFORE it is used as the next one's backdrop.
+                    // Folding these together would let an unparseable surface reach
+                    // `flatten` as a null backdrop, and the test would die on a
+                    // TypeError instead of naming the token that could not be read.
+                    const surface = flatten(palette[surfaceName], page);
+                    expect(surface, `${theme.id} ${scheme} ${surfaceName} must be parseable`).not.toBeNull();
+                    const outline = flatten(palette.outline, surface);
+                    expect(outline, `${theme.id} ${scheme} outline must be parseable`).not.toBeNull();
+                    const ratio = contrast(outline, surface);
+                    if (ratio < 3)
+                        failures.push(`${surfaceName} ${ratio.toFixed(2)}:1`);
+                }
+                expect(failures, `${theme.id} ${scheme} outline below 3:1`).toEqual([]);
+            });
+        }
+    }
+    it('keeps outline and outlineVariant as distinct roles', () => {
+        // If a preset ever "fixes" its bezel by setting it equal to the boundary,
+        // dividers become as loud as control edges and the two-token system
+        // collapses. The hairline is allowed to be quiet — it just may not BE the
+        // boundary token.
+        for (const theme of Object.values(themes)) {
+            for (const scheme of ['light', 'dark']) {
+                expect(theme[scheme].outlineVariant, `${theme.id} ${scheme} outlineVariant must stay distinct from outline`).not.toBe(theme[scheme].outline);
+            }
+        }
+    });
+});

package/dist/themes/__tests__/css-generator.test.js

@@ -71,6 +71,48 @@ describe('theme CSS generator', () => {
             // Deeper black shadows above level 1.
             expect(dark['--smrt-elevation-5']).toContain('rgba(0, 0, 0, 0.25)');
         });
+        it('matches every static preset CSS on colour values (drift guard)', () => {
+            // The elevation guard below caught shadows drifting; colours drifted too
+            // and nothing noticed — smrt.css carried `--smrt-theme-name: SMRT` long
+            // after the theme was renamed `s-m-r-t` (#2322). The alias test only
+            // checks that token NAMES appear in each stylesheet, so a stale VALUE
+            // sails through it. Compare the values themselves, for every preset.
+            const files = {
+                material: 'material.css',
+                glass: 'glass.css',
+                studio: 'studio.css',
+                smrt: 'smrt.css',
+                happyvertical: 'happyvertical.css',
+            };
+            const drift = [];
+            for (const [id, file] of Object.entries(files)) {
+                const css = readFileSync(join(process.cwd(), 'src/themes/styles', file), 'utf8');
+                for (const scheme of ['light', 'dark']) {
+                    const selector = `[data-theme="${id}"][data-color-scheme="${scheme}"]`;
+                    const start = css.indexOf(selector);
+                    expect(start, `${file} must define ${selector}`).toBeGreaterThan(-1);
+                    const open = css.indexOf('{', start);
+                    const body = css.slice(open + 1, css.indexOf('\n}', open));
+                    const defined = {};
+                    for (const match of body.matchAll(/(--smrt-[a-z0-9-]+):\s*([^;]+);/gi)) {
+                        defined[match[1]] = match[2].trim();
+                    }
+                    const generated = generateThemeVariables(getTheme(id), scheme === 'dark');
+                    for (const [token, value] of Object.entries(generated)) {
+                        if (!token.startsWith('--smrt-color-') &&
+                            token !== '--smrt-theme-name')
+                            continue;
+                        // Only compare tokens the stylesheet actually declares; absence is
+                        // the alias test's job, not this one's.
+                        if (defined[token] !== undefined &&
+                            defined[token] !== String(value)) {
+                            drift.push(`${file} ${scheme} ${token}: css=${defined[token]} generator=${value}`);
+                        }
+                    }
+                }
+            }
+            expect(drift).toEqual([]);
+        });
         it('matches the static studio.css for both schemes (drift guard)', () => {
             // The static-CSS delivery path and the JS generator must agree on VALUES,
             // not just token names — this is what let the studio dark shadows diverge.

package/dist/themes/__tests__/styles-lockstep.test.js

@@ -0,0 +1,32 @@
+/**
+ * Static stylesheet lockstep (#1586, all presets).
+ *
+ * Every built-in preset ships a static stylesheet whose two
+ * `[data-theme][data-color-scheme]` token blocks must be the verbatim output
+ * of the theme generator — ThemeProvider defaults built-in presets to this
+ * static delivery path, so drift between the theme definitions and the
+ * shipped CSS would silently change rendered values. Run
+ * `pnpm --filter @happyvertical/smrt-ui generate:themes` to regenerate after
+ * editing a preset definition.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { generateThemeCSS } from '../css-generator.js';
+import { availablePresets, getTheme } from '../registry.js';
+// Resolved from process.cwd() (NOT import.meta.url): the smrt-vitest plugin
+// runs each package's suite with cwd === the package root.
+describe('static stylesheets match the generator verbatim (#1586)', () => {
+    for (const preset of availablePresets) {
+        const theme = getTheme(preset);
+        const staticCss = readFileSync(join(process.cwd(), `src/themes/styles/${preset}.css`), 'utf8');
+        for (const [scheme, isDark] of [
+            ['light', false],
+            ['dark', true],
+        ]) {
+            it(`${preset} ${scheme} block matches generateThemeCSS output`, () => {
+                expect(staticCss).toContain(generateThemeCSS(theme, isDark));
+            });
+        }
+    }
+});

package/dist/themes/__tests__/theme-provider.test.js

@@ -92,18 +92,56 @@ describe('ThemeProvider persistence', () => {
             expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
         });
     });
-    it('emits bootstrap-aware SSR variable fallbacks', () => {
+    it('renders no inline variable payload for built-in presets (static-first)', () => {
         mockSystemDark(false);
         const { container } = render(ThemeProvider, {
             props: { children: child() },
         });
+        const root = container.querySelector('.smrt-theme-root');
+        const style = root?.getAttribute('style') ?? '';
+        // Built-in presets ship their full variable set as static stylesheets
+        // selected by the data attributes — the wrapper carries no ~200-var style.
+        expect(style).not.toContain('--smrt-color-background');
+        expect(root).toHaveAttribute('data-theme');
+        expect(root).toHaveAttribute('data-color-scheme');
+    });
+    it('applies only the explicit accent/overrides inline for built-in presets', () => {
+        mockSystemDark(false);
+        const { container } = render(ThemeProvider, {
+            props: {
+                primaryColor: '#123456',
+                overrides: { '--smrt-color-tertiary': '#654321' },
+                children: child(),
+            },
+        });
+        const style = container.querySelector('.smrt-theme-root')?.getAttribute('style') ?? '';
+        expect(style).toContain('--smrt-color-primary: #123456');
+        expect(style).toContain('--smrt-color-tertiary: #654321');
+        expect(style).not.toContain('--smrt-color-background');
+    });
+    it('keeps runtime variable generation for custom registered themes', async () => {
+        const { createTheme, registerTheme } = await import('../create-theme.js');
+        registerTheme(createTheme({
+            id: 'provider-test-brand',
+            name: 'Provider Test Brand',
+            light: { primary: '#336699', background: '#fefefe' },
+            dark: { primary: '#99ccff', background: '#101820' },
+        }));
+        mockSystemDark(false);
+        const { container } = render(ThemeProvider, {
+            props: { preset: 'provider-test-brand', children: child() },
+        });
+        const style = container.querySelector('.smrt-theme-root')?.getAttribute('style') ?? '';
+        // No static stylesheet can exist for a registered custom theme, so the
+        // provider falls back to the legacy runtime-generated variable set.
+        expect(style).toContain('--smrt-color-background: #fefefe');
+    });
+    it('opts a built-in preset back into runtime generation via inlineVariables', () => {
+        mockSystemDark(false);
+        const { container } = render(ThemeProvider, {
+            props: { preset: 'material', inlineVariables: true, children: child() },
+        });
         const style = container.querySelector('.smrt-theme-root')?.getAttribute('style') ?? '';
-        const bootstrapBackground = [
-            '--smrt',
-            'bootstrap',
-            'color',
-            'background',
-        ].join('-');
-        expect(style).toContain(`--smrt-color-background: var(${bootstrapBackground},`);
+        expect(style).toContain('--smrt-color-background');
     });
 });