@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte

@@ -29,19 +29,20 @@ $effect(() => untrack(() => {
 
 <style>.media-viewer-dialog {
   --_media-viewer-dialog--background--opacity: var(--media-viewer-dialog--background--opacity, 0.6);
-  --sc-kit--dialog-close-button--color: #ffffff;
+  --_media-viewer-dialog--background-color: var(--sc-kit--media-viewer-dialog--background-color, 0 0 0);
+  --sc-kit--dialog-close-button--color: var(--sc-kit--color--text--on-accent);
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, var(--_media-viewer-dialog--background--opacity));
+  background: rgb(var(--_media-viewer-dialog--background-color)/var(--_media-viewer-dialog--background--opacity));
   position: relative;
-  padding: 0.625rem;
+  padding: var(--sc-kit--space--3);
 }
 .media-viewer-dialog__close {
   position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
+  top: var(--sc-kit--space--3);
+  right: var(--sc-kit--space--3);
   z-index: 10;
 }
 .media-viewer-dialog__content {

package/dist/ui/media-viewer-dialog/index.d.ts

@@ -9,7 +9,7 @@ import type { MediaViewerData } from './types';
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
  * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
- * - `host` — mount target for the dialog element (default `document.body`)
+ * - `containerId` — routes the dialog to a `<DialogHost id={containerId}>`. Default `''`.
  */
-export declare const openMediaViewer: (data: MediaViewerData, host?: ParentNode) => Promise<DialogResult<void>>;
+export declare const openMediaViewer: (data: MediaViewerData, containerId?: string) => Promise<DialogResult<void>>;
 export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';

package/dist/ui/media-viewer-dialog/index.js

@@ -9,12 +9,12 @@ import { default as MediaViewerDialog } from './cmp.media-viewer-dialog.svelte';
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
  * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
- * - `host` — mount target for the dialog element (default `document.body`)
+ * - `containerId` — routes the dialog to a `<DialogHost id={containerId}>`. Default `''`.
  */
-export const openMediaViewer = (data, host) => {
+export const openMediaViewer = (data, containerId) => {
     return Dialogs.open({
         view: MediaViewerDialog,
         data,
-        host
+        containerId
     });
 };

package/dist/ui/navigation/cmp.nav-menu-account-row.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+const { name, subtitle, avatar, secondaryAvatar, position = 'top' } = $props();
+</script>
+
+<div class="nav-menu-account-row" class:nav-menu-account-row--dual={secondaryAvatar} class:nav-menu-account-row--top={position === 'top'}>
+  <span class="nav-menu-account-row__avatar-stack">
+    <span class="nav-menu-account-row__avatar nav-menu-account-row__avatar--primary">
+      {@render avatar()}
+    </span>
+    {#if secondaryAvatar}
+      <span class="nav-menu-account-row__avatar nav-menu-account-row__avatar--secondary">
+        {@render secondaryAvatar()}
+      </span>
+    {/if}
+  </span>
+  <span class="nav-menu-account-row__info">
+    <span class="nav-menu-account-row__name">{name}</span>
+    {#if subtitle}
+      <span class="nav-menu-account-row__subtitle">{subtitle}</span>
+    {/if}
+  </span>
+  <span class="nav-menu-account-row__chevron">
+    <Icon src={IconChevronDown} />
+  </span>
+</div>
+
+<!--
+@component
+NavMenuAccountRow — workspace / account trigger row for the top of a `NavMenu` panel. Purely
+presentational: render it inside a `Popover` `trigger` snippet to make it a real switcher. Layout:
+32px avatar on the left, 2-line text (name + subtitle), chevron-down on the right. It owns its own
+padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` on the `Popover`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--nav-menu-account-row--avatar-size` | Primary avatar box | `32px` |
+| `--sc-kit--nav-menu-account-row--secondary-avatar-size` | Secondary badge box | `14px` |
+-->
+<style>.nav-menu-account-row {
+  --_avatar-size: var(--sc-kit--nav-menu-account-row--avatar-size, 2rem);
+  --_secondary-size: var(--sc-kit--nav-menu-account-row--secondary-avatar-size, 0.875rem);
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--4) var(--sc-kit--space--2) var(--sc-kit--space--6);
+  border-radius: var(--sc-kit--radius--sm);
+  text-align: left;
+}
+.nav-menu-account-row:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
+
+.nav-menu-account-row--top {
+  margin-top: var(--sc-kit--space--4);
+}
+
+.nav-menu-account-row__avatar-stack {
+  position: relative;
+  display: inline-flex;
+  width: var(--_avatar-size);
+  height: var(--_avatar-size);
+  flex-shrink: 0;
+}
+
+.nav-menu-account-row__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--sc-kit--color--bg--field-alt);
+  color: var(--sc-kit--color--text--on-accent);
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.nav-menu-account-row__avatar :global(img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.nav-menu-account-row__avatar--primary {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--sc-kit--radius--sm);
+}
+
+.nav-menu-account-row--dual .nav-menu-account-row__avatar--primary {
+  border-radius: var(--sc-kit--radius--circle);
+}
+
+.nav-menu-account-row__avatar--secondary {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: var(--_secondary-size);
+  height: var(--_secondary-size);
+  border-radius: var(--sc-kit--radius--sm);
+  box-shadow: 0 0 0 1.5px var(--sc-kit--color--bg--panel);
+  font-size: 0.5rem;
+}
+
+.nav-menu-account-row__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: 0.125rem;
+}
+
+.nav-menu-account-row__name {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--color--text--primary);
+  line-height: var(--sc-kit--leading--tight);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.nav-menu-account-row__subtitle {
+  font-size: 0.625rem;
+  color: var(--sc-kit--color--text--secondary);
+  line-height: var(--sc-kit--leading--tight);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.nav-menu-account-row__chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sc-kit--color--text--secondary);
+}
+.nav-menu-account-row__chevron :global(svg) {
+  width: 0.75rem;
+  height: 0.75rem;
+  fill: currentColor;
+}</style>

package/dist/ui/navigation/cmp.nav-menu-account-row.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Primary line — workspace / account name. Truncates with ellipsis. */
+    name: string;
+    /** Secondary line — workspace type, role, email, etc. Truncates. */
+    subtitle?: string;
+    /** Primary avatar slot (32 × 32px). Renders as a rounded square by default; becomes a circle when `secondaryAvatar` is also provided (org-with-user pattern). */
+    avatar: Snippet;
+    /** Optional secondary avatar — square badge layered on the bottom-right of the primary. Use it to show the active user when the primary is the workspace / organization. */
+    secondaryAvatar?: Snippet;
+    /** Placement within the menu — `top` adds spacing above so the row clears the panel's top edge; `bottom` leaves it flush (footer use). @default 'top' */
+    position?: 'top' | 'bottom';
+};
+/**
+ * NavMenuAccountRow — workspace / account trigger row for the top of a `NavMenu` panel. Purely
+ * presentational: render it inside a `Popover` `trigger` snippet to make it a real switcher. Layout:
+ * 32px avatar on the left, 2-line text (name + subtitle), chevron-down on the right. It owns its own
+ * padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` on the `Popover`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--nav-menu-account-row--avatar-size` | Primary avatar box | `32px` |
+ * | `--sc-kit--nav-menu-account-row--secondary-avatar-size` | Secondary badge box | `14px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/navigation/cmp.nav-menu-divider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts"></script>
+
+<div class="nav-menu-divider" role="separator"></div>
+
+<!--
+@component
+NavMenuDivider — 1px horizontal separator between `NavMenuGroup`s, inset from each edge so the line
+doesn't touch the panel walls.
+-->
+<style>.nav-menu-divider {
+  height: 1px;
+  margin-inline: var(--sc-kit--space--4);
+  background: var(--sc-kit--color--border);
+}</style>

package/dist/ui/navigation/cmp.nav-menu-divider.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * NavMenuDivider — 1px horizontal separator between `NavMenuGroup`s, inset from each edge so the line
+ * doesn't touch the panel walls.
+ */
+declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Cmp = InstanceType<typeof Cmp>;
+export default Cmp;

package/dist/ui/navigation/cmp.nav-menu-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+<div class="nav-menu-group">
+  {@render children()}
+</div>
+
+<!--
+@component
+NavMenuGroup — visual grouping wrapper. Stacks a `NavMenuHeader` and `NavMenuItem`s in a flex
+column and adds vertical spacing between adjacent groups.
+-->
+<style>.nav-menu-group {
+  display: flex;
+  flex-direction: column;
+}</style>

package/dist/ui/{form-group/cmp.form-group.svelte.d.ts → navigation/cmp.nav-menu-group.svelte.d.ts}

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Remove bottom margin */
-    noMargin?: boolean;
     children: Snippet;
 };
