@happyvertical/smrt-ui 0.55.17 → 0.55.18

package/README.md

@@ -1163,6 +1163,13 @@ app for `:global(` and for unlayered rules that target smrt components, then
 confirm each still renders as intended. Remove overrides that only existed to
 win a specificity fight.
 
+Also check for an unlayered universal reset (`*`, `html`/`body` with
+`margin`/`padding: 0`, or Tailwind preflight / normalize.css imported without a
+layer). It strips padding from every component. Put it in `@layer smrt.reset`, or
+import `@happyvertical/smrt-ui/themes/styles/base.css`. The recipes are in
+[agents/styling.md](agents/styling.md#host-resets-universal-reset-tailwind-preflight-normalize).
+`smrt doctor` flags these.
+
 ### Adding or changing a component stylesheet
 
 Component `<style>` blocks must be inside `@layer smrt.*`. The lint gate

package/dist/components/calendar/CalendarView.svelte

@@ -917,8 +917,8 @@ $effect(() => {
 
   button:focus-visible,
   a: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);
   }
 
   /* ---- Month grid ---- */

package/dist/components/chat/ReactionPicker.svelte

@@ -108,8 +108,8 @@ function nameFor(emoji: string): string {
     transform: scale(1.15);
   }
   .reactions__btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 1px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/components/data/CollectionList.svelte

@@ -119,7 +119,7 @@ function toggle(key: string | number) {
   input { width: 1.125rem; height: 1.125rem; accent-color: var(--smrt-color-primary); }
   .main { display: grid; min-width: 0; gap: var(--smrt-spacing-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
   button.main { width: 100%; cursor: pointer; }
-  button.main:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  button.main:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--smrt-typography-title-small-font); }
   .main span { color: var(--smrt-color-on-surface-variant); }
   .actions { position: relative; z-index: 1; display: flex; gap: var(--smrt-spacing-1); }

package/dist/components/data/CollectionToolbar.svelte

@@ -278,7 +278,7 @@ onDestroy(() => surfaceRegistration?.cleanup());
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2) 0; color: var(--smrt-color-on-surface); }
-  .toolbar--highlighted { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  .toolbar--highlighted { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .search { flex: 1 1 14rem; max-width: 24rem; }
   .filters, .actions, .bulk { display: flex; align-items: center; gap: var(--smrt-spacing-2); }
   .bulk { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-small); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }

package/dist/components/data/DataTable.svelte

@@ -1930,20 +1930,20 @@ $effect(() => {
   }
 
   .data-table-container--overflowing: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);
   }
 
   .data-table-container--highlighted {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 3px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   .data-table__overflow-cue {
     display: flex;
     justify-content: space-between;
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-small-size, 0.75rem);
@@ -1984,7 +1984,7 @@ $effect(() => {
     font-family: var(--smrt-font-family, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     color: var(--smrt-color-on-surface);
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-panel);
   }
 
   .data-table__caption {
@@ -1997,7 +1997,7 @@ $effect(() => {
 
   /* Header */
   .data-table__head {
-    background: var(--smrt-color-surface-container);
+    background: var(--smrt-surface-sunken);
   }
 
   .data-table-container--sticky .data-table__head {
@@ -2007,7 +2007,7 @@ $effect(() => {
   }
 
   .data-table__row--header {
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   .data-table__cell--header {
@@ -2072,8 +2072,8 @@ $effect(() => {
   }
 
   .data-table__resize-handle: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);
   }
 
   .data-table__sort-button:hover {
@@ -2092,11 +2092,11 @@ $effect(() => {
 
   /* Body */
   .data-table__body {
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-panel);
   }
 
   .data-table__row {
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
     transition: background-color var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
   }
 
@@ -2106,16 +2106,24 @@ $effect(() => {
   }
 
   .data-table--hoverable .data-table__row:hover:not(.data-table__row--loading):not(.data-table__row--empty):not(.data-table__row--selected) {
-    background: var(--smrt-color-surface-container-low);
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-on-surface) calc(var(--smrt-state-hover) * 100%),
+      var(--smrt-surface-panel)
+    );
   }
 
   .data-table__row--selected {
-    background: var(--smrt-color-primary-container);
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-primary) calc(var(--smrt-state-selected) * 100%),
+      var(--smrt-surface-panel)
+    );
   }
 
   .data-table--striped:not(.data-table--virtualized) .data-table__row:nth-child(even):not(.data-table__row--selected),
   .data-table__row--striped:not(.data-table__row--selected) {
-    background: var(--smrt-color-surface-container-lowest);
+    background: var(--smrt-surface-sunken);
   }
 
   .data-table__row--interactive {
@@ -2123,13 +2131,13 @@ $effect(() => {
   }
 
   .data-table__row--interactive: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);
   }
 
   .data-table-container--virtualized .data-table__row: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);
   }
 
   .data-table__cell {
@@ -2141,18 +2149,22 @@ $effect(() => {
   .data-table__cell--pinned-end {
     position: sticky;
     z-index: 1;
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-panel);
   }
 
   .data-table__cell--header.data-table__cell--pinned-start,
   .data-table__cell--header.data-table__cell--pinned-end {
     z-index: 3;
-    background: var(--smrt-color-surface-container);
+    background: var(--smrt-surface-sunken);
   }
 
   .data-table__row--selected .data-table__cell--pinned-start,
   .data-table__row--selected .data-table__cell--pinned-end {
-    background: var(--smrt-color-primary-container);
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-primary) calc(var(--smrt-state-selected) * 100%),
+      var(--smrt-surface-panel)
+    );
   }
 
   .data-table__cell--checkbox {
@@ -2161,12 +2173,12 @@ $effect(() => {
   }
 
   .data-table__cell--expand { width: 2.75rem; text-align: center; }
-  .data-table__expand-button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: transparent; color: var(--smrt-color-on-surface); cursor: pointer; }
-  .data-table__expand-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
-  .data-table__cell--expanded { padding: var(--smrt-spacing-4); background: var(--smrt-color-surface-container-low); }
-  .data-table__footer { border-top: 2px solid var(--smrt-color-outline-variant); font-weight: var(--smrt-typography-weight-medium); }
-  .data-table__row--structural { background: var(--smrt-color-surface-container-low); }
-  .data-table__row--footer { border-top: 2px solid var(--smrt-color-outline-variant); }
+  .data-table__expand-button { width: 1.75rem; height: 1.75rem; border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-full); background: transparent; color: var(--smrt-color-on-surface); cursor: pointer; }
+  .data-table__expand-button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .data-table__cell--expanded { padding: var(--smrt-spacing-4); background: var(--smrt-surface-sunken); }
+  .data-table__footer { border-top: var(--smrt-hairline-strong); font-weight: var(--smrt-typography-weight-medium); }
+  .data-table__row--structural { background: var(--smrt-surface-sunken); }
+  .data-table__row--footer { border-top: var(--smrt-hairline-strong); }
   .data-table__cell--structural-label { font-weight: var(--smrt-typography-weight-semibold, 600); }
 
   .data-table__checkbox {
@@ -2228,7 +2240,7 @@ $effect(() => {
 
   .data-table__async-status {
     padding: var(--smrt-spacing-3, 0.75rem);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
     font: var(--smrt-typography-body-small-font);
   }
 
@@ -2243,8 +2255,8 @@ $effect(() => {
   }
 
   .data-table__retry-button: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);
   }
 
   /* Size variants */
@@ -2316,7 +2328,7 @@ $effect(() => {
       display: grid;
       gap: var(--smrt-spacing-1, 0.35rem);
       padding: var(--smrt-spacing-3, 0.85rem) var(--smrt-spacing-4, 1rem);
-      border-bottom: 1px solid var(--smrt-color-outline-variant);
+      border-bottom: var(--smrt-hairline);
     }
     .data-table-container--phone-cards .data-table__cell {
       display: block;

package/dist/components/data/SortableHeader.svelte

@@ -158,8 +158,8 @@ const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
     text-decoration: underline;
   }
   .sortable-header__control:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, var(--smrt-color-primary, currentColor));
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
   .sortable-header__icon {
     opacity: 0.35;

package/dist/components/feedback/Alert.svelte

@@ -47,7 +47,8 @@ const role = $derived(
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .alert { --smrt-alert-color: var(--smrt-color-primary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: 1px solid color-mix(in srgb, var(--smrt-alert-color) 35%, var(--smrt-color-outline-variant)); border-radius: var(--smrt-radius-medium); background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-color-surface)); color: var(--smrt-color-on-surface); }
+  .alert { --smrt-alert-color: var(--smrt-color-primary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: var(--smrt-hairline); border-color: color-mix(in srgb, var(--smrt-alert-color) 35%, var(--smrt-hairline-color)); box-shadow: var(--smrt-inset-highlight); border-radius: var(--smrt-radius-medium); background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-surface-panel)); color: var(--smrt-color-on-surface); }
+  .alert--info { --smrt-alert-color: var(--smrt-color-info); }
   .alert--success { --smrt-alert-color: var(--smrt-color-success); }
   .alert--warning { --smrt-alert-color: var(--smrt-color-warning); }
   .alert--error { --smrt-alert-color: var(--smrt-color-error); }
@@ -57,7 +58,7 @@ const role = $derived(
   .message { color: var(--smrt-color-on-surface-variant); }
   .action { align-self: center; }
   .dismiss { width: 2rem; height: 2rem; margin: -.35rem; border: 0; border-radius: var(--smrt-radius-full); background: transparent; color: inherit; font-size: 1.25rem; cursor: pointer; }
-  .dismiss:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
-  .dismiss:focus-visible { outline: 2px solid var(--smrt-color-primary); }
+  .dismiss:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
+  .dismiss:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
 }
 </style>

package/dist/components/feedback/LoadingOverlay.svelte

@@ -273,8 +273,8 @@ function handleKeydown(e: KeyboardEvent) {
 	}
 
 	.dismiss-btn: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);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/components/feedback/Modal.svelte

@@ -201,8 +201,8 @@ const placementClass = $derived(`modal--${placement}`);
   }
 
   .modal::backdrop {
-    background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.5));
-    backdrop-filter: blur(2px);
+    background: var(--smrt-surface-overlay);
+    backdrop-filter: blur(var(--smrt-glass-blur));
   }
 
   .modal:not([open]) {
@@ -214,9 +214,11 @@ const placementClass = $derived(`modal--${placement}`);
     flex-direction: column;
     max-height: calc(100vh - var(--smrt-spacing-8, 2rem));
     max-width: calc(100vw - var(--smrt-spacing-8, 2rem));
-    background: var(--smrt-color-surface);
+    background: var(--smrt-glass-surface-strong);
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large, 0.75rem);
-    box-shadow: var(--smrt-elevation-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-4);
     overflow: hidden;
     animation: modal-enter var(--smrt-duration-medium2, 300ms) var(--smrt-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
   }
@@ -312,7 +314,7 @@ const placementClass = $derived(`modal--${placement}`);
     justify-content: space-between;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
     flex-shrink: 0;
   }
 
@@ -346,13 +348,13 @@ const placementClass = $derived(`modal--${placement}`);
   }
 
   .modal__close:hover {
-    background: var(--smrt-color-surface-container-highest);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
     color: var(--smrt-color-on-surface);
   }
 
   .modal__close:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   /* Body */
@@ -370,7 +372,7 @@ const placementClass = $derived(`modal--${placement}`);
     justify-content: flex-end;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
     flex-shrink: 0;
   }
 

