@happyvertical/smrt-ui 0.55.17 → 0.55.18

package/dist/components/forms/Switch.svelte

@@ -146,7 +146,7 @@ useControlRegistration(() => {
   .switch__thumb { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--smrt-color-outline); transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2); }
   input:checked + .switch__track { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); }
   input:checked + .switch__track .switch__thumb { transform: translateX(1.25rem); background: var(--smrt-color-on-primary); }
-  input:focus-visible + .switch__track { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  input:focus-visible + .switch__track { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .switch--sm { font-size: .8rem; transform-origin: left center; }
   .switch--lg .switch__track { transform: scale(1.15); margin-inline: .2rem; }
   .switch[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-full); }

package/dist/components/forms/TagsInput.svelte

@@ -147,7 +147,7 @@ useControlRegistration(() => {
     .tag { padding-inline-end: 0; }
     .tag button { min-inline-size: 2.75rem; min-block-size: 2.75rem; font-size: 1.25rem; }
   }
-  .tag button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; border-radius: var(--smrt-radius-full); }
+  .tag button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: calc(var(--smrt-focus-ring-width) * -1); border-radius: var(--smrt-radius-full); }
   .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
   :global(.tags[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
 }

package/dist/components/forms/Textarea.svelte

@@ -155,9 +155,10 @@ export function getElement(): HTMLTextAreaElement | 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);
-		border: 1px solid var(--smrt-color-outline);
-		border-radius: 0.375rem;
+		background-color: var(--smrt-surface-control);
+		font-weight: var(--smrt-control-weight);
+		border: var(--smrt-hairline-strong);
+		border-radius: var(--smrt-control-radius);
 		resize: vertical;
 		min-height: 80px;
 		transition:
@@ -166,9 +167,12 @@ export function getElement(): HTMLTextAreaElement | null {
 	}
 
 	.textarea: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);
+	}
+
+	.textarea:focus-visible {
+		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+		outline-offset: var(--smrt-focus-ring-offset);
 	}
 
 	.textarea[data-smrt-highlighted='true'] {
@@ -179,7 +183,7 @@ export function getElement(): HTMLTextAreaElement | null {
 	.textarea:disabled {
 		background-color: var(--smrt-color-surface-container-high);
 		cursor: not-allowed;
-		opacity: 0.7;
+		opacity: var(--smrt-state-disabled);
 	}
 
 	.textarea::placeholder {

package/dist/components/forms/Toggle.svelte

@@ -149,8 +149,8 @@ const sizeClasses = {
 
   /* Focus state */
   .toggle__input:focus-visible + .toggle__thumb {
-    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);
   }
 
   /* Hover state */

package/dist/components/forms/ToggleButton.svelte

@@ -96,7 +96,7 @@ useControlRegistration(() => {
 @layer smrt.theme {
   .toggle-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   .toggle-button.pressed { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); border-color: var(--smrt-color-secondary); }
-  .toggle-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .toggle-button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .toggle-button:disabled { opacity: .5; cursor: not-allowed; }
   .toggle-button[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
 }

package/dist/components/layout/PageHeader.svelte

@@ -187,8 +187,8 @@ $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
   }
 
   .page-crumbs 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);
     border-radius: var(--smrt-radius-sm);
   }
 

package/dist/components/nav/Tabs.svelte

@@ -280,7 +280,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 
   .tabs-nav {
     display: flex;
-    border-bottom: 1px solid var(--smrt-color-surface-variant);
+    border-bottom: var(--smrt-hairline);
     width: 100%;
   }
 
@@ -293,10 +293,11 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     padding: 0 var(--smrt-spacing-4);
     height: 48px;
     font: var(--smrt-typography-title-small-font);
-    font-weight: var(--smrt-typography-weight-medium, 500);
+    font-weight: var(--smrt-control-weight);
     color: var(--smrt-color-on-surface-variant);
     background: transparent;
     border: none;
+    border-radius: var(--smrt-control-radius) var(--smrt-control-radius) 0 0;
     cursor: pointer;
     transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
     position: relative;
@@ -314,14 +315,35 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     font: var(--smrt-typography-title-medium-font);
   }
 
+  /* State layer: currentColor mixed at the theme's state opacity. */
+  .tab-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: transparent;
+    pointer-events: none;
+  }
+
   .tab-button:hover:not(:disabled) {
-    background-color: var(--smrt-color-surface-container-high);
     color: var(--smrt-color-on-surface);
   }
 
