@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/ui/Pagination.svelte

@@ -106,7 +106,7 @@ const isLastPage = $derived(currentPage === totalPages);
 </script>
 
 {#if totalPages > 1}
-  <nav class="pagination" aria-label={ariaLabel}>
+  <nav class="pagination" aria-label={ariaLabel} data-smrt-component="Pagination">
     <!-- First page -->
     {#if showFirstLast}
       {#if onPageChange}
@@ -190,6 +190,8 @@ const isLastPage = $derived(currentPage === totalPages);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .pagination {
     display: flex;
     justify-content: center;
@@ -229,25 +231,25 @@ const isLastPage = $derived(currentPage === totalPages);
   }
 
   .page-link:not(.current):not(.disabled) {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    color: var(--smrt-color-on-surface, #374151);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
   }
 
   .page-link:not(.current):not(.disabled):hover {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
   }
 
   .page-link.current {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
     cursor: default;
   }
 
   .page-link.disabled,
   .page-link:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface-variant);
     cursor: not-allowed;
   }
 
@@ -279,7 +281,7 @@ const isLastPage = $derived(currentPage === totalPages);
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   @media (max-width: 480px) {
@@ -293,4 +295,5 @@ const isLastPage = $derived(currentPage === totalPages);
       padding: 0 var(--smrt-spacing-2, 0.5rem);
     }
   }
+}
 </style>

package/dist/components/ui/Popover.svelte

@@ -79,7 +79,7 @@ $effect(() => {
 });
 </script>
 
-<span bind:this={rootEl} class="popover {className}">
+<span bind:this={rootEl} class="popover {className}" data-smrt-component="Popover">
   <button
     bind:this={triggerEl}
     type="button"
@@ -111,17 +111,20 @@ $effect(() => {
 </span>
 
 <style>
+@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, 999px); background: transparent; color: inherit; }
+  .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; }
   .popover__panel--top-end { right: 0; bottom: calc(100% + var(--smrt-spacing-1)); }
+}
 </style>

package/dist/components/ui/Skeleton.svelte

@@ -36,7 +36,7 @@ const lineIndexes = $derived(
 );
 </script>
 
