@happyvertical/smrt-ui 0.55.16 → 0.55.17

package/dist/components/forms/FormActionBar.svelte

@@ -33,12 +33,14 @@ const { t } = useI18n();
   role="group"
   aria-label={label ?? t(M['ui.form_action_bar.label'])}
   data-form-action-bar
-  data-testid="form-action-bar"
+  data-testid="form-action-bar" data-smrt-component="FormActionBar"
 >
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .form-action-bar {
     display: flex;
     flex-wrap: wrap;
@@ -81,4 +83,5 @@ const { t } = useI18n();
       display: none;
     }
   }
+}
 </style>

package/dist/components/forms/FormGroup.svelte

@@ -62,7 +62,7 @@ setFormGroupContext(
 );
 </script>
 
-<div class="form-group">
+<div class="form-group" data-smrt-component="FormGroup">
 	<FieldLabel for={fieldId} {label} {required} />
 	{@render children()}
 	{#if hintId}
@@ -74,6 +74,8 @@ setFormGroupContext(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 	.form-group {
 		margin-bottom: 1rem;
 	}
@@ -83,12 +85,13 @@ setFormGroupContext(
 	.form-hint {
 		margin: 0.25rem 0 0;
 		font-size: var(--smrt-typography-body-small-size, 0.75rem);
-		color: var(--smrt-color-on-surface-variant, #6b7280);
+		color: var(--smrt-color-on-surface-variant);
 	}
 
 	.form-error {
 		margin: 0.25rem 0 0;
 		font-size: var(--smrt-typography-body-small-size, 0.75rem);
-		color: var(--smrt-color-error, #ba1a1a);
+		color: var(--smrt-color-error);
 	}
+}
 </style>

package/dist/components/forms/Input.svelte

@@ -218,10 +218,12 @@ export function getElement(): HTMLInputElement | 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="Input"
 />
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 	.input {
 		box-sizing: border-box;
 		display: block;
@@ -229,9 +231,9 @@ export function getElement(): HTMLInputElement | 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);
+		color: var(--smrt-color-on-surface);
+		background-color: var(--smrt-color-surface);
+		border: 1px solid var(--smrt-color-outline);
 		border-radius: var(--smrt-radius-small, 0.375rem);
 		transition:
 			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),
@@ -240,24 +242,24 @@ export function getElement(): HTMLInputElement | null {
 
 	.input: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);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
 	}
 
 	.input[data-smrt-highlighted='true'] {
-		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline: 3px solid var(--smrt-color-tertiary);
 		outline-offset: 3px;
-		box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-tertiary, #7d5260) 20%, transparent);
+		box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-tertiary) 20%, transparent);
 	}
 
 	.input:disabled {
-		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		background-color: var(--smrt-color-surface-container-high);
 		cursor: not-allowed;
 		opacity: 0.7;
 	}
 
 	.input::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
@@ -275,7 +277,8 @@ export function getElement(): HTMLInputElement | null {
 		}
 	}
 