+/**
+ * NavMenuGroup — visual grouping wrapper. Stacks a `NavMenuHeader` and `NavMenuItem`s in a flex
+ * column and adds vertical spacing between adjacent groups.
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/navigation/cmp.nav-menu-header.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">const { label } = $props();
+</script>
+
+<div class="nav-menu-header">{label}</div>
+
+<!--
+@component
+NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Semibold, 14px. Use one per
+`NavMenuGroup`.
+-->
+<style>.nav-menu-header {
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--5);
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--sc-kit--color--text--secondary);
+}</style>

package/dist/ui/navigation/cmp.nav-menu-header.svelte.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    label: string;
+};
+/**
+ * NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Semibold, 14px. Use one per
+ * `NavMenuGroup`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/navigation/cmp.nav-menu-item.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">import { IconSlot } from '../icon';
+const { label, icon, href, active = false, disabled = false, badge, target, rel, on } = $props();
+const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
+const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
+const handleClick = () => {
+    if (disabled) {
+        return;
+    }
+    on?.click?.();
+};
+</script>
+
+{#snippet content()}
+  <span class="nav-menu-item__icon" aria-hidden="true">
+    <IconSlot icon={icon} />
+    {#if hasBadge}
+      <span class="nav-menu-item__badge">{badgeText}</span>
+    {/if}
+  </span>
+  <span class="nav-menu-item__label">{label}</span>
+{/snippet}
+
+{#if href}
+  <a
+    class="nav-menu-item"
+    class:nav-menu-item--active={active}
+    class:nav-menu-item--disabled={disabled}
+    href={href}
+    target={target}
+    rel={rel}
+    aria-current={active ? 'page' : undefined}
+    aria-disabled={disabled || undefined}
+    tabindex={disabled ? -1 : undefined}>
+    {@render content()}
+  </a>
+{:else}
+  <button
+    type="button"
+    class="nav-menu-item"
+    class:nav-menu-item--active={active}
+    class:nav-menu-item--disabled={disabled}
+    disabled={disabled}
+    aria-current={active ? 'page' : undefined}
+    onclick={handleClick}>
+    {@render content()}
+  </button>
+{/if}
+
+<!--
+@component
+NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
+the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
+Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
+(`active` prop) — wire it to your router's pathname matching upstream.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--nav-menu-item--gap` | Gap between icon and label | `18px` |
+| `--sc-kit--nav-menu-item--icon-size` | Icon box size | `20px` |
+| `--sc-kit--nav-menu-item--radius` | Row radius | `--sc-kit--radius--sm` |
+| `--sc-kit--nav-menu-item--color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
+| `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
+| `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
+| `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
+-->
+<style>.nav-menu-item {
+  --_nav-menu-item--gap: var(--sc-kit--nav-menu-item--gap, 1.125rem);
+  --_nav-menu-item--icon-size: var(--sc-kit--nav-menu-item--icon-size, 1.25rem);
+  --_nav-menu-item--radius: var(--sc-kit--nav-menu-item--radius, var(--sc-kit--radius--sm));
+  --_nav-menu-item--color: var(--sc-kit--nav-menu-item--color, var(--sc-kit--color--text--secondary));
+  --_nav-menu-item--color-active: var(--sc-kit--nav-menu-item--color--active, var(--sc-kit--color--text--primary));
+  --_nav-menu-item--color-disabled: var(--sc-kit--nav-menu-item--color--disabled, var(--sc-kit--color--text--muted));
+  --_nav-menu-item--background-hover: var(--sc-kit--nav-menu-item--background--hover, var(--sc-kit--color--bg--hover));
+  --_nav-menu-item--background-active: var(--sc-kit--nav-menu-item--background--active, var(--sc-kit--color--bg--menu-active));
+  --_nav-menu-item--badge-background: var(--sc-kit--nav-menu-item--badge--background, var(--sc-kit--color--accent));
+  --_nav-menu-item--badge-color: var(--sc-kit--nav-menu-item--badge--color, var(--sc-kit--color--text--on-accent));
+  display: flex;
+  align-items: center;
+  gap: var(--_nav-menu-item--gap);
+  width: 100%;
+  padding: 0.375rem var(--sc-kit--space--5);
+  background: none;
+  border: none;
+  border-radius: var(--_nav-menu-item--radius);
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--_nav-menu-item--color);
+  font-family: inherit;
+  text-align: left;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.nav-menu-item:hover:not(.nav-menu-item--active):not(.nav-menu-item--disabled):not(:disabled) {
+  background: var(--_nav-menu-item--background-hover);
+}
+.nav-menu-item:hover:not(.nav-menu-item--disabled):not(:disabled), .nav-menu-item--active {
+  color: var(--_nav-menu-item--color-active);
+}
+.nav-menu-item--active {
+  background: var(--_nav-menu-item--background-active);
+}
+.nav-menu-item--disabled, .nav-menu-item:disabled {
+  color: var(--_nav-menu-item--color-disabled);
+  cursor: default;
+}
+.nav-menu-item:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+
+.nav-menu-item__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--_nav-menu-item--icon-size);
+  height: var(--_nav-menu-item--icon-size);
+  line-height: 0;
+}
+.nav-menu-item__icon :global(svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.nav-menu-item__badge {
+  position: absolute;
+  top: -0.375rem;
+  right: -0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding-inline: 0.25rem;
+  border-radius: 0.5rem;
+  background: var(--_nav-menu-item--badge-background);
+  color: var(--_nav-menu-item--badge-color);
+  font-size: 0.625rem;
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--tight);
+}
+
+.nav-menu-item__label {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--sc-kit--font-size--md);
+  line-height: 1.5rem;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type IconProp } from '../icon';
+type Props = {
+    label: string;
+    /** Icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon: IconProp;
+    /** Render as `<a href>`. Mutually exclusive with `on.click`. */
+    href?: string;
+    /** Highlight as the current item. Consumer-controlled. @default false */
+    active?: boolean;
+    disabled?: boolean;
+    /** Notification badge on the icon (top-right corner). Numbers > 99 render as `99+`; strings render as-is. */
+    badge?: number | string;
+    /** Anchor target — only relevant when `href` is set. */
+    target?: string;
+    /** Anchor rel — only relevant when `href` is set. */
+    rel?: string;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
+ * the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
+ * Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
+ * (`active` prop) — wire it to your router's pathname matching upstream.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--nav-menu-item--gap` | Gap between icon and label | `18px` |
+ * | `--sc-kit--nav-menu-item--icon-size` | Icon box size | `20px` |
+ * | `--sc-kit--nav-menu-item--radius` | Row radius | `--sc-kit--radius--sm` |
+ * | `--sc-kit--nav-menu-item--color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
+ * | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
+ * | `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/navigation/cmp.nav-menu.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">const { header, children, footer } = $props();
+export {};
+</script>
+
+<div class="nav-menu" role="navigation">
+  {#if header}
+    <div class="nav-menu__header">
+      {@render header()}
+    </div>
+  {/if}
+  <div class="nav-menu__body">
+    {@render children()}
+  </div>
+  {#if footer}
+    <div class="nav-menu__footer">
+      {@render footer()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+NavMenu — outer 240px panel for second-level navigation. Anchors to the right of `NavRail` in app
+shells, or stands alone. Slot-driven and presentational — does not own active-route detection,
+routing, or feature gating. Compose with `NavMenuGroup`, `NavMenuHeader`, `NavMenuItem`,
+`NavMenuDivider`, and `NavMenuAccountRow`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--nav-menu--width` | Panel width | `240px` |
+| `--sc-kit--nav-menu--background` | Panel background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--nav-menu--border-color` | Right (panel) border color | `--sc-kit--color--border` |
+| `--sc-kit--nav-menu--header--border-color` | Header bottom-border color | `transparent` |
+| `--sc-kit--nav-menu--footer--border-color` | Footer top-border color | `--sc-kit--color--border` |
+-->
+<style>.nav-menu {
+  --_nav-menu--width: var(--sc-kit--nav-menu--width, 15rem);
+  --_nav-menu--background: var(--sc-kit--nav-menu--background, var(--sc-kit--color--bg--panel));
+  --_nav-menu--border-color: var(--sc-kit--nav-menu--border-color, var(--sc-kit--color--border));
+  --_nav-menu--header-border-color: var(--sc-kit--nav-menu--header--border-color, transparent);
+  --_nav-menu--footer-border-color: var(--sc-kit--nav-menu--footer--border-color, var(--sc-kit--color--border));
+  display: flex;
+  flex-direction: column;
+  width: var(--_nav-menu--width);
+  flex-shrink: 0;
+  height: 100%;
+  background: var(--_nav-menu--background);
+  border-right: 1px solid var(--_nav-menu--border-color);
+  overflow: hidden;
+}
+
+.nav-menu__header {
+  flex-shrink: 0;
+  padding-inline: var(--sc-kit--space--2);
+  border-bottom: 1px solid var(--_nav-menu--header-border-color);
+}
+
+.nav-menu__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--3);
+  overflow-y: auto;
+  padding: var(--sc-kit--space--2);
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.nav-menu__body:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.nav-menu__body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.nav-menu__body::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.nav-menu__body::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .nav-menu__body {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+
+.nav-menu__footer {
+  flex-shrink: 0;
+  padding-inline: var(--sc-kit--space--2);
+  border-top: 1px solid var(--_nav-menu--footer-border-color);
+}</style>

package/dist/ui/navigation/cmp.nav-menu.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Optional header block (e.g. workspace switcher). Rendered above the scroll body. */
+    header?: Snippet;
+    /** Body — typically a stack of `NavMenuGroup`s with optional `NavMenuDivider`s between. */
+    children: Snippet;
+    /** Optional footer block (e.g. account row, support link). */
+    footer?: Snippet;
+};
+/**
+ * NavMenu — outer 240px panel for second-level navigation. Anchors to the right of `NavRail` in app
+ * shells, or stands alone. Slot-driven and presentational — does not own active-route detection,
+ * routing, or feature gating. Compose with `NavMenuGroup`, `NavMenuHeader`, `NavMenuItem`,
+ * `NavMenuDivider`, and `NavMenuAccountRow`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--nav-menu--width` | Panel width | `240px` |
+ * | `--sc-kit--nav-menu--background` | Panel background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--nav-menu--border-color` | Right (panel) border color | `--sc-kit--color--border` |
+ * | `--sc-kit--nav-menu--header--border-color` | Header bottom-border color | `transparent` |
+ * | `--sc-kit--nav-menu--footer--border-color` | Footer top-border color | `--sc-kit--color--border` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;