+  .tab-button:hover:not(:disabled)::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .tab-button:active:not(:disabled)::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
+
+  .tab-button.active::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-selected) * 100%), transparent);
+  }
+
   .tab-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: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .tab-button.active {
@@ -329,7 +351,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   }
 
   .tab-button:disabled {
-    opacity: 0.38;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 
@@ -375,7 +397,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     min-width: 1.25rem;
     padding: 0.05rem 0.4rem;
     border-radius: 999px;
-    background: var(--smrt-color-surface-container-high);
+    background: var(--smrt-surface-sunken);
     color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-bold, 700);
@@ -388,7 +410,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     align-items: stretch;
     gap: var(--smrt-spacing-1);
     width: 100%;
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   .tabs-links-row {
@@ -405,20 +427,22 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     flex: 0 0 auto;
     align-items: center;
     gap: var(--smrt-spacing-2);
-    min-height: 44px;
+    min-height: var(--smrt-control-height);
     padding: 0 var(--smrt-spacing-4);
     margin-bottom: -1px;
+    border-radius: var(--smrt-control-radius) var(--smrt-control-radius) 0 0;
     border-bottom: 2px solid transparent;
     color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-title-small-font);
-    font-weight: var(--smrt-typography-weight-semibold, 600);
+    font-weight: var(--smrt-control-weight);
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
   }
 
   .tabs-links.sm .tab-link {
-    min-height: 40px;
+    min-height: var(--smrt-control-height-small);
+    border-radius: var(--smrt-control-radius-small) var(--smrt-control-radius-small) 0 0;
     font: var(--smrt-typography-label-large-font);
   }
 
@@ -429,6 +453,11 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 
   .tab-link:hover {
     color: var(--smrt-color-on-surface);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .tab-link:active {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
 
   .tab-link.active {
@@ -437,13 +466,13 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   }
 
   .tab-link[aria-disabled='true'] {
-    opacity: 0.38;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 
   .tab-link: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);
   }
 
   .tab-dot {
@@ -473,10 +502,11 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     display: grid;
     min-width: 12rem;
     padding: var(--smrt-spacing-1);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-small, 0.5rem);
-    background: var(--smrt-color-surface);
-    box-shadow: var(--smrt-elevation-2);
+    background: 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);
   }
 
   .tabs-more-menu .tab-link {

package/dist/components/permissions/PermissionPicker.svelte

@@ -201,7 +201,7 @@ function matches(permission: PermissionPickerItem, category: string): boolean {
   .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--smrt-spacing-4); align-items: start; }
   .group { min-inline-size: 0; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
   summary { display: flex; min-block-size: 2.75rem; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-medium-font); cursor: pointer; }
-  summary:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  summary:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .selected-count { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-medium-font); }
   .choices { display: grid; gap: var(--smrt-spacing-4); padding: 0 var(--smrt-spacing-4) var(--smrt-spacing-4); border-block-start: 1px solid var(--smrt-color-outline-variant); padding-block-start: var(--smrt-spacing-4); }
   .choice { display: grid; min-inline-size: 0; gap: var(--smrt-spacing-1); }

package/dist/components/roles/RoleSelector.svelte

@@ -287,8 +287,8 @@ $effect(() => {
      (#2322). */
   .option:focus-visible {
     background: var(--smrt-color-surface-container-high);
-    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);
   }
 
   .option.selected {

package/dist/components/ui/AccordionItem.svelte

@@ -39,7 +39,7 @@ const open = $derived(context.isOpen(value));
   h3 { margin: 0; }
   button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-4); border: 0; background: transparent; color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-small-font); text-align: left; cursor: pointer; }
   button:hover:not(:disabled) { background: var(--smrt-color-surface-container-low); }
-  button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; }
+  button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: calc(var(--smrt-focus-ring-width) * -1); }
   button:disabled { opacity: .5; cursor: not-allowed; }
   .chevron { transition: transform var(--smrt-duration-short4) var(--smrt-easing-standard); }
   button[aria-expanded='true'] .chevron { transform: rotate(180deg); }

package/dist/components/ui/Badge.svelte

@@ -26,7 +26,8 @@ const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-weight: var(--smrt-typography-body-medium-weight);
+    font-weight: var(--smrt-control-weight);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full);
     white-space: nowrap;
   }

package/dist/components/ui/Button.svelte

