@happyvertical/smrt-svelte 0.55.16 → 0.55.18

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

@@ -103,8 +103,14 @@ interface Props extends AdminShellProps {
         viewport: ShellViewport;
         bottomBar: BottomBarMode;
     }]>;
-    /** Phone behavior switches (scrim, swipe to close, hide on scroll). */
+    /** Phone behavior switches (scrim and swipe to close default on; hide on scroll). */
     phone?: AdminShellPhoneOptions;
+    /**
+     * Show the built-in "Tools" opener on phones while the right edge has
+     * focus tools (default true). `AppShell` turns it off when dock toggles
+     * already open the dock from the header.
+     */
+    phoneDockOpener?: boolean;
     /** Keep the phone top bar shown (e.g. while a banner is visible). */
     pinChrome?: boolean;
     /**

package/dist/components/workspace/admin-shell/AdminShell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"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"}

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

@@ -36,7 +36,7 @@ const { t } = useI18n();
 
 <section
   class="smrt-app-scope-panel"
-  aria-label={t(M['ui.app_scope_panel.app_scope'])}
+  aria-label={t(M['ui.app_scope_panel.app_scope'])} data-smrt-component="AppScopePanel"
 >
   <header>
     <div>
@@ -74,6 +74,8 @@ const { t } = useI18n();
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-app-scope-panel {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
@@ -110,4 +112,5 @@ const { t } = useI18n();
   .smrt-app-scope-panel__section {
     min-width: 0;
   }
+}
 </style>

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

@@ -45,7 +45,7 @@ function handleKeydown(event: KeyboardEvent): void {
 }
 </script>
 
-<div class="smrt-hotkey-input">
+<div class="smrt-hotkey-input" data-smrt-component="HotkeyInput">
   <Button
     variant="secondary"
     size="sm"
@@ -63,6 +63,8 @@ function handleKeydown(event: KeyboardEvent): void {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-hotkey-input {
     display: flex;
     align-items: center;
@@ -75,4 +77,5 @@ function handleKeydown(event: KeyboardEvent): void {
     font-size: var(--smrt-typography-body-small-size);
     overflow-wrap: anywhere;
   }
+}
 </style>

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

@@ -7,21 +7,27 @@
  * while a form's action bar is on screen or the keyboard is open.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Component } from 'svelte';
 import { M } from '../../../i18n/strings.workspace.js';
 import type { PhoneBottomBarItem } from './mobile-shell.js';
+import ShellSectionIcon from './ShellSectionIcon.svelte';
+import { SHELL_PLACEHOLDER_ICON } from './shell-icons.js';
+import type { PhoneBottomBarEntry } from './types.js';
 
 interface Props {
   /** Bar entries, left to right. */
-  items: PhoneBottomBarItem[];
+  items: (PhoneBottomBarItem | PhoneBottomBarEntry)[];
+  /** Renders `iconName`s that are not built-in shell icons. */
+  iconComponent?: Component<{ name: string; size?: number }>;
   /** Accessible name of the nav landmark (default "Main"). */
   label?: string;
 }
 
-let { items, label }: Props = $props();
+let { items, label, iconComponent }: Props = $props();
 
 const { t } = useI18n();
 
