@happyvertical/smrt-svelte 0.55.16 → 0.55.18

package/dist/components/forms/SelectInput.svelte

@@ -136,7 +136,7 @@ function handleChange(e: Event) {
   class:smrt-mode={isSmrt} 
   class:focused={isFocused} 
   class:disabled
-  class:has-value={!!value}
+  class:has-value={!!value} data-smrt-component="SelectInput"
 >
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
@@ -180,10 +180,12 @@ function handleChange(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-select-field {
-    --field-color: var(--smrt-color-on-surface-variant);
-    --field-bg: var(--smrt-color-surface-container-highest);
-    --field-active: var(--smrt-color-primary);
+    --smrt-select-input-field-color: var(--smrt-color-on-surface-variant);
+    --smrt-select-input-field-bg: var(--smrt-color-surface-container-highest);
+    --smrt-select-input-field-active: var(--smrt-color-primary);
     
     display: flex;
     flex-direction: column;
@@ -195,11 +197,11 @@ function handleChange(e: Event) {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
+    background-color: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 40px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -221,7 +223,7 @@ function handleChange(e: Event) {
     background: transparent;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-body-large-tracking);
     color: var(--smrt-color-on-surface);
     width: 100%;
     padding: 0;
@@ -239,7 +241,7 @@ function handleChange(e: Event) {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--field-color);
+    color: var(--smrt-select-input-field-color);
     pointer-events: none;
     margin-right: -4px;
   }
@@ -247,12 +249,12 @@ function handleChange(e: Event) {
   .active-indicator { display: none; }
 
   .focused .container {
-    border-color: var(--field-active);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
+    border-color: var(--smrt-select-input-field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-select-input-field-active) 10%, transparent);
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) 0 0;
+    padding: var(--smrt-spacing-1) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
   }
 
@@ -265,6 +267,7 @@ function handleChange(e: Event) {
 
   /* Smrt mode overrides */
   .smrt-mode {
-    --field-active: var(--smrt-color-tertiary);
+    --smrt-select-input-field-active: var(--smrt-color-tertiary);
   }
+}
 </style>

package/dist/components/forms/TextInput.svelte

@@ -265,7 +265,7 @@ function handleInput(e: Event) {
   class:invalid={showInvalid}
   class:disabled
   class:has-value={!!value}
-  class:listening={isHolding}
+  class:listening={isHolding} data-smrt-component="TextInput"
 >
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
@@ -337,10 +337,12 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-text-field {
-    --field-color: var(--smrt-color-on-surface-variant);
-    --field-bg: var(--smrt-color-surface-container-highest);
-    --field-active: var(--smrt-color-primary);
+    --smrt-text-input-field-color: var(--smrt-color-on-surface-variant);
+    --smrt-text-input-field-bg: var(--smrt-color-surface-container-highest);
+    --smrt-text-input-field-active: var(--smrt-color-primary);
     
     display: flex;
     flex-direction: column;
@@ -352,11 +354,11 @@ function handleInput(e: Event) {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
+    background-color: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 40px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -378,7 +380,7 @@ function handleInput(e: Event) {
     background: transparent;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-body-large-tracking);
     color: var(--smrt-color-on-surface);
     width: 100%;
     padding: 0;
@@ -393,8 +395,8 @@ function handleInput(e: Event) {
   .active-indicator { display: none; }
 
   .focused .container {
-    border-color: var(--field-active);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
+    border-color: var(--smrt-text-input-field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-text-input-field-active) 10%, transparent);
   }
 
   .mic-btn {
@@ -405,8 +407,8 @@ function handleInput(e: Event) {
     justify-content: center;
     border: none;
     background: transparent;
-    color: var(--field-color);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-text-input-field-color);
+    border-radius: var(--smrt-radius-full);
     cursor: pointer;
     margin-right: -8px;
     transition: all 200ms;
@@ -418,7 +420,7 @@ function handleInput(e: Event) {
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) 0 0;
+    padding: var(--smrt-spacing-1) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     min-height: 16px;
   }
@@ -429,8 +431,8 @@ function handleInput(e: Event) {
 
   /* States */
   .invalid {
-    --field-active: var(--smrt-color-error);
-    --field-color: var(--smrt-color-error);
+    --smrt-text-input-field-active: var(--smrt-color-error);
+    --smrt-text-input-field-color: var(--smrt-color-error);
   }
 
   .listening {
@@ -441,4 +443,5 @@ function handleInput(e: Event) {
     opacity: 0.38;
     pointer-events: none;
   }
+}
 </style>

package/dist/components/forms/TextareaInput.svelte

@@ -228,7 +228,7 @@ function handleInput(e: Event) {
   class:focused={isFocused} 
   class:disabled
   class:has-value={!!value}
-  class:listening={isHolding}
+  class:listening={isHolding} data-smrt-component="TextareaInput"
 >
   {#if label}
     <FieldLabel id={labelId} for={name} {label} {required} />
@@ -297,10 +297,12 @@ function handleInput(e: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-text-field {
-    --field-color: var(--smrt-color-on-surface-variant);
-    --field-bg: var(--smrt-color-surface-container-highest);
-    --field-active: var(--smrt-color-primary);
+    --smrt-textarea-input-field-color: var(--smrt-color-on-surface-variant);
+    --smrt-textarea-input-field-bg: var(--smrt-color-surface-container-highest);
+    --smrt-textarea-input-field-active: var(--smrt-color-primary);
     
     display: flex;
     flex-direction: column;
@@ -312,11 +314,11 @@ function handleInput(e: Event) {
     position: relative;
     display: flex;
     align-items: flex-start;
-    background-color: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
-    border-radius: var(--smrt-radius-small, 6px);
+    background-color: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 40px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -328,8 +330,8 @@ function handleInput(e: Event) {
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding-top: var(--smrt-spacing-2, 8px);
-    padding-bottom: var(--smrt-spacing-2, 8px);
+    padding-top: var(--smrt-spacing-2);
+    padding-bottom: var(--smrt-spacing-2);
   }
 
 
@@ -338,7 +340,7 @@ function handleInput(e: Event) {
     background: transparent;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-body-large-tracking);
     color: var(--smrt-color-on-surface);
     width: 100%;
     padding: 0;
@@ -354,8 +356,8 @@ function handleInput(e: Event) {
   .active-indicator { display: none; }
 
   .focused .container {
-    border-color: var(--field-active);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
+    border-color: var(--smrt-textarea-input-field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-textarea-input-field-active) 10%, transparent);
   }
 
   .mic-btn {
@@ -366,11 +368,11 @@ function handleInput(e: Event) {
     justify-content: center;
     border: none;
     background: transparent;
-    color: var(--field-color);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-textarea-input-field-color);
+    border-radius: var(--smrt-radius-full);
     cursor: pointer;
     margin-right: -8px;
-    margin-top: var(--smrt-spacing-2, 8px);
+    margin-top: var(--smrt-spacing-2);
     transition: all 200ms;
   }
 
@@ -380,7 +382,7 @@ function handleInput(e: Event) {
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) 0 0;
+    padding: var(--smrt-spacing-1) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     min-height: 16px;
   }
@@ -399,6 +401,7 @@ function handleInput(e: Event) {
   }
 
   .smrt-mode {
-    --field-active: var(--smrt-color-tertiary);
+    --smrt-textarea-input-field-active: var(--smrt-color-tertiary);
   }
+}
 </style>

package/dist/components/import-export/ImportExport.svelte

@@ -319,7 +319,7 @@ async function startExport() {
 }
 </script>
 
-<section class="smrt-import-export" aria-label={collectionLabel ? `${t(M['ui.importExport.label'])}: ${collectionLabel}` : t(M['ui.importExport.label'])}>
+<section class="smrt-import-export" aria-label={collectionLabel ? `${t(M['ui.importExport.label'])}: ${collectionLabel}` : t(M['ui.importExport.label'])} data-smrt-component="ImportExport">
   {#if canImport && canExport}
     <SegmentedControl
       label={t(M['ui.importExport.mode'])}
@@ -637,6 +637,8 @@ async function startExport() {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-import-export {
     display: flex;
     flex-direction: column;
@@ -675,4 +677,5 @@ async function startExport() {
     padding: 0;
     margin: 0;
   }
+}
 </style>

package/dist/components/module/ModulePanel.svelte

@@ -56,7 +56,7 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
     class={className}
   />
 {:else}
-  <div class="module-panel-placeholder {className}">
+  <div class="module-panel-placeholder {className}" data-smrt-component="ModulePanel">
     <div class="module-panel-placeholder__icon">
       <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
         <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
@@ -85,6 +85,8 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .module-panel-placeholder {
     display: flex;
     flex-direction: column;
@@ -92,15 +94,15 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
     justify-content: center;
     padding: 2rem;
     text-align: center;
-    background: var(--smrt-color-surface-container-low, #f8fafc);
-    border: 1px dashed var(--smrt-color-outline-variant, #e2e8f0);
-    border-radius: var(--smrt-radius-medium, 8px);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px dashed var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
     min-height: 150px;
     gap: 0.75rem;
   }
 
   .module-panel-placeholder__icon {
-    color: var(--smrt-color-on-surface-variant, #94a3b8);
+    color: var(--smrt-color-on-surface-variant);
     opacity: 0.6;
   }
 
@@ -108,27 +110,28 @@ const slotMeta = $derived(moduleMeta?.uiSlots?.[slotId]);
     margin: 0;
     font-size: var(--smrt-typography-title-medium-size, 1rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #1e293b);
+    color: var(--smrt-color-on-surface);
   }
 
   .module-panel-placeholder__code {
     font-family: var(--smrt-font-family-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
-    background: var(--smrt-color-surface-container-high, #e2e8f0);
-    border-radius: var(--smrt-radius-small, 4px);
-    color: var(--smrt-color-on-surface-variant, #64748b);
+    background: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-small);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .module-panel-placeholder__hint {
     margin: 0;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface-variant, #64748b);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .module-panel-placeholder__meta {
     margin: 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #94a3b8);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/notifications/NotificationBell.svelte

@@ -106,7 +106,7 @@ $effect(() => {
 });
 </script>
 
-<div class="smrt-notification-bell">
+<div class="smrt-notification-bell" data-smrt-component="NotificationBell">
   <Button id={`${instanceId}-trigger`} aria-controls={`${instanceId}-panel`} variant="ghost" aria-haspopup="dialog" aria-expanded={open} onclick={() => (open = !open)}>
     {heading}{#if unread > 0}<span aria-label={t(M['ui.notification_bell.unread'], { count: unread })}> ({unread})</span>{/if}
   </Button>
@@ -126,6 +126,8 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-notification-bell { position: relative; }
   .smrt-notification-bell__panel { position: absolute; z-index: 1; inset-block-start: 100%; inset-inline-end: 0; inline-size: min(24rem, 90vw); padding: var(--smrt-spacing-3); background: var(--smrt-color-surface); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-medium); }
   header { display: flex; justify-content: space-between; gap: var(--smrt-spacing-2); }
@@ -133,4 +135,5 @@ $effect(() => {
   li { padding-block: var(--smrt-spacing-2); border-block-end: 1px solid var(--smrt-color-outline-variant); }
   li[data-read='false'] { border-inline-start: 3px solid var(--smrt-color-primary); padding-inline-start: var(--smrt-spacing-2); }
   p { overflow-wrap: anywhere; }
+}
 </style>

package/dist/components/overview/OverviewAssistantUndo.svelte

@@ -44,7 +44,7 @@ $effect(() => {
 });
 </script>
 
-<div class="smrt-overview-assistant-undo {className}" data-active={batch ? '' : undefined}>
+<div class="smrt-overview-assistant-undo {className}" data-active={batch ? '' : undefined} data-smrt-component="OverviewAssistantUndo">
   <!-- The live region stays mounted so each new message is announced. -->
   <span class="smrt-overview-assistant-undo__message" role="status" aria-live="polite">
     {#if batch}
@@ -64,6 +64,8 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-overview-assistant-undo {
     display: flex;
     flex-wrap: wrap;
@@ -74,4 +76,5 @@ $effect(() => {
   .smrt-overview-assistant-undo__message {
     flex: 1 1 12rem;
   }
+}
 </style>

package/dist/components/overview/OverviewGrid.svelte

@@ -26,6 +26,7 @@ import {
   type SortableAnnouncement,
 } from '../sortable/controller.svelte.js';
 import { tryUseShellLayout } from '../workspace/admin-shell/layout-context.js';
+import { flipRow } from '../workspace/admin-shell/motion.js';
 import ShellIconButton from '../workspace/admin-shell/ShellIconButton.svelte';
 import ShellSectionIcon from '../workspace/admin-shell/ShellSectionIcon.svelte';
 import type { OverviewOpResult } from './controller.svelte.js';
@@ -378,7 +379,7 @@ const headingTag = $derived(`h${headingLevel}`);
   </article>
 {/snippet}
 
-<div class="smrt-overview" bind:this={rootEl} data-editing={editing ? '' : undefined} data-presentation={presentation}>
+<div class="smrt-overview" bind:this={rootEl} data-editing={editing ? '' : undefined} data-presentation={presentation} data-smrt-component="OverviewGrid">
   {#if editing}
     <div class="smrt-overview__toolbar" role="toolbar" aria-label={t(M['ui.overview.toolbar'])}>
       <ShellIconButton
@@ -415,11 +416,12 @@ const headingTag = $derived(`h${headingLevel}`);
       <div
         role="listitem"
         class="smrt-overview__item"
+        animate:flipRow
         data-span={spanOf(row)}
         data-smrt-overview-item={row.widget.id}
         data-dragging={dragged === row.widget.id ? '' : undefined}
         data-drop={mark}
-        style:--span={spanOf(row)}
+        style:--smrt-overview-grid-span={spanOf(row)}
         ondragover={(event) => event.preventDefault()}
         ondrop={(event) => {
           if (!sortable.drag) return;
@@ -537,15 +539,17 @@ const headingTag = $derived(`h${headingLevel}`);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-overview { container-type: inline-size; min-inline-size: 0; }
   .smrt-overview__toolbar { display: flex; gap: var(--smrt-spacing-1); margin-block-end: var(--smrt-spacing-2); }
   .smrt-overview__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
   /* Gaps are tile padding, not grid gap, so a pointer never crosses a dead
      zone between tiles while dragging. */
-  .smrt-overview__list { --_pad: var(--smrt-spacing-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(-1 * var(--_pad)); }
-  .smrt-overview__item { position: relative; grid-column: span var(--span, 1); min-inline-size: 0; padding: var(--_pad); }
+  .smrt-overview__list { --smrt-overview-grid-pad: var(--smrt-spacing-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(-1 * var(--smrt-overview-grid-pad)); }
+  .smrt-overview__item { position: relative; grid-column: span var(--smrt-overview-grid-span, 1); min-inline-size: 0; padding: var(--smrt-overview-grid-pad); }
   .smrt-overview__item[data-dragging] { opacity: 0.5; }
-  .smrt-overview__item[data-drop]::before { content: ''; position: absolute; inset-block: var(--_pad); inline-size: 0.1875rem; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-primary); }
+  .smrt-overview__item[data-drop]::before { content: ''; position: absolute; inset-block: var(--smrt-overview-grid-pad); inline-size: 0.1875rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-primary); }
   .smrt-overview__item[data-drop='before']::before { inset-inline-start: 0; }
   .smrt-overview__item[data-drop='after']::before { inset-inline-end: 0; }
   .smrt-overview__tile { position: relative; block-size: 100%; box-sizing: border-box; padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
@@ -561,7 +565,7 @@ const headingTag = $derived(`h${headingLevel}`);
   .smrt-overview__handle:hover { background: var(--smrt-color-surface-container-high); }
   .smrt-overview__handle:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .smrt-overview__handle[aria-pressed='true'] { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
-  .smrt-overview__resize { position: absolute; inset-block-start: 50%; inset-inline-end: -0.4375rem; inline-size: 0.875rem; block-size: 2.75rem; transform: translateY(-50%); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-surface-container-high); cursor: ew-resize; touch-action: none; }
+  .smrt-overview__resize { position: absolute; inset-block-start: 50%; inset-inline-end: -0.4375rem; inline-size: 0.875rem; block-size: 2.75rem; transform: translateY(-50%); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); cursor: ew-resize; touch-action: none; }
   .smrt-overview__resize:hover { background: var(--smrt-color-primary-container); }
   .smrt-overview__resize:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .smrt-overview__choices { display: grid; gap: var(--smrt-spacing-1); margin: 0; padding: 0; list-style: none; }
@@ -579,4 +583,5 @@ const headingTag = $derived(`h${headingLevel}`);
     .smrt-overview__list { grid-template-columns: minmax(0, 1fr); }
     .smrt-overview__list .smrt-overview__item[data-span] { grid-column: span 1; }
   }
+}
 </style>

package/dist/components/overview/OverviewGrid.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overview/OverviewGrid.svelte.ts"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA4bzD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"OverviewGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overview/OverviewGrid.svelte.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA6bzD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/overview/WidgetOptionsForm.svelte

@@ -186,8 +186,11 @@ const modelValues = $derived(
 </Form>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-widget-form__check { display: flex; flex-direction: column; gap: var(--smrt-spacing-1); }
   .smrt-widget-form__hint { color: var(--smrt-color-on-surface-variant); }
   .smrt-widget-form__error { color: var(--smrt-color-error); }
   .smrt-widget-form__none { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

package/dist/components/overview/widgets/ChartWidget.svelte

@@ -57,9 +57,9 @@ const summary = $derived(
 </script>
 
 {#if points.length === 0}
-  <p class="smrt-chart__empty">{t(M['ui.overview.no_data'])}</p>
+  <p class="smrt-chart__empty" data-smrt-component="ChartWidget">{t(M['ui.overview.no_data'])}</p>
 {:else if style === 'line'}
-  <div class="smrt-chart">
+  <div class="smrt-chart" data-smrt-component="ChartWidget">
     <svg class="smrt-chart__line" viewBox="0 0 100 40" preserveAspectRatio="none" role="img" aria-label={summary}>
       <polyline points={polyline} fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" />
     </svg>
@@ -83,7 +83,7 @@ const summary = $derived(
     </table>
   </div>
 {:else}
-  <ul class="smrt-chart__bars" aria-label={summary}>
+  <ul class="smrt-chart__bars" aria-label={summary} data-smrt-component="ChartWidget">
     {#each points as point, index (index)}
       <li class="smrt-chart__row">
         <span class="smrt-chart__label">{point.label}</span>
@@ -97,15 +97,18 @@ const summary = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-chart { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-primary); }
   .smrt-chart__line { inline-size: 100%; block-size: 7rem; overflow: visible; }
   .smrt-chart__axis { display: flex; justify-content: space-between; margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.75rem); }
   .smrt-chart__bars { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
   .smrt-chart__row { display: grid; grid-template-columns: minmax(4rem, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-2); font-size: var(--smrt-typography-body-medium-size, 0.875rem); color: var(--smrt-color-on-surface); }
   .smrt-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .smrt-chart__track { display: block; block-size: 0.625rem; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-surface-container-high); overflow: hidden; }
+  .smrt-chart__track { display: block; block-size: 0.625rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); overflow: hidden; }
   .smrt-chart__bar { display: block; block-size: 100%; border-radius: inherit; background: var(--smrt-color-primary); }
   .smrt-chart__value { font-variant-numeric: tabular-nums; color: var(--smrt-color-on-surface-variant); }
   .smrt-chart__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
   .smrt-chart__table { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+}
 </style>

package/dist/components/overview/widgets/MetricWidget.svelte

@@ -56,7 +56,7 @@ const href = $derived(
 </script>
 
 {#if valid && metric}
-  <div class="smrt-metric">
+  <div class="smrt-metric" data-smrt-component="MetricWidget">
     {#if href}
       <a class="smrt-metric__value" {href}>{text}</a>
     {:else}
@@ -73,14 +73,17 @@ const href = $derived(
     {/if}
   </div>
 {:else}
-  <p class="smrt-metric__label">{t(M['ui.overview.no_data'])}</p>
+  <p class="smrt-metric__label" data-smrt-component="MetricWidget">{t(M['ui.overview.no_data'])}</p>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-metric { display: grid; gap: var(--smrt-spacing-1); }
   .smrt-metric__value { margin: 0; color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-display-small-size, 2rem); font-weight: var(--smrt-typography-weight-medium, 500); line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
   a.smrt-metric__value:hover { text-decoration: underline; }
   a.smrt-metric__value:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; border-radius: var(--smrt-radius-small, 0.25rem); }
   .smrt-metric__label { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-metric__change { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.875rem); }
+}
 </style>

package/dist/components/overview/widgets/NoteWidget.svelte

@@ -24,9 +24,9 @@ const blocks = $derived(
 {/snippet}
 
 {#if blocks.length === 0}
-  <p class="smrt-note__empty">{t(M['ui.overview.no_data'])}</p>
+  <p class="smrt-note__empty" data-smrt-component="NoteWidget">{t(M['ui.overview.no_data'])}</p>
 {:else}
-  <div class="smrt-note">
+  <div class="smrt-note" data-smrt-component="NoteWidget">
     {#each blocks as block, index (index)}
       {#if block.type === 'heading'}
         <p class="smrt-note__heading" data-level={block.level}><strong>{@render inline(block.children)}</strong></p>
@@ -48,6 +48,8 @@ const blocks = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-note { display: grid; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-body-medium-size, 0.875rem); overflow-wrap: anywhere; }
   .smrt-note p, .smrt-note ul, .smrt-note ol, .smrt-note blockquote, .smrt-note pre { margin: 0; }
   .smrt-note ul, .smrt-note ol { padding-inline-start: var(--smrt-spacing-5, 1.25rem); }
@@ -58,4 +60,5 @@ const blocks = $derived(
   .smrt-note__heading[data-level='1'] { font-size: var(--smrt-typography-title-large-size, 1.25rem); }
   .smrt-note__heading[data-level='2'] { font-size: var(--smrt-typography-title-medium-size, 1.125rem); }
   .smrt-note__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

package/dist/components/overview/widgets/RecordListWidget.svelte

@@ -49,9 +49,9 @@ const viewAll = $derived(
 </script>
 
 {#if rows.length === 0}
-  <p class="smrt-records__empty">{t(M['ui.overview.records.empty'])}</p>
+  <p class="smrt-records__empty" data-smrt-component="RecordListWidget">{t(M['ui.overview.records.empty'])}</p>
 {:else}
-  <ul class="smrt-records">
+  <ul class="smrt-records" data-smrt-component="RecordListWidget">
     {#each rows as row (row.id)}
       <li class="smrt-records__row">
         <span class="smrt-records__main">
@@ -68,7 +68,7 @@ const viewAll = $derived(
   </ul>
 {/if}
 {#if total !== null || viewAll}
-  <p class="smrt-records__foot">
+  <p class="smrt-records__foot" data-smrt-component="RecordListWidget">
     {#if total !== null}
       <span>{t(M['ui.overview.records.total'], { count: new Intl.NumberFormat(locale).format(total) })}</span>
     {/if}
@@ -77,6 +77,8 @@ const viewAll = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-records { display: grid; margin: 0; padding: 0; list-style: none; }
   .smrt-records__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-2) 0; border-block-end: 1px solid var(--smrt-color-outline-variant); }
   .smrt-records__row:last-child { border-block-end: 0; }
@@ -88,4 +90,5 @@ const viewAll = $derived(
   .smrt-records__foot { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); margin: var(--smrt-spacing-2) 0 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-records__foot a { color: var(--smrt-color-primary); }
   .smrt-records__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>