@happyvertical/smrt-svelte 0.55.16 → 0.55.17

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":"AAkDA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAUtC,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,mBAAmB,CAAC;AActE,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAGH,KAAK,SAAS,EAEf,MAAM,YAAY,CAAC;AACtB,OAAO,KAAK,EACR,sBAAsB,EACtB,eAAe,EAEf,sBAAsB,EACtB,cAAc,EACd,aAAa,EACd,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAM,SAAQ,eAAe;IACrC,sEAAsE;IACtE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC5C;;;OAGG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,6EAA6E;IAC7E,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IAChD;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,aAAa,CAAC;QAAC,SAAS,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IAC5E,qFAAqF;IACrF,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAwyCH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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);
@@ -101,8 +113,8 @@ 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);
@@ -167,4 +179,5 @@ function accessibleName(item: PhoneBottomBarItem): string {
     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;
@@ -91,4 +93,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,6 +56,8 @@ let {
 </button>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-icon-button {
     flex: 0 0 auto;
     display: inline-grid;
@@ -74,4 +76,5 @@ let {
   .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; }
+}
 </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,6 +246,8 @@ 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; }
@@ -265,4 +267,5 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
     .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,6 +489,8 @@ 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); }
@@ -511,7 +513,10 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   .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)); }
   :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;
@@ -85,4 +87,5 @@ const name = $derived(label ?? t(M['ui.shell_nav_toggle.navigation']));
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
+}
 </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>

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

@@ -19,6 +19,7 @@ import Sortable from '../../sortable/Sortable.svelte';
 import type { SortableItem, SortableItemMove } from '../../sortable/types.js';
 import { useShellLayout } from './layout-context.js';
 import type { ShellLayoutController } from './layout-controller.svelte.js';
+import { flipRow } from './motion.js';
 import ShellIconButton from './ShellIconButton.svelte';
 import ShellSectionIcon from './ShellSectionIcon.svelte';
 import { SHELL_DEFAULT_SECTION_ICON, SHELL_ICON_PATHS } from './shell-icons.js';
@@ -130,7 +131,7 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   class="smrt-section-menu"
   class:smrt-section-menu--cards={layoutMode === 'cards'}
   bind:this={rootEl}
-  data-editing={editing ? '' : undefined}
+  data-editing={editing ? '' : undefined} data-smrt-component="ShellSectionMenu"
 >
   {#if editing}
     <Sortable
@@ -203,12 +204,14 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   {:else if layoutMode === 'cards'}
     <ul class="smrt-section-menu__cards" aria-label={listLabel}>
       {#each entries as entry (entry.id)}
-        <li class="smrt-section-menu__card">
+        <li class="smrt-section-menu__card" animate:flipRow>
           <a class="smrt-section-menu__card-link" href={entry.href} onclick={onNavigate}>
-            <span class="smrt-section-menu__card-icon">
-              <ShellSectionIcon name={entry.icon ?? SHELL_DEFAULT_SECTION_ICON} size={32} iconComponent={IconComponent} />
+            <span class="smrt-section-menu__card-heading">
+              <span class="smrt-section-menu__card-icon">
+                <ShellSectionIcon name={entry.icon ?? SHELL_DEFAULT_SECTION_ICON} size={28} iconComponent={IconComponent} />
+              </span>
+              <span class="smrt-section-menu__card-title">{entry.label}</span>
             </span>
-            <span class="smrt-section-menu__card-title">{entry.label}</span>
             {#if entry.item.description}
               <span class="smrt-section-menu__desc">{entry.item.description}</span>
             {/if}
@@ -225,7 +228,7 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   {:else}
     <ul class="smrt-section-menu__list" aria-label={listLabel}>
       {#each entries as entry (entry.id)}
-        <li class="smrt-section-menu__item">
+        <li class="smrt-section-menu__item" animate:flipRow>
           <a class="smrt-section-menu__link" href={entry.href} onclick={onNavigate}>
             {#if entry.icon}
               <ShellSectionIcon name={entry.icon} iconComponent={IconComponent} />
@@ -242,6 +245,8 @@ function onmove(move: SortableItemMove<SortableItem>): void {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@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); }
@@ -257,9 +262,7 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   .smrt-section-menu__chevron { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); }
   /* Fixed icon column so labels align whatever the glyph (or a missing one). */
   .smrt-section-menu :global(.smrt-shell-section-icon) { inline-size: 20px; block-size: 20px; }
-  /* Cards draw a 32px icon: its box must match, or the glyph spills out of
-     the centred circle. */
-  .smrt-section-menu__card-icon :global(.smrt-shell-section-icon) { inline-size: 32px; block-size: 32px; }
+  .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; }
@@ -268,7 +271,8 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   .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-icon { display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
+  .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; }
   .smrt-section-menu__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-section-menu__card-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-2); }
@@ -287,4 +291,5 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   .smrt-section-menu__row--muted { opacity: 0.55; }
   .smrt-section-menu__row strong { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--smrt-typography-weight-medium, 500); }
   :global(.smrt-section-menu__name) { flex: 1 1 auto; min-inline-size: 0; }
+}
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ShellSectionMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSectionMenu.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAKrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAI3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGxD,UAAU,KAAK;IACb,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACxC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAuLD,QAAA,MAAM,gBAAgB,0BAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ShellSectionMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSectionMenu.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAKrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAK3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGxD,UAAU,KAAK;IACb,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACxC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0LD,QAAA,MAAM,gBAAgB,0BAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}