@happyvertical/smrt-svelte 0.51.38 → 0.52.0

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
+import { type BottomBarMode } from './mobile-shell.js';
 import { type ShellState } from './state.svelte.js';
-import type { AdminShellProps, ShellFocusTool } from './types.js';
+import type { AdminShellPhoneOptions, AdminShellProps, ShellFocusTool, ShellViewport } from './types.js';
 interface Props extends AdminShellProps {
     /** Pre-configured shell state. Creates one from config if omitted. */
     state?: ShellState;
@@ -34,6 +35,46 @@ interface Props extends AdminShellProps {
     bottomRightCorner?: Snippet;
     /** Content for the keyboard shortcuts overlay. */
     shortcutsOverlay?: Snippet;
+    /**
+     * A full-width header row above every edge (`#smrt-admin-shell-header`,
+     * 3.5rem; override `--smrt-admin-shell-header-size`). Shown at every
+     * width except on phones when `phoneTopBar` is given.
+     */
+    header?: Snippet<[{
+        viewport: ShellViewport;
+    }]>;
+    /**
+     * Phone-only context bar over the top of the main region. Hides while
+     * scrolling down and returns on the first scroll up (see
+     * `phone.hideOnScroll`); pinned while `pinChrome` or a drawer is open.
+     */
+    phoneTopBar?: Snippet<[{
+        hidden: boolean;
+    }]>;
+    /**
+     * Phone-only bottom bar row. Replaced by a form's action bar
+     * (`[data-form-action-bar]` inside main) and hidden while the on-screen
+     * keyboard is open.
+     */
+    phoneBottomBar?: Snippet;
+    /**
+     * Host surfaces laid over the shell above the phone bottom bar (phone
+     * sheets, status strips). The layer ignores pointer events; its direct
+     * children receive them.
+     */
+    overlays?: Snippet<[{
+        viewport: ShellViewport;
+        bottomBar: BottomBarMode;
+    }]>;
+    /** Phone behavior switches (scrim, swipe to close, hide on scroll). */
+    phone?: AdminShellPhoneOptions;
+    /** Keep the phone top bar shown (e.g. while a banner is visible). */
+    pinChrome?: boolean;
+    /**
+     * Current location. When it changes on a phone, open side drawers and
+     * sheets close and the phone top bar comes back.
+     */
+    path?: string;
     children: Snippet;
 }
 declare const AdminShell: import("svelte").Component<Props, {}, "">;

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":"AA2CA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAStC,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EACR,eAAe,EAEf,cAAc,EACf,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,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,kCAAkC;IAClC,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,QAAQ,EAAE,OAAO,CAAC;CACnB;AAmYH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,mBAAmB,CAAC;AAStE,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EACR,sBAAsB,EACtB,eAAe,EAEf,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,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,kCAAkC;IAClC,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;;;;OAIG;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,uEAAuE;IACvE,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgxBH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,170 @@
+<script lang="ts">
+/**
+ * Phone bottom bar: 56px plus the safe-area inset, an icon and a short
+ * label per item. Items are data: a link (`href`) or a button (`onclick`),
+ * with an active state, an optional count badge, and an optional dot.
+ * Render it in AdminShell's `phoneBottomBar` snippet: the shell hides it
+ * while a form's action bar is on screen or the keyboard is open.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../../i18n/strings.workspace.js';
+import type { PhoneBottomBarItem } from './mobile-shell.js';
+
+interface Props {
+  /** Bar entries, left to right. */
+  items: PhoneBottomBarItem[];
+  /** Accessible name of the nav landmark (default "Main"). */
+  label?: string;
+}
+
+let { items, label }: Props = $props();
+
+const { t } = useI18n();
+
+function accessibleName(item: PhoneBottomBarItem): string {
+  const parts = [item.label];
+  if (item.badge) {
+    parts.push(
+      t(M['ui.phone_bottom_bar.unread'], { count: String(item.badge) }),
+    );
+  }
+  if (item.dot) parts.push(item.dotLabel ?? t(M['ui.phone_bottom_bar.new']));
+  return parts.join(', ');
+}
+</script>
+
+{#snippet content(item: PhoneBottomBarItem)}
+  <span class="smrt-phone-bottom-bar__icon" aria-hidden="true">
+    <item.icon size={22} />
+    {#if item.badge}
+      <span class="smrt-phone-bottom-bar__badge">
+        {item.badge > 9 ? '9+' : item.badge}
+      </span>
+    {:else if item.dot}
+      <span class="smrt-phone-bottom-bar__dot"></span>
+    {/if}
+  </span>
+  <span class="smrt-phone-bottom-bar__label" aria-hidden="true">{item.label}</span>
+{/snippet}
+
+<nav
+  class="smrt-phone-bottom-bar"
+  aria-label={label ?? t(M['ui.phone_bottom_bar.label'])}
+  data-testid="phone-bottom-bar"
+>
+  {#each items as item (item.id)}
+    {#if item.href}
+      <a
+        class="smrt-phone-bottom-bar__item"
+        class:active={item.active}
+        href={item.href}
+        aria-label={accessibleName(item)}
+        aria-current={item.active ? 'page' : undefined}
+        data-item={item.id}
+        onclick={item.onclick}
+      >
+        {@render content(item)}
+      </a>
+    {:else}
+      <!-- raw-primitive-allow: shell chrome toggle, not a content button -->
+      <button
+        type="button"
+        class="smrt-phone-bottom-bar__item"
+        class:active={item.active}
+        aria-label={accessibleName(item)}
+        aria-expanded={item.expanded}
+        aria-controls={item.controls}
+        data-item={item.id}
+        onclick={item.onclick}
+      >
+        {@render content(item)}
+      </button>
+    {/if}
+  {/each}
+</nav>
+
+<style>
+  .smrt-phone-bottom-bar {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    gap: var(--smrt-spacing-2);
+    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);
+  }
+
+  .smrt-phone-bottom-bar__item {
+    display: grid;
+    place-items: center;
+    align-content: center;
+    gap: var(--smrt-spacing-1);
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--smrt-spacing-1) 0;
+    border: 0;
+    border-radius: var(--smrt-radius-lg);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant);
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .smrt-phone-bottom-bar__item.active {
+    color: var(--smrt-color-primary);
+  }
+
+  .smrt-phone-bottom-bar__item.active .smrt-phone-bottom-bar__icon {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .smrt-phone-bottom-bar__item:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .smrt-phone-bottom-bar__icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: 3.5rem;
+    block-size: 1.75rem;
+    border-radius: var(--smrt-radius-full);
+  }
+
+  .smrt-phone-bottom-bar__label {
+    font: var(--smrt-typography-label-small-font);
+  }
+
+  .smrt-phone-bottom-bar__badge {
+    position: absolute;
+    inset-block-start: -0.2rem;
+    inset-inline-end: 0.6rem;
+    box-sizing: border-box;
+    min-inline-size: 1.1rem;
+    block-size: 1.1rem;
+    padding: 0 var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
+    font: var(--smrt-typography-label-small-font);
+    line-height: 1.1rem;
+    text-align: center;
+  }
+
+  .smrt-phone-bottom-bar__dot {
+    position: absolute;
+    inset-block-start: 0.1rem;
+    inset-inline-end: 1rem;
+    inline-size: 0.6rem;
+    block-size: 0.6rem;
+    border: 2px solid var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary);
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { PhoneBottomBarItem } from './mobile-shell.js';
+interface Props {
+    /** Bar entries, left to right. */
+    items: PhoneBottomBarItem[];
+    /** Accessible name of the nav landmark (default "Main"). */
+    label?: string;
+}
+declare const PhoneBottomBar: import("svelte").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

@@ -0,0 +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"}

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+/**
+ * Phone top bar, context only: a back arrow and the page title on detail
+ * pages, the workspace name (a link home) on section homes. No action
+ * icons: those live in the phone bottom bar. Build the model with
+ * `phoneTopBarFor()` and render this in AdminShell's `phoneTopBar`
+ * snippet, which hides it on scroll.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../../i18n/strings.workspace.js';
+import type { PhoneTopBarModel } from './mobile-shell.js';
+import ShellTitle from './ShellTitle.svelte';
+
+interface Props {
+  /** What to show (see `phoneTopBarFor`). */
+  model: PhoneTopBarModel;
+  /** The workspace home page, linked from the name on section homes. */
+  homeHref: string;
+}
+
+let { model, homeHref }: Props = $props();
+
+const { t } = useI18n();
+</script>
+
+<div class="smrt-phone-top-bar" data-testid="phone-top-bar" data-kind={model.kind}>
+  {#if model.kind === 'detail'}
+    <a
+      class="smrt-phone-top-bar__back"
+      href={model.backHref}
+      aria-label={t(M['ui.phone_top_bar.back'], { label: model.backLabel })}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="22"
+        height="22"
+        aria-hidden="true"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m12 19-7-7 7-7M19 12H5" />
+      </svg>
+    </a>
+    <span class="smrt-phone-top-bar__title">{model.title}</span>
+  {:else}
+    <ShellTitle title={model.title} href={homeHref} />
+  {/if}
+</div>
+
+<style>
+  .smrt-phone-top-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1);
+    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);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .smrt-phone-top-bar__back {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    border-radius: var(--smrt-radius-full);
+    color: inherit;
+  }
+
+  .smrt-phone-top-bar__back:hover,
+  .smrt-phone-top-bar__back:focus-visible {
+    background: var(--smrt-color-surface-container-high);
+  }
+
+  .smrt-phone-top-bar__back:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .smrt-phone-top-bar__title {
+    min-inline-size: 0;
+    overflow: hidden;
+    font: var(--smrt-typography-title-medium-font);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { PhoneTopBarModel } from './mobile-shell.js';
+interface Props {
+    /** What to show (see `phoneTopBarFor`). */
+    model: PhoneTopBarModel;
+    /** The workspace home page, linked from the name on section homes. */
+    homeHref: string;
+}
+declare const PhoneTopBar: import("svelte").Component<Props, {}, "">;
+type PhoneTopBar = ReturnType<typeof PhoneTopBar>;
+export default PhoneTopBar;
+//# sourceMappingURL=PhoneTopBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneTopBar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/PhoneTopBar.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,UAAU,KAAK;IACb,2CAA2C;IAC3C,KAAK,EAAE,gBAAgB,CAAC;IACxB,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;CAClB;AA+BD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+/**
+ * Header nav toggle for tablet/desktop: a chevron that points left while
+ * the nav is open (collapse) and right while it is collapsed (expand),
+ * with an accessible label and `aria-expanded`. Pair it with
+ * `ShellTitle` in AdminShell's `header` snippet; phones use the bottom
+ * bar's Menu item instead.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../../i18n/strings.workspace.js';
+
+interface Props {
+  /** Whether the nav is open. */
+  expanded: boolean;
+  /** Toggle the nav (e.g. `() => shell.togglePanel('left')`). */
+  onclick: () => void;
+  /** id of the nav panel (default AdminShell's left panel). */
+  controls?: string;
+  /** What is toggled, for the accessible name ("Collapse site navigation"). */
+  label?: string;
+}
+
+let {
+  expanded,
+  onclick,
+  controls = 'smrt-admin-shell-left-panel',
+  label,
+}: Props = $props();
+
+const { t } = useI18n();
+const name = $derived(label ?? t(M['ui.shell_nav_toggle.navigation']));
+</script>
+
+<!-- raw-primitive-allow: shell chrome toggle, not a content button -->
+<button
+  type="button"
+  class="smrt-shell-nav-toggle"
+  aria-label={expanded
+    ? t(M['ui.shell_nav_toggle.collapse'], { label: name })
+    : t(M['ui.shell_nav_toggle.expand'], { label: name })}
+  aria-expanded={expanded}
+  aria-controls={controls}
+  data-testid="shell-nav-toggle"
+  {onclick}
+>
+  <svg
+    viewBox="0 0 24 24"
+    width="20"
+    height="20"
+    aria-hidden="true"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    {#if expanded}
+      <path d="m15 18-6-6 6-6" />
+    {:else}
+      <path d="m9 18 6-6-6-6" />
+    {/if}
+  </svg>
+</button>
+
+<style>
+  .smrt-shell-nav-toggle {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    border: 0;
+    border-radius: var(--smrt-radius-md);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant);
+    cursor: pointer;
+  }
+
+  .smrt-shell-nav-toggle:hover {
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .smrt-shell-nav-toggle:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    /** Whether the nav is open. */
+    expanded: boolean;
+    /** Toggle the nav (e.g. `() => shell.togglePanel('left')`). */
+    onclick: () => void;
+    /** id of the nav panel (default AdminShell's left panel). */
+    controls?: string;
+    /** What is toggled, for the accessible name ("Collapse site navigation"). */
+    label?: string;
+}
+declare const ShellNavToggle: import("svelte").Component<Props, {}, "">;
+type ShellNavToggle = ReturnType<typeof ShellNavToggle>;
+export default ShellNavToggle;
+//# sourceMappingURL=ShellNavToggle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellNavToggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellNavToggle.svelte.ts"],"names":[],"mappings":"AAcA,UAAU,KAAK;IACb,+BAA+B;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+/** The workspace name in a shell header: a plain link to its home page. */
+interface Props {
+  /** Workspace name. */
+  title: string;
+  /** Its home page. */
+  href: string;
+}
+
+let { title, href }: Props = $props();
+</script>
+
+<a class="smrt-shell-title" {href} data-testid="shell-title">{title}</a>
+
+<style>
+  .smrt-shell-title {
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    min-block-size: 2.75rem;
+    padding: 0 var(--smrt-spacing-2);
+    overflow: hidden;
+    border-radius: var(--smrt-radius-md);
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-title-medium-font);
+    /* Themeable: --smrt-shell-title-font-family (a serif masthead, say). */
+    font-family: var(--smrt-shell-title-font-family, var(--smrt-typography-title-medium-font-family, inherit));
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .smrt-shell-title:hover {
+    background: var(--smrt-color-surface-container-high);
+  }
+
+  .smrt-shell-title:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+/** The workspace name in a shell header: a plain link to its home page. */
+interface Props {
+    /** Workspace name. */
+    title: string;
+    /** Its home page. */
+    href: string;
+}
+declare const ShellTitle: import("svelte").Component<Props, {}, "">;
+type ShellTitle = ReturnType<typeof ShellTitle>;
+export default ShellTitle;
+//# sourceMappingURL=ShellTitle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellTitle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellTitle.svelte.ts"],"names":[],"mappings":"AAGA,2EAA2E;AAC3E,UAAU,KAAK;IACb,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;CACd;AAaD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -35,11 +35,31 @@ function isVisibleActive(item: ShellNavItem): boolean {
   return collapsed && !!item.children?.some((child) => isActive(child));
 }
 