-<span class="skeleton-wrap" role="status" aria-label={label}>
+<span class="skeleton-wrap" role="status" aria-label={label} data-smrt-component="Skeleton">
   {#if variant === 'text'}
     {#each lineIndexes as i (i)}
       <span
@@ -57,16 +57,18 @@ const lineIndexes = $derived(
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .skeleton-wrap {
     display: inline-flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     width: 100%;
   }
 
   .skeleton {
     display: block;
-    background: var(--smrt-color-surface-container-highest, #e7e0ec);
+    background: var(--smrt-color-surface-container-highest);
     background-image: linear-gradient(
       90deg,
       transparent 0%,
@@ -75,25 +77,25 @@ const lineIndexes = $derived(
     );
     background-size: 200% 100%;
     animation: smrt-skeleton-shimmer 1.4s ease-in-out infinite;
-    border-radius: var(--smrt-radius-small, 4px);
+    border-radius: var(--smrt-radius-small);
   }
 
   .skeleton--text {
     width: 100%;
     height: var(--smrt-typography-body-medium-size, 1rem);
-    border-radius: var(--smrt-radius-extra-small, 4px);
+    border-radius: var(--smrt-radius-extra-small);
   }
 
   .skeleton--circle {
     width: 48px;
     height: 48px;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .skeleton--rect {
     width: 100%;
     height: 96px;
-    border-radius: var(--smrt-radius-medium, 8px);
+    border-radius: var(--smrt-radius-medium);
   }
 
   @keyframes smrt-skeleton-shimmer {
@@ -110,4 +112,5 @@ const lineIndexes = $derived(
       animation: none;
     }
   }
+}
 </style>

package/dist/components/ui/Tooltip.svelte

@@ -58,7 +58,7 @@ function onKeydown(event: KeyboardEvent) {
   onmouseleave={hide}
   onfocusin={show}
   onfocusout={hide}
-  onkeydown={onKeydown}
+  onkeydown={onKeydown} data-smrt-component="Tooltip"
 >
   <span class="tooltip-trigger" aria-describedby={tipId}>
     {@render children()}
@@ -69,6 +69,8 @@ function onKeydown(event: KeyboardEvent) {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tooltip-wrap {
     position: relative;
     display: inline-flex;
@@ -80,12 +82,13 @@ function onKeydown(event: KeyboardEvent) {
     display: none;
     width: max-content;
     max-width: 16rem;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
-    background: var(--smrt-color-inverse-surface, #313033);
-    color: var(--smrt-color-inverse-on-surface, #f4eff4);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-inverse-surface);
+    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;
   }
 
@@ -97,24 +100,25 @@ function onKeydown(event: KeyboardEvent) {
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
-    margin-bottom: var(--smrt-spacing-1, 4px);
+    margin-bottom: var(--smrt-spacing-1);
   }
   .tooltip--bottom {
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
   .tooltip--left {
     right: 100%;
     top: 50%;
     transform: translateY(-50%);
-    margin-right: var(--smrt-spacing-1, 4px);
+    margin-right: var(--smrt-spacing-1);
   }
   .tooltip--right {
     left: 100%;
     top: 50%;
     transform: translateY(-50%);
-    margin-left: var(--smrt-spacing-1, 4px);
+    margin-left: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/ui/Tree.svelte

@@ -127,14 +127,14 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
 }
 </script>
 
-<div role="tree" aria-label={ariaLabel} class="tree">
+<div role="tree" aria-label={ariaLabel} class="tree" data-smrt-component="Tree">
   {#each flat as item, i (item.node.id)}
     <div
       bind:this={itemEls[i]}
       role="treeitem"
       class="tree__item"
       class:selected={selectedId === item.node.id}
-      style:padding-left="calc({item.depth} * var(--smrt-spacing-4, 16px) + var(--smrt-spacing-2, 8px))"
+      style:padding-left="calc({item.depth} * var(--smrt-spacing-4) + var(--smrt-spacing-2))"
       aria-level={item.depth + 1}
       aria-selected={selectedId === item.node.id}
       aria-expanded={item.hasChildren ? item.isExpanded : undefined}
@@ -158,6 +158,8 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tree {
     display: flex;
     flex-direction: column;
@@ -166,11 +168,11 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
   .tree__item {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    padding-top: var(--smrt-spacing-1, 4px);
-    padding-bottom: var(--smrt-spacing-1, 4px);
-    padding-right: var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
+    gap: var(--smrt-spacing-1);
+    padding-top: var(--smrt-spacing-1);
+    padding-bottom: var(--smrt-spacing-1);
+    padding-right: var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
     cursor: pointer;
     color: var(--smrt-color-on-surface);
     user-select: none;
@@ -179,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);
@@ -206,4 +208,5 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
       transition: none;
     }
   }
+}
 </style>

package/dist/styles/layers.css

@@ -0,0 +1,8 @@
+/*
+ * smrt cascade layers (#3823). Import this first, before any other smrt
+ * stylesheet, or let ThemeProvider inject it. Layers are ordered lowest to
+ * highest: reset < structure < theme. Every smrt component <style> block is
+ * wrapped in smrt.theme. Unlayered consumer CSS always beats every smrt layer,
+ * so restyling needs no :global() and no !important.
+ */
+@layer smrt.reset, smrt.structure, smrt.theme;

package/dist/styles/layers.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Cascade-layer declaration for smrt components (#3823).
+ *
+ * `ThemeProvider` injects this into `<head>` so the layer order exists before
+ * any layered component rule. The same declaration ships as `layers.css`
+ * (`@happyvertical/smrt-ui/styles/layers.css`). A test keeps the two in sync.
+ */
+export declare const SMRT_CASCADE_LAYERS_CSS = "@layer smrt.reset, smrt.structure, smrt.theme;";
+//# sourceMappingURL=layers.d.ts.map

package/dist/styles/layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.d.ts","sourceRoot":"","sources":["../../src/styles/layers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,mDACc,CAAC"}

package/dist/styles/layers.js

@@ -0,0 +1,8 @@
+/**
+ * Cascade-layer declaration for smrt components (#3823).
+ *
+ * `ThemeProvider` injects this into `<head>` so the layer order exists before
+ * any layered component rule. The same declaration ships as `layers.css`
+ * (`@happyvertical/smrt-ui/styles/layers.css`). A test keeps the two in sync.
+ */
+export const SMRT_CASCADE_LAYERS_CSS = '@layer smrt.reset, smrt.structure, smrt.theme;';

package/dist/styles/tokens.css

@@ -1,78 +1,36 @@
 /**
- * SMRT Svelte Design Tokens
- * CSS custom properties for consistent theming across components
+ * SMRT design tokens: the baseline for the `--smrt-*` vocabulary (issue #3822).
+ *
+ * Only `--smrt-*` custom properties are defined here, and only the theme-invariant
+ * scales (spacing, radius, duration, touch targets). Colours and typography belong
+ * to the theme (`themes/styles/*.css`, `css-generator.ts`), so this file never
+ * defines a colour that a dark or branded theme would then be overridden by.
+ *
+ * Values match the default `smrt` theme, so importing this file alone does not
+ * change the default look. Component code consumes `--smrt-*` tokens only; see
+ * `scripts/check-smrt-token-vocabulary.mjs` for the lint gate.
  */
 
 :root {
   --smrt-touch-target-min: 48px;
   --smrt-control-target-min: 0px;
-  /* Colors - Primary */
-  --color-primary-main: #1976d2;
-  --color-primary-light: #e3f2fd;
-  --color-primary-dark: #1565c0;
-
-  /* Colors - Neutral */
-  --color-neutral-white: #ffffff;
-  --color-neutral-gray100: #f5f5f5;
-  --color-neutral-gray200: #eeeeee;
-  --color-neutral-gray300: #e0e0e0;
-  --color-neutral-gray400: #9ca3af;
-  --color-neutral-black: #000000;
-
-  /* Colors - Text */
-  --color-text-primary: #212121;
-  --color-text-secondary: #757575;
-  --color-text-inverse: #ffffff;
-
-  /* Colors - Semantic */
-  --color-semantic-error: #f44336;
-  --color-semantic-success: #4caf50;
-  --color-semantic-warning: #ff9800;
-  --color-semantic-info: #2196f3;
 
   /* Spacing */
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-  --spacing-3xl: 4rem;
-
-  /* Font Sizes */
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-
-  /* Font Weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Border Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
-  --border-radius-sm: 0.25rem;
-  --border-radius-md: 0.5rem;
-  --border-radius-lg: 0.75rem;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-
-  /* Transitions */
-  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-fast: 150ms;
-  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --smrt-spacing-xs: 0.25rem;
+  --smrt-spacing-sm: 0.5rem;
+  --smrt-spacing-md: 1rem;
+  --smrt-spacing-lg: 1.5rem;
+  --smrt-spacing-xl: 2rem;
+  --smrt-spacing-2xl: 3rem;
+  --smrt-spacing-3xl: 4rem;
+
+  /* Radius */
+  --smrt-radius-sm: 0.25rem;
+  --smrt-radius-md: 0.5rem;
+  --smrt-radius-lg: 0.75rem;
+  --smrt-radius-xl: 1rem;
+  --smrt-radius-full: 9999px;
+
+  /* Motion */
+  --smrt-duration-fast: 100ms;
 }

package/dist/styles/unstyled.css

@@ -0,0 +1,65 @@
+/*
+ * Styleless mode for smrt components (#3825).
+ *
+ *   import '@happyvertical/smrt-ui/styles/unstyled.css';
+ *
+ * Components keep their layout (display, flex/grid, gap, padding, position,
+ * sizing) and lose their look (colour, background, border, radius, shadow,
+ * font, outline, filter). Every rule here lives in a smrt layer, so unlayered
+ * consumer CSS still wins, whatever the import order. Restyle with unlayered
+ * CSS, the --smrt-* tokens, or the data-smrt-component / data-smrt-part hooks.
+ *
+ * The reverted property list is explicit on purpose. `all: revert-layer` would
+ * also drop layout declarations, because until per-package structure/theme
+ * sorting lands every component rule sits in smrt.theme. Keep this list in
+ * step with the "Styleless mode" section of agents/styling.md.
+ */
+@layer smrt.reset, smrt.structure, smrt.theme;
+
+/*
+ * Reset: once the look is stripped, text inherits the page typography instead
+ * of the browser's serif default, and form controls drop their UA chrome.
+ */
+@layer smrt.reset {
+  :is([data-smrt-component], [data-smrt-component] *) {
+    font: inherit;
+  }
+
+  :is([data-smrt-component], [data-smrt-component] *):is(
+      button,
+      input,
+      select,
+      textarea
+    ) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+}
+
+/*
+ * Revert the look back to smrt.structure (and then the reset). The :not(#\#)
+ * x3 boost gives specificity (3,1,0), which beats Svelte's hashed .svelte-*
+ * class selectors without !important.
+ */
+@layer smrt.theme {
+  :is([data-smrt-component], [data-smrt-component] *):not(#\#):not(#\#):not(#\#) {
+    background: revert-layer;
+    border: revert-layer;
+    border-radius: revert-layer;
+    box-shadow: revert-layer;
+    color: revert-layer;
+    font: revert-layer;
+    letter-spacing: revert-layer;
+    text-decoration: revert-layer;
+    text-transform: revert-layer;
+    text-shadow: revert-layer;
+    outline: revert-layer;
+    filter: revert-layer;
+    backdrop-filter: revert-layer;
+  }
+}

package/dist/svelte/playground/BaseControlsPreview.svelte

@@ -108,6 +108,8 @@ function handleSubmit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench {
     display: grid;
     gap: var(--smrt-spacing-6);
@@ -230,4 +232,5 @@ function handleSubmit() {
       text-align: left;
     }
   }
+}
 </style>

package/dist/svelte/playground/CalendarPreview.svelte

@@ -109,6 +109,8 @@ const items: CalendarItem[] = [
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench {
     display: grid;
     gap: var(--smrt-spacing-4, 1rem);
@@ -123,7 +125,7 @@ const items: CalendarItem[] = [
 
   .eyebrow {
     margin: 0;
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     text-transform: uppercase;
   }
@@ -136,6 +138,7 @@ const items: CalendarItem[] = [
   .picked {
     margin: 0;
     min-height: 1.5rem;
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/svelte/playground/CapturePreview.svelte

@@ -46,6 +46,8 @@ function describeSubmission(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
   header { display: grid; gap: var(--smrt-spacing-2); }
   h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); }
@@ -53,4 +55,5 @@ function describeSubmission(
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   form { display: grid; gap: var(--smrt-spacing-6); }
   section { display: grid; gap: var(--smrt-spacing-3); min-width: 0; }
+}
 </style>

package/dist/svelte/playground/CodeSelectorsPreview.svelte

@@ -24,6 +24,9 @@ let submitted = $state('');
   <output aria-label="Submitted codes">{submitted}</output>
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .selectors { display: grid; gap: 1rem; max-width: 40rem; color: var(--smrt-color-on-surface); }
 output { overflow-wrap: anywhere; }
+}
 </style>

package/dist/svelte/playground/CollectionsPreview.svelte

@@ -52,8 +52,11 @@ const filtered = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-4); color: var(--smrt-color-on-surface); }
   header { padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   .status { 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); font: var(--smrt-typography-label-small-font); }
+}
 </style>

package/dist/svelte/playground/DataTablePreview.svelte

@@ -494,6 +494,8 @@ function selectAllMatching() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench {
     display: grid;
     gap: var(--smrt-spacing-5);
@@ -634,4 +636,5 @@ function selectAllMatching() {
       margin-left: 0;
     }
   }
+}
 </style>

package/dist/svelte/playground/FeedbackPreview.svelte

@@ -38,6 +38,8 @@ const menu = [
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
   header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
@@ -48,4 +50,5 @@ const menu = [
   .interaction-row { flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--smrt-spacing-3); }
   .slider { display: grid; max-width: 24rem; gap: var(--smrt-spacing-2); } .slider label { display: flex; justify-content: space-between; } input { accent-color: var(--smrt-color-primary); }
   @media (max-width: 760px) { header { align-items: flex-start; flex-direction: column; } .progress-grid { grid-template-columns: 1fr; } }
+}
 </style>

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -115,6 +115,8 @@ const identity = (controlId: string) => ({
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
   header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
@@ -127,4 +129,5 @@ const identity = (controlId: string) => ({
   .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-5); align-items: start; }
   .grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   @media (max-width: 900px) { header { flex-direction: column; } .agent-actions { justify-content: flex-start; } .grid, .grid.compact { grid-template-columns: 1fr; } }
+}
 </style>