@ui-organized/svelte 0.0.0-stage → 6.0.0

package/dist/components/Marquee/Marquee.test.js

@@ -0,0 +1,78 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import { render } from "@testing-library/svelte";
+import { tick } from "svelte";
+import Marquee from "./Marquee.svelte";
+/**
+ * Marquee's run state, which the parity gate can only see stopped.
+ *
+ * The scroll itself is a CSS animation over custom properties zag computes from
+ * a measured track, so there is nothing to assert about it in jsdom, which lays
+ * nothing out. What *is* machine state — and what the gate renders exactly one
+ * frame of — is paused versus running, and `data-paused` is what Marquee.css
+ * selects on to stop the animation.
+ *
+ * `pauseOnInteraction` is the interesting half: React's `onMouseEnter` is a
+ * synthetic event, and the Svelte adapter lowercases it into a real DOM
+ * listener. Nothing throws if that mapping is wrong — the marquee simply never
+ * pauses under the pointer, which is a WCAG 2.2.2 problem rather than a visual
+ * one.
+ */
+const items = [
+    { id: "a", content: "One" },
+    { id: "b", content: "Two" },
+];
+const root = (container) => container.querySelector('[data-scope="marquee"][data-part="root"]');
+describe("Marquee", () => {
+    // jsdom ships no ResizeObserver, and the machine measures the track with one
+    // the moment it mounts. A stub rather than a polyfill: jsdom lays nothing out,
+    // so a real implementation would only ever report zeroes — and the sizes are
+    // not what these tests are about.
+    beforeAll(() => {
+        globalThis.ResizeObserver ??= class {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+    });
+    it("starts running, and starts paused when told to", async () => {
+        const running = render(Marquee, { props: { items } });
+        expect(root(running.container).hasAttribute("data-paused")).toBe(false);
+        expect(root(running.container).getAttribute("data-state")).toBe("idle");
+        running.unmount();
+        const paused = render(Marquee, { props: { items, defaultPaused: true } });
+        expect(root(paused.container).hasAttribute("data-paused")).toBe(true);
+        expect(root(paused.container).getAttribute("data-state")).toBe("paused");
+    });
+    it("pauses under the pointer only when asked to", async () => {
+        const { container } = render(Marquee, { props: { items, pauseOnInteraction: true } });
+        const el = root(container);
+        el.dispatchEvent(new MouseEvent("mouseenter"));
+        await tick();
+        expect(el.hasAttribute("data-paused")).toBe(true);
+        el.dispatchEvent(new MouseEvent("mouseleave"));
+        await tick();
+        expect(el.hasAttribute("data-paused")).toBe(false);
+    });
+    it("pauses when focus reaches something inside it", async () => {
+        // The keyboard half of WCAG 2.2.2: a user tabbing into moving content must
+        // be able to stop it. zag asks for `onFocusCapture`, which the Svelte
+        // adapter lowercases to `onfocuscapture` — a *capture-phase* `focus`
+        // listener. That matters: `focus` does not bubble, so a bubble-phase
+        // listener on the root would never hear it and the marquee would keep
+        // scrolling under the caret. Capture propagates downward, so it does.
+        const { container } = render(Marquee, { props: { items, pauseOnInteraction: true } });
+        const el = root(container);
+        const inner = el.querySelector('[data-part="item"]');
+        inner.tabIndex = 0;
+        inner.dispatchEvent(new FocusEvent("focus", { bubbles: false }));
+        await tick();
+        expect(el.hasAttribute("data-paused")).toBe(true);
+    });
+    it("ignores the pointer without pauseOnInteraction", async () => {
+        const { container } = render(Marquee, { props: { items } });
+        const el = root(container);
+        el.dispatchEvent(new MouseEvent("mouseenter"));
+        await tick();
+        expect(el.hasAttribute("data-paused")).toBe(false);
+    });
+});

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+export interface MarqueeItem {
+    /** Unique id across the marquee. */
+    id: string;
+    /**
+     * Item contents. A string, or a snippet for anything richer.
+     *
+     * React takes a ReactNode here, which can be either. Svelte has no single
+     * type that covers both, so the union is explicit and the component renders
+     * whichever it was given.
+     */
+    content?: string | Snippet;
+}
+export interface MarqueeProps {
+    /** The items to scroll, in order. */
+    items: MarqueeItem[];
+    /** Pixels travelled per second. Higher is faster. Defaults to 50. */
+    speed?: number;
+    /** Seconds to wait before the first pass. Defaults to 0. */
+    delay?: number;
+    /** Scroll direction. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    /** Reverses the travel direction. Defaults to false. */
+    reverse?: boolean;
+    /** Gap between items. Defaults to the space-04 token. */
+    spacing?: string;
+    /** Repeats the content until the track is full, so there is never a gap. Defaults to true. */
+    autoFill?: boolean;
+    /** Pauses while hovered or focused. Defaults to false. */
+    pauseOnInteraction?: boolean;
+    /** Starts paused. Useful for reduced-motion and for deterministic snapshots. Defaults to false. */
+    defaultPaused?: boolean;
+    /** Number of passes before stopping. 0 scrolls forever. Defaults to 0. */
+    loopCount?: number;
+    /** Fades the leading and trailing edges into the background. Defaults to true. */
+    showEdges?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Marquee.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Marquee/Marquee.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mGAAmG;IACnG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Marquee/Marquee.types.js

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

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

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

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

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

package/dist/components/Marquee/index.js

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

package/dist/components/Menu/Menu.svelte

@@ -0,0 +1,33 @@
+<!--
+  Menu root — controls open state.
+
+  A menu placed inside a `Menubar` gives up its trigger's button role: see
+  MenuTrigger.svelte and ../Menubar/menubarContext.ts. That travels on context
+  rather than through here, so this root knows nothing about the bar and the two
+  components need not import each other.
+-->
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { providePositioning } from "../Popover/positioning.svelte.js";
+  import type { MenuProps } from "./Menu.types.js";
+  import "@ui-organized/core/components/Menu/Menu.css";
+  // Reuse the design-system Checkbox / Radio control visuals inside menu items.
+  import "@ui-organized/core/components/Checkbox/Checkbox.css";
+  import "@ui-organized/core/components/Radio/Radio.css";
+
+  let { open = $bindable(), defaultOpen, onOpenChange, children }: MenuProps = $props();
+
+  const positioning = providePositioning({ placement: "bottom-start", gutter: 4 });
+</script>
+
+<ArkMenu.Root
+  {open}
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  positioning={positioning.read()}
+>
+  {@render children?.()}
+</ArkMenu.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/Menu.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAErD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AA0BvD,QAAA,MAAM,IAAI,mDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,89 @@
+import type { IconComponent, IconName } from "../Icon/Icon.types.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+export type MenuSide = "top" | "right" | "bottom" | "left";
+export type MenuAlign = "start" | "center" | "end";
+/** Props handed to an `asChild` snippet. Mirrors Ark's own `PropsFn`. */
+export type MenuPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>;
+export interface MenuProps {
+    /** Open state. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+}
+export interface MenuTriggerProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the trigger onto a custom element instead of rendering a button. */
+    asChild?: Snippet<[MenuPropsFn]>;
+}
+export interface MenuContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Side of the trigger to position against. Defaults to 'bottom'. */
+    side?: MenuSide;
+    /** Alignment along the chosen side. Defaults to 'start'. */
+    align?: MenuAlign;
+    /** Gap between trigger and popup, in px. Defaults to 4. */
+    sideOffset?: number;
+    /** Offset along the alignment axis, in px. */
+    alignOffset?: number;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+export interface MenuItemProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Icon rendered before the label. */
+    icon?: IconName | IconComponent;
+    /** Renders the item in the destructive color. */
+    destructive?: boolean;
+    /** Stable value for the item. Generated when omitted. */
+    value?: string;
+    /**
+     * Disable the item.
+     *
+     * Declared explicitly rather than inherited: these props extend a `<div>`'s
+     * attributes, which have no `disabled`, so it reached Ark through the rest
+     * spread at runtime and was a type error to write. React's `MenuItemProps`
+     * names it, and the surfaces should agree.
+     */
+    disabled?: boolean;
+    onSelect?: () => void;
+    class?: string;
+    children?: Snippet;
+}
+export interface MenuSeparatorProps {
+    class?: string;
+}
+interface GroupLike extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export type MenuGroupProps = GroupLike;
+export type MenuGroupLabelProps = GroupLike;
+export interface MenuRadioGroupProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children?: Snippet;
+}
+export interface MenuCheckboxItemProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    value?: string;
+    checked?: boolean;
+    /** Disable the item. See `MenuItemProps.disabled`. */
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    class?: string;
+    children?: Snippet;
+}
+export interface MenuRadioItemProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    value: string;
+    /** Disable the item. See `MenuItemProps.disabled`. */
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+export {};
+//# sourceMappingURL=Menu.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/Menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEnD,yEAAyE;AACzE,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,cAAc,CAAC,WAAW,CAAC,CAAC;AAExF,MAAM,WAAW,SAAS;IACxB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CACtD,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAC9C;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CACtD,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAC9C;IACC,qEAAqE;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CACnD,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAC9C;IACC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,SAAU,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AACvC,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAE5C,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAC3D,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAC9C;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CACxD,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAC9C;IACC,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Menu/Menu.types.js

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

