@happyvertical/smrt-svelte 0.55.17 → 0.55.18

package/agents/workspace.md

@@ -622,3 +622,13 @@ lives beside, not inside, `./workspace` so the AdminShell barrel stays free of
   form is a plain `method="POST"`; pass `enhance` from `$app/forms` to enhance
   it. The token is a hidden field only and is never stored, logged or shown.
   Single-use, loopback-only enforcement stays server-side.
+
+## Theme (premium baseline)
+
+The shell only consumes theme tokens; CSS and tokens changed, DOM and behaviour did not.
+
+- Surface ladder: main and phone top bar on `--smrt-surface-ground`; header, footer and top/bottom bands, corners and the left sidebar on `--smrt-surface-panel`; the dock (right edge), drawers, phone sheet and phone drawers, popovers, toasts and the shortcuts dialog on raised glass (`--smrt-glass-surface-strong`, `--smrt-elevation-3`, drawers and sheet `--smrt-elevation-4`, plus `--smrt-inset-highlight`). Edit-mode strips use `--smrt-surface-sunken`.
+- Region edges are `--smrt-hairline`; no solid outline-variant borders remain in the shell. Edit-mode drop zones and strips use the hairline with `border-style: dashed` and state tokens for fill. The resize separator keeps its own primary affordance.
+- Glass: the header, phone top bar, phone tab bar, dock, drawers, sheet and popovers set `backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation))` over `--smrt-glass-surface` (`-strong` for raised regions). Outside the Glass preset the tokens are opaque with blur 0. `backdrop-filter` makes the element a containing block for fixed descendants; the e2e suite covers the account menu and the floating layout toggle.
+- State layers: rows, tabs, rail buttons, toggles and the account trigger use one `::after` veil (`background: currentColor`, opacity from `--smrt-state-hover` / `-pressed` / `-selected`); transparent icon buttons use the equivalent `color-mix`. The selected nav row keeps its container fill and start indicator under the veil. Disabled uses `--smrt-state-disabled`. Focus rings come from `--smrt-focus-ring-*`; control radius and heights from `--smrt-control-*`.
+- E2E fixture: `ShellFixture` accepts `?theme=glass|material|studio|smrt` and `?scheme=dark` (all presets are imported) for per-preset screenshots.

package/dist/components/app/AppShell.svelte

@@ -1049,26 +1049,26 @@ const EDGE_OF_REGION: Record<ShellRegion, PanelEdge> = {
     color: var(--smrt-color-primary);
   }
   .smrt-layout-toggle { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); }
-  .smrt-layout-toggle--floating { position: fixed; z-index: 45; inset-block-start: max(var(--smrt-spacing-3), env(safe-area-inset-top)); inset-inline-end: max(var(--smrt-spacing-3), env(safe-area-inset-right)); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); box-shadow: var(--smrt-elevation-2); }
+  .smrt-layout-toggle--floating { position: fixed; z-index: 45; inset-block-start: max(var(--smrt-spacing-3), env(safe-area-inset-top)); inset-inline-end: max(var(--smrt-spacing-3), env(safe-area-inset-right)); border: var(--smrt-hairline); border-radius: var(--smrt-radius-full); background: var(--smrt-surface-raised); box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight); }
   .smrt-layout-toggle--floating :global(.smrt-shell-icon-button) { border-radius: var(--smrt-radius-full); }
   .smrt-layout-toggle :global(.smrt-shell-icon-button[aria-pressed='true']) { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
   .smrt-app-shell-color-scheme { display: inline-flex; align-items: center; }
   .smrt-app-shell-color-scheme :global(.smrt-color-scheme-toggle__switch) { min-block-size: var(--smrt-control-target-min); }
   .smrt-app-shell-palette { display: inline-flex; min-inline-size: 0; }
-  .smrt-app-shell-palette[data-search] :global(.smrt-command-palette-trigger) { inline-size: min(28rem, 40vw); justify-content: flex-start; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface-variant); }
+  .smrt-app-shell-palette[data-search] :global(.smrt-command-palette-trigger) { inline-size: min(28rem, 40vw); justify-content: flex-start; border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-full); background: var(--smrt-surface-control); color: var(--smrt-color-on-surface-variant); }
   .smrt-app-shell-palette[data-search] :global(.smrt-command-palette-trigger__hint) { margin-inline-start: auto; }
   .smrt-layout-live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
   .smrt-edit-zone__label { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-small-font); white-space: nowrap; }
-  .smrt-edit-item { display: inline-flex; align-items: center; min-inline-size: 0; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
-  .smrt-edit-item--dragging { opacity: 0.55; }
+  .smrt-edit-item { display: inline-flex; align-items: center; min-inline-size: 0; border: var(--smrt-hairline); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-raised); }
+  .smrt-edit-item--dragging { opacity: var(--smrt-state-disabled); }
   @media (prefers-reduced-motion: no-preference) {
     .smrt-edit-item { animation: smrt-edit-item-in var(--smrt-duration-short2) var(--smrt-easing-standard) backwards; }
   }
   @keyframes smrt-edit-item-in { from { opacity: 0; transform: scale(0.96); } }
   .smrt-edit-item__body { display: inline-flex; align-items: center; min-inline-size: 0; pointer-events: none; }
   .smrt-edit-item__grip { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 1.5rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--smrt-radius-sm); background: transparent; color: var(--smrt-color-on-surface-variant); cursor: grab; touch-action: none; }
-  .smrt-edit-item__grip:hover { background: var(--smrt-color-surface-container-high); }
-  .smrt-edit-item__grip:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-edit-item__grip:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
+  .smrt-edit-item__grip:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .smrt-edit-item__grip[aria-pressed='true'] { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
 }
 </style>

package/dist/components/app/DockToggles.svelte

@@ -89,11 +89,12 @@ function press(event: MouseEvent, toggle: DockToggle): void {
   .smrt-dock-toggles__button {
     display: inline-grid;
     place-items: center;
-    inline-size: 2.25rem;
-    block-size: 2.25rem;
+    position: relative;
+    inline-size: var(--smrt-control-height-small);
+    block-size: var(--smrt-control-height-small);
     padding: 0;
     border: 1px solid transparent;
-    border-radius: var(--smrt-radius-md, 0.5rem);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface);
     cursor: pointer;
@@ -106,22 +107,37 @@ function press(event: MouseEvent, toggle: DockToggle): void {
     }
   }
 