@@ -166,16 +166,46 @@ function handleClick(event: MouseEvent) {
     align-items: center;
     justify-content: center;
     gap: var(--smrt-spacing-2);
-    font-weight: var(--smrt-typography-body-medium-weight);
-    border-radius: var(--smrt-radius-medium);
+    position: relative;
+    font-weight: var(--smrt-control-weight);
+    border-radius: var(--smrt-control-radius);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
     cursor: pointer;
     text-decoration: none;
     border: 1px solid transparent;
   }
 
+  /* One state layer for every variant: currentColor mixed at the theme's
+     state opacity. Per-variant tweaks use --smrt-button-state-* names. */
+  .button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: transparent;
+    pointer-events: none;
+    transition: background-color var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+
+  .button:hover:not(:disabled):not(.disabled)::after {
+    background: color-mix(
+      in srgb,
+      currentColor calc(var(--smrt-state-hover) * 100%),
+      transparent
+    );
+  }
+
+  .button:active:not(:disabled):not(.disabled)::after {
+    background: color-mix(
+      in srgb,
+      currentColor calc(var(--smrt-state-pressed) * 100%),
+      transparent
+    );
+  }
+
   /* Sizes */
   .sm {
+    border-radius: var(--smrt-control-radius-small);
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-medium-size);
   }
@@ -196,47 +226,25 @@ function handleClick(event: MouseEvent) {
     color: var(--smrt-color-on-primary);
   }
 
-  /* M3 hover state layer: 8% of the on-color blended over the base, so the
-     button visibly darkens on hover instead of repeating its base color. */
-  .primary:hover:not(:disabled):not(.disabled) {
-    background: color-mix(
-      in srgb,
-      var(--smrt-color-on-primary) 8%,
-      var(--smrt-color-primary)
-    );
-  }
 
   .secondary {
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-primary);
     border-color: var(--smrt-color-primary);
   }
 
-  .secondary:hover:not(:disabled):not(.disabled) {
-    background: var(--smrt-color-primary-container);
-  }
 
   .ghost {
     background: transparent;
     color: var(--smrt-color-primary);
   }
 
-  .ghost:hover:not(:disabled):not(.disabled) {
-    background: var(--smrt-color-primary-container);
-  }
 
   .danger {
     background: var(--smrt-color-error);
     color: var(--smrt-color-on-error);
   }
 
-  .danger:hover:not(:disabled):not(.disabled) {
-    background: color-mix(
-      in srgb,
-      var(--smrt-color-on-error) 8%,
-      var(--smrt-color-error)
-    );
-  }
 
   /* Full width */
   .full-width {
@@ -289,15 +297,15 @@ function handleClick(event: MouseEvent) {
   /* Disabled state */
   .button:disabled,
   .button.disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
   /* Focus state */
   .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);
   }
 
   /* Phones: every size is at least a 44px touch target. */
