@sentropic/design-system-svelte 0.34.49 → 0.34.50

package/dist/NavRail.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    icon?: Snippet;
+  }
+
+  export interface NavRailProps {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    onItemSelect?: (id: string) => void;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    items = [],
+    label = "Primary navigation",
+    activeItemId,
+    onItemSelect,
+    footer,
+    children,
+    class: className
+  }: NavRailProps = $props();
+
+  const classes = $derived(["st-navRail", className].filter(Boolean).join(" "));
+
+  function isActive(item: NavRailItem) {
+    return item.active === true || item.id === activeItemId;
+  }
+
+  function selectItem(item: NavRailItem) {
+    if (!item.disabled) onItemSelect?.(item.id);
+  }
+</script>
+
+<nav class={classes} aria-label={label}>
+  <div class="st-navRail__items">
+    {#each items as item (item.id)}
+      {#if item.href && !item.disabled}
+        <a class="st-navRail__item" class:st-navRail__item--active={isActive(item)} href={item.href} aria-current={isActive(item) ? "page" : undefined} title={item.label} onclick={() => selectItem(item)}>
+          {#if item.icon}<span class="st-navRail__icon">{@render item.icon()}</span>{/if}
+          <span class="st-navRail__label">{item.label}</span>
+          {#if item.badge != null}<span class="st-navRail__badge">{item.badge}</span>{/if}
+        </a>
+      {:else}
+        <button class="st-navRail__item" class:st-navRail__item--active={isActive(item)} type="button" disabled={item.disabled} aria-current={isActive(item) ? "page" : undefined} title={item.label} onclick={() => selectItem(item)}>
+          {#if item.icon}<span class="st-navRail__icon">{@render item.icon()}</span>{/if}
+          <span class="st-navRail__label">{item.label}</span>
+          {#if item.badge != null}<span class="st-navRail__badge">{item.badge}</span>{/if}
+        </button>
+      {/if}
+    {/each}
+    {@render children?.()}
+  </div>
+  {#if footer}
+    <footer class="st-navRail__footer">{@render footer()}</footer>
+  {/if}
+</nav>
+
+<style>
+  .st-navRail {
+    align-items: stretch;
+    background: var(--st-component-navRail-surface, var(--st-semantic-surface-raised));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: 1fr auto;
+    block-size: 100%;
+    inline-size: var(--st-component-navRail-width, 4.5rem);
+    padding: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navRail__items,
+  .st-navRail__footer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navRail__items {
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+
+  .st-navRail__item {
+    align-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: column;
+    font: inherit;
+    gap: var(--st-spacing-1, 0.25rem);
+    inline-size: 100%;
+    min-block-size: 3.25rem;
+    padding: var(--st-spacing-2, 0.5rem);
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .st-navRail__item:hover,
+  .st-navRail__item--active {
+    background: var(--st-component-navRail-activeBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-navRail__item--active {
+    border-color: var(--st-component-navRail-activeBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-navRail__item:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .st-navRail__label {
+    font-size: 0.6875rem;
+    font-weight: 650;
+    line-height: 1.1;
+  }
+
+  .st-navRail__badge {
+    background: var(--st-component-navRail-badgeBackground, var(--st-semantic-surface-inverse));
+    border-radius: 999px;
+    color: var(--st-semantic-text-inverse);
+    font-size: 0.625rem;
+    line-height: 1;
+    padding: 0.125rem 0.3rem;
+    position: absolute;
+    right: 0.25rem;
+    top: 0.25rem;
+  }
+</style>

package/dist/NavRail.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    icon?: Snippet;
+}
+export interface NavRailProps {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    onItemSelect?: (id: string) => void;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const NavRail: import("svelte").Component<NavRailProps, {}, "">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;
+//# sourceMappingURL=NavRail.svelte.d.ts.map

package/dist/NavRail.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavRail.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavRail.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsDH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/NavShell.svelte

@@ -0,0 +1,218 @@
+<script lang="ts" module>
+  /** Variante de chrome du panneau de navigation.
+   * - `rail`   : panneau latéral persistant (`<aside>` complementary) ;
+   * - `drawer` : overlay — DÉLÈGUE au composant Drawer (rôle dialog + Escape + backdrop). */
+  export type NavShellVariant = "rail" | "drawer";
+
+  /** Côté d'ancrage quand `variant="drawer"` (transmis tel quel à Drawer). */
+  export type NavShellSide = "left" | "right" | "bottom";
+</script>
+
+<script lang="ts">
+  // NavShell — CHROME d'un rail / drawer de navigation (vague 3 du NavSystem).
+  // Régions EXCLUSIVES pour que les produits ne mélangent plus nav + filtre +
+  // action + détail dans une bouillie :
+  //   • header   → titre (optionnel), flèche-retour maître→détail, sous-titre ;
+  //   • search   → slot pleine largeur (le consommateur y met un Search fluid) ;
+  //   • body     → corps SCROLLABLE (NavSection / NavList / NavTree) ;
+  //   • footer   → zone d'actions (le consommateur y met un NavActionStack).
+  // ZÉRO-ENTROPIE : en mode `drawer`, on ne réimplémente PAS l'overlay — on
+  // RÉUTILISE le composant Drawer (open/side/title + dialog/Escape/backdrop) et
+  // on lui passe le même header/search/body/footer via ses slots children/footer.
+  // En mode `rail`, panneau persistant <aside> role=complementary.
+  // Style token-only scopé, AUCUN hex.
+  import type { Snippet } from "svelte";
+  import Drawer from "./Drawer.svelte";
+
+  type NavShellProps = {
+    /** Chrome : panneau persistant (`rail`) ou overlay délégué à Drawer (`drawer`). */
+    variant?: NavShellVariant;
+    /** Titre du panneau, rendu dans le `<header>` (rail) ou via Drawer (drawer). */
+    title?: string;
+    /** Sous-titre muet sous le titre. */
+    subtitle?: string;
+    /** Affiche une flèche-retour dans l'en-tête (pattern maître→détail). */
+    back?: boolean;
+    /** Appelé au clic sur la flèche-retour. */
+    onBack?: () => void;
+    /** Libellé accessible de la flèche-retour. */
+    backLabel?: string;
+    /** Libellé accessible du panneau (aria-label de l'aside / du dialog). */
+    label?: string;
+    /** Slot de recherche rendu PLEINE LARGEUR (ex. Search fluid). */
+    search?: Snippet;
+    /** Zone d'actions en pied (ex. NavActionStack). */
+    footer?: Snippet;
+    /** Corps scrollable (NavSection / NavList / NavTree). */
+    children: Snippet;
+    /** Ouverture du tiroir quand `variant="drawer"` (bindable). */
+    open?: boolean;
+    /** Côté d'ancrage du tiroir quand `variant="drawer"`. */
+    side?: NavShellSide;
+    class?: string;
+  };
+
+  let {
+    variant = "rail",
+    title,
+    subtitle,
+    back = false,
+    onBack,
+    backLabel = "Retour",
+    label,
+    search,
+    footer,
+    children,
+    open = $bindable(false),
+    side = "left",
+    class: className
+  }: NavShellProps = $props();
+
+  const rootClasses = $derived(
+    ["st-navShell", `st-navShell--${variant}`, className].filter(Boolean).join(" ")
+  );
+</script>
+
+<!-- Contenu commun aux deux variantes : header (back/titre/sous-titre) + search
+     pleine largeur. Le corps et le footer diffèrent selon le contenant. -->
+{#snippet head()}
+  {#if back || title || subtitle}
+    <header class="st-navShell__header">
+      {#if back}
+        <button
+          type="button"
+          class="st-navShell__back"
+          aria-label={backLabel}
+          onclick={() => onBack?.()}
+        >
+          <span aria-hidden="true">&#8592;</span>
+        </button>
+      {/if}
+      {#if title || subtitle}
+        <div class="st-navShell__heading">
+          {#if title}<p class="st-navShell__title">{title}</p>{/if}
+          {#if subtitle}<p class="st-navShell__subtitle">{subtitle}</p>{/if}
+        </div>
+      {/if}
+    </header>
+  {/if}
+  {#if search}
+    <div class="st-navShell__search">{@render search()}</div>
+  {/if}
+{/snippet}
+
+{#if variant === "drawer"}
+  <!-- Overlay : on délègue le chrome (dialog/Escape/backdrop) à Drawer. Drawer
+       exige un `title` ; à défaut on retombe sur `label` puis une valeur sûre.
+       Le header/search/body passent dans `children`, le footer dans son slot. -->
+  <Drawer
+    bind:open
+    {side}
+    title={title ?? label ?? "Navigation"}
+    class={rootClasses}
+    {footer}
+  >
+    {@render head()}
+    <div class="st-navShell__body">
+      {@render children()}
+    </div>
+  </Drawer>
+{:else}
+  <!-- Panneau persistant : région complementary titrée. -->
+  <aside class={rootClasses} aria-label={label ?? title}>
+    {@render head()}
+    <div class="st-navShell__body">
+      {@render children()}
+    </div>
+    {#if footer}
+      <footer class="st-navShell__footer">
+        {@render footer()}
+      </footer>
+    {/if}
+  </aside>
+{/if}
+
+<style>
+  /* Token-only scopé. Rail = grille à 3 rangs (header+search auto / body 1fr /
+     footer auto) qui plafonne en hauteur pour que SEUL le corps scrolle. */
+  .st-navShell--rail {
+    background: var(--st-component-navShell-surface, var(--st-semantic-surface-raised));
+    border-color: var(--st-component-navShell-border, var(--st-semantic-border-subtle));
+    border-right-style: solid;
+    border-right-width: 1px;
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    inline-size: var(--st-component-navShell-width, 18rem);
+    max-inline-size: 100%;
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-navShell__header {
+    align-items: center;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    padding-block-end: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-navShell__back {
+    align-items: center;
+    background: transparent;
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-radius-small, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 2rem;
+    justify-content: center;
+    width: 2rem;
+  }
+
+  .st-navShell__heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    min-inline-size: 0;
+  }
+
+  .st-navShell__title {
+    font-size: var(--st-component-navShell-titleSize, 1rem);
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  .st-navShell__subtitle {
+    color: var(--st-semantic-text-secondary);
+    font-size: var(--st-component-navShell-subtitleSize, 0.8125rem);
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  /* Search pleine largeur du panneau. */
+  .st-navShell__search {
+    display: block;
+    inline-size: 100%;
+    padding-block-end: var(--st-spacing-3, 0.75rem);
+  }
+
+  /* Le corps est la SEULE région scrollable (1fr en rail, overflow en drawer). */
+  .st-navShell__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+
+  .st-navShell__footer {
+    border-color: var(--st-component-navShell-border, var(--st-semantic-border-subtle));
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    margin-block-start: var(--st-spacing-3, 0.75rem);
+    padding-block-start: var(--st-spacing-3, 0.75rem);
+  }
+</style>

package/dist/NavShell.svelte.d.ts

@@ -0,0 +1,38 @@
+/** Variante de chrome du panneau de navigation.
+ * - `rail`   : panneau latéral persistant (`<aside>` complementary) ;
+ * - `drawer` : overlay — DÉLÈGUE au composant Drawer (rôle dialog + Escape + backdrop). */
+export type NavShellVariant = "rail" | "drawer";
+/** Côté d'ancrage quand `variant="drawer"` (transmis tel quel à Drawer). */
+export type NavShellSide = "left" | "right" | "bottom";
+import type { Snippet } from "svelte";
+type NavShellProps = {
+    /** Chrome : panneau persistant (`rail`) ou overlay délégué à Drawer (`drawer`). */
+    variant?: NavShellVariant;
+    /** Titre du panneau, rendu dans le `<header>` (rail) ou via Drawer (drawer). */
+    title?: string;
+    /** Sous-titre muet sous le titre. */
+    subtitle?: string;
+    /** Affiche une flèche-retour dans l'en-tête (pattern maître→détail). */
+    back?: boolean;
+    /** Appelé au clic sur la flèche-retour. */
+    onBack?: () => void;
+    /** Libellé accessible de la flèche-retour. */
+    backLabel?: string;
+    /** Libellé accessible du panneau (aria-label de l'aside / du dialog). */
+    label?: string;
+    /** Slot de recherche rendu PLEINE LARGEUR (ex. Search fluid). */
+    search?: Snippet;
+    /** Zone d'actions en pied (ex. NavActionStack). */
+    footer?: Snippet;
+    /** Corps scrollable (NavSection / NavList / NavTree). */
+    children: Snippet;
+    /** Ouverture du tiroir quand `variant="drawer"` (bindable). */
+    open?: boolean;
+    /** Côté d'ancrage du tiroir quand `variant="drawer"`. */
+    side?: NavShellSide;
+    class?: string;
+};
+declare const NavShell: import("svelte").Component<NavShellProps, {}, "open">;
+type NavShell = ReturnType<typeof NavShell>;
+export default NavShell;
+//# sourceMappingURL=NavShell.svelte.d.ts.map

package/dist/NavShell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavShell.svelte.ts"],"names":[],"mappings":"AAGE;;2FAE2F;AAC3F,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,4EAA4E;AAC5E,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAezD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,aAAa,GAAG;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,QAAQ,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0FJ,QAAA,MAAM,QAAQ,uDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/SelectableRow.svelte

@@ -43,6 +43,8 @@
     disabled?: boolean;
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
+    /** Native link target. When set on a standalone row, the row renders as an anchor. */
+    href?: string;
     /**
      * ARIA role for the standalone row. Defaults to "button" for standalone use —
      * "option" is only valid inside a listbox and would be invalid without one.
@@ -82,6 +84,7 @@
     onselect,
     disabled = false,
     value,
+    href,
     role = "button",
     accentBar = false,
     leading,
@@ -122,7 +125,8 @@
   const isSelected = $derived(list && el ? list.isSelected(el) : selected);
 
   // Effective role: a managed row is always an "option" inside the listbox.
-  const effectiveRole = $derived(list ? list.itemRole : role);
+  const effectiveRole = $derived(list ? list.itemRole : href ? undefined : role);
+  const rowTag = $derived(href ? "a" : "div");
 
   // Roving tabindex: in a list, exactly one enabled row is the tab stop (0), the
   // rest are -1. Standalone enabled rows are always tabbable (0). Disabled = -1.
@@ -143,8 +147,12 @@
       .join(" ")
   );
 
-  function activate() {
-    if (disabled) return;
+  function activate(event?: MouseEvent) {
+    if (disabled) {
+      event?.preventDefault();
+      event?.stopPropagation();
+      return;
+    }
     if (list && el) {
       list.activate(el);
       return;
@@ -155,6 +163,7 @@
 
   function handleKeydown(e: KeyboardEvent) {
     if (disabled) return;
+    if (href && !list) return;
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       activate();
@@ -186,9 +195,11 @@
      tabindex is correct; the role is dynamic, which the static a11y check cannot
      verify, hence the targeted ignore. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
+<svelte:element
+  this={rowTag}
   bind:this={el}
   class={classes}
+  href={href && !disabled ? href : undefined}
   role={effectiveRole}
   aria-selected={effectiveRole === "option" ? isSelected : undefined}
   aria-pressed={effectiveRole === "button" ? isSelected : undefined}
@@ -216,7 +227,7 @@
   {#if trailing}
     <span class="st-selectableRow__trailing">{@render trailing()}</span>
   {/if}
-</div>
+</svelte:element>
 
 <style>
   /* Compact, full-width selectable list/rail row. By DEFAULT the selected state

package/dist/SelectableRow.svelte.d.ts

@@ -39,6 +39,8 @@ export type SelectableRowProps = {
     disabled?: boolean;
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
+    /** Native link target. When set on a standalone row, the row renders as an anchor. */
+    href?: string;
     /**
      * ARIA role for the standalone row. Defaults to "button" for standalone use —
      * "option" is only valid inside a listbox and would be invalid without one.

package/dist/SelectableRow.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,wIAAwI;IACxI,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzF,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2IJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,wIAAwI;IACxI,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzF,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkJJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/UtilityPanel.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type UtilityPanelMode = "reserve" | "overlay" | "floating";
+  export type UtilityPanelSide = "left" | "right" | "bottom";
+
+  export interface UtilityPanelProps {
+    mode?: UtilityPanelMode;
+    side?: UtilityPanelSide;
+    title?: string;
+    label?: string;
+    collapsed?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    mode = "reserve",
+    side = "right",
+    title,
+    label,
+    collapsed = false,
+    header,
+    footer,
+    children,
+    class: className
+  }: UtilityPanelProps = $props();
+
+  const classes = $derived(["st-utilityPanel", `st-utilityPanel--${mode}`, `st-utilityPanel--${side}`, collapsed && "st-utilityPanel--collapsed", className].filter(Boolean).join(" "));
+</script>
+
+<aside class={classes} aria-label={label ?? title ?? "Utility panel"} data-mode={mode} data-side={side}>
+  {#if header || title}
+    <header class="st-utilityPanel__header">
+      {#if header}{@render header()}{:else}<h2 class="st-utilityPanel__title">{title}</h2>{/if}
+    </header>
+  {/if}
+  {#if !collapsed}
+    <div class="st-utilityPanel__body">{@render children?.()}</div>
+    {#if footer}<footer class="st-utilityPanel__footer">{@render footer()}</footer>{/if}
+  {/if}
+</aside>
+
+<style>
+  .st-utilityPanel {
+    background: var(--st-component-utilityPanel-surface, var(--st-semantic-surface-raised));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .st-utilityPanel--floating,
+  .st-utilityPanel--overlay {
+    box-shadow: var(--st-component-utilityPanel-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
+  }
+
+  .st-utilityPanel__header,
+  .st-utilityPanel__footer {
+    border-color: var(--st-component-utilityPanel-border, var(--st-semantic-border-subtle));
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-utilityPanel__header {
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+  }
+
+  .st-utilityPanel__footer {
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+  }
+
+  .st-utilityPanel__title {
+    font-size: 1rem;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  .st-utilityPanel__body {
+    min-block-size: 0;
+    overflow: auto;
+  }
+</style>

package/dist/UtilityPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+export type UtilityPanelMode = "reserve" | "overlay" | "floating";
+export type UtilityPanelSide = "left" | "right" | "bottom";
+export interface UtilityPanelProps {
+    mode?: UtilityPanelMode;
+    side?: UtilityPanelSide;
+    title?: string;
+    label?: string;
+    collapsed?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const UtilityPanel: import("svelte").Component<UtilityPanelProps, {}, "">;
+type UtilityPanel = ReturnType<typeof UtilityPanel>;
+export default UtilityPanel;
+//# sourceMappingURL=UtilityPanel.svelte.d.ts.map

package/dist/UtilityPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityPanel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/UtilityPanel.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/index.d.ts

@@ -178,6 +178,16 @@ export { default as SelectableRow } from "./SelectableRow.svelte";
 export { default as SelectionChip } from "./SelectionChip.svelte";
 export { default as SelectableList } from "./SelectableList.svelte";
 export { default as SideNav } from "./SideNav.svelte";
+export { default as NavShell } from "./NavShell.svelte";
+export type { NavShellSide, NavShellVariant } from "./NavShell.svelte";
+export { default as NavRail } from "./NavRail.svelte";
+export type { NavRailItem, NavRailProps } from "./NavRail.svelte";
+export { default as NavDrawer } from "./NavDrawer.svelte";
+export type { NavDrawerProps } from "./NavDrawer.svelte";
+export { default as ContextPanel } from "./ContextPanel.svelte";
+export type { ContextPanelProps } from "./ContextPanel.svelte";
+export { default as UtilityPanel } from "./UtilityPanel.svelte";
+export type { UtilityPanelMode, UtilityPanelProps, UtilityPanelSide } from "./UtilityPanel.svelte";
 export { default as SkeletonText } from "./SkeletonText.svelte";
 export { default as SkipLink } from "./SkipLink.svelte";
 export { default as SlideIndicator } from "./SlideIndicator.svelte";
@@ -196,6 +206,7 @@ export { default as Tabs } from "./Tabs.svelte";
 export { default as Tag } from "./Tag.svelte";
 export { default as ThemeProvider } from "./ThemeProvider.svelte";
 export { default as AppShell } from "./AppShell.svelte";
+export type { AppShellProps, AppShellUtilityMode, AppShellUtilitySide, AppShellVariant } from "./AppShell.svelte";
 export { default as IdentityButton } from "./IdentityButton.svelte";
 export type { SiteConfig, SiteNavItem, ThemeOption, ColorMode, ActionMode } from "./site-config";
 export { SITE_CONFIG_SCHEMA_VERSION, SHELL_TOKEN_CONTRACT } from "./site-config";