-  .smrt-dock-toggles__button:hover {
-    background: var(--smrt-color-surface-container-high);
+  /* State layer over the button; the active container fill sits under it. */
+  .smrt-dock-toggles__button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .smrt-dock-toggles__button:hover::after {
+    opacity: var(--smrt-state-hover);
+  }
+
+  .smrt-dock-toggles__button:active::after {
+    opacity: var(--smrt-state-pressed);
   }
 
   .smrt-dock-toggles__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);
   }
 
   .smrt-dock-toggles__button.active {
-    background: var(--smrt-color-primary-container, var(--smrt-color-surface-container-high));
-    color: var(--smrt-color-on-primary-container, var(--smrt-color-primary));
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .smrt-dock-toggles__button[aria-disabled='true'] {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: default;
   }
 }

package/dist/components/workspace/admin-shell/ActivityToasts.svelte

@@ -98,12 +98,14 @@ onDestroy(() => {
     align-items: center;
     justify-content: space-between;
     gap: var(--smrt-spacing-3);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-medium);
-    background: var(--smrt-color-surface-container);
+    background: var(--smrt-glass-surface-strong);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
     color: var(--smrt-color-on-surface);
     padding: var(--smrt-spacing-3);
-    box-shadow: var(--smrt-elevation-2);
+    box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight);
   }
 
   .smrt-activity-toast div {

package/dist/components/workspace/admin-shell/AdminShell.svelte

@@ -1735,7 +1735,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     block-size: 100svh;
     /* Themeable: an app sets --smrt-admin-shell-background on the shell or an
        ancestor (a tinted page behind cards, for instance). */
-    background: var(--smrt-admin-shell-background, var(--smrt-color-surface));
+    background: var(--smrt-admin-shell-background, var(--smrt-surface-ground));
     color: var(--smrt-color-on-surface);
     /* `clip`, not `hidden`: a hidden box is still programmatically scrollable
        (focus / scrollIntoView on a grid-track child shifts the whole shell
@@ -1745,8 +1745,8 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     overflow: clip;
     /* Themed, thin scrollbars for every scroller inside the shell. Override
        --smrt-admin-shell-scrollbar-track / -thumb / -thumb-hover to retint. */
-    scrollbar-color: var(--smrt-admin-shell-scrollbar-thumb, color-mix(in srgb, var(--smrt-color-on-surface) 26%, transparent))
-      var(--smrt-admin-shell-scrollbar-track, color-mix(in srgb, var(--smrt-color-surface-container-low) 88%, transparent));
+    scrollbar-color: var(--smrt-admin-shell-scrollbar-thumb, var(--smrt-scrollbar-thumb))
+      var(--smrt-admin-shell-scrollbar-track, var(--smrt-scrollbar-track));
   }
 
   .smrt-admin-shell :global(*) {
@@ -1759,11 +1759,11 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   }
 
   .smrt-admin-shell :global(*)::-webkit-scrollbar-track {
-    background: var(--smrt-admin-shell-scrollbar-track, color-mix(in srgb, var(--smrt-color-surface-container-low) 88%, transparent));
+    background: var(--smrt-admin-shell-scrollbar-track, var(--smrt-scrollbar-track));
   }
 
   .smrt-admin-shell :global(*)::-webkit-scrollbar-thumb {
-    background-color: var(--smrt-admin-shell-scrollbar-thumb, color-mix(in srgb, var(--smrt-color-on-surface) 26%, transparent));
+    background-color: var(--smrt-admin-shell-scrollbar-thumb, var(--smrt-scrollbar-thumb));
     background-clip: padding-box;
     border: 2px solid transparent;
     border-radius: var(--smrt-radius-full);
@@ -1780,9 +1780,9 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   .smrt-admin-shell__edge {
     min-width: 0;
     min-height: 0;
-    background: var(--smrt-color-surface-container-low);
+    background: var(--smrt-surface-panel);
     color: var(--smrt-color-on-surface);
-    border-color: var(--smrt-color-outline-variant);
+    border-color: var(--smrt-hairline-color);
   }
 
   .smrt-admin-shell__header {
@@ -1800,8 +1800,12 @@ function buildLayoutStyle(shell: ModuleShellState): string {
        to drop below it. `clip` (unlike `hidden`) allows a visible block axis. */
     overflow-x: clip;
     overflow-y: visible;
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface-container-low);
+    border-block-end: var(--smrt-hairline);
+    /* Glass chrome: translucent with blur in the Glass preset, the opaque
+       panel surface (blur 0) everywhere else. */
+    background: var(--smrt-glass-surface);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
     color: var(--smrt-color-on-surface);
     z-index: 30;
   }
@@ -1815,7 +1819,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
       var(--smrt-admin-shell-left-collapsed) minmax(0, 1fr)
         var(--smrt-admin-shell-right-collapsed)
     );
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
+    border-block-end: var(--smrt-hairline);
     z-index: 30;
   }
 
@@ -1823,7 +1827,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     position: relative;
     grid-column: 1;
     grid-row: 3;
-    border-inline-end: 1px solid var(--smrt-color-outline-variant);
+    border-inline-end: var(--smrt-hairline);
     z-index: 20;
   }
 
@@ -1831,8 +1835,13 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     position: relative;
     grid-column: 3;
     grid-row: 3;
-    border-inline-start: 1px solid var(--smrt-color-outline-variant);
+    border-inline-start: var(--smrt-hairline);
     z-index: 20;
+    /* The dock is the raised glass region of the shell. */
+    background: var(--smrt-glass-surface-strong);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight);
   }
 
   .smrt-admin-shell__edge--right[data-state='expanded'] {
@@ -1851,7 +1860,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
       var(--smrt-admin-shell-left-collapsed) minmax(0, 1fr)
         var(--smrt-admin-shell-right-collapsed)
     );
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    border-block-start: var(--smrt-hairline);
     z-index: 30;
   }
 
