@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/forms/DictationStatus.svelte

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

package/dist/components/forms/ErrorSummary.svelte

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

package/dist/components/forms/FieldLabel.svelte

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

package/dist/components/forms/Fieldset.svelte

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

package/dist/components/forms/FilePicker.svelte

@@ -111,16 +111,19 @@ useControlRegistration(() => {
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}
   ondragenter={(event) => { event.preventDefault(); dragging = true; }}
-  ondragover={(event) => event.preventDefault()} ondragleave={() => dragging = false} ondrop={handleDrop}>
+  ondragover={(event) => event.preventDefault()} ondragleave={() => dragging = false} ondrop={handleDrop} data-smrt-component="FilePicker">
   <input bind:this={inputEl} id={resolvedId} type="file" {name} {accept} {multiple} {disabled} {required} onchange={handleChange} {...rest} />
   <span class="label">{label}</span><span class="description">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected` : description}</span>
 </label>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .file-picker { display: inline-flex; flex-direction: column; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   .file-picker.dropzone { width: 100%; min-height: 8rem; align-items: center; justify-content: center; border-style: dashed; text-align: center; }
   .file-picker.dragging { border-color: var(--smrt-color-primary); background: var(--smrt-color-primary-container); }
   .file-picker.disabled { opacity: .5; cursor: not-allowed; } input { position: absolute; width: 1px; height: 1px; opacity: 0; }
-  input:focus-visible ~ .label { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  input:focus-visible ~ .label { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .label { font: var(--smrt-typography-label-large-font); } .description { font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); }
   .file-picker[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/forms/Form.svelte

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

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,46 +218,52 @@ 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;
 		width: 100%;
 		padding: 0.5rem 0.75rem;
 		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		font-weight: var(--smrt-control-weight);
 		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: var(--smrt-radius-small, 0.375rem);
+		color: var(--smrt-color-on-surface);
+		background-color: var(--smrt-surface-control);
+		border: var(--smrt-hairline-strong);
+		border-radius: var(--smrt-control-radius);
 		transition:
 			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),
 			box-shadow var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out);
 	}
 
 	.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);
+	}
+
+	.input:focus-visible {
+		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+		outline-offset: var(--smrt-focus-ring-offset);
 	}
 
 	.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;
+		opacity: var(--smrt-state-disabled);
 	}
 
 	.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 +281,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); }
+  .input { min-height: max(var(--smrt-control-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; }
-  .input-group:focus-within { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; }
+  .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: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+}
 </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[aria-selected='true'] { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); } button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   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; }
@@ -41,9 +43,10 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
   .radio__mark::after { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--smrt-color-primary); transform: scale(0); transition: transform var(--smrt-duration-short2); }
   input:checked + .radio__mark { border-color: var(--smrt-color-primary); }
   input:checked + .radio__mark::after { transform: scale(1); }
-  input:focus-visible + .radio__mark { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  input:focus-visible + .radio__mark { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .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); }
@@ -200,6 +202,7 @@ useControlRegistration(() => {
   .range-slider__inputs { display: flex; gap: var(--smrt-spacing-3); }
   .range-slider__inputs label { display: grid; gap: var(--smrt-spacing-1); flex: 1; font: var(--smrt-typography-label-small-font); color: var(--smrt-color-on-surface-variant); }
   .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; }
+  input:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   :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;
@@ -194,8 +196,8 @@ onDestroy(cancel);
     color: var(--smrt-color-on-surface);
   }
   .search-input__clear: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);
   }
   /* Phones: full width. */
   @media (max-width: 48rem) {
@@ -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,15 +250,18 @@ 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; }
   label:last-child { border-right: 0; } label.selected { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
-  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; }
+  label:has(input:focus-visible) { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: calc(var(--smrt-focus-ring-width) * -1); } 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>