+/** Accessible label of an item's attention dot, or null when it has none. */
+function attentionLabel(item: ShellNavItem): string | null {
+  if (!item.attention) return null;
+  return typeof item.attention === 'string' && item.attention.trim()
+    ? item.attention.trim()
+    : t(M['ui.tenant_nav.needs_attention']);
+}
+
 function fallbackIcon(label: string): string {
   return label.trim().charAt(0).toLocaleUpperCase() || '?';
 }
 </script>
 
+{#snippet attention(item: ShellNavItem)}
+  {@const label = attentionLabel(item)}
+  {#if label}
+    <span
+      class="smrt-tenant-nav__attention"
+      data-attention
+      aria-hidden="true"
+    ></span>
+    <span class="smrt-tenant-nav__sr-only">({label})</span>
+  {/if}
+{/snippet}
+
 <nav
   class="smrt-tenant-nav"
   class:smrt-tenant-nav--collapsed={collapsed}
@@ -78,6 +98,7 @@ function fallbackIcon(label: string): string {
             <small>{item.badge}</small>
           {/if}
         {/if}
+        {@render attention(item)}
       </a>
       {#if item.children?.length && !collapsed}
         <div class="smrt-tenant-nav__children">
@@ -100,6 +121,7 @@ function fallbackIcon(label: string): string {
               {#if child.badge !== null && child.badge !== undefined}
                 <small>{child.badge}</small>
               {/if}
+              {@render attention(child)}
             </a>
           {/each}
         </div>
@@ -118,7 +140,10 @@ function fallbackIcon(label: string): string {
 
   .smrt-tenant-nav a {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    /* Icon, label, then one auto column per trailing mark (badge, dot). */
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: auto;
     align-items: center;
     gap: var(--smrt-spacing-2);
     min-inline-size: 0;
@@ -178,6 +203,26 @@ function fallbackIcon(label: string): string {
     padding-inline-start: var(--smrt-spacing-4);
   }
 
+  .smrt-tenant-nav a {
+    position: relative;
+  }
+
+  .smrt-tenant-nav__attention {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-error);
+    justify-self: end;
+  }
+
+  /* Collapsed: the dot sits on the icon's corner. */
+  .smrt-tenant-nav--collapsed .smrt-tenant-nav__attention {
+    position: absolute;
+    inset-block-start: 0.125rem;
+    inset-inline-end: 0.125rem;
+    box-shadow: 0 0 0 2px var(--smrt-color-surface);
+  }
+
   .smrt-tenant-nav__sr-only {
     position: absolute;
     inline-size: 1px;

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

@@ -1 +1 @@
-{"version":3,"file":"TenantNav.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/TenantNav.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,UAAU,KAAK;IACb,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAsFD,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TenantNav.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/TenantNav.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,UAAU,KAAK;IACb,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAwGD,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/workspace/admin-shell/mobile-shell-dom.d.ts

@@ -0,0 +1,37 @@
+import { type ScrollChromeOptions } from './mobile-shell.js';
+import { type ShellState } from './state.svelte.js';
+/**
+ * Keep `shell.viewport` in step with the phone/desktop media queries (which
+ * applies each edge's `viewportDefaults` when the class changes).
+ */
+export declare function installShellViewport(shell: ShellState): () => void;
+/**
+ * Keep `shell.overlayMatches` in step with each side edge's `overlayMedia`
+ * query (edges without one are skipped).
+ */
+export declare function installShellOverlayMedia(shell: ShellState): () => void;
+/**
+ * Hide-on-scroll for one scroller (AdminShell's main region). Samples once
+ * per animation frame and reports changes of the hidden state.
+ */
+export declare function installScrollChrome(scroller: HTMLElement, options: {
+    onChange: (hidden: boolean) => void;
+    isPinned: () => boolean;
+    tuning?: ScrollChromeOptions;
+}): {
+    recheck: () => void;
+    reset: () => void;
+    destroy: () => void;
+};
+/**
+ * Watch for the on-screen keyboard. Sets `data-keyboard-open` on `<html>`
+ * (phone bars and `FormActionBar` hide on it) and keeps the focused field in
+ * view when the keyboard opens.
+ */
+export declare function installKeyboardWatcher(onChange: (open: boolean) => void): () => void;
+/**
+ * Report whether `container` holds a form action bar
+ * (`[data-form-action-bar]`), now and whenever its subtree changes.
+ */
+export declare function watchFormActionBar(container: HTMLElement, onChange: (present: boolean) => void): () => void;
+//# sourceMappingURL=mobile-shell-dom.d.ts.map

package/dist/components/workspace/admin-shell/mobile-shell-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-shell-dom.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/mobile-shell-dom.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,mBAAmB,EAEzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,IAAI,CAoBlE;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,IAAI,CAoBtE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE;IACP,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B,GACA;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqCjE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAChC,MAAM,IAAI,CA6BZ;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GACnC,MAAM,IAAI,CAYZ"}