@happyvertical/smrt-ui 0.55.15 → 0.55.17

package/dist/themes/components/ColorSchemeToggle.svelte

@@ -44,7 +44,7 @@ const labels = {
 };
 </script>
 
-<div class="smrt-color-scheme-toggle {variant} {className}">
+<div class="smrt-color-scheme-toggle {variant} {className}" data-smrt-component="ColorSchemeToggle">
   {#if variant === 'switch'}
     <button
       class="smrt-color-scheme-toggle__switch"
@@ -110,6 +110,8 @@ const labels = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-color-scheme-toggle {
     display: inline-flex;
     align-items: center;
@@ -120,9 +122,9 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -130,7 +132,7 @@ const labels = {
   }
 
   .smrt-color-scheme-toggle__switch:hover {
-    background: var(--smrt-color-surface-container, #eee);
+    background: var(--smrt-color-surface-container);
   }
 
   .smrt-color-scheme-toggle__buttons {
@@ -143,9 +145,9 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -153,19 +155,19 @@ const labels = {
   }
 
   .smrt-color-scheme-toggle__button:hover {
-    background: var(--smrt-color-surface-container, #eee);
+    background: var(--smrt-color-surface-container);
   }
 
   .smrt-color-scheme-toggle__button.active {
-    background: var(--smrt-color-primary-container, #e3f2fd);
-    color: var(--smrt-color-on-primary-container, #1565c0);
-    border-color: var(--smrt-color-primary, #2196f3);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-color: var(--smrt-color-primary);
   }
 
   .smrt-color-scheme-toggle__segmented {
     display: inline-flex;
-    background: var(--smrt-color-surface-container-lowest, #fafafa);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    background: var(--smrt-color-surface-container-lowest);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }
@@ -178,7 +180,7 @@ const labels = {
     border: none;
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #666);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
     transition: all 200ms ease;
@@ -202,4 +204,5 @@ const labels = {
   .smrt-color-scheme-toggle__label {
     font-size: inherit;
   }
+}
 </style>

package/dist/themes/components/ThemeSwitcher.svelte

@@ -43,7 +43,7 @@ const themeIcons: Record<ThemePreset, string> = {
 };
 </script>
 
-<div class="smrt-theme-switcher {variant} {className}">
+<div class="smrt-theme-switcher {variant} {className}" data-smrt-component="ThemeSwitcher">
   {#if label}
     <span class="smrt-theme-switcher__label">{label}</span>
   {/if}
@@ -101,6 +101,8 @@ const themeIcons: Record<ThemePreset, string> = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-theme-switcher {
     display: flex;
     align-items: center;
@@ -116,7 +118,7 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__select {
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    border: 1px solid var(--smrt-color-outline);
     background: var(--smrt-color-surface, white);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
@@ -133,9 +135,9 @@ const themeIcons: Record<ThemePreset, string> = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -143,19 +145,19 @@ const themeIcons: Record<ThemePreset, string> = {
   }
 
   .smrt-theme-switcher__button:hover {
-    background: var(--smrt-color-surface-container, #eee);
+    background: var(--smrt-color-surface-container);
   }
 
   .smrt-theme-switcher__button.active {
-    background: var(--smrt-color-primary-container, #e3f2fd);
-    color: var(--smrt-color-on-primary-container, #1565c0);
-    border-color: var(--smrt-color-primary, #2196f3);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-color: var(--smrt-color-primary);
   }
 
   .smrt-theme-switcher__segmented {
     display: inline-flex;
-    background: var(--smrt-color-surface-container-lowest, #fafafa);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    background: var(--smrt-color-surface-container-lowest);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }
@@ -168,7 +170,7 @@ const themeIcons: Record<ThemePreset, string> = {
     border: none;
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #666);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
     transition: all 200ms ease;
@@ -187,4 +189,5 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__icon {
     font-size: var(--smrt-typography-body-large-size, 1rem);
   }
+}
 </style>

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;AAyPD;;;;;;;;;;;;;;;;;;;;;;;;;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;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"}

package/dist/themes/create-theme.js

@@ -3,7 +3,7 @@
  *
  * Helper functions for creating custom themes that match the SMRT theme system.
  */
-import { hexToRgb, rgbToHex } from '../utils/theme/color.js';
+import { generateTheme, hexToRgb, rgbToHex } from '../utils/theme/color.js';
 import { hasCustomTheme, registerCustomTheme, themes as registeredThemes, } from './registry.js';
 import { borderRadiusScale, durationScale, materialEasing, spacingScale, } from './shared.js';
 /**
@@ -86,12 +86,15 @@ function generateDarkColors(light) {
         }
         return rgbToHex(r * factor, g * factor, b * factor);
     };
+    // Multiplying a very dark brand seed stays dark. Use tonal primary pairs so
+    // icons and labels keep contrast against their containers in dark mode.
+    const primary = generateTheme(light.primary, 'dark');
     return {
         ...light,
-        primary: light.inversePrimary || adjustBrightness(light.primary, 1.2),
-        onPrimary: adjustBrightness(light.onPrimary, 0.8),
-        primaryContainer: adjustBrightness(light.primaryContainer || light.primary, 0.3),
-        onPrimaryContainer: adjustBrightness(light.onPrimaryContainer || light.onPrimary, 1.2),
+        primary: primary.primary,
+        onPrimary: primary.onPrimary,
+        primaryContainer: primary.primaryContainer,
+        onPrimaryContainer: primary.onPrimaryContainer,
         secondary: adjustBrightness(light.secondary, 1.3),
         onSecondary: adjustBrightness(light.onSecondary, 0.8),
         secondaryContainer: adjustBrightness(light.secondaryContainer, 0.3),

package/dist/themes/css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwMD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAyMD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}

package/dist/themes/css-generator.js

@@ -29,14 +29,15 @@ function generateTypographyVariables(typography, prefix) {
         vars[`${prefix}-typography-${cssKey}-line-height`] = token.lineHeight;
         vars[`${prefix}-typography-${cssKey}-weight`] = String(token.weight);
         vars[`${prefix}-typography-${cssKey}-tracking`] = token.tracking;
-        if (token.fontFamily) {
-            vars[`${prefix}-typography-${cssKey}-font-family`] = token.fontFamily;
-        }
+        // Always emit the longhand (issue #3826): a token without its own family
+        // inherits the theme body font, so the longhand is defined for every theme
+        // and components never depend on an unset custom property.
+        const family = token.fontFamily ?? `var(${prefix}-font-family)`;
+        vars[`${prefix}-typography-${cssKey}-font-family`] = family;
         // Additive `font` shorthand alias (issue #1431): components use
         // `font: var(--smrt-typography-body-medium-font)`, expecting the CSS
         // `font` shorthand order (style variant size/line-height family). Built
         // from the emitted longhands so it stays in sync.
-        const family = token.fontFamily ?? `var(${prefix}-font-family)`;
         vars[`${prefix}-typography-${cssKey}-font`] =
             `${token.weight} ${token.size}/${token.lineHeight} ${family}`;
     }

package/dist/themes/required-tokens.generated.json

@@ -0,0 +1,172 @@
+{
+  "$comment": "Generated by scripts/generate-smrt-required-tokens.mjs. Do not edit by hand.",
+  "required": [
+    "--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",
+    "--smrt-duration-fast",
+    "--smrt-duration-medium1",
+    "--smrt-duration-normal",
+    "--smrt-duration-short2",
+    "--smrt-duration-short3",
+    "--smrt-duration-short4",
+    "--smrt-easing-emphasized",
+    "--smrt-easing-emphasized-decelerate",
+    "--smrt-easing-standard",
+    "--smrt-elevation-1",
+    "--smrt-elevation-2",
+    "--smrt-elevation-3",
+    "--smrt-elevation-4",
+    "--smrt-elevation-5",
+    "--smrt-font-family",
+    "--smrt-font-family-mono",
+    "--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",
+    "--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",
+    "--smrt-touch-target-min",
+    "--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",
+    "--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"
+  ],
+  "optional": [
+    "--smrt-admin-shell-background",
+    "--smrt-admin-shell-scrollbar-thumb",
+    "--smrt-admin-shell-scrollbar-thumb-hover",
+    "--smrt-admin-shell-scrollbar-track",
+    "--smrt-card-background",
+    "--smrt-card-border",
+    "--smrt-card-divider",
+    "--smrt-card-shadow",
+    "--smrt-content-editor-icon-size",
+    "--smrt-control-hit-size",
+    "--smrt-popover-panel-padding",
+    "--smrt-popover-panel-width",
+    "--smrt-shell-title-font-family",
+    "--smrt-sortable-header-font-weight",
+    "--smrt-sortable-header-padding"
+  ]
+}

package/dist/themes/styles/base.css

@@ -1,10 +1,12 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * Application baseline for SMRT interfaces.
  *
  * Import this once at an application entry point, alongside the selected
  * theme stylesheet. Components remain independently usable without it.
  */
 
+@layer smrt.reset {
 *,
 *::before,
 *::after {
@@ -29,3 +31,4 @@ select,
 textarea {
   font: inherit;
 }
+}

package/dist/themes/styles/glass.css

@@ -1,4 +1,5 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * Glass Theme CSS
  *
  * Static CSS file for Glass theme.
@@ -474,6 +475,7 @@
 }
 
 /* Glass utility classes */
+@layer smrt.theme {
 .smrt-glass {
   background: var(--smrt-color-surface);
   backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
@@ -494,6 +496,7 @@
   -webkit-backdrop-filter: blur(calc(var(--smrt-glass-blur) * 0.5)) saturate(var(--smrt-glass-saturation));
   border: 1px solid var(--smrt-color-glass-border);
 }
+}
 
 /*
  * Material-3 vocabulary aliases + helper tokens (issue #1431).

package/dist/themes/styles/happyvertical.css

@@ -1,4 +1,5 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * HappyVertical Theme CSS — "Day Shift"
  *
  * Static CSS for the HappyVertical brand theme (happyvertical/smrt#2318): a
@@ -479,10 +480,12 @@
  *
  * A 2px amber outline, offset off the control. Defined by the preset so every
  * focusable element — including plain markup a consumer app renders itself —
- * carries the brand focus indicator. Component-scoped `:focus-visible` rules
- * are more specific and still win where a primitive tunes its own offset.
+ * carries the brand focus indicator. This rule and component-scoped
+ * `:focus-visible` rules both sit in `smrt.theme`, so specificity still decides:
+ * a primitive that tunes its own offset wins over this default.
  * ========================================================================== */
 
+@layer smrt.theme {
 [data-theme="happyvertical"] :focus-visible {
   outline: 2px solid var(--smrt-color-primary);
   outline-offset: 2px;
@@ -563,3 +566,4 @@
     transition: none;
   }
 }
+}

package/dist/themes/styles/smrt.css

@@ -1,4 +1,5 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * SMRT Theme CSS
  *
  * Static CSS for the SMRT theme — a dark-first "engineering instrument panel"
@@ -481,6 +482,7 @@
 
 /* Faint engineering-grid background with a radial fade.
  * Put on a full-bleed section or a fixed underlay element. */
+@layer smrt.theme {
 .smrt-grid-bg {
   position: relative;
 }
@@ -648,3 +650,4 @@
     transition: none;
   }
 }
+}

package/dist/themes/styles/studio.css

@@ -1,4 +1,5 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * Studio Theme CSS
  *
  * Static CSS file for Studio theme.
@@ -462,6 +463,7 @@
 }
 
 /* Studio utility classes for flat design */
+@layer smrt.theme {
 .smrt-flat {
   box-shadow: none;
   border: 1px solid var(--smrt-color-outline);
@@ -482,6 +484,7 @@
   outline: 2px solid var(--smrt-color-primary);
   outline-offset: 2px;
 }
+}
 
 /*
  * Material-3 vocabulary aliases + helper tokens (issue #1431).

package/dist/utils/theme/typography.d.ts

@@ -1,27 +1,27 @@
 export declare const typographyTokens: {
     '--smrt-font-family': string;
-    '--md-sys-typescale-display-large-font': string;
-    '--md-sys-typescale-display-medium-font': string;
-    '--md-sys-typescale-display-small-font': string;
-    '--md-sys-typescale-headline-large-font': string;
-    '--md-sys-typescale-headline-medium-font': string;
-    '--md-sys-typescale-headline-small-font': string;
-    '--md-sys-typescale-title-large-font': string;
-    '--md-sys-typescale-title-medium-font': string;
-    '--md-sys-typescale-title-small-font': string;
-    '--md-sys-typescale-label-large-font': string;
-    '--md-sys-typescale-label-medium-font': string;
-    '--md-sys-typescale-label-small-font': string;
-    '--md-sys-typescale-body-large-font': string;
-    '--md-sys-typescale-body-medium-font': string;
-    '--md-sys-typescale-body-small-font': string;
+    '--smrt-typography-display-large-font': string;
+    '--smrt-typography-display-medium-font': string;
+    '--smrt-typography-display-small-font': string;
+    '--smrt-typography-headline-large-font': string;
+    '--smrt-typography-headline-medium-font': string;
+    '--smrt-typography-headline-small-font': string;
+    '--smrt-typography-title-large-font': string;
+    '--smrt-typography-title-medium-font': string;
+    '--smrt-typography-title-small-font': string;
+    '--smrt-typography-label-large-font': string;
+    '--smrt-typography-label-medium-font': string;
+    '--smrt-typography-label-small-font': string;
+    '--smrt-typography-body-large-font': string;
+    '--smrt-typography-body-medium-font': string;
+    '--smrt-typography-body-small-font': string;
 };
 export declare const elevationTokens: {
-    '--md-sys-elevation-level0': string;
-    '--md-sys-elevation-level1': string;
-    '--md-sys-elevation-level2': string;
-    '--md-sys-elevation-level3': string;
-    '--md-sys-elevation-level4': string;
-    '--md-sys-elevation-level5': string;
+    '--smrt-elevation-0': string;
+    '--smrt-elevation-1': string;
+    '--smrt-elevation-2': string;
+    '--smrt-elevation-3': string;
+    '--smrt-elevation-4': string;
+    '--smrt-elevation-5': string;
 };
 //# sourceMappingURL=typography.d.ts.map

package/dist/utils/theme/typography.js

@@ -3,28 +3,28 @@ const fontFamily = 'var(--smrt-font-family, Roboto, sans-serif)';
 export const typographyTokens = {
     // Font family token for customization
     '--smrt-font-family': 'Roboto, sans-serif',
-    '--md-sys-typescale-display-large-font': `400 57px/64px ${fontFamily}`,
-    '--md-sys-typescale-display-medium-font': `400 45px/52px ${fontFamily}`,
-    '--md-sys-typescale-display-small-font': `400 36px/44px ${fontFamily}`,
-    '--md-sys-typescale-headline-large-font': `400 32px/40px ${fontFamily}`,
-    '--md-sys-typescale-headline-medium-font': `400 28px/36px ${fontFamily}`,
-    '--md-sys-typescale-headline-small-font': `400 24px/32px ${fontFamily}`,
-    '--md-sys-typescale-title-large-font': `400 22px/28px ${fontFamily}`,
-    '--md-sys-typescale-title-medium-font': `500 16px/24px ${fontFamily}`,
-    '--md-sys-typescale-title-small-font': `500 14px/20px ${fontFamily}`,
-    '--md-sys-typescale-label-large-font': `500 14px/20px ${fontFamily}`,
-    '--md-sys-typescale-label-medium-font': `500 12px/16px ${fontFamily}`,
-    '--md-sys-typescale-label-small-font': `500 11px/16px ${fontFamily}`,
-    '--md-sys-typescale-body-large-font': `400 16px/24px ${fontFamily}`,
-    '--md-sys-typescale-body-medium-font': `400 14px/20px ${fontFamily}`,
-    '--md-sys-typescale-body-small-font': `400 12px/16px ${fontFamily}`,
+    '--smrt-typography-display-large-font': `400 57px/64px ${fontFamily}`,
+    '--smrt-typography-display-medium-font': `400 45px/52px ${fontFamily}`,
+    '--smrt-typography-display-small-font': `400 36px/44px ${fontFamily}`,
+    '--smrt-typography-headline-large-font': `400 32px/40px ${fontFamily}`,
+    '--smrt-typography-headline-medium-font': `400 28px/36px ${fontFamily}`,
+    '--smrt-typography-headline-small-font': `400 24px/32px ${fontFamily}`,
+    '--smrt-typography-title-large-font': `400 22px/28px ${fontFamily}`,
+    '--smrt-typography-title-medium-font': `500 16px/24px ${fontFamily}`,
+    '--smrt-typography-title-small-font': `500 14px/20px ${fontFamily}`,
+    '--smrt-typography-label-large-font': `500 14px/20px ${fontFamily}`,
+    '--smrt-typography-label-medium-font': `500 12px/16px ${fontFamily}`,
+    '--smrt-typography-label-small-font': `500 11px/16px ${fontFamily}`,
+    '--smrt-typography-body-large-font': `400 16px/24px ${fontFamily}`,
+    '--smrt-typography-body-medium-font': `400 14px/20px ${fontFamily}`,
+    '--smrt-typography-body-small-font': `400 12px/16px ${fontFamily}`,
 };
 // Simplified elevation using box-shadow
 export const elevationTokens = {
-    '--md-sys-elevation-level0': 'none',
-    '--md-sys-elevation-level1': '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)',
-    '--md-sys-elevation-level2': '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15)',
-    '--md-sys-elevation-level3': '0px 1px 3px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15)',
-    '--md-sys-elevation-level4': '0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15)',
-    '--md-sys-elevation-level5': '0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15)',
+    '--smrt-elevation-0': 'none',
+    '--smrt-elevation-1': '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)',
+    '--smrt-elevation-2': '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15)',
+    '--smrt-elevation-3': '0px 1px 3px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15)',
+    '--smrt-elevation-4': '0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15)',
+    '--smrt-elevation-5': '0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15)',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.55.15",
+  "version": "0.55.17",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -115,6 +115,12 @@
     "./styles/tokens.css": {
       "default": "./dist/styles/tokens.css"
     },
+    "./styles/layers.css": {
+      "default": "./dist/styles/layers.css"
+    },
+    "./styles/unstyled.css": {
+      "default": "./dist/styles/unstyled.css"
+    },
     "./utils/*": {
       "default": "./dist/utils/*"
     },
@@ -149,7 +155,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.55.15",
+    "@happyvertical/smrt-types": "0.55.17",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {