@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/feedback/Modal.svelte

@@ -125,24 +125,24 @@ const placementClass = $derived(`modal--${placement}`);
   onkeydown={handleKeydown}
   oncancel={handleCancel}
   aria-label={ariaLabel ?? title}
-  aria-describedby={ariaDescribedBy}
+  aria-describedby={ariaDescribedBy} data-smrt-component="Modal"
 >
   <div class="modal__container">
     {#if header}
-      <header class="modal__header modal__header--custom">
+      <header class="modal__header modal__header--custom" data-smrt-part="header">
         {@render header()}
       </header>
     {:else if title || showClose}
-      <header class="modal__header">
+      <header class="modal__header" data-smrt-part="header">
         {#if title}
-          <h2 class="modal__title">{title}</h2>
+          <h2 class="modal__title" data-smrt-part="title">{title}</h2>
         {:else}
           <span></span>
         {/if}
         {#if showClose}
           <button
             type="button"
-            class="modal__close"
+            class="modal__close" data-smrt-part="close"
             onclick={handleClose}
             aria-label={t(M['ui.modal.close'])}
           >
@@ -166,14 +166,14 @@ const placementClass = $derived(`modal--${placement}`);
       </header>
     {/if}
 
-    <div class="modal__body">
+    <div class="modal__body" data-smrt-part="body">
       {#if children}
         {@render children()}
       {/if}
     </div>
 
     {#if footer}
-      <footer class="modal__footer">
+      <footer class="modal__footer" data-smrt-part="footer">
         {@render footer()}
       </footer>
     {/if}
@@ -181,6 +181,8 @@ const placementClass = $derived(`modal--${placement}`);
 </dialog>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .modal {
     position: fixed;
     inset: 0;
@@ -199,8 +201,8 @@ const placementClass = $derived(`modal--${placement}`);
   }
 
   .modal::backdrop {
-    background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.5));
-    backdrop-filter: blur(2px);
+    background: var(--smrt-surface-overlay);
+    backdrop-filter: blur(var(--smrt-glass-blur));
   }
 
   .modal:not([open]) {
@@ -212,9 +214,11 @@ const placementClass = $derived(`modal--${placement}`);
     flex-direction: column;
     max-height: calc(100vh - var(--smrt-spacing-8, 2rem));
     max-width: calc(100vw - var(--smrt-spacing-8, 2rem));
-    background: var(--smrt-color-surface, #ffffff);
+    background: var(--smrt-glass-surface-strong);
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large, 0.75rem);
-    box-shadow: var(--smrt-elevation-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-4);
     overflow: hidden;
     animation: modal-enter var(--smrt-duration-medium2, 300ms) var(--smrt-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
   }
@@ -310,7 +314,7 @@ const placementClass = $derived(`modal--${placement}`);
     justify-content: space-between;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-bottom: var(--smrt-hairline);
     flex-shrink: 0;
   }
 
@@ -323,7 +327,7 @@ const placementClass = $derived(`modal--${placement}`);
     margin: 0;
     font-size: var(--smrt-typography-headline-small-size, 1.125rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    color: var(--smrt-color-on-surface);
     line-height: var(--smrt-typography-headline-small-line-height, 1.4);
   }
 
@@ -336,21 +340,21 @@ const placementClass = $derived(`modal--${placement}`);
     padding: 0;
     border: none;
     background: transparent;
-    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);
     cursor: pointer;
     transition: all var(--smrt-duration-short3, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
     flex-shrink: 0;
   }
 
   .modal__close:hover {
-    background: var(--smrt-color-surface-container-highest, #e0e2ec);
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+    color: var(--smrt-color-on-surface);
   }
 
   .modal__close:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   /* Body */
@@ -358,7 +362,7 @@ const placementClass = $derived(`modal--${placement}`);
     flex: 1;
     padding: var(--smrt-spacing-5, 1.25rem);
     overflow-y: auto;
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   /* Footer */
@@ -368,7 +372,7 @@ const placementClass = $derived(`modal--${placement}`);
     justify-content: flex-end;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-top: var(--smrt-hairline);
     flex-shrink: 0;
   }
 
@@ -394,4 +398,5 @@ const placementClass = $derived(`modal--${placement}`);
       max-height: 100%;
     }
   }
+}
 </style>

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;
@@ -205,8 +207,8 @@ function onkeydown(event: KeyboardEvent): void {
   }
 
   .phone-sheet__close: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);
   }
 
   .phone-sheet__body {
@@ -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; }
-  .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)); }
+@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; background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-glass-surface-strong)); backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3); }
+  .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);
@@ -596,8 +598,8 @@ useControlRegistration(() => {
   }
   .action:focus-visible,
   .picker:has(input: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: var(--smrt-focus-ring-offset);
   }
   .action:disabled,
   .picker.disabled {
@@ -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; }
+  input:focus-visible + .checkbox__box { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .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,11 +347,14 @@ 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); }
+  input:focus { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-extra-small); background: transparent; color: var(--smrt-color-on-surface); text-align: left; } .options button.active { background: var(--smrt-color-secondary-container); }
   .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>