@@ -1862,7 +1871,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     min-height: 0;
     overflow: auto;
     padding-block-start: var(--smrt-shell-floating-reserve-main);
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-ground);
   }
 
   .smrt-admin-shell__band {
@@ -1921,21 +1930,59 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     position: relative;
     display: grid;
     place-items: center;
-    width: 2.35rem;
-    height: 2.35rem;
+    width: var(--smrt-control-height-small);
+    height: var(--smrt-control-height-small);
     border: 1px solid transparent;
-    border-radius: var(--smrt-radius-md);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     font: inherit;
   }
 
-  .smrt-admin-shell__focus-tool:hover,
+  /* One state layer per control: a currentColor veil whose opacity is the
+     theme's hover / pressed / selected token. */
+  .smrt-admin-shell__focus-tool::after,
+  .smrt-admin-shell__edit-indicator::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .smrt-admin-shell__focus-tool:hover::after,
+  .smrt-admin-shell__edit-indicator:hover::after {
+    opacity: var(--smrt-state-hover);
+  }
+
+  .smrt-admin-shell__focus-tool:hover {
+    color: var(--smrt-color-on-surface);
+  }
+
   .smrt-admin-shell__focus-tool.active {
     color: var(--smrt-color-primary);
-    border-color: var(--smrt-color-primary);
-    background: var(--smrt-color-surface-container-high);
+  }
+
+  .smrt-admin-shell__focus-tool.active::after {
+    opacity: var(--smrt-state-selected);
+  }
+
+  .smrt-admin-shell__focus-tool:active::after,
+  .smrt-admin-shell__edit-indicator:active::after {
+    opacity: var(--smrt-state-pressed);
+  }
+
+  .smrt-admin-shell__focus-tool:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+
+  .smrt-admin-shell__focus-tool:disabled {
+    opacity: var(--smrt-state-disabled);
+    cursor: default;
   }
 
   /* Edit-mode tab for a closed railless right edge: pinned to the shell's
@@ -1949,12 +1996,14 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     display: inline-flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
+    position: relative;
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-2, 0.5rem);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-inline-end: 0;
-    border-start-start-radius: var(--smrt-radius-md);
-    border-end-start-radius: var(--smrt-radius-md);
-    background: var(--smrt-color-surface-container-high);
+    border-start-start-radius: var(--smrt-control-radius);
+    border-end-start-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-raised);
+    box-shadow: var(--smrt-elevation-2), var(--smrt-inset-highlight);
     color: var(--smrt-color-on-surface-variant);
     font: inherit;
     font-size: var(--smrt-typography-label-small-size, 0.75rem);
@@ -1963,7 +2012,11 @@ function buildLayoutStyle(shell: ModuleShellState): string {
 
   .smrt-admin-shell__edit-indicator:hover {
     color: var(--smrt-color-primary);
-    border-color: var(--smrt-color-primary);
+  }
+
+  .smrt-admin-shell__edit-indicator:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   .smrt-admin-shell__edit-indicator :global(svg) {
@@ -2005,22 +2058,29 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     display: inline-grid;
     place-items: center;
     box-sizing: border-box;
-    inline-size: 2.5rem;
-    block-size: 2.5rem;
+    inline-size: var(--smrt-control-height);
+    block-size: var(--smrt-control-height);
     padding: 0;
     border: 0;
-    border-radius: var(--smrt-radius-md);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
   }
   .smrt-admin-shell__chrome-button:hover {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
     color: var(--smrt-color-on-surface);
   }
+  .smrt-admin-shell__chrome-button:active {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
   .smrt-admin-shell__chrome-button:focus-visible {
-    outline: 0.125rem solid var(--smrt-color-primary);
-    outline-offset: 0.125rem;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .smrt-admin-shell__chrome-button:disabled {
+    opacity: var(--smrt-state-disabled);
+    cursor: default;
   }
 
   .smrt-admin-shell__drawer-head {
@@ -2108,25 +2168,25 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   .smrt-admin-shell__slot--leftSidebar-header,
   .smrt-admin-shell__slot--rightSidebar-header {
     padding-block-end: var(--smrt-spacing-3);
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
+    border-block-end: var(--smrt-hairline);
   }
 
   .smrt-admin-shell__slot--leftSidebar-footer,
   .smrt-admin-shell__slot--rightSidebar-footer {
     padding-block-start: var(--smrt-spacing-3);
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    border-block-start: var(--smrt-hairline);
   }
 
   .smrt-admin-shell__slot--rightSidebar-header {
     position: sticky;
     inset-block-start: 0;
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-raised);
   }
 
   .smrt-admin-shell__slot--rightSidebar-footer {
     position: sticky;
     inset-block-end: 0;
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-raised);
   }
 
   /* Layout editing: slots as dashed drop zones, hidden regions as strips. */
@@ -2136,14 +2196,15 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     min-inline-size: 4rem;
     min-block-size: 2.25rem;
     padding: var(--smrt-spacing-1);
-    border: 1px dashed var(--smrt-color-outline);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    background: color-mix(in srgb, var(--smrt-color-primary) 4%, transparent);
+    border: var(--smrt-hairline);
+    border-style: dashed;
+    border-radius: var(--smrt-control-radius);
+    background: color-mix(in srgb, var(--smrt-color-primary) calc(var(--smrt-state-hover) * 50%), transparent);
   }
   .smrt-admin-shell__slot--editing[data-drop-target] {
     border-style: solid;
     border-color: var(--smrt-color-primary);
-    background: color-mix(in srgb, var(--smrt-color-primary) 14%, transparent);
+    background: color-mix(in srgb, var(--smrt-color-primary) calc(var(--smrt-state-dragged) * 100%), transparent);
   }
   .smrt-admin-shell__slot--editing.smrt-admin-shell__slot--header-center,
   .smrt-admin-shell__slot--editing.smrt-admin-shell__slot--footer-center {
@@ -2158,8 +2219,9 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     min-inline-size: 0;
     min-block-size: 0;
     overflow: hidden;
-    border: 1px dashed var(--smrt-color-outline);
-    background: var(--smrt-color-surface-container-low);
+    border: var(--smrt-hairline);
+    border-style: dashed;
+    background: var(--smrt-surface-sunken);
     color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-label-small-font);
     z-index: 25;