package/dist/components/feedback/PhoneSheet.svelte

@@ -207,8 +207,8 @@ function onkeydown(event: KeyboardEvent): void {
   }
 
   .phone-sheet__close:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .phone-sheet__body {

package/dist/components/feedback/ToastViewport.svelte

@@ -189,7 +189,7 @@ async function runAction(toast: Toast) {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(var(--smrt-toast-viewport-region-width, 100vw) - 2 * var(--smrt-toast-viewport-inset))); gap: var(--smrt-spacing-2); pointer-events: none; }
-  .viewport :global(.alert) { pointer-events: auto; box-shadow: var(--smrt-elevation-3); }
+  .viewport :global(.alert) { pointer-events: auto; background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-glass-surface-strong)); backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3); }
   .viewport--top-start { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-inset)); }
   .viewport--top-end { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); right: calc(var(--smrt-toast-viewport-right, 0px) + var(--smrt-toast-viewport-inset)); }
   .viewport--bottom-start { bottom: calc(var(--smrt-toast-viewport-bottom, 0px) + var(--smrt-toast-viewport-inset)); left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-inset)); }

package/dist/components/forms/CameraCapture.svelte

@@ -598,8 +598,8 @@ useControlRegistration(() => {
   }
   .action:focus-visible,
   .picker:has(input:focus-visible) {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
   .action:disabled,
   .picker.disabled {

package/dist/components/forms/Checkbox.svelte

@@ -171,7 +171,7 @@ useControlRegistration(() => {
   .checkbox__box { position: relative; z-index: 1; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
   .checkbox__label { position: relative; z-index: 1; }
   input:checked + .checkbox__box, input:indeterminate + .checkbox__box { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); color: var(--smrt-color-on-primary); }
-  input:focus-visible + .checkbox__box { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  input:focus-visible + .checkbox__box { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .checkbox__check { font-size: .8rem; font-weight: 800; line-height: 1; }
   .checkbox__dash { width: .6rem; height: 2px; background: currentColor; }
   .checkbox:not(:only-child)::before { inline-size: var(--smrt-checkbox-box); margin-inline-start: calc(var(--smrt-checkbox-box) / -2); }

package/dist/components/forms/Combobox.svelte

@@ -351,7 +351,7 @@ useControlRegistration(() => {
 @layer smrt.theme {
   .combobox { position: relative; display: grid; gap: 0; color: var(--smrt-color-on-surface); }
   input { box-sizing: border-box; width: 100%; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; }
-  input:focus { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
+  input:focus { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-extra-small); background: transparent; color: var(--smrt-color-on-surface); text-align: left; } .options button.active { background: var(--smrt-color-secondary-container); }
   .options.empty { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); color: var(--smrt-color-on-surface-variant); }
   .sr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

package/dist/components/forms/FilePicker.svelte

@@ -122,7 +122,7 @@ useControlRegistration(() => {
   .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; }
 }

package/dist/components/forms/Input.svelte

@@ -230,20 +230,24 @@ export function getElement(): HTMLInputElement | null {
 		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);
-		background-color: var(--smrt-color-surface);
-		border: 1px solid var(--smrt-color-outline);
-		border-radius: var(--smrt-radius-small, 0.375rem);
+		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);
-		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
+	}
+
+	.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'] {
@@ -255,7 +259,7 @@ export function getElement(): HTMLInputElement | null {
 	.input:disabled {
 		background-color: var(--smrt-color-surface-container-high);
 		cursor: not-allowed;
-		opacity: 0.7;
+		opacity: var(--smrt-state-disabled);
 	}
 
 	.input::placeholder {
@@ -279,6 +283,6 @@ export function getElement(): HTMLInputElement | null {
 
   .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

@@ -19,6 +19,6 @@ let { prefix, suffix, children, class: className = '' }: Props = $props();
   .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; } .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; }
+  .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

@@ -167,7 +167,7 @@ useControlRegistration(() => {
 @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/Radio.svelte

@@ -43,7 +43,7 @@ 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. */

package/dist/components/forms/RangeSlider.svelte

@@ -202,7 +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/SearchInput.svelte

@@ -196,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) {

package/dist/components/forms/SegmentedControl.svelte

@@ -256,7 +256,7 @@ useControlRegistration(() => {
   .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); }

package/dist/components/forms/Select.svelte

@@ -164,13 +164,14 @@ export function getElement(): HTMLSelectElement | null {
 		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);
-		background-color: var(--smrt-color-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);
-		border-radius: 0.375rem;
+		border: var(--smrt-hairline-strong);
+		border-radius: var(--smrt-control-radius);
 		appearance: none;
 		cursor: pointer;
 		transition:
@@ -179,9 +180,12 @@ export function getElement(): HTMLSelectElement | null {
 	}
 
 	.select:focus {
-		outline: none;
 		border-color: var(--smrt-color-primary);
-		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
+	}
+
+	.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'] {
@@ -192,7 +196,7 @@ export function getElement(): HTMLSelectElement | null {
 	.select:disabled {
 		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
@@ -212,6 +216,6 @@ export function getElement(): HTMLSelectElement | null {
 
   .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

@@ -424,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;

package/dist/components/forms/Slider.svelte

@@ -158,7 +158,7 @@ useControlRegistration(() => {
   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

@@ -645,7 +645,7 @@ async function discardAll(event: MouseEvent): Promise<void> {
   input[type="checkbox"] { width: auto; }
   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: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); }