-function accessibleName(item: PhoneBottomBarItem): string {
+function accessibleName(item: PhoneBottomBarEntry): string {
   const parts = [item.label];
   if (item.badge) {
     parts.push(
@@ -33,9 +39,13 @@ function accessibleName(item: PhoneBottomBarItem): string {
 }
 </script>
 
-{#snippet content(item: PhoneBottomBarItem)}
+{#snippet content(item: PhoneBottomBarEntry)}
   <span class="smrt-phone-bottom-bar__icon" aria-hidden="true">
-    <item.icon size={22} />
+    {#if item.icon}
+      <item.icon size={22} />
+    {:else}
+      <ShellSectionIcon name={item.iconName ?? SHELL_PLACEHOLDER_ICON} size={22} {iconComponent} />
+    {/if}
     {#if item.badge}
       <span class="smrt-phone-bottom-bar__badge">
         {item.badge > 9 ? '9+' : item.badge}
@@ -50,7 +60,7 @@ function accessibleName(item: PhoneBottomBarItem): string {
 <nav
   class="smrt-phone-bottom-bar"
   aria-label={label ?? t(M['ui.phone_bottom_bar.label'])}
-  data-testid="phone-bottom-bar"
+  data-testid="phone-bottom-bar" data-smrt-component="PhoneBottomBar"
 >
   {#each items as item (item.id)}
     {#if item.href}
@@ -84,6 +94,8 @@ function accessibleName(item: PhoneBottomBarItem): string {
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-phone-bottom-bar {
     display: grid;
     grid-auto-columns: minmax(0, 1fr);
@@ -92,8 +104,10 @@ function accessibleName(item: PhoneBottomBarItem): 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 {
@@ -101,11 +115,11 @@ function accessibleName(item: PhoneBottomBarItem): string {
     place-items: center;
     align-content: center;
     gap: var(--smrt-spacing-1);
-    min-inline-size: 2.75rem;
-    min-block-size: 2.75rem;
+    min-inline-size: var(--smrt-touch-target-min);
+    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;
@@ -114,6 +128,35 @@ function accessibleName(item: PhoneBottomBarItem): 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);
   }
@@ -124,8 +167,8 @@ function accessibleName(item: PhoneBottomBarItem): 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 {
@@ -163,8 +206,9 @@ function accessibleName(item: PhoneBottomBarItem): 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);
   }
+}
 </style>

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

@@ -1,11 +1,18 @@
+import type { Component } from 'svelte';
 import type { PhoneBottomBarItem } from './mobile-shell.js';
+import type { PhoneBottomBarEntry } from './types.js';
 interface Props {
     /** Bar entries, left to right. */
-    items: PhoneBottomBarItem[];
+    items: (PhoneBottomBarItem | PhoneBottomBarEntry)[];
+    /** Renders `iconName`s that are not built-in shell icons. */
+    iconComponent?: Component<{
+        name: string;
+        size?: number;
+    }>;
     /** Accessible name of the nav landmark (default "Main"). */
     label?: string;
 }
-declare const PhoneBottomBar: import("svelte").Component<Props, {}, "">;
+declare const PhoneBottomBar: Component<Props, {}, "">;
 type PhoneBottomBar = ReturnType<typeof PhoneBottomBar>;
 export default PhoneBottomBar;
 //# sourceMappingURL=PhoneBottomBar.svelte.d.ts.map

package/dist/components/workspace/admin-shell/PhoneBottomBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneBottomBar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/PhoneBottomBar.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,UAAU,KAAK;IACb,kCAAkC;IAClC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyDD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PhoneBottomBar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/PhoneBottomBar.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGtD,UAAU,KAAK;IACb,kCAAkC;IAClC,KAAK,EAAE,CAAC,kBAAkB,GAAG,mBAAmB,CAAC,EAAE,CAAC;IACpD,6DAA6D;IAC7D,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiED,QAAA,MAAM,cAAc,0BAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -23,7 +23,7 @@ let { model, homeHref }: Props = $props();
 const { t } = useI18n();
 </script>
 
-<div class="smrt-phone-top-bar" data-testid="phone-top-bar" data-kind={model.kind}>
+<div class="smrt-phone-top-bar" data-testid="phone-top-bar" data-kind={model.kind} data-smrt-component="PhoneTopBar">
   {#if model.kind === 'detail'}
     <a
       class="smrt-phone-top-bar__back"
@@ -52,6 +52,8 @@ const { t } = useI18n();
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-phone-top-bar {
     display: flex;
     align-items: center;
@@ -59,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);
   }
 
@@ -76,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 {
@@ -91,4 +99,5 @@ const { t } = useI18n();
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+}
 </style>

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

@@ -54,6 +54,8 @@ const { t } = useI18n();
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-admin-shell__brand {
     display: flex;
     align-items: center;
@@ -83,4 +85,5 @@ const { t } = useI18n();
   .smrt-admin-shell__brand-text.wordmark strong {
     font: var(--smrt-typography-headline-small-font, 500 1.5rem/2rem sans-serif);
   }
+}
 </style>

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

@@ -10,11 +10,13 @@ interface Props {
 let { side, children }: Props = $props();
 </script>
 
-<div class="smrt-shell-corner" data-side={side}>
+<div class="smrt-shell-corner" data-side={side} data-smrt-component="ShellCorner">
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-corner {
     inline-size: var(--smrt-admin-shell-left-track);
     min-inline-size: 0;
@@ -23,4 +25,5 @@ let { side, children }: Props = $props();
   .smrt-shell-corner[data-side='right'] {
     inline-size: var(--smrt-admin-shell-right-track);
   }
+}
 </style>

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

@@ -44,7 +44,7 @@ let {
   class="smrt-shell-icon-button {className}"
   aria-label={label}
   title={tooltip ?? label}
-  aria-pressed={pressed}
+  aria-pressed={pressed} data-smrt-component="ShellIconButton"
 >
   {#if children}
     {@render children()}
@@ -56,22 +56,26 @@ let {
 </button>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-icon-button {
     flex: 0 0 auto;
     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

@@ -114,7 +114,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
 }
 </script>
 
-<section class="smrt-shell-layout-editor" aria-labelledby={headingId} bind:this={rootEl}>
+<section class="smrt-shell-layout-editor" aria-labelledby={headingId} bind:this={rootEl} data-smrt-component="ShellLayoutEditor">
   <header>
     <div>
       <h2 id={headingId}>{t(M['ui.shell_layout_editor.heading'])}</h2>
@@ -246,12 +246,14 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-layout-editor { display: grid; gap: var(--smrt-spacing-4); min-inline-size: 0; overflow-wrap: anywhere; }
   .smrt-shell-layout-editor header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-3); }
   .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; }
@@ -259,10 +261,11 @@ 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; }
     .smrt-shell-layout-editor__body { grid-template-columns: minmax(0, 1fr); }
   }
+}
 </style>

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

@@ -43,7 +43,7 @@ interface Props {
    * picker); their entries are edited on the section's own page with
    * `ShellSectionMenu`. Default `'items'`.
    */
-  navMode?: 'items' | 'sections';
+  navMode?: 'items' | 'sections' | 'sections-with-items';
 }
 
 let {
@@ -312,7 +312,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   data-layout-editing=""
   data-nav-mode={navMode}
   aria-label={ariaLabel || t(M['ui.shell_layout_editor.sortable_label'])}
-  bind:this={rootEl}
+  bind:this={rootEl} data-smrt-component="ShellNavEditor"
 >
   <Sortable
     {containers}
@@ -350,7 +350,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
             aria-label={t(M['ui.layout_edit.edit_section'], { label: entry.label })}
             onpointerenter={(event) => onhover(entry.id, event)}
             onclick={() => onactivate(entry.id)}
-          >{#if navMode === 'sections'}<span class="smrt-nav-editor__section-icon"><ShellSectionIcon name={entry.icon} iconComponent={IconComponent} /></span>{/if}{entry.label}</button>
+          >{#if navMode !== 'items'}<span class="smrt-nav-editor__section-icon"><ShellSectionIcon name={entry.icon} iconComponent={IconComponent} /></span>{/if}{entry.label}</button>
           <span class="smrt-nav-editor__overlay">
             {@render toggles(entry)}
             {@render actions(entry)}
@@ -377,7 +377,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
                 }}
               />
               {@render toggles(entry)}
-              {#if navMode === 'sections'}
+              {#if navMode !== 'items'}
                 <ShellIconButton
                   data-section-icon={entry.id}
                   aria-haspopup="true"
@@ -396,7 +396,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
                 />
               {/if}
               {@render actions(entry)}
-              {#if navMode === 'sections' && iconPicker === entry.id}
+              {#if navMode !== 'items' && iconPicker === entry.id}
                 <div
                   class="smrt-nav-editor__icons"
                   role="group"
@@ -432,7 +432,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
             {#if IconComponent}
               <IconComponent name={icon} size={18} />
             {:else}
-              {icon}
+              <ShellSectionIcon name={icon} size={18} />
             {/if}
           </span>
         {/if}
@@ -489,13 +489,15 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-nav-editor { display: grid; gap: var(--smrt-spacing-2); min-inline-size: 0; }
   /* Make the generic Sortable read as the real navigation. */
   .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; }
@@ -503,15 +505,18 @@ 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); padding: var(--smrt-spacing-2) var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }
+  .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) {
+    .smrt-nav-editor { --smrt-control-target-min: var(--smrt-touch-target-min); }
+  }
   .smrt-nav-editor__row--muted { opacity: 0.55; }
   .smrt-nav-editor__row strong { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--smrt-typography-weight-medium, 500); }
   /* Keep editor rows inside the sidebar: the implicit grid column would size to
@@ -528,4 +533,5 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   .smrt-nav-editor__section-icon { display: inline-flex; margin-inline-end: var(--smrt-spacing-2); vertical-align: middle; }
   .smrt-nav-editor__icons { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: var(--smrt-spacing-1); padding-block-start: var(--smrt-spacing-1); }
   .smrt-nav-editor__icons :global(.smrt-shell-icon-button[aria-pressed='true']) { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
+}
 </style>

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

@@ -18,7 +18,7 @@ interface Props {
      * picker); their entries are edited on the section's own page with
      * `ShellSectionMenu`. Default `'items'`.
      */
-    navMode?: 'items' | 'sections';
+    navMode?: 'items' | 'sections' | 'sections-with-items';
 }
 declare const ShellNavEditor: Component<Props, {}, "">;
 type ShellNavEditor = ReturnType<typeof ShellNavEditor>;

package/dist/components/workspace/admin-shell/ShellNavEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShellNavEditor.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellNavEditor.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAUrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAO3E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAG7D,UAAU,KAAK;IACb,oEAAoE;IACpE,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,yEAAyE;IACzE,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAChC;AA+WD,QAAA,MAAM,cAAc,0BAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ShellNavEditor.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellNavEditor.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAUrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAO3E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAG7D,UAAU,KAAK;IACb,oEAAoE;IACpE,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,yEAAyE;IACzE,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,qBAAqB,CAAC;CACxD;AA+WD,QAAA,MAAM,cAAc,0BAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -41,7 +41,7 @@ const name = $derived(label ?? t(M['ui.shell_nav_toggle.navigation']));
   aria-expanded={expanded}
   aria-controls={controls}
   data-testid="shell-nav-toggle"
-  {onclick}
+  {onclick} data-smrt-component="ShellNavToggle"
 >
   <svg
     viewBox="0 0 24 24"
@@ -63,6 +63,8 @@ const name = $derived(label ?? t(M['ui.shell_nav_toggle.navigation']));
 </button>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-nav-toggle {
     display: inline-grid;
     place-items: center;
@@ -70,19 +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/ShellSectionIcon.svelte

@@ -42,7 +42,7 @@ $effect(() => {
 });
 </script>
 
-<span class="smrt-shell-section-icon" aria-hidden="true">
+<span class="smrt-shell-section-icon" aria-hidden="true" data-smrt-component="ShellSectionIcon">
   {#if isShellIconName(name)}
     <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" focusable="false"><path d={SHELL_ICON_PATHS[name]} /></svg>
   {:else if Host}
@@ -53,5 +53,8 @@ $effect(() => {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-section-icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
+}
 </style>