@@ -2174,7 +2236,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   .smrt-admin-shell__tenant-footer {
     min-width: 0;
     padding-block-start: var(--smrt-spacing-3);
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    border-block-start: var(--smrt-hairline);
   }
 
   .smrt-admin-shell__tenant-rail-stack {
@@ -2197,14 +2259,14 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     grid-row: 3;
     min-width: 0;
     padding-block-start: var(--smrt-spacing-2);
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    border-block-start: var(--smrt-hairline);
     overflow: visible;
   }
 
   .smrt-admin-shell__edge--right[data-state='expanded']
     .smrt-admin-shell__rail {
     grid-column: 2;
-    border-inline-start: 1px solid var(--smrt-color-outline-variant);
+    border-inline-start: var(--smrt-hairline);
   }
 
   .smrt-admin-shell__panel {
@@ -2234,6 +2296,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     inline-size: max(2rem, var(--smrt-control-target-min, 0px));
     block-size: max(2rem, var(--smrt-control-target-min, 0px));
     padding: 0;
+    border-radius: var(--smrt-control-radius);
     color: var(--smrt-color-on-surface-variant);
   }
   .smrt-admin-shell__edge--left[data-state='collapsed'] :global(.smrt-admin-shell__edge-toggle--left) {
@@ -2249,7 +2312,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   .smrt-admin-shell__edge-toggle-kbd {
     padding: 0 var(--smrt-spacing-1);
     border-radius: var(--smrt-radius-small);
-    background: var(--smrt-color-surface-container-high);
+    background: var(--smrt-surface-sunken);
     color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-small-size);
   }
@@ -2262,19 +2325,30 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     color: var(--smrt-color-on-surface-variant);
   }
 
+  :global(.smrt-admin-shell__edge-toggle--left.button.ghost) {
+    border-radius: var(--smrt-control-radius);
+  }
+
   :global(.smrt-admin-shell__edge-toggle--left.button.ghost:hover) {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
     color: var(--smrt-color-on-surface);
   }
 
+  :global(.smrt-admin-shell__edge-toggle--left.button.ghost:active) {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
+
   .smrt-admin-shell__drawer {
     position: absolute;
     z-index: 40;
     overflow: auto;
     padding: var(--smrt-spacing-5);
-    background: var(--smrt-color-surface-container);
+    border: var(--smrt-hairline);
+    background: var(--smrt-glass-surface-strong);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
     color: var(--smrt-color-on-surface);
-    box-shadow: var(--smrt-elevation-3);
+    box-shadow: var(--smrt-elevation-4), var(--smrt-inset-highlight);
   }
 
   .smrt-admin-shell__drawer--top {
@@ -2310,7 +2384,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     align-items: center;
     min-width: 0;
     padding: 0 var(--smrt-spacing-3);
-    background: var(--smrt-color-surface-container-low);
+    background: var(--smrt-surface-panel);
   }
 
   .smrt-admin-shell__corner--top-left,
@@ -2330,17 +2404,20 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     display: grid;
     place-items: center;
     padding: var(--smrt-spacing-5);
-    background: var(--smrt-color-scrim);
+    background: var(--smrt-surface-overlay);
   }
 
   .smrt-admin-shell__shortcuts-panel {
     inline-size: min(32rem, 100%);
     max-block-size: min(36rem, 100%);
     overflow: auto;
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-large);
-    background: var(--smrt-color-surface-container);
+    background: var(--smrt-glass-surface-strong);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
     padding: var(--smrt-spacing-5);
-    box-shadow: var(--smrt-elevation-4);
+    box-shadow: var(--smrt-elevation-4), var(--smrt-inset-highlight);
   }
 
   .smrt-admin-shell__shortcuts-panel header,
@@ -2421,7 +2498,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     align-self: start;
     z-index: 10;
     min-inline-size: 0;
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-ground);
     transition: transform var(--smrt-admin-shell-chrome-duration)
       var(--smrt-easing-standard, ease);
   }
@@ -2472,7 +2549,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     margin: 0;
     padding: 0;
     border: 0;
-    background: var(--smrt-color-scrim);
+    background: var(--smrt-surface-overlay);
     opacity: 0.36;
     cursor: pointer;
   }
@@ -2483,10 +2560,10 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   .smrt-admin-shell__edge--right[data-presentation='overlay'][data-state='expanded'] {
     grid-column: 1 / -1;
     z-index: 25;
-    box-shadow: var(
-      --smrt-elevation-3,
-      0 0.5rem 1.5rem color-mix(in srgb, var(--smrt-color-shadow) 24%, transparent)
-    );
+    background: var(--smrt-glass-surface-strong);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    box-shadow: var(--smrt-elevation-4), var(--smrt-inset-highlight);
     outline: none;
   }
 
@@ -2511,7 +2588,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     margin: 0;
     padding: 0;
     border: 0;
-    background: var(--smrt-color-scrim);
+    background: var(--smrt-surface-overlay);
     opacity: 0.24;
     cursor: pointer;
     animation: smrt-admin-shell-scrim-in var(--smrt-admin-shell-chrome-duration)
@@ -2590,7 +2667,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     inline-size: 2.5rem;
     block-size: 0.25rem;
     border-radius: var(--smrt-radius-full);
