@ui-organized/svelte 0.0.0-stage → 6.0.0

package/dist/components/Menubar/Menubar.fixture.svelte.d.ts

@@ -0,0 +1,20 @@
+import Menubar from "./Menubar.svelte";
+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;
+}
+declare const Menubar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Menubar = InstanceType<typeof Menubar>;
+export default Menubar;
+//# sourceMappingURL=Menubar.fixture.svelte.d.ts.map

package/dist/components/Menubar/Menubar.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menubar/Menubar.fixture.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAwBvC,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,OAAO;;kBAA+E,CAAC;AAC3E,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/Menubar/Menubar.svelte

@@ -0,0 +1,128 @@
+<!--
+  Horizontal container for a row of menus. Place the existing `Menu` components
+  inside it — one `<Menu>` per top-level entry — styling each `MenuTrigger` with
+  the `menubar__trigger` class:
+
+  ```svelte
+  <Menubar>
+    <Menu>
+      <MenuTrigger class="menubar__trigger">File</MenuTrigger>
+      <MenuContent>…</MenuContent>
+    </Menu>
+  </Menubar>
+  ```
+
+  Ark UI has no Menubar primitive and the menus inside are independent Ark
+  machines, so the bar supplies the part a menubar owns and a lone menu can't:
+  its triggers are menuitems (see ./menubarContext.ts) and arrow keys move
+  between them as one tab stop. Opening and navigating within a menu is still
+  each menu's own business.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { setInMenubar } from "./menubarContext.js";
+  import type { MenubarProps } from "./Menubar.types.js";
+  import "@ui-organized/core/components/Menubar/Menubar.css";
+
+  let {
+    orientation = "horizontal",
+    class: className,
+    onkeydown,
+    onfocusin,
+    children,
+    ...rest
+  }: MenubarProps = $props();
+
+  setInMenubar();
+
+  let root = $state<HTMLDivElement | null>(null);
+
+  // `data-menubar-item`, not `[role="menuitem"]` — a menu whose content is
+  // portalled *into* the bar (a docs preview that contains its own overlays)
+  // would otherwise put that menu's own items in range. MenuTrigger sets it.
+  const triggers = (): HTMLElement[] =>
+    Array.from(root?.querySelectorAll<HTMLElement>("[data-menubar-item]") ?? []);
+
+  /**
+   * Roving tabindex — a menubar is a single tab stop, and arrows move within it.
+   *
+   * Applied to the DOM rather than passed down, because the triggers belong to
+   * separate Ark machines and the bar has no handle on their props. Nothing runs
+   * during SSR, which is deliberate: React's equivalent is an effect, so neither
+   * library emits a `tabindex` on the server and the two agree there too.
+   */
+  const rove = (focused?: HTMLElement) => {
+    const items = triggers();
+    const active = focused ?? items.find((item) => item.tabIndex === 0) ?? items[0];
+    for (const item of items) item.tabIndex = item === active ? 0 : -1;
+  };
+
+  $effect(() => {
+    const el = root;
+    if (!el) return;
+    rove();
+    /**
+     * React re-runs its effect on `children`, which is a fresh object every
+     * render; a Svelte snippet is stable, so reading it here would fire once and
+     * never again. Watching the DOM is the equivalent that actually holds: a
+     * menu added to the bar later arrives with the browser's default tabindex
+     * and would become a second tab stop inside a control that is meant to be
+     * one.
+     *
+     * `childList` only — observing attributes would see `rove` write `tabindex`
+     * and call itself forever.
+     */
+    const observer = new MutationObserver(() => rove());
+    observer.observe(el, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  });
+
+  const handleKeydown = (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => {
+    // The caller's own handler runs first, the order React has, so a consumer
+    // can claim a key by calling preventDefault on it.
+    onkeydown?.(event);
+    if (event.defaultPrevented) return;
+
+    const [back, forward] =
+      orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+    const items = triggers();
+    const from = items.indexOf(document.activeElement as HTMLElement);
+    if (from === -1 || items.length === 0) return;
+
+    let to: number;
+    if (event.key === forward) to = (from + 1) % items.length;
+    else if (event.key === back) to = (from - 1 + items.length) % items.length;
+    else if (event.key === "Home") to = 0;
+    else if (event.key === "End") to = items.length - 1;
+    else return;
+
+    event.preventDefault();
+    const next = items[to];
+    if (!next) return;
+    rove(next);
+    next.focus();
+  };
+
+  // `focusin`, not `focus`: React's `onFocus` is its own synthetic event and
+  // does bubble, so the DOM equivalent of the handler being ported is the
+  // bubbling one. `focus` fires only on the element itself and would never see a
+  // trigger — the roving state would then never follow a click.
+  const handleFocusin = (event: FocusEvent & { currentTarget: HTMLDivElement }) => {
+    onfocusin?.(event);
+    const item = (event.target as HTMLElement | null)?.closest<HTMLElement>("[data-menubar-item]");
+    if (item) rove(item);
+  };
+</script>
+
+<div
+  bind:this={root}
+  role="menubar"
+  aria-orientation={orientation}
+  data-orientation={orientation}
+  class={clsx("menubar", className)}
+  onkeydown={handleKeydown}
+  onfocusin={handleFocusin}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/Menubar/Menubar.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { MenubarProps } from "./Menubar.types.js";
+import "@ui-organized/core/components/Menubar/Menubar.css";
+declare const Menubar: import("svelte").Component<MenubarProps, {}, "">;
+type Menubar = ReturnType<typeof Menubar>;
+export default Menubar;
+//# sourceMappingURL=Menubar.svelte.d.ts.map

package/dist/components/Menubar/Menubar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menubar/Menubar.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAyG3D,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Menubar/Menubar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Menubar.test.d.ts.map

package/dist/components/Menubar/Menubar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.test.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menubar/Menubar.test.ts"],"names":[],"mappings":""}

package/dist/components/Menubar/Menubar.test.js

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+import { tick } from "svelte";
+import Fixture from "./Menubar.fixture.svelte";
+/**
+ * The half of the menubar nothing else can see.
+ *
+ * The parity gate compares static markup, and the roving tabindex is applied
+ * from an effect — so on the server neither library emits a `tabindex` and the
+ * gate can only agree about its absence. There is no browser scenario for
+ * Menubar either. Everything asserted here therefore has exactly one guard.
+ *
+ * The trap this exists for: React's `onFocus` is a synthetic event and *bubbles*,
+ * so the direct port of its handler — `onfocus` on the container — is silently
+ * dead. `focus` fires only on the element it targets, so a bar listening for it
+ * never learns that one of its triggers was focused and the roving state stops
+ * following the user. Nothing throws; tabbing simply lands on the wrong trigger.
+ */
+describe("Menubar", () => {
+    const itemsOf = (container) => [
+        ...container.querySelectorAll("[data-menubar-item]"),
+    ];
+    it("turns its menu triggers into menuitems", () => {
+        // `role="menubar"` may only contain menuitems, and a trigger cannot know it
+        // sits in a bar — the bar announces itself on context.
+        const { container } = render(Fixture);
+        const items = itemsOf(container);
+        expect(items).toHaveLength(2);
+        for (const item of items)
+            expect(item.getAttribute("role")).toBe("menuitem");
+    });
+    it("is a single tab stop", async () => {
+        const { container } = render(Fixture);
+        await tick();
+        expect(itemsOf(container).map((item) => item.tabIndex)).toEqual([0, -1]);
+    });
+    it("moves the tab stop to whichever trigger takes focus", async () => {
+        const { container } = render(Fixture);
+        await tick();
+        const items = itemsOf(container);
+        items[1].focus();
+        await tick();
+        expect(items.map((item) => item.tabIndex)).toEqual([-1, 0]);
+    });
+    it("moves focus between triggers with the arrow keys, and wraps", async () => {
+        const { container } = render(Fixture);
+        await tick();
+        const bar = container.querySelector('[role="menubar"]');
+        const items = itemsOf(container);
+        items[0].focus();
+        await tick();
+        const arrow = (key) => bar.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+        arrow("ArrowRight");
+        expect(document.activeElement).toBe(items[1]);
+        // Past the end and round to the front: a bar is a ring, not a list.
+        arrow("ArrowRight");
+        expect(document.activeElement).toBe(items[0]);
+        arrow("End");
+        expect(document.activeElement).toBe(items[1]);
+        arrow("Home");
+        expect(document.activeElement).toBe(items[0]);
+    });
+});

package/dist/components/Menubar/Menubar.types.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Layout orientation. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=Menubar.types.d.ts.map

package/dist/components/Menubar/Menubar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menubar/Menubar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACjF,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Menubar/Menubar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Menubar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Menubar } from "./Menubar.svelte";
+export type { MenubarProps } from "./Menubar.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Menubar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menubar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Menubar/index.js

@@ -0,0 +1 @@
+export { default as Menubar } from "./Menubar.svelte";

package/dist/components/Menubar/menubarContext.d.ts

@@ -0,0 +1,5 @@
+/** Called by a `Menubar` during initialisation. */
+export declare function setInMenubar(): void;
+/** Read by `MenuTrigger`. False for a menu rendered outside any bar. */
+export declare function getInMenubar(): boolean;
+//# sourceMappingURL=menubarContext.d.ts.map

package/dist/components/Menubar/menubarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubarContext.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menubar/menubarContext.ts"],"names":[],"mappings":"AAkBA,mDAAmD;AACnD,wBAAgB,YAAY,IAAI,IAAI,CAEnC;AAED,wEAAwE;AACxE,wBAAgB,YAAY,IAAI,OAAO,CAEtC"}

package/dist/components/Menubar/menubarContext.js

@@ -0,0 +1,24 @@
+import { getContext, setContext } from "svelte";
+/**
+ * True for anything rendered inside a `<Menubar>`.
+ *
+ * A `role="menubar"` may only contain menuitems, so the menu triggers placed in
+ * one have to say they are menuitems rather than buttons. A trigger cannot tell
+ * where it sits on its own — `Menu` is an independent Ark machine that knows
+ * nothing about the bar around it — so the bar announces itself here.
+ *
+ * A plain boolean rather than an accessor: a bar does not appear or disappear
+ * around a trigger that is already mounted, so there is nothing to stay current
+ * with.
+ *
+ * Its own module to keep `Menu` and `Menubar` from importing each other.
+ */
+const MENUBAR_KEY = Symbol("ui-organized.menubar");
+/** Called by a `Menubar` during initialisation. */
+export function setInMenubar() {
+    setContext(MENUBAR_KEY, true);
+}
+/** Read by `MenuTrigger`. False for a menu rendered outside any bar. */
+export function getInMenubar() {
+    return getContext(MENUBAR_KEY) ?? false;
+}

package/dist/components/Meter/Meter.svelte

@@ -0,0 +1,65 @@
+<!--
+  A static measurement inside a known range — disk usage, a score, a quota.
+
+  Distinct from Progress, which tracks a task and can be indeterminate; a meter
+  never can. Ark UI has no Meter primitive and none is needed: everything here is
+  `role="meter"` plus the ARIA value attributes, so the facade owns the
+  accessible markup directly.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { meterStyles } from "@ui-organized/core";
+  import type { MeterProps } from "./Meter.types.js";
+  import "@ui-organized/core/components/Meter/Meter.css";
+
+  let {
+    value,
+    min = 0,
+    max = 100,
+    label,
+    showValue = false,
+    format,
+    variant,
+    size,
+    class: className,
+    "aria-label": ariaLabel,
+  }: MeterProps = $props();
+
+  const showHeader = $derived(label != null || showValue);
+  const clamped = $derived(Math.min(Math.max(value, min), max));
+  // A zero-width range would divide by zero, so it reads as empty rather than NaN.
+  const percent = $derived(max > min ? ((clamped - min) / (max - min)) * 100 : 0);
+  const formatted = $derived(new Intl.NumberFormat(undefined, format).format(value));
+
+  // `role="meter"` needs an accessible name: the caption when there is one,
+  // otherwise whatever the caller passes. A bare number is not a measurement.
+  // React uses useId() here; this is Svelte's equivalent.
+  const labelId = $props.id();
+</script>
+
+<div
+  role="meter"
+  aria-valuenow={value}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuetext={formatted}
+  aria-labelledby={label != null ? labelId : undefined}
+  aria-label={label == null ? ariaLabel : undefined}
+  class={clsx(meterStyles({ variant, size }), className)}
+>
+  {#if showHeader}
+    <div class="meter__header text-default-body-small">
+      {#if label != null}
+        <span class="meter__label" id={labelId}>
+          {#if typeof label === "string"}{label}{:else}{@render label()}{/if}
+        </span>
+      {/if}
+      {#if showValue}
+        <span class="meter__value">{formatted}</span>
+      {/if}
+    </div>
+  {/if}
+  <div class="meter__track">
+    <div class="meter__indicator" style="width: {percent}%"></div>
+  </div>
+</div>

package/dist/components/Meter/Meter.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { MeterProps } from "./Meter.types.js";
+import "@ui-organized/core/components/Meter/Meter.css";
+declare const Meter: import("svelte").Component<MeterProps, {}, "">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;
+//# sourceMappingURL=Meter.svelte.d.ts.map

package/dist/components/Meter/Meter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Meter/Meter.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,+CAA+C,CAAC;AAsDvD,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/Meter/Meter.types.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+import type { ControlSize } from "@ui-organized/core";
+export interface MeterProps {
+    /** The current value. Required — a meter always shows a concrete measurement. */
+    value: number;
+    /** Minimum value. Defaults to 0. */
+    min?: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /**
+     * Optional label rendered above the track.
+     *
+     * A string, or a snippet for anything richer — the same union `Progress` takes.
+     */
+    label?: string | Snippet;
+    /** Whether to show the formatted value beside the label. Defaults to false. */
+    showValue?: boolean;
+    /** Options to format the displayed value (e.g. `{ style: "percent" }`). */
+    format?: Intl.NumberFormatOptions;
+    /** Color variant. Defaults to 'default'. */
+    variant?: "default" | "success" | "warning" | "error";
+    /** Track thickness. Defaults to 'md'. */
+    size?: ControlSize;
+    class?: string;
+    /** Accessible name when the meter is rendered without a visible `label`. */
+    "aria-label"?: string;
+}
+//# sourceMappingURL=Meter.types.d.ts.map

package/dist/components/Meter/Meter.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Meter/Meter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,UAAU;IACzB,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IAClC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD,yCAAyC;IACzC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/Meter/Meter.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Meter/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Meter } from "./Meter.svelte";
+export type { MeterProps } from "./Meter.types.js";
+export type { MeterVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Meter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Meter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Meter/index.js

@@ -0,0 +1 @@
+export { default as Meter } from "./Meter.svelte";

package/dist/components/Navigation/NavItem.svelte

@@ -0,0 +1,115 @@
+<!--
+  One page in a sidebar. Give it children (`NavSubItem`s) to make it expandable.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { navItemStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import { useNavContext } from "./navContext.js";
+  import type { NavItemProps } from "./Navigation.types.js";
+  import "@ui-organized/core/components/Navigation/Navigation.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const ICON_SIZE = 18;
+  const CARET_SIZE = 20;
+
+  let {
+    label,
+    icon,
+    selected = false,
+    collapsed,
+    disabled,
+    children,
+    expanded = $bindable(),
+    defaultExpanded = false,
+    onExpandedChange,
+    class: className,
+    onclick,
+    ...rest
+  }: NavItemProps = $props();
+
+  const nav = useNavContext();
+  // `??`, not `||`: an explicit `false` overrides the rail rather than inheriting it.
+  const isCollapsed = $derived(collapsed ?? nav.collapsed);
+
+  // React can inspect its children and treat `false` as absent; a Svelte snippet
+  // is opaque, so "no sub-items" is spelled the only way it can be — the snippet
+  // was never passed. The same rule Button and Toggle use for their labels.
+  const expandable = $derived(children !== undefined);
+  // An icon-only rail has no room for an inline sub-list, so suppress it.
+  const showSubList = $derived(expandable && !isCollapsed);
+
+  // `expanded` is bindable so `bind:expanded` works the way a Svelte consumer
+  // expects, and `onExpandedChange` is kept alongside it so the API still
+  // matches the React package — the same pair `Collapsible` exposes.
+  // `defaultExpanded` only seeds the uncontrolled case, so it lives in its own
+  // state rather than in the bindable's fallback.
+  // svelte-ignore state_referenced_locally -- reading the initial value is the
+  // point: it is a *default*, not a binding, and re-seeding from it later would
+  // slam an item shut the moment the parent re-rendered.
+  let internalExpanded = $state(defaultExpanded);
+  const isExpanded = $derived(expanded ?? internalExpanded);
+  const subListId = $props.id();
+
+  const handleClick = (event: MouseEvent & { currentTarget: HTMLButtonElement }) => {
+    if (showSubList) {
+      const next = !isExpanded;
+      // Both: the local seed for a caller who passed only `defaultExpanded`, and
+      // the bindable for one who wrote `bind:expanded`.
+      internalExpanded = next;
+      expanded = next;
+      onExpandedChange?.(next);
+    }
+    onclick?.(event);
+  };
+</script>
+
+<div
+  class={clsx(
+    "nav-item",
+    isCollapsed && "nav-item--collapsed",
+    showSubList && isExpanded && "nav-item--expanded",
+    className,
+  )}
+>
+  <button
+    type="button"
+    class={clsx(
+      "text-default-body-medium",
+      navItemStyles({ selected, expandable: showSubList }),
+    )}
+    {disabled}
+    aria-current={selected ? "page" : undefined}
+    aria-expanded={showSubList ? isExpanded : undefined}
+    aria-controls={showSubList ? subListId : undefined}
+    title={isCollapsed && typeof label === "string" ? label : undefined}
+    onclick={handleClick}
+    {...rest}
+  >
+    <span class="nav-item__content">
+      {#if icon}
+        <Icon name={icon} size={ICON_SIZE} class="nav-item__icon" />
+      {/if}
+      <span class="nav-item__label">
+        {#if typeof label === "string"}{label}{:else}{@render label()}{/if}
+      </span>
+    </span>
+    {#if showSubList}
+      <Icon
+        name={glyph(isExpanded ? "chevron-up" : "chevron-down")}
+        size={CARET_SIZE}
+        class="nav-item__caret"
+      />
+    {/if}
+  </button>
+  {#if showSubList}
+    <!--
+      `role="group"`, not `list`: the sub-items are buttons, and a list may only
+      contain listitems — the mismatch is an ARIA error. What the panel actually
+      is here is the disclosure the button above expands.
+    -->
+    <div id={subListId} class="nav-item__sub-list" role="group">
+      <div class="nav-item__sub-list-inner">{@render children?.()}</div>
+    </div>
+  {/if}
+</div>

package/dist/components/Navigation/NavItem.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { NavItemProps } from "./Navigation.types.js";
+import "@ui-organized/core/components/Navigation/Navigation.css";
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "expanded">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;
+//# sourceMappingURL=NavItem.svelte.d.ts.map

package/dist/components/Navigation/NavItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/NavItem.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,yDAAyD,CAAC;AAmGjE,QAAA,MAAM,OAAO,0DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Navigation/NavProvider.svelte

@@ -0,0 +1,22 @@
+<!--
+  Shares sidebar-level state with every NavItem / NavSubItem below it, so a
+  single toggle drives the whole rail without prop drilling.
+
+  `Sidebar` provides this itself; reach for the bare provider only when building
+  a container of your own.
+-->
+<script lang="ts">
+  import { setNavContext } from "./navContext.js";
+  import type { NavProviderProps } from "./Navigation.types.js";
+
+  let { collapsed = false, children }: NavProviderProps = $props();
+
+  // A getter rather than a snapshot: see ./navContext.ts.
+  setNavContext({
+    get current() {
+      return { collapsed };
+    },
+  });
+</script>
+
+{@render children?.()}

package/dist/components/Navigation/NavProvider.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { NavProviderProps } from "./Navigation.types.js";
+declare const NavProvider: import("svelte").Component<NavProviderProps, {}, "">;
+type NavProvider = ReturnType<typeof NavProvider>;
+export default NavProvider;
+//# sourceMappingURL=NavProvider.svelte.d.ts.map

package/dist/components/Navigation/NavProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavProvider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/NavProvider.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAqB9D,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Navigation/NavSubItem.svelte

@@ -0,0 +1,46 @@
+<!-- A sub-page beneath an expandable `NavItem`. -->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { navSubItemStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import { useNavContext } from "./navContext.js";
+  import type { NavSubItemProps } from "./Navigation.types.js";
+  import "@ui-organized/core/components/Navigation/Navigation.css";
+
+  const ICON_SIZE = 20;
+
+  let {
+    label,
+    icon,
+    selected = false,
+    collapsed,
+    disabled,
+    class: className,
+    ...rest
+  }: NavSubItemProps = $props();
+
+  const nav = useNavContext();
+  // `??`, not `||`: an explicit `false` overrides the rail rather than inheriting it.
+  const isCollapsed = $derived(collapsed ?? nav.collapsed);
+</script>
+
+<button
+  type="button"
+  class={clsx(
+    "text-default-body-medium",
+    navSubItemStyles({ selected }),
+    isCollapsed && "nav-sub-item--collapsed",
+    className,
+  )}
+  {disabled}
+  aria-current={selected ? "page" : undefined}
+  title={isCollapsed && typeof label === "string" ? label : undefined}
+  {...rest}
+>
+  {#if icon}
+    <Icon name={icon} size={ICON_SIZE} class="nav-sub-item__icon" />
+  {/if}
+  <span class="nav-sub-item__label">
+    {#if typeof label === "string"}{label}{:else}{@render label()}{/if}
+  </span>
+</button>

package/dist/components/Navigation/NavSubItem.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { NavSubItemProps } from "./Navigation.types.js";
+import "@ui-organized/core/components/Navigation/Navigation.css";
+declare const NavSubItem: import("svelte").Component<NavSubItemProps, {}, "">;
+type NavSubItem = ReturnType<typeof NavSubItem>;
+export default NavSubItem;
+//# sourceMappingURL=NavSubItem.svelte.d.ts.map

package/dist/components/Navigation/NavSubItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavSubItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Navigation/NavSubItem.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AA4CjE,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}