-  .input[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .input[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .input[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .input { min-height: var(--smrt-control-target-min, 0px); }
+}
 </style>

package/dist/components/forms/InputGroup.svelte

@@ -12,10 +12,13 @@ export interface Props {
 }
 let { prefix, suffix, children, class: className = '' }: Props = $props();
 </script>
-<div class="input-group {className}">{#if prefix}<span class="adornment">{@render prefix()}</span>{/if}<div class="control">{@render children()}</div>{#if suffix}<span class="adornment">{@render suffix()}</span>{/if}</div>
+<div class="input-group {className}" data-smrt-component="InputGroup">{#if prefix}<span class="adornment">{@render prefix()}</span>{/if}<div class="control">{@render children()}</div>{#if suffix}<span class="adornment">{@render suffix()}</span>{/if}</div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .input-group { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); overflow: hidden; }
   .adornment { display: inline-flex; align-items: center; padding: 0 var(--smrt-spacing-3); background: var(--smrt-color-surface-container-low); color: var(--smrt-color-on-surface-variant); }
-  .control { flex: 1; min-width: 0; } .control :global(input), .control :global(select), .control :global(textarea) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
+  .control { flex: 1; min-width: 0; } .input-group .control :global(input), .input-group .control :global(select), .input-group .control :global(textarea) { border: 0; border-radius: 0; box-shadow: none; }
   .input-group:focus-within { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; }
+}
 </style>

package/dist/components/forms/Listbox.svelte

@@ -156,15 +156,18 @@ useControlRegistration(() => {
 </script>
 <div bind:this={rootEl} class="listbox {className}" role="listbox" aria-label={label} aria-disabled={disabled} 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="Listbox">
   {#if name}<input type="hidden" {name} value={value ?? ''} disabled={disabled || matchingOption(options, value)?.disabled} />{/if}
   {#each options as option, index (option.value)}<button bind:this={optionEls[index]} type="button" role="option" aria-selected={value === option.value}
     disabled={disabled || option.disabled} tabindex={value === option.value || (value === undefined && index === 0) ? 0 : -1}
     onkeydown={(event) => move(event, index)} onclick={() => select(option.value, true)}>{option.label}</button>{/each}
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .listbox { display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   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; cursor: pointer; }
   button[aria-selected='true'] { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); } button:focus-visible { outline: 2px solid var(--smrt-color-primary); }
   button:disabled { opacity: .5; cursor: not-allowed; } :global(.listbox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/forms/MultiSelect.svelte

@@ -216,15 +216,18 @@ useControlRegistration(() => {
 </script>
 <div bind:this={rootEl} class="multi-select {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="MultiSelect">
   {#if name}{#each canonicalValues as value}<input type="hidden" {name} value={String(value)} disabled={disabled || options.some((option) => Object.is(option.value, value) && option.disabled)} />{/each}{/if}
   <span class="label" id={`${listId}-label`}>{label}</span><button bind:this={triggerEl} id={triggerId} type="button" class="trigger" {disabled} aria-haspopup="listbox" aria-expanded={open} aria-controls={listId} aria-labelledby={`${listId}-label ${triggerId}`} onclick={() => open ? closeOptions() : openOptions()} onkeydown={handleTriggerKeydown}>{selectedLabels.length ? selectedLabels.join(', ') : placeholder}</button>
   {#if open}<div id={listId} class="options" role="listbox" tabindex="-1" aria-multiselectable="true" aria-labelledby={`${listId}-label`} onkeydown={handleOptionsKeydown}>{#each options as option, index (option.value)}<button bind:this={optionEls[index]} type="button" role="option" tabindex="-1" aria-selected={canonicalValues.some((value) => Object.is(value, option.value))} disabled={option.disabled} onclick={() => toggle(option)}><span aria-hidden="true">{canonicalValues.some((value) => Object.is(value, option.value)) ? '✓' : ''}</span>{option.label}</button>{/each}</div>{/if}
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .multi-select { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } .label { font: var(--smrt-typography-label-large-font); }
   .trigger { width: 100%; min-height: 2.5rem; 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; text-align: left; }
   .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); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2); border: 0; background: transparent; color: inherit; text-align: left; } .options button[aria-selected='true'] { background: var(--smrt-color-secondary-container); }
   :global(.multi-select[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/forms/Radio.svelte

@@ -20,20 +20,22 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
   onchange?.(event);
 }
 </script>
-<label class="radio" class:disabled={disabled || group.disabled} data-smrt-hit-target>
+<label class="radio" class:disabled={disabled || group.disabled} data-smrt-hit-target data-smrt-component="Radio">
   <input id={resolvedId} type="radio" name={group.name} {value} disabled={disabled || group.disabled} required={group.required}
     checked={group.value === value} onchange={handleChange} {...rest} />
   <span class="radio__mark" aria-hidden="true"></span><span class="radio__label">{label}</span>
 </label>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* The visible mark stays 18px; a transparent 44x44 ::before hit area (see Checkbox) makes the
      touch target. Mark and label text sit above every hit area, so neighbours' hit areas never
      steal their clicks. Beside other content (a group's other options, text, a link) it keeps to
      the mark's column and grows vertically only. --smrt-control-hit-size resizes it (0px turns it
      off). */
-  .radio { --_box: 1.15rem; --_hit: max(var(--smrt-control-hit-size, 2.75rem), var(--_box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2); cursor: pointer; }
-  .radio::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); }
-  .radio:not(:only-child)::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
+  .radio { --smrt-radio-box: 1.15rem; --smrt-radio-hit: max(var(--smrt-control-hit-size, 2.75rem), var(--smrt-radio-box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2); cursor: pointer; }
+  .radio::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: calc(var(--smrt-radio-box) / 2); inline-size: var(--smrt-radio-hit); block-size: var(--smrt-radio-hit); margin-block-start: calc(var(--smrt-radio-hit) / -2); margin-inline-start: calc(var(--smrt-radio-hit) / -2); }
+  .radio:not(:only-child)::before { inline-size: var(--smrt-radio-box); margin-inline-start: calc(var(--smrt-radio-box) / -2); }
   .radio.disabled { opacity: .5; cursor: not-allowed; }
   input { position: absolute; opacity: 0; width: 1px; height: 1px; }
   .radio__mark { position: relative; z-index: 1; width: 1.15rem; height: 1.15rem; border: 2px solid var(--smrt-color-outline); border-radius: 50%; display: grid; place-items: center; }
@@ -45,5 +47,6 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
   .radio { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
 
   /* Table cells: grow vertically only, never into a neighbouring cell. */
-  :global(:is(td, th)) .radio::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
+  :global(:is(td, th)) .radio::before { inline-size: var(--smrt-radio-box); margin-inline-start: calc(var(--smrt-radio-box) / -2); }
+}
 </style>

package/dist/components/forms/RadioGroup.svelte

@@ -139,13 +139,15 @@ useControlRegistration(() => {
 <fieldset bind:this={fieldsetEl} data-density={density} class="radio-group {className}" {disabled}
   aria-describedby={description ? `${name}-description` : undefined} 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="RadioGroup">
   {#if label}<legend>{label}{#if required}<span aria-hidden="true"> *</span>{/if}</legend>{/if}
   {#if description}<p id={`${name}-description`} class="description">{description}</p>{/if}
   <div class="options">{@render children()}</div>
   {#if error}<p class="error" role="alert">{error}</p>{/if}
 </fieldset>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .radio-group { margin: 0; padding: 0; border: 0; color: var(--smrt-color-on-surface); }
   legend { margin-bottom: var(--smrt-spacing-2); font: var(--smrt-typography-label-large-font); }
   .description, .error { margin: var(--smrt-spacing-1) 0 var(--smrt-spacing-2); font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); }
@@ -153,6 +155,7 @@ useControlRegistration(() => {
   .options { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-3); }
   :global(.radio-group[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
 
-  .radio-group[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .radio-group[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .radio-group[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+}
 </style>

package/dist/components/forms/RangeSlider.svelte

@@ -175,7 +175,7 @@ useControlRegistration(() => {
 </script>
 <div bind:this={rootEl} class="range-slider {className}" class:disabled 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} role="group" aria-label={label ?? formGroup?.().label ?? 'Range'}>
+  data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id} role="group" aria-label={label ?? formGroup?.().label ?? 'Range'} data-smrt-component="RangeSlider">
   {#if label}<div class="range-slider__header"><span>{label}</span><output>{value.min}{unit ?? ''} – {value.max}{unit ?? ''}</output></div>{/if}
   <div class="range-slider__track">
     <input bind:this={minEl} id={minId} type="range" name={name ? `${name}[min]` : undefined} {min} max={value.max} {step} {disabled} value={value.min}
@@ -189,6 +189,8 @@ useControlRegistration(() => {
   </div>
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .range-slider { display: grid; gap: var(--smrt-spacing-3); color: var(--smrt-color-on-surface); }
   .range-slider.disabled { opacity: .5; }
   .range-slider__header { display: flex; justify-content: space-between; font: var(--smrt-typography-label-large-font); }
@@ -202,4 +204,5 @@ useControlRegistration(() => {
   .range-slider__inputs input { width: 100%; 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; }
   :global(.range-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/RelationInput.svelte

@@ -288,7 +288,7 @@ $effect(() => {
 $effect(() => () => clearTimeout(timer));
 </script>
 
-<div class="relation-input" bind:this={rootEl}>
+<div class="relation-input" bind:this={rootEl} data-smrt-component="RelationInput">
   <div class="field">
     <Combobox
       {name}
@@ -343,9 +343,11 @@ $effect(() => () => clearTimeout(timer));
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .relation-input {
     display: grid;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     min-width: 0;
   }
   .field {
@@ -353,8 +355,8 @@ $effect(() => () => clearTimeout(timer));
   }
   .field :global(.clear) {
     position: absolute;
-    right: var(--smrt-spacing-1, 4px);
-    bottom: var(--smrt-spacing-1, 4px);
+    right: var(--smrt-spacing-1);
+    bottom: var(--smrt-spacing-1);
   }
   .option-label,
   .option-detail {
@@ -375,4 +377,5 @@ $effect(() => () => clearTimeout(timer));
   .error {
     color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/components/forms/SearchInput.svelte

@@ -112,7 +112,7 @@ function clear() {
 onDestroy(cancel);
 </script>
 
-<div class="search-input {className}" role="search">
+<div class="search-input {className}" role="search" data-smrt-component="SearchInput">
   <label class="search-input__label" for={inputId}>{label}</label>
   <span class="search-input__icon" aria-hidden="true">
     <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
@@ -137,6 +137,8 @@ onDestroy(cancel);
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .search-input {
     position: relative;
     display: flex;
@@ -185,7 +187,7 @@ onDestroy(cancel);
     block-size: 2.75rem;
     padding: 0;
     border: none;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
@@ -204,4 +206,5 @@ onDestroy(cancel);
       max-inline-size: none;
     }
   }
+}
 </style>

package/dist/components/forms/SegmentedControl.svelte

@@ -236,7 +236,7 @@ useControlRegistration(() => {
 </script>
 <div bind:this={rootEl} data-density={density} class="segmented {className}" class:full-width={fullWidth} role="radiogroup" tabindex="-1" aria-label={label} aria-required={required} onkeydown={handleKeydown} 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="SegmentedControl">
   {#each options as option, index (option.value)}
     <label class:selected={selectedOption === option} class:disabled={disabled || option.disabled}>
       <input type="radio" {name} value={option.value} disabled={disabled || option.disabled}
@@ -250,6 +250,8 @@ useControlRegistration(() => {
   {/each}
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .segmented { display: inline-flex; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); overflow: hidden; }
   .segmented.full-width { display: flex; width: 100%; }
   label { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 0; border-right: 1px solid var(--smrt-color-outline); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
@@ -257,8 +259,9 @@ useControlRegistration(() => {
   label:has(input:focus-visible) { outline: 2px solid var(--smrt-color-primary); outline-offset: -3px; } label.disabled, label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
   :global(.segmented[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
 
-  .segmented[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .segmented[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .segmented[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   label { min-height: max(2.5rem, var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
   input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
+}
 </style>

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,13 +163,13 @@ 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-color-surface);
 		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: 1px solid var(--smrt-color-outline);
 		border-radius: 0.375rem;
 		appearance: none;
 		cursor: pointer;
@@ -178,17 +180,17 @@ 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);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
 	}
 
 	.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;
 	}
@@ -208,7 +210,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); }
+}
 </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);
@@ -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,6 +150,8 @@ 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); }
@@ -158,4 +160,5 @@ useControlRegistration(() => {
   .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; }
   .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: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   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,14 +130,16 @@ 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); }
@@ -150,7 +152,8 @@ useControlRegistration(() => {
   .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); }
@@ -148,4 +150,5 @@ useControlRegistration(() => {
   .tag button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; 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>