-    background: var(--smrt-color-outline-variant);
+    background: var(--smrt-hairline-strong-color);
   }
 
   /* Phone page contracts: breadcrumbs give way to the top bar, and so does
@@ -2631,7 +2708,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     position: sticky;
     inset-block-start: var(--smrt-admin-shell-phone-top-size);
     z-index: 6;
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-ground);
     transition: transform var(--smrt-admin-shell-chrome-duration)
       var(--smrt-easing-standard, ease);
   }
@@ -2654,8 +2731,10 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     margin: 0;
     padding: var(--smrt-spacing-2) var(--smrt-spacing-4)
       calc(var(--smrt-spacing-2) + env(safe-area-inset-bottom));
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface);
+    border-block-start: var(--smrt-hairline);
+    background: var(--smrt-glass-surface);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
   }
 
   .smrt-admin-shell[data-viewport='phone'] :global([data-form-action-bar] > *) {
@@ -2718,6 +2797,10 @@ function buildLayoutStyle(shell: ModuleShellState): string {
             var(--smrt-admin-shell-phone-bar-track)
         );
       inline-size: min(22rem, 86vw);
+      background: var(--smrt-glass-surface-strong);
+      -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+      backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+      box-shadow: var(--smrt-elevation-4), var(--smrt-inset-highlight);
       transform: translateX(-100%);
       transition: transform var(--smrt-duration-short2)
         var(--smrt-easing-standard);
@@ -2751,8 +2834,11 @@ function buildLayoutStyle(shell: ModuleShellState): string {
       border-inline-start: 0;
       border-start-start-radius: var(--smrt-radius-lg);
       border-start-end-radius: var(--smrt-radius-lg);
-      background: var(--smrt-color-surface);
-      box-shadow: var(--smrt-elevation-3);
+      border-block-start: var(--smrt-hairline);
+      background: var(--smrt-glass-surface-strong);
+      -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+      box-shadow: var(--smrt-elevation-4), var(--smrt-inset-highlight);
       transform: translateY(100%);
       visibility: hidden;
       transition:

package/dist/components/workspace/admin-shell/PhoneBottomBar.svelte

@@ -104,8 +104,10 @@ function accessibleName(item: PhoneBottomBarEntry): string {
     box-sizing: content-box;
     block-size: 3.5rem;
     padding: 0 var(--smrt-spacing-2) env(safe-area-inset-bottom);
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface);
+    border-block-start: var(--smrt-hairline);
+    background: var(--smrt-glass-surface);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
   }
 
   .smrt-phone-bottom-bar__item {
@@ -117,7 +119,7 @@ function accessibleName(item: PhoneBottomBarEntry): string {
     min-block-size: var(--smrt-touch-target-min);
     padding: var(--smrt-spacing-1) 0;
     border: 0;
-    border-radius: var(--smrt-radius-lg);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
     font: inherit;
@@ -126,6 +128,35 @@ function accessibleName(item: PhoneBottomBarEntry): string {
     -webkit-tap-highlight-color: transparent;
   }
 
+  .smrt-phone-bottom-bar__item {
+    position: relative;
+  }
+
+  /* State layer over the whole tab; the selected indicator pill keeps its
+     container fill. */
+  .smrt-phone-bottom-bar__item::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .smrt-phone-bottom-bar__item:hover::after {
+    opacity: var(--smrt-state-hover);
+  }
+
+  .smrt-phone-bottom-bar__item:active::after {
+    opacity: var(--smrt-state-pressed);
+  }
+
+  .smrt-phone-bottom-bar__item:disabled,
+  .smrt-phone-bottom-bar__item[aria-disabled='true'] {
+    opacity: var(--smrt-state-disabled);
+  }
+
   .smrt-phone-bottom-bar__item.active {
     color: var(--smrt-color-primary);
   }
@@ -136,8 +167,8 @@ function accessibleName(item: PhoneBottomBarEntry): string {
   }
 
   .smrt-phone-bottom-bar__item: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(-1 * var(--smrt-focus-ring-width));
   }
 
   .smrt-phone-bottom-bar__icon {
@@ -175,7 +206,7 @@ function accessibleName(item: PhoneBottomBarEntry): string {
     inset-inline-end: 1rem;
     inline-size: 0.6rem;
     block-size: 0.6rem;
-    border: 2px solid var(--smrt-color-surface);
+    border: var(--smrt-focus-ring-width) solid var(--smrt-surface-panel);
     border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-primary);
   }

package/dist/components/workspace/admin-shell/PhoneTopBar.svelte

@@ -61,8 +61,10 @@ const { t } = useI18n();
     box-sizing: border-box;
     block-size: var(--smrt-admin-shell-phone-top-size, 3.5rem);
     padding: 0 var(--smrt-spacing-2);
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface);
+    border-block-end: var(--smrt-hairline);
+    background: var(--smrt-glass-surface);
+    -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
     color: var(--smrt-color-on-surface);
   }
 
@@ -78,12 +80,16 @@ const { t } = useI18n();
 
   .smrt-phone-top-bar__back:hover,
   .smrt-phone-top-bar__back:focus-visible {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .smrt-phone-top-bar__back:active {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
 
   .smrt-phone-top-bar__back: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(-1 * var(--smrt-focus-ring-width));
   }
 
   .smrt-phone-top-bar__title {

package/dist/components/workspace/admin-shell/ShellIconButton.svelte

@@ -63,18 +63,19 @@ let {
     display: inline-grid;
     place-items: center;
     box-sizing: border-box;
-    inline-size: max(2rem, var(--smrt-control-target-min, 0px));
-    block-size: max(2rem, var(--smrt-control-target-min, 0px));
+    inline-size: max(var(--smrt-control-height-small), var(--smrt-control-target-min, 0px));
+    block-size: max(var(--smrt-control-height-small), var(--smrt-control-target-min, 0px));
     padding: 0;
     border: 0;
-    border-radius: var(--smrt-radius-medium, 0.5rem);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
   }
-  .smrt-shell-icon-button:hover { background: var(--smrt-color-surface-container-high); color: var(--smrt-color-on-surface); }
+  .smrt-shell-icon-button:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); color: var(--smrt-color-on-surface); }
+  .smrt-shell-icon-button:active { background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent); }
   .smrt-shell-icon-button[aria-pressed='true'] { color: var(--smrt-color-on-surface); }
-  .smrt-shell-icon-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
-  .smrt-shell-icon-button:disabled { opacity: 0.5; cursor: not-allowed; }
+  .smrt-shell-icon-button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .smrt-shell-icon-button:disabled { opacity: var(--smrt-state-disabled); cursor: not-allowed; }
 }
 </style>

package/dist/components/workspace/admin-shell/ShellLayoutEditor.svelte

@@ -253,7 +253,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   .smrt-shell-layout-editor h2, .smrt-shell-layout-editor h3, .smrt-shell-layout-editor p { margin: 0; }
   .smrt-shell-layout-editor p, .smrt-shell-layout-editor__muted { color: var(--smrt-color-on-surface-variant); }
   .smrt-shell-layout-editor h3 { font: var(--smrt-typography-title-small-font); margin-block-end: var(--smrt-spacing-2); }