@@ -316,6 +324,7 @@ function handleClick(event: MouseEvent) {
 
   .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .button[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .button { min-height: max(var(--smrt-control-height), var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
+  .button.sm { min-height: max(var(--smrt-control-height-small), var(--smrt-control-target-min, 0px)); }
 }
 </style>

package/dist/components/ui/Card.svelte

@@ -63,29 +63,30 @@ const {
    * The `outlined` variant always draws its outline.
    */
   .card {
-    background: var(--smrt-card-background, var(--smrt-color-surface));
+    background: var(--smrt-card-background, var(--smrt-surface-panel));
     border-radius: var(--smrt-radius-medium);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
   }
 
   /* Variants */
   .default {
-    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
-    box-shadow: var(--smrt-card-shadow, none);
+    border: var(--smrt-card-border, var(--smrt-hairline));
+    box-shadow: var(--smrt-card-shadow, var(--smrt-inset-highlight));
   }
 
   .outlined {
-    border: 2px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
+    box-shadow: var(--smrt-inset-highlight);
   }
 
   .elevated {
-    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
-    box-shadow: var(--smrt-elevation-2);
+    border: var(--smrt-card-border, var(--smrt-hairline));
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-2);
   }
 
   /* Hoverable state */
   .hoverable:hover {
-    box-shadow: var(--smrt-elevation-3);
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3);
     transform: translateY(-2px);
   }
 
@@ -109,7 +110,7 @@ const {
   /* Header */
   .card-header {
     padding: var(--smrt-spacing-6);
-    border-bottom: var(--smrt-card-divider, 1px solid var(--smrt-color-outline-variant));
+    border-bottom: var(--smrt-card-divider, var(--smrt-hairline));
   }
 
   .padding-sm .card-header {
@@ -123,8 +124,8 @@ const {
   /* Footer */
   .card-footer {
     padding: var(--smrt-spacing-6);
-    border-top: var(--smrt-card-divider, 1px solid var(--smrt-color-outline-variant));
-    background: var(--smrt-color-surface-container-low);
+    border-top: var(--smrt-card-divider, var(--smrt-hairline));
+    background: var(--smrt-surface-sunken);
     border-bottom-left-radius: var(--smrt-radius-medium);
     border-bottom-right-radius: var(--smrt-radius-medium);
   }

package/dist/components/ui/Chip.svelte

@@ -96,21 +96,45 @@ const {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .chip {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--smrt-spacing-1);
-    border-radius: var(--smrt-radius-full);
-    background: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
+    font-weight: var(--smrt-control-weight);
     max-width: 100%;
   }
 
+  /* State layer: currentColor mixed at the theme's state opacity. */
+  .chip::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: transparent;
+    pointer-events: none;
+  }
+
+  .chip.selectable:hover::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .chip.selectable:active::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
+
   .chip.sm {
     padding: 0 var(--smrt-spacing-1);
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
   }
+  .chip.sm {
+    border-radius: var(--smrt-control-radius-small);
+  }
   .chip.md {
+    min-block-size: var(--smrt-control-height-small);
     padding: 0 var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
@@ -122,7 +146,7 @@ const {
   }
 
   .chip.disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     pointer-events: none;
   }
 
@@ -158,13 +182,13 @@ const {
   }
   .chip__close:hover {
     opacity: 1;
-    background: color-mix(in srgb, currentColor 12%, transparent);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
 
   .chip__body:focus-visible,
   .chip__close: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);
   }
 }
 </style>

package/dist/components/ui/Disclosure.svelte

@@ -49,7 +49,7 @@ function handleToggle(event: Event) {
   .disclosure { border-bottom: 1px solid var(--smrt-color-outline-variant); color: var(--smrt-color-on-surface); }
   summary { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) 0; font: var(--smrt-typography-title-small-font); cursor: pointer; list-style: none; }
   summary::-webkit-details-marker { display: none; }
-  summary:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  summary:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   summary[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
   .chevron { transition: transform var(--smrt-duration-short4) var(--smrt-easing-standard); }
   details[open] .chevron { transform: rotate(180deg); }

package/dist/components/ui/Dropdown.svelte

@@ -205,14 +205,15 @@ $effect(() => {
     font: inherit;
     cursor: pointer;
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
-    border-radius: var(--smrt-radius-medium);
-    border: 1px solid var(--smrt-color-outline);
-    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-control-radius);
+    border: var(--smrt-hairline-strong);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
+    font-weight: var(--smrt-control-weight);
   }
   .dropdown__trigger: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);
   }
   /* Icon trigger: a 44px round "more" button in the surrounding text colour. */
   .dropdown__trigger--icon {
@@ -230,10 +231,10 @@ $effect(() => {
   }
   .dropdown__trigger--icon:hover:not(:disabled),
   .dropdown__trigger--icon[aria-expanded='true'] {
-    background: color-mix(in srgb, currentColor 10%, transparent);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
   .dropdown__trigger:disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 
@@ -247,9 +248,10 @@ $effect(() => {
     flex-direction: column;
     gap: var(--smrt-spacing-1);
     border-radius: var(--smrt-radius-medium);
-    background: var(--smrt-color-surface-container);
-    border: 1px solid var(--smrt-color-outline-variant);
-    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
+    background: var(--smrt-glass-surface-strong);
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    border: var(--smrt-hairline);
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3);
   }
 
   .dropdown__menu--bottom-start {
@@ -293,7 +295,10 @@ $effect(() => {
     color: var(--smrt-color-on-surface-variant);
   }
   .dropdown__item:hover:not(:disabled) {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+  .dropdown__item:active:not(:disabled) {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
   /* Keyboard focus needs its own indicator: the hover background alone is a
      ~1.1:1 change against the menu surface in every preset (1.00:1 in glass
@@ -301,12 +306,12 @@ $effect(() => {
      sits inside the item's padding box rather than overlapping the neighbouring
      item or the menu's edge (#2322). */
   .dropdown__item:focus-visible {
-    background: var(--smrt-color-surface-container-high);
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: -2px;
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
   .dropdown__item:disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 }

package/dist/components/ui/IconToggle.svelte

@@ -107,8 +107,8 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     box-shadow: inset 0 0 0 2px var(--smrt-icon-toggle-tone);
   }
   .icon-toggle: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);
   }
   .icon-toggle:disabled {
     opacity: 0.5;