package/dist/components/Menu/MenuCheckboxItem.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import type { MenuCheckboxItemProps } from "./Menu.types.js";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    value, checked, onCheckedChange, class: className, children, ...rest
+  }: MenuCheckboxItemProps = $props();
+
+  const generatedId = $props.id();
+</script>
+
+<ArkMenu.CheckboxItem
+  value={value ?? generatedId}
+  checked={checked ?? false}
+  onCheckedChange={(next) => onCheckedChange?.(next)}
+  class={clsx("menu__item", "menu__item--check", className)}
+  {...rest}
+>
+  <!--
+    Design-system Checkbox control; checked state is driven by the item's
+    data-state (see Menu.css), not by the CheckboxItem indicator. The check glyph
+    mirrors the standalone Checkbox — the indicator's visibility is toggled in
+    Menu.css.
+  -->
+  <span class="checkbox__control menu__control">
+    <span class="checkbox__indicator">
+      <Icon name={glyph("check")} size={16} class="checkbox__check" />
+    </span>
+  </span>
+  <span class="menu__item-label">{@render children?.()}</span>
+</ArkMenu.CheckboxItem>

package/dist/components/Menu/MenuCheckboxItem.svelte.d.ts

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

package/dist/components/Menu/MenuCheckboxItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuCheckboxItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/MenuCheckboxItem.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AA6B7D,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/Menu/MenuContent.svelte

