@happyvertical/smrt-ui 0.55.16 → 0.55.17

package/dist/components/feedback/PhoneSheet.svelte

@@ -89,7 +89,7 @@ function onkeydown(event: KeyboardEvent): void {
   tabindex="-1"
   data-escape-scope
   data-testid="phone-sheet"
-  {onkeydown}
+  {onkeydown} data-smrt-component="PhoneSheet"
 >
   <header
     class="phone-sheet__header"
@@ -129,6 +129,8 @@ function onkeydown(event: KeyboardEvent): void {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .phone-sheet {
     position: absolute;
     inset: 0;
@@ -221,4 +223,5 @@ function onkeydown(event: KeyboardEvent): void {
       transition: none;
     }
   }
+}
 </style>

package/dist/components/feedback/Progress.svelte

@@ -39,18 +39,20 @@ const displayValue = $derived(
 </script>
 {#if variant === 'circular'}
   <div class="progress progress--circular progress--{size} {className}" class:indeterminate role="progressbar" aria-label={label}
-    aria-valuemin={indeterminate ? undefined : min} aria-valuemax={indeterminate ? undefined : max} aria-valuenow={value}>
-    <svg viewBox="0 0 44 44" aria-hidden="true"><circle class="track" cx="22" cy="22" r="18"></circle><circle class="indicator" cx="22" cy="22" r="18" style={`--progress: ${normalized}`}></circle></svg>
+    aria-valuemin={indeterminate ? undefined : min} aria-valuemax={indeterminate ? undefined : max} aria-valuenow={value} data-smrt-component="Progress">
+    <svg viewBox="0 0 44 44" aria-hidden="true"><circle class="track" cx="22" cy="22" r="18"></circle><circle class="indicator" cx="22" cy="22" r="18" style={`--smrt-progress-value: ${normalized}`}></circle></svg>
     {#if showValue && !indeterminate}<span>{displayValue}</span>{/if}
   </div>
 {:else}
   <div class="progress progress--linear progress--{size} {className}" class:indeterminate role="progressbar" aria-label={label}
-    aria-valuemin={indeterminate ? undefined : min} aria-valuemax={indeterminate ? undefined : max} aria-valuenow={value}>
+    aria-valuemin={indeterminate ? undefined : min} aria-valuemax={indeterminate ? undefined : max} aria-valuenow={value} data-smrt-component="Progress">
     <span class="track"><span class="indicator" style:width={indeterminate ? undefined : `${normalized}%`}></span></span>
     {#if showValue && !indeterminate}<span class="value">{displayValue}</span>{/if}
   </div>
 {/if}
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .progress--linear { display: flex; align-items: center; gap: var(--smrt-spacing-2); width: 100%; }
   .progress--linear .track { position: relative; display: block; flex: 1; height: 4px; overflow: hidden; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); }
   .progress--linear.progress--sm .track { height: 2px; } .progress--linear.progress--lg .track { height: 8px; }
@@ -61,9 +63,10 @@ const displayValue = $derived(
   .progress--circular.progress--sm { width: 1.75rem; height: 1.75rem; } .progress--circular.progress--lg { width: 4rem; height: 4rem; }
   .progress--circular svg { width: 100%; height: 100%; transform: rotate(-90deg); }
   .progress--circular circle { fill: none; stroke-width: 4; } .progress--circular .track { stroke: var(--smrt-color-surface-container-highest); }
-  .progress--circular .indicator { stroke: var(--smrt-color-primary); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 - (113.1 * var(--progress)) / 100); transition: stroke-dashoffset var(--smrt-duration-short4); }
+  .progress--circular .indicator { stroke: var(--smrt-color-primary); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 - (113.1 * var(--smrt-progress-value)) / 100); transition: stroke-dashoffset var(--smrt-duration-short4); }
   .progress--circular.indeterminate svg { animation: spin 1s linear infinite; } .progress--circular.indeterminate .indicator { stroke-dasharray: 70 113.1; }
   .progress--circular > span { position: absolute; font: var(--smrt-typography-label-small-font); }
   @keyframes linear-progress { from { left: -40%; } to { left: 105%; } } @keyframes spin { to { transform: rotate(270deg); } }
-  @media (prefers-reduced-motion: reduce) { .indicator { transition: none !important; animation-duration: 2.5s !important; } }
+  @media (prefers-reduced-motion: reduce) { .progress--linear .indicator, .progress--circular .indicator { transition: none; } .progress--linear.indeterminate .indicator { animation-duration: 2.5s; } }
+}
 </style>

package/dist/components/feedback/ProgressBar.svelte

@@ -76,7 +76,7 @@ const displayLabel = $derived.by(() => {
 });
 </script>
 
-<div class="progress-container" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+<div class="progress-container" class:sm={size === 'sm'} class:lg={size === 'lg'} data-smrt-component="ProgressBar">
   {#if showLabel || showValue}
     <div class="progress-header">
       <span class="progress-label">{displayLabel}</span>
@@ -102,6 +102,8 @@ const displayLabel = $derived.by(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .progress-container {
     width: 100%;
   }
@@ -110,12 +112,12 @@ const displayLabel = $derived.by(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--smrt-spacing-2, 8px);
+    margin-bottom: var(--smrt-spacing-2);
   }
 
   .progress-label {
     font: var(--smrt-typography-label-large-font);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .sm .progress-label {
@@ -125,14 +127,14 @@ const displayLabel = $derived.by(() => {
   .over-badge {
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
   }
 
   .progress-track {
     width: 100%;
     height: 4px;
-    background-color: var(--smrt-color-surface-container-highest, #e0e2ec);
-    border-radius: var(--smrt-radius-sm, 4px);
+    background-color: var(--smrt-color-surface-container-highest);
+    border-radius: var(--smrt-radius-sm);
     overflow: hidden;
   }
 
@@ -142,7 +144,7 @@ const displayLabel = $derived.by(() => {
 
   .lg .progress-track {
     height: 8px;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
   }
 
   .progress-bar {
@@ -156,7 +158,8 @@ const displayLabel = $derived.by(() => {
     }
   }
 
-  .color-primary { background-color: var(--smrt-color-primary, #005ac1); }
-  .color-tertiary { background-color: var(--smrt-color-tertiary, #6b5778); }
-  .color-error { background-color: var(--smrt-color-error, #ba1a1a); }
+  .color-primary { background-color: var(--smrt-color-primary); }
+  .color-tertiary { background-color: var(--smrt-color-tertiary); }
+  .color-error { background-color: var(--smrt-color-error); }
+}
 </style>

package/dist/components/feedback/Spinner.svelte

@@ -9,12 +9,15 @@ export interface Props {
 }
 let { label = 'Loading', size = 'md', class: className = '' }: Props = $props();
 </script>
-<span class="spinner spinner--{size} {className}" role="status"><span class="spinner__ring" aria-hidden="true"></span><span class="visually-hidden">{label}</span></span>
+<span class="spinner spinner--{size} {className}" role="status" data-smrt-component="Spinner"><span class="spinner__ring" aria-hidden="true"></span><span class="visually-hidden">{label}</span></span>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .spinner { display: inline-flex; }
   .spinner__ring { width: 1.5rem; height: 1.5rem; border: 2px solid var(--smrt-color-surface-container-highest); border-top-color: var(--smrt-color-primary); border-radius: 50%; animation: spin .75s linear infinite; }
   .spinner--sm .spinner__ring { width: 1rem; height: 1rem; } .spinner--lg .spinner__ring { width: 2.5rem; height: 2.5rem; border-width: 3px; }
   .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
   @keyframes spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .spinner__ring { animation-duration: 1.5s; } }
+}
 </style>

package/dist/components/feedback/ToastViewport.svelte

@@ -161,12 +161,12 @@ async function runAction(toast: Toast) {
 </script>
 
 <section use:followModal class="viewport viewport--{position} {className}" aria-label="Notifications" aria-live="polite"
-  style:--toast-inset={inset}
-  style:--toast-top={bounds ? `${bounds.top}px` : undefined}
-  style:--toast-right={bounds ? `${bounds.right}px` : undefined}
-  style:--toast-bottom={bounds ? `${bounds.bottom}px` : undefined}
-  style:--toast-left={bounds ? `${bounds.left}px` : undefined}
-  style:--toast-region-width={bounds ? `${bounds.width}px` : undefined}
+  style:--smrt-toast-viewport-inset={inset}
+  style:--smrt-toast-viewport-top={bounds ? `${bounds.top}px` : undefined}
+  style:--smrt-toast-viewport-right={bounds ? `${bounds.right}px` : undefined}
+  style:--smrt-toast-viewport-bottom={bounds ? `${bounds.bottom}px` : undefined}
+  style:--smrt-toast-viewport-left={bounds ? `${bounds.left}px` : undefined}
+  style:--smrt-toast-viewport-region-width={bounds ? `${bounds.width}px` : undefined} data-smrt-component="ToastViewport"
 >
   {#each toasts as toast (toast.id)}
     <div role="group" aria-label={toast.title ?? 'Notification'}
@@ -186,14 +186,17 @@ async function runAction(toast: Toast) {
 </section>
 
 <style>
-  .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(var(--toast-region-width, 100vw) - 2 * var(--toast-inset))); gap: var(--smrt-spacing-2); pointer-events: none; }
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(var(--smrt-toast-viewport-region-width, 100vw) - 2 * var(--smrt-toast-viewport-inset))); gap: var(--smrt-spacing-2); pointer-events: none; }
   .viewport :global(.alert) { pointer-events: auto; box-shadow: var(--smrt-elevation-3); }
-  .viewport--top-start { top: calc(var(--toast-top, 0px) + var(--toast-inset)); left: calc(var(--toast-left, 0px) + var(--toast-inset)); }
-  .viewport--top-end { top: calc(var(--toast-top, 0px) + var(--toast-inset)); right: calc(var(--toast-right, 0px) + var(--toast-inset)); }
-  .viewport--bottom-start { bottom: calc(var(--toast-bottom, 0px) + var(--toast-inset)); left: calc(var(--toast-left, 0px) + var(--toast-inset)); }
-  .viewport--bottom-end { right: calc(var(--toast-right, 0px) + var(--toast-inset)); bottom: calc(var(--toast-bottom, 0px) + var(--toast-inset)); }
-  .viewport--top-center, .viewport--bottom-center { left: calc(var(--toast-left, 0px) + var(--toast-region-width, 100vw) / 2); transform: translateX(-50%); }
-  .viewport--top-center { top: calc(var(--toast-top, 0px) + var(--toast-inset)); }
-  .viewport--bottom-center { bottom: calc(var(--toast-bottom, 0px) + var(--toast-inset)); }
+  .viewport--top-start { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-inset)); }
+  .viewport--top-end { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); right: calc(var(--smrt-toast-viewport-right, 0px) + var(--smrt-toast-viewport-inset)); }
+  .viewport--bottom-start { bottom: calc(var(--smrt-toast-viewport-bottom, 0px) + var(--smrt-toast-viewport-inset)); left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-inset)); }
+  .viewport--bottom-end { right: calc(var(--smrt-toast-viewport-right, 0px) + var(--smrt-toast-viewport-inset)); bottom: calc(var(--smrt-toast-viewport-bottom, 0px) + var(--smrt-toast-viewport-inset)); }
+  .viewport--top-center, .viewport--bottom-center { left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-region-width, 100vw) / 2); transform: translateX(-50%); }
+  .viewport--top-center { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); }
+  .viewport--bottom-center { bottom: calc(var(--smrt-toast-viewport-bottom, 0px) + var(--smrt-toast-viewport-inset)); }
   button { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid currentColor; border-radius: var(--smrt-radius-small); background: transparent; color: inherit; font: inherit; cursor: pointer; }
+}
 </style>

package/dist/components/feedback/WorkingStrip.svelte

@@ -144,10 +144,10 @@ function handleKeydown(event: KeyboardEvent) {
 }
 </script>
 
-<div class="working-strip__live" aria-live="polite" aria-atomic="true">
+<div class="working-strip__live" aria-live="polite" aria-atomic="true" data-smrt-component="WorkingStrip">
   {politeText}
 </div>
-<div class="working-strip__live" aria-live="assertive" aria-atomic="true">
+<div class="working-strip__live" aria-live="assertive" aria-atomic="true" data-smrt-component="WorkingStrip">
   {visible && assertive ? accessibleSummary : ''}
 </div>
 
@@ -157,7 +157,7 @@ function handleKeydown(event: KeyboardEvent) {
     class="working-strip working-strip--{variant}"
     data-phase={phase}
     data-testid="working-strip"
-    onkeydown={handleKeydown}
+    onkeydown={handleKeydown} data-smrt-component="WorkingStrip"
   >
     {#snippet content()}
       <span class="working-strip__icon" aria-hidden="true">
@@ -243,6 +243,8 @@ function handleKeydown(event: KeyboardEvent) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .working-strip__live,
   .working-strip__sr {
     position: absolute;
@@ -423,4 +425,5 @@ function handleKeydown(event: KeyboardEvent) {
       border-inline-start-color: currentColor;
     }
   }
+}
 </style>

package/dist/components/forms/CameraCapture.svelte

@@ -451,7 +451,7 @@ useControlRegistration(() => {
   data-smrt-control={controlId}
   data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
-  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id} data-smrt-component="CameraCapture"
 >
   <div class="stage" class:empty={cameraState !== 'streaming' && !previewUrl}>
     <video
@@ -524,6 +524,8 @@ useControlRegistration(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .camera-capture {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -578,8 +580,8 @@ useControlRegistration(() => {
     justify-content: center;
     /* Capture is a touch flow: its actions are touch targets at every
        density, on the shared scale (smrt#3252). */
-    min-width: var(--smrt-touch-target-min, 48px);
-    min-height: var(--smrt-touch-target-min, 48px);
+    min-width: var(--smrt-touch-target-min);
+    min-height: var(--smrt-touch-target-min);
     padding: 0 var(--smrt-spacing-4);
     border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-small);
@@ -616,4 +618,5 @@ useControlRegistration(() => {
     outline: 3px solid var(--smrt-color-tertiary);
     outline-offset: 4px;
   }
+}
 </style>

package/dist/components/forms/Checkbox.svelte

@@ -130,7 +130,7 @@ useControlRegistration(() => {
   data-smrt-control={controlId}
   data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
-  data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
+  data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id} data-smrt-component="Checkbox"
 >
   <input
     bind:this={inputEl}
@@ -154,6 +154,8 @@ useControlRegistration(() => {
 </label>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* The visible box stays 18px. A transparent 44x44 hit area (WCAG 2.5.8 / M3 touch target) is
      centred on it with ::before, so clicks nearby still land on the wrapping <label>. It adds no
      layout. The box and the label text sit above every hit area (z-index 1 over 0), so one
@@ -162,22 +164,22 @@ useControlRegistration(() => {
      checkbox stands alone in its parent. Beside anything else (a row title, a link, other text)
      it keeps to the box's own column and grows vertically only. Resize it with
      --smrt-control-hit-size (0px turns it off). */
-  .checkbox { --_box: 1.125rem; --_hit: max(var(--smrt-control-hit-size, 2.75rem), var(--_box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
-  .checkbox::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: calc(var(--_box) / 2); inline-size: var(--_hit); block-size: var(--_hit); margin-block-start: calc(var(--_hit) / -2); margin-inline-start: calc(var(--_hit) / -2); }
+  .checkbox { --smrt-checkbox-box: 1.125rem; --smrt-checkbox-hit: max(var(--smrt-control-hit-size, 2.75rem), var(--smrt-checkbox-box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
+  .checkbox::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: calc(var(--smrt-checkbox-box) / 2); inline-size: var(--smrt-checkbox-hit); block-size: var(--smrt-checkbox-hit); margin-block-start: calc(var(--smrt-checkbox-hit) / -2); margin-inline-start: calc(var(--smrt-checkbox-hit) / -2); }
   .checkbox--disabled { opacity: .5; cursor: not-allowed; }
   input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
-  .checkbox__box { position: relative; z-index: 1; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small, 3px); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
+  .checkbox__box { position: relative; z-index: 1; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
   .checkbox__label { position: relative; z-index: 1; }
   input:checked + .checkbox__box, input:indeterminate + .checkbox__box { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); color: var(--smrt-color-on-primary); }
   input:focus-visible + .checkbox__box { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
   .checkbox__check { font-size: .8rem; font-weight: 800; line-height: 1; }
   .checkbox__dash { width: .6rem; height: 2px; background: currentColor; }
-  .checkbox:not(:only-child)::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
+  .checkbox:not(:only-child)::before { inline-size: var(--smrt-checkbox-box); margin-inline-start: calc(var(--smrt-checkbox-box) / -2); }
   .checkbox[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
 
   /* Table cells: neighbouring cells hold links and other controls, so the hit area never leaves
      the cell's column. It grows vertically only (box wide)... */
-  :global(:is(td, th)) .checkbox::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
+  :global(:is(td, th)) .checkbox::before { inline-size: var(--smrt-checkbox-box); margin-inline-start: calc(var(--smrt-checkbox-box) / -2); }
   /* ...unless the checkbox is the cell's only content: then the whole cell, clipped to its own
      edges, is the hit area (the 44px target the header and every row share). The cell only needs
      a containing block, so :where() keeps that rule at zero specificity: a sticky header or a
@@ -188,7 +190,8 @@ useControlRegistration(() => {
 
   @media (prefers-reduced-motion: reduce) { .checkbox__box { transition: none; } }
 
-  .checkbox[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .checkbox[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .checkbox[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .checkbox { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+}
 </style>

package/dist/components/forms/Combobox.svelte

@@ -334,7 +334,7 @@ useControlRegistration(() => {
 </script>
 <div bind:this={rootEl} class="combobox {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
-  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id} data-smrt-component="Combobox">
   <FieldLabel for={inputId} {label} {required} />
   <!-- The form posts the committed value (an option id), never the label the person sees. -->
   {#if name}<input type="hidden" {name} {value} {disabled} />{/if}
@@ -347,6 +347,8 @@ useControlRegistration(() => {
   {#if status !== undefined}<div class="sr-status" role="status" aria-live="polite">{open ? status : ''}</div>{/if}
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .combobox { position: relative; display: grid; gap: 0; color: var(--smrt-color-on-surface); }
   input { box-sizing: border-box; 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); }
@@ -354,4 +356,5 @@ useControlRegistration(() => {
   .options.empty { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); color: var(--smrt-color-on-surface-variant); }
   .sr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
   :global(.combobox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/forms/DatePicker.svelte

@@ -25,5 +25,10 @@ let {
 const instanceId = $props.id();
 const resolvedId = $derived(id ?? `smrt-date-${instanceId}`);
 </script>
-<label class="picker {className}" for={resolvedId}><span>{label}</span><Input id={resolvedId} {name} type="date" aria-label={label} {interaction} bind:value {...rest} /></label>
-<style>.picker { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); font: var(--smrt-typography-label-large-font); }</style>
+<label class="picker {className}" for={resolvedId} data-smrt-component="DatePicker"><span>{label}</span><Input id={resolvedId} {name} type="date" aria-label={label} {interaction} bind:value {...rest} /></label>
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.picker { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); font: var(--smrt-typography-label-large-font); }
+}
+</style>

package/dist/components/forms/DictationButton.svelte

@@ -118,10 +118,12 @@ function handleClick() {
   {/if}
 </Button>
 {#if hint !== name}
-  <span id={helpId} class="smrt-dictation-help">{hint}</span>
+  <span id={helpId} class="smrt-dictation-help" data-smrt-component="DictationButton">{hint}</span>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   :global(.smrt-dictation-button) {
     position: relative;
     flex-shrink: 0;
@@ -132,13 +134,13 @@ function handleClick() {
     block-size: 44px;
     min-inline-size: 44px;
     padding: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    border-radius: var(--smrt-radius-full);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   :global(.smrt-dictation-button--listening) {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   /* Read out with the button's name; never shown. */
@@ -158,22 +160,22 @@ function handleClick() {
     inline-size: 10px;
     block-size: 10px;
     border-radius: 50%;
-    background: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error);
     animation: smrt-dictation-pulse 1.2s ease-in-out infinite;
   }
 
   /* Hands-free: a steady ring while listening ... */
   :global(.smrt-dictation-button--hands-free) {
-    box-shadow: 0 0 0 2px var(--smrt-color-error, #ba1a1a);
+    box-shadow: 0 0 0 2px var(--smrt-color-error);
   }
 
   /* ... and a halo that swells with the voice while someone is speaking. */
   :global(.smrt-dictation-button--speaking) {
     box-shadow:
-      0 0 0 3px var(--smrt-color-error, #ba1a1a),
+      0 0 0 3px var(--smrt-color-error),
       0 0 0
         calc(4px + 10px * var(--smrt-dictation-level, 0))
-        color-mix(in srgb, var(--smrt-color-error, #ba1a1a) 28%, transparent);
+        color-mix(in srgb, var(--smrt-color-error) 28%, transparent);
     transition: box-shadow 80ms linear;
   }
 
@@ -181,7 +183,7 @@ function handleClick() {
   :global(.smrt-dictation-button--paused) {
     opacity: 0.6;
     box-shadow: none;
-    outline: 2px dashed var(--smrt-color-outline, #73777f);
+    outline: 2px dashed var(--smrt-color-outline);
     outline-offset: -2px;
   }
 
@@ -198,9 +200,9 @@ function handleClick() {
     inline-size: 10px;
     block-size: 10px;
     border-radius: 50%;
-    border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-block-start-color: var(--smrt-color-primary, #2f5ea8);
-    background: var(--smrt-color-surface, #fff);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-block-start-color: var(--smrt-color-primary);
+    background: var(--smrt-color-surface);
     animation: smrt-dictation-spin 0.9s linear infinite;
   }
 
@@ -229,7 +231,8 @@ function handleClick() {
     /* Still ringed, but the halo no longer animates with the voice. */
     :global(.smrt-dictation-button--speaking) {
       transition: none;
-      box-shadow: 0 0 0 4px var(--smrt-color-error, #ba1a1a);
+      box-shadow: 0 0 0 4px var(--smrt-color-error);
     }
   }
+}
 </style>

package/dist/components/forms/DictationStatus.svelte

@@ -71,7 +71,7 @@ function errorText(kind: DictationErrorKind | null): string {
 }
 </script>
 
-<div class={`smrt-dictation-status ${className}`.trim()}>
+<div class={`smrt-dictation-status ${className}`.trim()} data-smrt-component="DictationStatus">
   <p
     class="smrt-dictation-status-line"
     class:smrt-dictation-status--empty={!showLine || announceOnly}
@@ -118,6 +118,8 @@ function errorText(kind: DictationErrorKind | null): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-dictation-status {
     display: contents;
   }
@@ -135,7 +137,7 @@ function errorText(kind: DictationErrorKind | null): string {
     align-items: center;
     gap: 0.4rem;
     padding: 0.25rem 0;
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   /* Kept mounted while empty (live regions must exist before they speak),
@@ -154,15 +156,15 @@ function errorText(kind: DictationErrorKind | null): string {
     inline-size: 8px;
     block-size: 8px;
     border-radius: 50%;
-    background: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error);
   }
 
   .smrt-dictation-status-spinner {
     inline-size: 12px;
     block-size: 12px;
     border-radius: 50%;
-    border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-block-start-color: var(--smrt-color-primary, #2f5ea8);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-block-start-color: var(--smrt-color-primary);
     animation: smrt-dictation-spin 0.9s linear infinite;
   }
 
@@ -179,14 +181,15 @@ function errorText(kind: DictationErrorKind | null): string {
   }
 
   .smrt-dictation-status-interim {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font-style: italic;
   }
 
   .smrt-dictation-status-error {
     padding: 0.4rem 0.6rem;
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
+}
 </style>

package/dist/components/forms/ErrorSummary.svelte

@@ -28,9 +28,12 @@ function select(error: FormError) {
   onselect?.(error.controlId);
 }
 </script>
-{#if errors.length > 0}<section class="error-summary {className}" role="alert" aria-labelledby={titleId}><h2 id={titleId}>{title}</h2><ul>{#each errors as error}<li><button type="button" onclick={() => select(error)}>{error.label ? `${error.label}: ` : ''}{error.message}</button></li>{/each}</ul></section>{/if}
+{#if errors.length > 0}<section class="error-summary {className}" role="alert" aria-labelledby={titleId} data-smrt-component="ErrorSummary"><h2 id={titleId}>{title}</h2><ul>{#each errors as error}<li><button type="button" onclick={() => select(error)}>{error.label ? `${error.label}: ` : ''}{error.message}</button></li>{/each}</ul></section>{/if}
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .error-summary { padding: var(--smrt-spacing-4); border-inline-start: 4px solid var(--smrt-color-error); border-radius: var(--smrt-radius-small); background: var(--smrt-color-error-container); color: var(--smrt-color-on-error-container); }
   h2 { margin: 0 0 var(--smrt-spacing-2); font: var(--smrt-typography-title-small-font); } ul { margin: 0; padding-inline-start: var(--smrt-spacing-5); }
   button { padding: 0; border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; }
+}
 </style>

package/dist/components/forms/FieldLabel.svelte

@@ -19,26 +19,29 @@ let { label, for: forId, id, required = false }: Props = $props();
 </script>
 
 {#if forId}
-  <label {id} for={forId} class="smrt-field-label">{label}{#if required}<span class="required" aria-hidden="true">*</span>{/if}</label>
+  <label {id} for={forId} class="smrt-field-label" data-smrt-component="FieldLabel">{label}{#if required}<span class="required" aria-hidden="true">*</span>{/if}</label>
 {:else}
-  <span {id} class="smrt-field-label">{label}{#if required}<span class="required" aria-hidden="true">*</span>{/if}</span>
+  <span {id} class="smrt-field-label" data-smrt-component="FieldLabel">{label}{#if required}<span class="required" aria-hidden="true">*</span>{/if}</span>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-field-label {
     display: block;
-    margin-bottom: var(--smrt-spacing-1, 4px);
+    margin-bottom: var(--smrt-spacing-1);
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
     line-height: var(--smrt-typography-label-large-line-height, 1.4);
     letter-spacing: normal;
     text-transform: none;
     font-family: inherit;
-    color: var(--smrt-color-on-surface, #374151);
+    color: var(--smrt-color-on-surface);
   }
 
   .required {
-    color: var(--smrt-color-error, #ba1a1a);
-    margin-left: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-left: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/forms/Fieldset.svelte

@@ -30,12 +30,15 @@ const descriptionId = $derived(
 );
 const errorId = $derived(error ? `fieldset-${instanceId}-error` : undefined);
 </script>
-<fieldset class="fieldset {className}" aria-describedby={[descriptionId, errorId].filter(Boolean).join(' ') || undefined} {...rest}>
+<fieldset class="fieldset {className}" aria-describedby={[descriptionId, errorId].filter(Boolean).join(' ') || undefined} {...rest} data-smrt-component="Fieldset">
   <legend>{legend}</legend>{#if description}<p id={descriptionId} class="description">{description}</p>{/if}<div class="content" class:content--stack={stack}>{@render children()}</div>{#if error}<p id={errorId} class="error" role="alert">{error}</p>{/if}
 </fieldset>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .fieldset { margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); }
   legend { padding: 0 var(--smrt-spacing-2); color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-small-font); }
   .content--stack { display: grid; gap: var(--smrt-spacing-4); }
   .description, .error { margin: 0 0 var(--smrt-spacing-3); font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); } .error { margin: var(--smrt-spacing-3) 0 0; color: var(--smrt-color-error); }
+}
 </style>

package/dist/components/forms/FilePicker.svelte

@@ -111,11 +111,13 @@ useControlRegistration(() => {
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}
   ondragenter={(event) => { event.preventDefault(); dragging = true; }}
-  ondragover={(event) => event.preventDefault()} ondragleave={() => dragging = false} ondrop={handleDrop}>
+  ondragover={(event) => event.preventDefault()} ondragleave={() => dragging = false} ondrop={handleDrop} data-smrt-component="FilePicker">
   <input bind:this={inputEl} id={resolvedId} type="file" {name} {accept} {multiple} {disabled} {required} onchange={handleChange} {...rest} />
   <span class="label">{label}</span><span class="description">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected` : description}</span>
 </label>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .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); }
@@ -123,4 +125,5 @@ useControlRegistration(() => {
   input:focus-visible ~ .label { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
   .label { font: var(--smrt-typography-label-large-font); } .description { font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); }
   .file-picker[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/forms/Form.svelte

@@ -152,7 +152,7 @@ function handleChange(event: Event & { currentTarget: HTMLFormElement }) {
   {onclick}
   oninput={handleInput}
   onchange={handleChange}
-  {...rest}
+  {...rest} data-smrt-component="Form"
 >
 	{@render children()}
   <StagedControlReview