-  .smrt-shell-layout-editor__panels { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); }
+  .smrt-shell-layout-editor__panels { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: var(--smrt-spacing-3); border: var(--smrt-hairline); border-radius: var(--smrt-radius-md); }
   .smrt-shell-layout-editor__panels legend { padding-inline: var(--smrt-spacing-1); font: var(--smrt-typography-title-small-font); }
   .smrt-shell-layout-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-4); }
   .smrt-shell-layout-editor__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--smrt-spacing-4); align-items: start; }
@@ -261,7 +261,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   .smrt-shell-layout-editor__nav-head h3 { margin-block-end: 0; }
   :global(.smrt-shell-layout-editor__name) { flex: 1 1 8rem; min-inline-size: 0; }
   .smrt-shell-layout-editor__label { flex: 1 1 auto; min-inline-size: 0; }
-  .smrt-shell-layout-editor__preview-frame { padding: var(--smrt-spacing-3); border: 1px dashed var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container-low, var(--smrt-color-surface)); }
+  .smrt-shell-layout-editor__preview-frame { padding: var(--smrt-spacing-3); border: var(--smrt-hairline); border-style: dashed; border-radius: var(--smrt-radius-md); background: var(--smrt-surface-sunken); }
   /* Label on its own line (never broken mid-word); the select and Reset share the next line. */
   @media (max-width: 48rem) {
     .smrt-shell-layout-editor header { flex-direction: column; }

package/dist/components/workspace/admin-shell/ShellNavEditor.svelte

@@ -496,8 +496,8 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   .smrt-nav-editor :global(.smrt-sortable) { gap: var(--smrt-spacing-1); }
   .smrt-nav-editor :global(.smrt-sortable__containers) { gap: var(--smrt-spacing-1); }
   .smrt-nav-editor :global(.smrt-sortable__container) { padding: 0; border: 0; background: transparent; gap: var(--smrt-spacing-1); }
-  .smrt-nav-editor :global(.smrt-sortable__item) { padding: 0; border: 0; border-radius: var(--smrt-radius-medium); background: transparent; }
-  .smrt-nav-editor :global(.smrt-sortable__item:hover) { background: var(--smrt-color-surface-container-high); }
+  .smrt-nav-editor :global(.smrt-sortable__item) { padding: 0; border: 0; border-radius: var(--smrt-control-radius); background: transparent; }
+  .smrt-nav-editor :global(.smrt-sortable__item:hover) { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
   .smrt-nav-editor :global(.smrt-sortable__items) { padding-inline-start: var(--smrt-spacing-3); min-block-size: 0; }
   .smrt-nav-editor :global(.smrt-sortable__header) { min-block-size: 0; }
   .smrt-nav-editor :global(.smrt-sortable__empty) { padding-block: 0; }
@@ -505,13 +505,13 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
 
   .smrt-nav-editor__top { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-small-font); text-transform: uppercase; letter-spacing: 0.04em; }
   .smrt-nav-editor__head { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: var(--smrt-spacing-1); min-inline-size: 0; }
-  .smrt-nav-editor__title { flex: 1 1 auto; min-inline-size: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-medium); background: transparent; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size); font-weight: var(--smrt-typography-weight-semibold); text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .smrt-nav-editor__title:hover, .smrt-nav-editor__head[data-toolbar-open] .smrt-nav-editor__title { background: var(--smrt-color-surface-container-high); }
-  .smrt-nav-editor__title:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-nav-editor__title { flex: 1 1 auto; min-inline-size: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-control-radius); background: transparent; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size); font-weight: var(--smrt-typography-weight-semibold); text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .smrt-nav-editor__title:hover, .smrt-nav-editor__head[data-toolbar-open] .smrt-nav-editor__title { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
+  .smrt-nav-editor__title:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .smrt-nav-editor__title--off { font-style: italic; font-weight: var(--smrt-typography-weight-normal, normal); }
   .smrt-nav-editor__title--hidden { opacity: 0.55; }
   .smrt-nav-editor__overlay { display: inline-flex; align-items: center; flex: 0 0 auto; }
-  .smrt-nav-editor__toolbar { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface-container-high); box-shadow: var(--smrt-elevation-2, 0 4px 12px rgb(0 0 0 / 0.2)); }
+  .smrt-nav-editor__toolbar { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-2); border: var(--smrt-hairline); border-radius: var(--smrt-radius-medium); background: var(--smrt-glass-surface-strong); -webkit-backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight); }
   :global(.smrt-nav-editor__name) { flex: 1 1 100%; min-inline-size: 0; }
   .smrt-nav-editor__row { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: var(--smrt-spacing-2); box-sizing: border-box; min-block-size: var(--smrt-control-target-min); padding: var(--smrt-spacing-2) var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }
   @media (max-width: 48rem) {

package/dist/components/workspace/admin-shell/ShellNavToggle.svelte

@@ -72,20 +72,20 @@ const name = $derived(label ?? t(M['ui.shell_nav_toggle.navigation']));
     inline-size: 2.75rem;
     block-size: 2.75rem;
     border: 0;
-    border-radius: var(--smrt-radius-md);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
   }
 
   .smrt-shell-nav-toggle:hover {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
     color: var(--smrt-color-on-surface);
   }
 
   .smrt-shell-nav-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);
   }
 }
 </style>

package/dist/components/workspace/admin-shell/ShellSectionMenu.svelte

@@ -249,13 +249,14 @@ function onmove(move: SortableItemMove<SortableItem>): void {
 @layer smrt.theme {
   .smrt-section-menu { min-inline-size: 0; }
   .smrt-section-menu__list { display: grid; gap: var(--smrt-spacing-1); margin: 0; padding: 0; list-style: none; }
-  .smrt-section-menu__item { position: relative; display: flex; align-items: center; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
-  .smrt-section-menu__item:hover { background: var(--smrt-color-surface-container-high); }
+  .smrt-section-menu__item { position: relative; display: flex; align-items: center; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: var(--smrt-hairline); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-panel); color: var(--smrt-color-on-surface); }
+  .smrt-section-menu__item:hover { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-hover) * 100%)); }
+  .smrt-section-menu__item:active { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-pressed) * 100%)); }
   .smrt-section-menu__link { flex: 1 1 auto; display: flex; align-items: center; gap: var(--smrt-spacing-3); min-inline-size: 0; min-block-size: var(--smrt-control-target-min, 2rem); color: inherit; text-decoration: none; }
   /* The whole row follows the link; actions sit above the stretched target. */
   .smrt-section-menu__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
   .smrt-section-menu__link:focus-visible { outline: none; }
