@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/forms/Select.svelte

@@ -148,12 +148,14 @@ export function getElement(): HTMLSelectElement | null {
 		data-smrt-form={controlInteraction?.formId}
 		data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
 		data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
-	{...rest}
+	{...rest} data-smrt-component="Select"
 >
 	{@render children()}
 </select>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 	.select {
 		box-sizing: border-box;
 		display: block;
@@ -161,14 +163,15 @@ export function getElement(): HTMLSelectElement | null {
 		padding: 0.5rem 2rem 0.5rem 0.75rem;
 		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
 		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
-		color: var(--smrt-color-on-surface, #1f2937);
-		background-color: var(--smrt-color-surface, #fff);
+		color: var(--smrt-color-on-surface);
+		background-color: var(--smrt-surface-control);
+		font-weight: var(--smrt-control-weight);
 		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
 		background-position: right 0.5rem center;
 		background-repeat: no-repeat;
 		background-size: 1.5em 1.5em;
-		border: 1px solid var(--smrt-color-outline, #6b7280);
-		border-radius: 0.375rem;
+		border: var(--smrt-hairline-strong);
+		border-radius: var(--smrt-control-radius);
 		appearance: none;
 		cursor: pointer;
 		transition:
@@ -177,20 +180,23 @@ export function getElement(): HTMLSelectElement | null {
 	}
 
 	.select:focus {
-		outline: none;
-		border-color: var(--smrt-color-primary, #005ac1);
-		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+		border-color: var(--smrt-color-primary);
+	}
+
+	.select:focus-visible {
+		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+		outline-offset: var(--smrt-focus-ring-offset);
 	}
 
 	.select[data-smrt-highlighted='true'] {
-		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline: 3px solid var(--smrt-color-tertiary);
 		outline-offset: 3px;
 	}
 
 	.select:disabled {
-		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		background-color: var(--smrt-color-surface-container-high);
 		cursor: not-allowed;
-		opacity: 0.7;
+		opacity: var(--smrt-state-disabled);
 	}
 
 	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
@@ -208,7 +214,8 @@ export function getElement(): HTMLSelectElement | null {
 		}
 	}
 
-  .select[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .select[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .select[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .select { min-height: var(--smrt-control-target-min, 0px); }
+  .select { min-height: max(var(--smrt-control-height), var(--smrt-control-target-min, 0px)); }
+}
 </style>

package/dist/components/forms/SignaturePad.svelte

@@ -313,7 +313,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="SignaturePad"
 >
   <canvas
     bind:this={canvasEl}
@@ -358,6 +358,8 @@ useControlRegistration(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .signature-pad {
     display: grid;
     gap: var(--smrt-spacing-3);
@@ -405,8 +407,8 @@ useControlRegistration(() => {
     flex: 1 1 auto;
     /* 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);
@@ -422,8 +424,8 @@ useControlRegistration(() => {
     color: var(--smrt-color-on-primary);
   }
   .action: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 {
     opacity: 0.5;
@@ -433,4 +435,5 @@ useControlRegistration(() => {
     outline: 3px solid var(--smrt-color-tertiary);
     outline-offset: 4px;
   }
+}
 </style>

package/dist/components/forms/Slider.svelte

@@ -139,7 +139,7 @@ useControlRegistration(() => {
 </script>
 <div class="slider {className}" 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="Slider">
   {#if label}<div class="slider__header"><label for={resolvedId}>{label}</label><output for={resolvedId}>{formatValue(value)}</output></div>{/if}
   <div class="slider__controls">
     <input bind:this={rangeEl} id={resolvedId} type="range" {name} {min} {max} {step} {disabled} value={value}
@@ -150,12 +150,15 @@ useControlRegistration(() => {
   </div>
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .slider { display: grid; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface); }
   .slider__header, .slider__controls { display: flex; align-items: center; gap: var(--smrt-spacing-3); }
   .slider__header { justify-content: space-between; font: var(--smrt-typography-label-large-font); }
   output { color: var(--smrt-color-primary); font-variant-numeric: tabular-nums; }
   input[type='range'] { flex: 1; min-width: 8rem; accent-color: var(--smrt-color-primary); cursor: pointer; }
   .slider__number { width: 5.5rem; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
-  input:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  input:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .slider[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
+}
 </style>

package/dist/components/forms/StagedControlReview.svelte

@@ -536,7 +536,7 @@ async function discardAll(event: MouseEvent): Promise<void> {
     bind:this={reviewElement}
     class="staged-review"
     data-staged-control-review
-    aria-label={text.region}
+    aria-label={text.region} data-smrt-component="StagedControlReview"
   >
     <header>
       <div>
@@ -623,31 +623,34 @@ async function discardAll(event: MouseEvent): Promise<void> {
 {/if}
 
 {#if summary && reviewActivated}
-  <p class="status visually-hidden" role="status" aria-live="polite" aria-atomic="true">{status}</p>
+  <p class="status visually-hidden" role="status" aria-live="polite" aria-atomic="true" data-smrt-component="StagedControlReview">{status}</p>
 {/if}
 
 <style>
-  .staged-review { margin-block-start: var(--smrt-spacing-5, 1.25rem); padding: var(--smrt-spacing-4, 1rem); color: var(--smrt-color-on-surface, #1f2937); background: var(--smrt-color-surface-container-low, #f8fafc); border: 1px solid var(--smrt-color-outline-variant, #cbd5e1); border-inline-start: 4px solid var(--smrt-color-tertiary, #7d5260); border-radius: var(--smrt-radius-medium, .5rem); }
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .staged-review { margin-block-start: var(--smrt-spacing-5, 1.25rem); padding: var(--smrt-spacing-4, 1rem); color: var(--smrt-color-on-surface); background: var(--smrt-color-surface-container-low); border: 1px solid var(--smrt-color-outline-variant); border-inline-start: 4px solid var(--smrt-color-tertiary); border-radius: var(--smrt-radius-medium, .5rem); }
   header, .proposal-heading, .batch-actions, .item-actions { display: flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); }
   header { justify-content: space-between; align-items: flex-start; gap: var(--smrt-spacing-4, 1rem); }
   h2, p { margin: 0; } h2 { font: var(--smrt-typography-title-medium-font, 600 1rem/1.4 system-ui); }
-  header p, .proposal-heading span, dt { color: var(--smrt-color-on-surface-variant, #475569); font-size: .875rem; }
+  header p, .proposal-heading span, dt { color: var(--smrt-color-on-surface-variant); font-size: .875rem; }
   .proposal-heading strong, .proposal-heading .subject { display: block; }
   ul { display: grid; gap: var(--smrt-spacing-3, .75rem); padding: 0; list-style: none; }
-  li { padding: var(--smrt-spacing-3, .75rem); background: var(--smrt-color-surface, #fff); border: 1px solid var(--smrt-color-outline-variant, #cbd5e1); border-radius: var(--smrt-radius-small, .375rem); }
-  li.stale, li.invalid { border-color: var(--smrt-color-error, #b3261e); }
+  li { padding: var(--smrt-spacing-3, .75rem); background: var(--smrt-color-surface); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small, .375rem); }
+  li.stale, li.invalid { border-color: var(--smrt-color-error); }
   .proposal-heading { justify-content: space-between; }
   dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-3, .75rem); }
   dt { font-weight: 600; } dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
-  input, textarea { width: 100%; box-sizing: border-box; padding: .4rem .5rem; color: inherit; background: var(--smrt-color-surface, #fff); border: 1px solid var(--smrt-color-outline, #64748b); border-radius: var(--smrt-radius-small, .375rem); }
+  input, textarea { width: 100%; box-sizing: border-box; padding: .4rem .5rem; color: inherit; background: var(--smrt-color-surface); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small, .375rem); }
   input[type="checkbox"] { width: auto; }
-  button { min-height: 2.25rem; padding: .4rem .75rem; color: var(--smrt-color-on-primary, #fff); background: var(--smrt-color-primary, #005ac1); border: 1px solid transparent; border-radius: var(--smrt-radius-small, .375rem); cursor: pointer; }
-  button.secondary { color: var(--smrt-color-primary, #005ac1); background: transparent; border-color: var(--smrt-color-outline, #64748b); }
-  button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--smrt-color-primary, #005ac1); outline-offset: 2px; }
+  button { min-height: 2.25rem; padding: .4rem .75rem; color: var(--smrt-color-on-primary); background: var(--smrt-color-primary); border: 1px solid transparent; border-radius: var(--smrt-radius-small, .375rem); cursor: pointer; }
+  button.secondary { color: var(--smrt-color-primary); background: transparent; border-color: var(--smrt-color-outline); }
+  button:focus-visible, input:focus-visible, textarea:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   button:disabled { cursor: not-allowed; opacity: .55; }
   .item-actions { margin-block-start: var(--smrt-spacing-3, .75rem); }
-  .problem { margin-block-start: var(--smrt-spacing-2, .5rem); color: var(--smrt-color-error, #b3261e); }
+  .problem { margin-block-start: var(--smrt-spacing-2, .5rem); color: var(--smrt-color-error); }
   .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; }
-  :global([data-smrt-staged='true']) { outline: 3px solid var(--smrt-color-tertiary, #7d5260); outline-offset: 3px; }
+  :global([data-smrt-staged='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 3px; }
   @media (max-width: 40rem) { header, .proposal-heading { align-items: stretch; flex-direction: column; } dl { grid-template-columns: 1fr; } }
+}
 </style>

package/dist/components/forms/Switch.svelte

@@ -118,7 +118,7 @@ useControlRegistration(() => {
 
 <label data-density={density} class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-hit-target 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="Switch">
   {#if label && labelPosition === 'left'}<span class="switch__label">{label}</span>{/if}
   <span class="switch__control">
     <input bind:this={inputEl} id={resolvedId} type="checkbox" role="switch" {name} {value} {disabled} {required} checked={checked}
@@ -130,27 +130,30 @@ useControlRegistration(() => {
 </label>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .switch { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
   .switch--disabled { opacity: .5; cursor: not-allowed; }
   /* Phones: the whole row (track and label) is at least a 44px touch target. */
   @media (max-width: 48rem) { .switch { min-block-size: 2.75rem; } }
   /* The 2.75rem-wide track gets a transparent 44px-tall ::before hit area (see Checkbox); the
      track and label sit above every hit area. --smrt-control-hit-size resizes it (0px = off). */
-  .switch__control { --_hit: max(var(--smrt-control-hit-size, 2.75rem), 1.5rem); position: relative; display: inline-flex; }
-  .switch__control::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline: calc((100% - var(--_hit)) / 2); block-size: var(--_hit); margin-block-start: calc(var(--_hit) / -2); }
+  .switch__control { --smrt-switch-hit: max(var(--smrt-control-hit-size, 2.75rem), 1.5rem); position: relative; display: inline-flex; }
+  .switch__control::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline: calc((100% - var(--smrt-switch-hit)) / 2); block-size: var(--smrt-switch-hit); margin-block-start: calc(var(--smrt-switch-hit) / -2); }
   .switch__label { position: relative; z-index: 1; }
   input { position: absolute; width: 1px; height: 1px; opacity: 0; }
   .switch__track { position: relative; z-index: 1; width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
   .switch__thumb { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--smrt-color-outline); transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2); }
   input:checked + .switch__track { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); }
   input:checked + .switch__track .switch__thumb { transform: translateX(1.25rem); background: var(--smrt-color-on-primary); }
-  input:focus-visible + .switch__track { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  input:focus-visible + .switch__track { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .switch--sm { font-size: .8rem; transform-origin: left center; }
   .switch--lg .switch__track { transform: scale(1.15); margin-inline: .2rem; }
   .switch[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-full); }
   @media (prefers-reduced-motion: reduce) { .switch__track, .switch__thumb { transition: none; } }
 
-  .switch[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .switch[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .switch[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .switch { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+}
 </style>

package/dist/components/forms/TagsInput.svelte

@@ -129,13 +129,15 @@ useControlRegistration(() => {
   };
 });
 </script>
-<div class="tags-field {className}"><label for={inputId}>{label}</label><div bind:this={rootEl} class="tags" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+<div class="tags-field {className}" data-smrt-component="TagsInput"><label for={inputId}>{label}</label><div bind:this={rootEl} class="tags" 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}>
   {#each values as tag, index}<span class="tag">{tag}<button type="button" disabled={disabled} aria-label={`Remove ${tag}`} onclick={() => remove(index)}>×</button><input type="hidden" name={name ? `${name}[]` : undefined} value={tag} /></span>{/each}
   <input bind:this={inputEl} id={inputId} {placeholder} {disabled} bind:value={draft} onkeydown={handleKeydown} onblur={() => commit(draft)} />
 </div></div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tags-field { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } label { font: var(--smrt-typography-label-large-font); }
   .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   .tag { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
@@ -145,7 +147,8 @@ useControlRegistration(() => {
     .tag { padding-inline-end: 0; }
     .tag button { min-inline-size: 2.75rem; min-block-size: 2.75rem; font-size: 1.25rem; }
   }
-  .tag button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; border-radius: var(--smrt-radius-full); }
+  .tag button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: calc(var(--smrt-focus-ring-width) * -1); border-radius: var(--smrt-radius-full); }
   .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
   :global(.tags[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/forms/Textarea.svelte

@@ -141,10 +141,12 @@ export function getElement(): HTMLTextAreaElement | null {
 		data-smrt-form={controlInteraction?.formId}
 		data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
 		data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
-	{...rest}
+	{...rest} data-smrt-component="Textarea"
 ></textarea>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 	.textarea {
 		box-sizing: border-box;
 		display: block;
@@ -152,10 +154,11 @@ export function getElement(): HTMLTextAreaElement | null {
 		padding: 0.5rem 0.75rem;
 		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
 		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
-		color: var(--smrt-color-on-surface, #1f2937);
-		background-color: var(--smrt-color-surface, #fff);
-		border: 1px solid var(--smrt-color-outline, #6b7280);
-		border-radius: 0.375rem;
+		color: var(--smrt-color-on-surface);
+		background-color: var(--smrt-surface-control);
+		font-weight: var(--smrt-control-weight);
+		border: var(--smrt-hairline-strong);
+		border-radius: var(--smrt-control-radius);
 		resize: vertical;
 		min-height: 80px;
 		transition:
@@ -164,24 +167,27 @@ export function getElement(): HTMLTextAreaElement | null {
 	}
 
 	.textarea:focus {
-		outline: none;
-		border-color: var(--smrt-color-primary, #005ac1);
-		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+		border-color: var(--smrt-color-primary);
+	}
+
+	.textarea:focus-visible {
+		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+		outline-offset: var(--smrt-focus-ring-offset);
 	}
 
 	.textarea[data-smrt-highlighted='true'] {
-		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline: 3px solid var(--smrt-color-tertiary);
 		outline-offset: 3px;
 	}
 
 	.textarea:disabled {
-		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		background-color: var(--smrt-color-surface-container-high);
 		cursor: not-allowed;
-		opacity: 0.7;
+		opacity: var(--smrt-state-disabled);
 	}
 
 	.textarea::placeholder {
-		color: var(--smrt-color-on-surface-variant, #9ca3af);
+		color: var(--smrt-color-on-surface-variant);
 	}
 
 	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
@@ -198,7 +204,8 @@ export function getElement(): HTMLTextAreaElement | null {
 		}
 	}
 
-  .textarea[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .textarea[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .textarea[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .textarea { min-height: max(80px, var(--smrt-control-target-min, 0px)); }
+}
 </style>

package/dist/components/forms/TimePicker.svelte

@@ -25,5 +25,10 @@ let {
 const instanceId = $props.id();
 const resolvedId = $derived(id ?? `smrt-time-${instanceId}`);
 </script>
-<label class="picker {className}" for={resolvedId}><span>{label}</span><Input id={resolvedId} {name} type="time" 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="TimePicker"><span>{label}</span><Input id={resolvedId} {name} type="time" 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/Toggle.svelte

@@ -60,7 +60,7 @@ const sizeClasses = {
 };
 </script>
 
-<label class="toggle {sizeClasses[size]}" class:toggle--disabled={disabled}>
+<label class="toggle {sizeClasses[size]}" class:toggle--disabled={disabled} data-smrt-component="Toggle">
   {#if label && labelPosition === 'left'}
     <span class="toggle__label toggle__label--left">{label}</span>
   {/if}
@@ -86,6 +86,8 @@ const sizeClasses = {
 </label>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .toggle {
     display: inline-flex;
     align-items: center;
@@ -101,7 +103,7 @@ const sizeClasses = {
 
   .toggle__label {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     line-height: 1.5;
   }
 
@@ -126,38 +128,38 @@ const sizeClasses = {
 
   .toggle__thumb {
     position: relative;
-    background: var(--smrt-color-surface-container-highest, #e5e7eb);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-highest);
+    border-radius: var(--smrt-radius-full);
     transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .toggle__thumb::after {
     content: '';
     position: absolute;
-    background: var(--smrt-color-surface, #ffffff);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-full);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 20%, transparent));
     transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   /* Checked state */
   .toggle__input:checked + .toggle__thumb {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
   }
 
   /* Focus state */
   .toggle__input:focus-visible + .toggle__thumb {
-    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);
   }
 
   /* Hover state */
   .toggle:not(.toggle--disabled):hover .toggle__thumb {
-    background: var(--smrt-color-surface-container-high, #d1d5db);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .toggle:not(.toggle--disabled):hover .toggle__input:checked + .toggle__thumb {
-    background: var(--smrt-color-primary, #2563eb);
+    background: var(--smrt-color-primary);
   }
 
   /* Size: Small */
@@ -221,4 +223,5 @@ const sizeClasses = {
       transition: none;
     }
   }
+}
 </style>

package/dist/components/forms/ToggleButton.svelte

@@ -90,11 +90,14 @@ useControlRegistration(() => {
   aria-pressed={pressed} aria-label={ariaLabel} 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}
-  onclick={handleClick} {...rest}>{@render children?.()}</button>
+  onclick={handleClick} {...rest} data-smrt-component="ToggleButton">{@render children?.()}</button>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .toggle-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   .toggle-button.pressed { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); border-color: var(--smrt-color-secondary); }
-  .toggle-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .toggle-button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .toggle-button:disabled { opacity: .5; cursor: not-allowed; }
   .toggle-button[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/layout/ActionGroup.svelte

@@ -25,11 +25,13 @@ const {
 }: Props = $props();
 </script>
 
-<div class="action-group gap-{gap} justify-{justify} {className}" {...rest}>
+<div class="action-group gap-{gap} justify-{justify} {className}" {...rest} data-smrt-component="ActionGroup">
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .action-group {
     display: flex;
     flex-wrap: wrap;
@@ -52,4 +54,5 @@ const {
   .justify-end {
     justify-content: flex-end;
   }
+}
 </style>

package/dist/components/layout/Container.svelte

@@ -14,11 +14,13 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
 const { maxWidth = 'lg', children, ...rest }: Props = $props();
 </script>
 
-<div class="container max-w-{maxWidth}" {...rest}>
+<div class="container max-w-{maxWidth}" {...rest} data-smrt-component="Container">
   {@render children?.()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .container {
     box-sizing: border-box;
     width: 100%;
@@ -53,4 +55,5 @@ const { maxWidth = 'lg', children, ...rest }: Props = $props();
       padding-right: var(--smrt-spacing-6);
     }
   }
+}
 </style>

package/dist/components/layout/EmptyState.svelte

@@ -61,7 +61,7 @@ const icons = {
 };
 </script>
 
-<div class="empty-state" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+<div class="empty-state" class:sm={size === 'sm'} class:lg={size === 'lg'} data-smrt-component="EmptyState">
   <div class="icon-container">
     {#if typeof icon === 'string'}
       {@html icons[icon] ?? icons.inbox}
@@ -90,6 +90,8 @@ const icons = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .empty-state {
     display: flex;
     flex-direction: column;
@@ -117,15 +119,15 @@ const icons = {
     background-color: var(--smrt-color-secondary-container);
     color: var(--smrt-color-on-secondary-container);
     border-radius: var(--smrt-radius-3xl, 32px); /* M3 extra large shape */
-    padding: var(--smrt-spacing-6, 24px);
+    padding: var(--smrt-spacing-6);
   }
 
   .sm .icon-container {
     width: 64px;
     height: 64px;
     margin-bottom: 1.5rem;
-    border-radius: var(--smrt-radius-xl, 16px);
-    padding: var(--smrt-spacing-4, 16px);
+    border-radius: var(--smrt-radius-xl);
+    padding: var(--smrt-spacing-4);
   }
 
   .lg .icon-container {
@@ -133,7 +135,7 @@ const icons = {
     height: 120px;
     margin-bottom: 2.5rem;
     border-radius: var(--smrt-radius-3xl, 32px);
-    padding: var(--smrt-spacing-8, 32px);
+    padding: var(--smrt-spacing-8);
   }
 
   .empty-title {
@@ -163,15 +165,15 @@ const icons = {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: 0 var(--smrt-spacing-6, 24px);
+    gap: var(--smrt-spacing-2);
+    padding: 0 var(--smrt-spacing-6);
     height: 40px;
     font: var(--smrt-typography-label-large-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
     color: var(--smrt-color-on-primary);
     background-color: var(--smrt-color-primary);
     border: none;
-    border-radius: var(--smrt-radius-2xl, 24px);
+    border-radius: var(--smrt-radius-2xl);
     text-decoration: none;
     cursor: pointer;
     transition: box-shadow 200ms, background-color 200ms;
@@ -184,4 +186,5 @@ const icons = {
     background-color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-2);
   }
+}
 </style>

package/dist/components/layout/Footer.svelte

@@ -16,7 +16,7 @@ const { children }: Props = $props();
 const currentYear = new Date().getFullYear();
 </script>
 
-<footer class="site-footer">
+<footer class="site-footer" data-smrt-component="Footer">
   <Container>
     <div class="footer-content">
       <p class="copyright">&copy; {currentYear} {t(M['ui.footer.all_rights_reserved'])}</p>
@@ -31,6 +31,8 @@ const currentYear = new Date().getFullYear();
 </footer>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .site-footer {
     background: var(--smrt-color-surface-container-low);
     border-top: 1px solid var(--smrt-color-outline-variant);
@@ -61,4 +63,5 @@ const currentYear = new Date().getFullYear();
   .footer-links :global(a:hover) {
     text-decoration: underline;
   }
+}
 </style>