@@ -0,0 +1,32 @@
+<!-- Portalled, positioned surface holding the menu items. -->
+<script lang="ts">
+  import { Menu as ArkMenu, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { setAnchoredPositioning, toPlacement } from "../Popover/positioning.svelte.js";
+  import type { MenuContentProps } from "./Menu.types.js";
+
+  let {
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignOffset,
+    container,
+    class: className,
+    children,
+    ...contentProps
+  }: MenuContentProps = $props();
+
+  setAnchoredPositioning(() => ({
+    placement: toPlacement(side, align),
+    gutter: sideOffset,
+    offset: alignOffset != null ? { crossAxis: alignOffset } : undefined,
+  }));
+</script>
+
+<Portal container={container ?? undefined}>
+  <ArkMenu.Positioner class="menu__positioner">
+    <ArkMenu.Content class={clsx("menu__popup", className)} {...contentProps}>
+      {@render children?.()}
+    </ArkMenu.Content>
+  </ArkMenu.Positioner>
+</Portal>

package/dist/components/Menu/MenuContent.svelte.d.ts

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

package/dist/components/Menu/MenuContent.svelte.d.ts.map

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

package/dist/components/Menu/MenuGroup.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { MenuGroupProps } from "./Menu.types.js";
+
+  let { class: className, children, ...rest }: MenuGroupProps = $props();
+</script>
+
+<ArkMenu.ItemGroup class={clsx("menu__group", className)} {...rest}>
+  {@render children?.()}
+</ArkMenu.ItemGroup>

package/dist/components/Menu/MenuGroupLabel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { MenuGroupLabelProps } from "./Menu.types.js";
+
+  let { class: className, children, ...rest }: MenuGroupLabelProps = $props();
+</script>
+
+<ArkMenu.ItemGroupLabel
+  class={clsx("menu__group-label", "text-strong-body-small", className)}
+  {...rest}
+>
+  {@render children?.()}
+</ArkMenu.ItemGroupLabel>

package/dist/components/Menu/MenuItem.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import type { MenuItemProps } from "./Menu.types.js";
+
+  let {
+    icon, destructive, value, onSelect, class: className, children, ...rest
+  }: MenuItemProps = $props();
+
+  // Ark requires a stable value per item; fall back to a generated id.
+  // Typeahead still uses the item's text content.
+  const generatedId = $props.id();
+</script>
+
+<ArkMenu.Item
+  value={value ?? generatedId}
+  {onSelect}
+  class={clsx("menu__item", destructive && "menu__item--destructive", className)}
+  {...rest}
+>
+  {#if icon}<Icon name={icon} size={20} class="menu__item-icon" />{/if}
+  <span class="menu__item-label">{@render children?.()}</span>
+</ArkMenu.Item>

package/dist/components/Menu/MenuItem.svelte.d.ts

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

package/dist/components/Menu/MenuItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/MenuItem.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAwBrD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Menu/MenuRadioGroup.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import type { MenuRadioGroupProps } from "./Menu.types.js";
+
+  let { value = $bindable(), onValueChange, children }: MenuRadioGroupProps = $props();
+</script>
+
+<ArkMenu.RadioItemGroup
+  {value}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+>
+  {@render children?.()}
+</ArkMenu.RadioItemGroup>

package/dist/components/Menu/MenuRadioGroup.svelte.d.ts

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

package/dist/components/Menu/MenuRadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuRadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/MenuRadioGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAkB3D,QAAA,MAAM,cAAc,8DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/Menu/MenuRadioItem.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { MenuRadioItemProps } from "./Menu.types.js";
+
+  let { class: className, children, ...rest }: MenuRadioItemProps = $props();
+</script>
+
+<ArkMenu.RadioItem class={clsx("menu__item", "menu__item--check", className)} {...rest}>
+  <!--
+    Design-system Radio control; checked state is driven by the item's data-state
+    (see Menu.css), not by the RadioItem indicator.
+  -->
+  <span class="radio-item__control menu__control">
+    <span class="radio-item__indicator"></span>
+  </span>
+  <span class="menu__item-label">{@render children?.()}</span>
+</ArkMenu.RadioItem>

package/dist/components/Menu/MenuRadioItem.svelte.d.ts

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

package/dist/components/Menu/MenuRadioItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuRadioItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/MenuRadioItem.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAoB1D,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Menu/MenuSeparator.svelte

@@ -0,0 +1,19 @@
+<!--
+  Renders the design-system Divider as the separator surface; Ark's Separator
+  merges its semantics and props onto it via asChild. The `menu__separator` class
+  only adds the menu's block spacing around the rule.
+-->
+<script lang="ts">
+  import { Menu as ArkMenu } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import Divider from "../Divider/Divider.svelte";
+  import type { MenuSeparatorProps } from "./Menu.types.js";
+
+  let { class: className }: MenuSeparatorProps = $props();
+</script>
+
+<ArkMenu.Separator>
+  {#snippet asChild(props)}
+    <Divider {...props()} class={clsx("menu__separator", className)} />
+  {/snippet}
+</ArkMenu.Separator>

package/dist/components/Menu/MenuSeparator.svelte.d.ts

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

package/dist/components/Menu/MenuSeparator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSeparator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/MenuSeparator.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAoB1D,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Menu/MenuTrigger.svelte

@@ -0,0 +1,26 @@
+<!-- Element that opens the menu. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Menu as ArkMenu, useMenuContext } from "@ark-ui/svelte";
+  import { popupControls } from "@ui-organized/core";
+  import { getInMenubar } from "../Menubar/menubarContext.js";
+  import type { MenuTriggerProps } from "./Menu.types.js";
+
+  let { asChild: project, children, ...rest }: MenuTriggerProps = $props();
+
+  const menu = useMenuContext();
+  const controls = $derived(popupControls(menu().open));
+
+  // Inside a menubar the trigger is one of the bar's menuitems, not a button —
+  // `role="menubar"` admits no other children. The data attribute is how the bar
+  // finds its own triggers without catching a portalled menu's items too. Read
+  // once at initialisation: a bar does not appear around a mounted trigger.
+  const menubar = getInMenubar() ? ({ role: "menuitem", "data-menubar-item": "" } as const) : {};
+</script>
+
+{#if project}
+  <ArkMenu.Trigger {...controls} {...menubar} {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkMenu.Trigger>
+{:else}
+  <ArkMenu.Trigger {...controls} {...menubar} {...rest}>{@render children?.()}</ArkMenu.Trigger>
+{/if}

package/dist/components/Menu/MenuTrigger.svelte.d.ts

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

package/dist/components/Menu/MenuTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/MenuTrigger.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AA+BxD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,12 @@
+export { default as Menu } from "./Menu.svelte";
+export { default as MenuTrigger } from "./MenuTrigger.svelte";
+export { default as MenuContent } from "./MenuContent.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as MenuSeparator } from "./MenuSeparator.svelte";
+export { default as MenuGroup } from "./MenuGroup.svelte";
+export { default as MenuGroupLabel } from "./MenuGroupLabel.svelte";
+export { default as MenuRadioGroup } from "./MenuRadioGroup.svelte";
+export { default as MenuCheckboxItem } from "./MenuCheckboxItem.svelte";
+export { default as MenuRadioItem } from "./MenuRadioItem.svelte";
+export type { MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuGroupProps, MenuGroupLabelProps, MenuRadioGroupProps, MenuCheckboxItemProps, MenuRadioItemProps, MenuSide, MenuAlign, MenuPropsFn, } from "./Menu.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EACV,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,kBAAkB,EAChF,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,qBAAqB,EAC/E,kBAAkB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,GACrD,MAAM,iBAAiB,CAAC"}

package/dist/components/Menu/index.js

@@ -0,0 +1,10 @@
+export { default as Menu } from "./Menu.svelte";
+export { default as MenuTrigger } from "./MenuTrigger.svelte";
+export { default as MenuContent } from "./MenuContent.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as MenuSeparator } from "./MenuSeparator.svelte";
+export { default as MenuGroup } from "./MenuGroup.svelte";
+export { default as MenuGroupLabel } from "./MenuGroupLabel.svelte";
+export { default as MenuRadioGroup } from "./MenuRadioGroup.svelte";
+export { default as MenuCheckboxItem } from "./MenuCheckboxItem.svelte";
+export { default as MenuRadioItem } from "./MenuRadioItem.svelte";

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

@@ -0,0 +1,26 @@
+<!--
+  Two real menus in a bar.
+
+  Plain buttons carrying `data-menubar-item` would exercise the roving tabindex
+  without proving the half that puts the attribute there — the triggers are
+  independent Ark machines the bar can only reach through the DOM, and whether
+  they learn they are in a bar at all is the other thing under test.
+-->
+<script lang="ts">
+  import Menu from "../Menu/Menu.svelte";
+  import MenuContent from "../Menu/MenuContent.svelte";
+  import MenuItem from "../Menu/MenuItem.svelte";
+  import MenuTrigger from "../Menu/MenuTrigger.svelte";
+  import Menubar from "./Menubar.svelte";
+</script>
+
+<Menubar>
+  <Menu>
+    <MenuTrigger class="menubar__trigger">File</MenuTrigger>
+    <MenuContent><MenuItem value="new">New</MenuItem></MenuContent>
+  </Menu>
+  <Menu>
+    <MenuTrigger class="menubar__trigger">Edit</MenuTrigger>
+    <MenuContent><MenuItem value="undo">Undo</MenuItem></MenuContent>
+  </Menu>
+</Menubar>