-  .smrt-section-menu__link:focus-visible::after { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-section-menu__link:focus-visible::after { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .smrt-section-menu__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--smrt-typography-weight-medium, 500); }
   .smrt-section-menu__meta { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size); }
   .smrt-section-menu__actions { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); }
@@ -265,12 +266,13 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   .smrt-section-menu__card-icon :global(.smrt-shell-section-icon) { inline-size: 28px; block-size: 28px; }
   /* Cards: a responsive grid; the whole card is one stretched link. */
   .smrt-section-menu__cards, .smrt-section-menu--cards :global(.smrt-sortable__items) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--smrt-spacing-3); margin: 0; padding: 0; list-style: none; }
-  .smrt-section-menu__card { position: relative; display: flex; flex-direction: column; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); transition: background-color 120ms, border-color 120ms, transform 120ms; }
-  .smrt-section-menu__card:hover { background: var(--smrt-color-surface-container-high); border-color: var(--smrt-color-outline); transform: translateY(-2px); }
+  .smrt-section-menu__card { position: relative; display: flex; flex-direction: column; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-4); border: var(--smrt-hairline); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-surface-panel); color: var(--smrt-color-on-surface); transition: background-color var(--smrt-duration-short2), border-color var(--smrt-duration-short2), transform var(--smrt-duration-short2); }
+  .smrt-section-menu__card:hover { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-hover) * 100%)); border-color: var(--smrt-hairline-strong-color); }
+  .smrt-section-menu__card:active { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-pressed) * 100%)); }
   .smrt-section-menu__card-link { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--smrt-spacing-2); color: inherit; text-decoration: none; }
   .smrt-section-menu__card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
   .smrt-section-menu__card-link:focus-visible { outline: none; }
-  .smrt-section-menu__card-link:focus-visible::after { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-section-menu__card-link:focus-visible::after { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .smrt-section-menu__card-heading { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-inline-size: 0; }
   .smrt-section-menu__card-icon { display: inline-grid; place-items: center; flex: 0 0 28px; inline-size: 28px; block-size: 28px; color: var(--smrt-color-primary); }
   .smrt-section-menu__card-title { font-size: var(--smrt-typography-title-medium-size, 1rem); font-weight: var(--smrt-typography-weight-medium, 500); overflow-wrap: anywhere; }
@@ -285,7 +287,7 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   .smrt-section-menu :global(.smrt-sortable__container) { padding: 0; border: 0; background: transparent; gap: var(--smrt-spacing-1); }
   .smrt-section-menu :global(.smrt-sortable__header) { display: none; }
   .smrt-section-menu :global(.smrt-sortable__items) { gap: var(--smrt-spacing-1); }
-  .smrt-section-menu :global(.smrt-sortable__item) { border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
+  .smrt-section-menu :global(.smrt-sortable__item) { border: var(--smrt-hairline); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-panel); }
   .smrt-section-menu :global(.smrt-sortable__handle) { inline-size: 1.5rem; block-size: 2rem; }
   .smrt-section-menu__row { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-2) var(--smrt-spacing-1); }
   .smrt-section-menu__row--muted { opacity: 0.55; }

package/dist/components/workspace/admin-shell/TenantNav.svelte

@@ -315,8 +315,8 @@ function fallbackIcon(label: string): string {
     color: var(--smrt-color-on-surface-variant);
   }
   .smrt-tenant-nav a.smrt-tenant-nav__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);
   }
 
   .smrt-tenant-nav__heading {
@@ -326,12 +326,12 @@ function fallbackIcon(label: string): string {
     color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-large-size);
     font-weight: var(--smrt-typography-weight-semibold);
-    border-radius: var(--smrt-radius-medium);
+    border-radius: var(--smrt-control-radius);
     cursor: pointer;
   }
   .smrt-tenant-nav__heading: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);
   }
   .smrt-tenant-nav__group-items { margin-block-start: var(--smrt-spacing-1); }
   .smrt-tenant-nav__subnav {
@@ -367,7 +367,7 @@ function fallbackIcon(label: string): string {
     gap: var(--smrt-spacing-2);
     min-inline-size: 0;
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
-    border-radius: var(--smrt-radius-medium);
+    border-radius: var(--smrt-control-radius);
     color: var(--smrt-color-on-surface);
     text-decoration: none;
   }
@@ -385,8 +385,32 @@ function fallbackIcon(label: string): string {
     padding: 0;
   }
 
-  .smrt-tenant-nav a:hover {
-    background: var(--smrt-color-surface-container-high);
+  /* One state layer for every row: a currentColor veil driven by the
+     theme's hover / pressed tokens. The selected container fill and the
+     start indicator below sit under it, so hover still reads on a selected
+     row. */
+  .smrt-tenant-nav a::after,
+  .smrt-tenant-nav__heading::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .smrt-tenant-nav__heading { position: relative; }
+  .smrt-tenant-nav a:hover::after,
+  .smrt-tenant-nav__heading:hover::after {
+    opacity: var(--smrt-state-hover);
+  }
+  .smrt-tenant-nav a:active::after,
+  .smrt-tenant-nav__heading:active::after {
+    opacity: var(--smrt-state-pressed);
+  }
+  .smrt-tenant-nav a[aria-disabled='true'] {
+    opacity: var(--smrt-state-disabled);
+    pointer-events: none;
   }
   /* Selected: container fill plus a start indicator bar, not just weight. */
   .smrt-tenant-nav a[aria-current='page'],
@@ -453,7 +477,7 @@ function fallbackIcon(label: string): string {
     position: absolute;
     inset-block-start: 0.125rem;
     inset-inline-end: 0.125rem;
-    box-shadow: 0 0 0 2px var(--smrt-color-surface);
+    box-shadow: 0 0 0 var(--smrt-focus-ring-width) var(--smrt-surface-panel);
   }
 
   .smrt-tenant-nav__sr-only {

package/dist/components/workspace/admin-shell/WorkspaceAccountMenu.svelte

@@ -317,23 +317,40 @@ $effect(() => {
     min-width: 0;
     min-height: max(2.75rem, var(--smrt-control-target-min, 0px));
     padding: var(--smrt-spacing-2);
-    border: 1px solid var(--smrt-color-outline);
-    border-radius: var(--smrt-radius-large);
-    background: var(--smrt-color-surface);
+    position: relative;
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
     font: inherit;
     text-align: start;
     cursor: pointer;
   }
-  .smrt-workspace-account-menu__trigger:hover:not(:disabled),
-  .smrt-workspace-account-menu__trigger[aria-expanded='true'] {
-    background: var(--smrt-color-surface-container-high);
+  /* State layer: a currentColor veil over the trigger. */
+  .smrt-workspace-account-menu__trigger::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .smrt-workspace-account-menu__trigger:hover:not(:disabled)::after {
+    opacity: var(--smrt-state-hover);
+  }
+  .smrt-workspace-account-menu__trigger[aria-expanded='true']::after {
+    opacity: var(--smrt-state-selected);
+  }
+  .smrt-workspace-account-menu__trigger:active:not(:disabled)::after {
+    opacity: var(--smrt-state-pressed);
   }
   .smrt-workspace-account-menu__trigger:focus-visible {
-    outline: var(--smrt-spacing-0_5) solid var(--smrt-color-primary);
-    outline-offset: var(--smrt-spacing-0_5);
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
   .smrt-workspace-account-menu__trigger:disabled {
+    opacity: var(--smrt-state-disabled);
     cursor: default;
   }
 
@@ -350,11 +367,6 @@ $effect(() => {
     border-radius: var(--smrt-radius-full);
     background: transparent;
   }
-  .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__trigger:hover:not(:disabled),
-  .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__trigger[aria-expanded='true'] {
-    background: var(--smrt-color-surface-container-high);
-  }
-
   .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__identity,
   .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__indicator {
     display: none;
@@ -369,10 +381,10 @@ $effect(() => {
     overflow-y: auto;
     margin: var(--smrt-spacing-1) 0;
     padding: var(--smrt-spacing-1);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-medium);
-    background: var(--smrt-color-surface-container);
-    box-shadow: var(--smrt-elevation-2);
+    background: var(--smrt-surface-raised);
+    box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight);
   }
   .smrt-workspace-account-menu__popover--bottom-start { inset-block-start: 100%; inset-inline-start: 0; }
   .smrt-workspace-account-menu__popover--bottom-end { inset-block-start: 100%; inset-inline-end: 0; }
@@ -388,7 +400,7 @@ $effect(() => {
     display: grid;
     gap: var(--smrt-spacing-1);
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
+    border-block-end: var(--smrt-hairline);
     margin-block-end: var(--smrt-spacing-1);
   }
   .smrt-workspace-account-menu__name {
@@ -416,7 +428,7 @@ $effect(() => {
     min-block-size: max(2.75rem, var(--smrt-control-target-min, 0px));
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: none;
-    border-radius: var(--smrt-radius-small);
+    border-radius: var(--smrt-control-radius-small);
     background: none;
     color: var(--smrt-color-on-surface);
     font: inherit;
@@ -426,14 +438,17 @@ $effect(() => {
     cursor: pointer;
   }
   .smrt-workspace-account-menu__item:hover:not(:disabled) {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+  .smrt-workspace-account-menu__item:active:not(:disabled) {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
   .smrt-workspace-account-menu__item:focus-visible {
-    outline: var(--smrt-spacing-0_5) solid var(--smrt-color-primary);
-    outline-offset: calc(-1 * var(--smrt-spacing-0_5));
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(-1 * var(--smrt-focus-ring-width));
   }
   .smrt-workspace-account-menu__item:disabled {
-    color: var(--smrt-color-on-surface-variant);
+    opacity: var(--smrt-state-disabled);
     cursor: default;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-svelte",
-  "version": "0.55.17",
+  "version": "0.55.18",
   "smrtJsdoc": "strict",
   "description": "Svelte 5 components for SMRT user management - auth, users, tenants, roles, permissions, groups",
   "type": "module",
@@ -205,11 +205,11 @@
   },
   "dependencies": {
     "@happyvertical/logger": "^0.103.4",
-    "@happyvertical/smrt-languages": "0.55.17",
-    "@happyvertical/smrt-mcp-apps": "0.55.17",
-    "@happyvertical/smrt-types": "0.55.17",
-    "@happyvertical/smrt-ui": "0.55.17",
-    "@happyvertical/smrt-web": "0.55.17",
+    "@happyvertical/smrt-languages": "0.55.18",
+    "@happyvertical/smrt-mcp-apps": "0.55.18",
+    "@happyvertical/smrt-types": "0.55.18",
+    "@happyvertical/smrt-ui": "0.55.18",
+    "@happyvertical/smrt-web": "0.55.18",
     "@tanstack/db": "^0.6.14",
     "@tanstack/svelte-db": "^0.1.91",
     "esm-env": "^1.2.2"
@@ -244,14 +244,14 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/smrt-agents": "0.55.17",
-    "@happyvertical/smrt-chat": "0.55.17",
-    "@happyvertical/smrt-content": "0.55.17",
-    "@happyvertical/smrt-core": "0.55.17",
-    "@happyvertical/smrt-reports": "0.55.17",
-    "@happyvertical/smrt-scanner": "0.55.17",
-    "@happyvertical/smrt-tenancy": "0.55.17",
-    "@happyvertical/smrt-users": "0.55.17",
+    "@happyvertical/smrt-agents": "0.55.18",
+    "@happyvertical/smrt-chat": "0.55.18",
+    "@happyvertical/smrt-content": "0.55.18",
+    "@happyvertical/smrt-core": "0.55.18",
+    "@happyvertical/smrt-reports": "0.55.18",
+    "@happyvertical/smrt-scanner": "0.55.18",
+    "@happyvertical/smrt-tenancy": "0.55.18",
+    "@happyvertical/smrt-users": "0.55.18",
     "@happyvertical/speech": "^0.103.4",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",