@thomasfosterau/components 0.1.0 → 0.2.0

package/dist/ui/ToolbarToggleGroup.svelte.d.ts

@@ -0,0 +1,52 @@
+import { type ToggleGroupItem } from './toggle-classes.ts';
+import { type ButtonVariant, type Size, type Tone } from './tones.ts';
+declare function $$render<V extends string>(): {
+    props: {
+        items: readonly ToggleGroupItem<V>[];
+        /** Accessible name of the set ("Text style", "Alignment"). */
+        label: string;
+        /** @defaultValue `'primary'` */
+        tone?: Tone | undefined;
+        /** @defaultValue `'ghost'` */
+        variant?: ButtonVariant | undefined;
+        /** @defaultValue `'sm'` */
+        size?: Size | undefined;
+        disabled?: boolean | undefined;
+        class?: string | undefined;
+    } & ({
+        type: "single";
+        /** The selected value, `''` for none. Bindable. */
+        value?: V | "" | undefined;
+        onValueChange?: ((value: V | "") => void) | undefined;
+        /** Pressing the selected item does nothing. */
+        required?: boolean | undefined;
+    } | {
+        type: "multiple";
+        /** The selected values. Bindable. */
+        value?: readonly V[] | undefined;
+        onValueChange?: ((value: V[]) => void) | undefined;
+        required?: undefined;
+    });
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** A set of toggles inside a `Toolbar` (Bold / Italic, alignment), sharing the toolbar's single Tab stop. */
+declare const ToolbarToggleGroup: $$IsomorphicComponent;
+type ToolbarToggleGroup<V extends string> = InstanceType<typeof ToolbarToggleGroup<V>>;
+export default ToolbarToggleGroup;

package/dist/ui/accordion-context.d.ts

@@ -0,0 +1,26 @@
+/**
+ * How an {@link AccordionItem} learns its enclosing `Accordion`'s settings.
+ *
+ * `headingLevel`, `variant`, `joined`, `searchable` and the open state are
+ * the group's, never an item's: an item reads them from context so a stack
+ * cannot drift into mixed heading levels or markers. Getters, not values, so
+ * a change to the `Accordion`'s props reaches every item.
+ *
+ * @module
+ */
+import type { DisclosureVariant, HeadingLevel } from './tones.ts';
+/** What an `Accordion` lends its items. */
+export interface AccordionContext {
+    readonly headingLevel: () => HeadingLevel;
+    readonly variant: () => DisclosureVariant;
+    readonly joined: () => boolean;
+    readonly searchable: () => boolean;
+    /** Whether the item with this value is open. */
+    readonly isOpen: (value: string) => boolean;
+    /** Whether closing this open item is refused (`type="single"` with `required`). */
+    readonly isLocked: (value: string) => boolean;
+}
+/** Lend `context` to the `AccordionItem`s below. */
+export declare function setAccordionContext(context: AccordionContext): void;
+/** The enclosing `Accordion`'s settings; throws outside one, where an item has no group to belong to. */
+export declare function getAccordionContext(): AccordionContext;

package/dist/ui/accordion-context.js

@@ -0,0 +1,23 @@
+/**
+ * How an {@link AccordionItem} learns its enclosing `Accordion`'s settings.
+ *
+ * `headingLevel`, `variant`, `joined`, `searchable` and the open state are
+ * the group's, never an item's: an item reads them from context so a stack
+ * cannot drift into mixed heading levels or markers. Getters, not values, so
+ * a change to the `Accordion`'s props reaches every item.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+const ACCORDION_KEY = Symbol.for('@thomasfosterau/components/accordion');
+/** Lend `context` to the `AccordionItem`s below. */
+export function setAccordionContext(context) {
+    setContext(ACCORDION_KEY, context);
+}
+/** The enclosing `Accordion`'s settings; throws outside one, where an item has no group to belong to. */
+export function getAccordionContext() {
+    const context = getContext(ACCORDION_KEY);
+    if (context === undefined)
+        throw new Error('AccordionItem must be rendered inside an Accordion.');
+    return context;
+}

package/dist/ui/context-menu.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `@thomasfosterau/components/context-menu` — the right-click / long-press
+ * menu, kept out of the root barrel so bits-ui's menu runtime loads only on
+ * the pages that use it.
+ *
+ * Its children (`MenuItem`, `MenuSeparator`, `MenuCheckboxItem`,
+ * `MenuRadioGroup`, `MenuRadioItem`, `MenuSub`) come from the root barrel,
+ * which carries no bits-ui menu code: `ContextMenu` lends them its parts
+ * through context.
+ *
+ * @module
+ */
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/ui/context-menu.js

@@ -0,0 +1,13 @@
+/**
+ * `@thomasfosterau/components/context-menu` — the right-click / long-press
+ * menu, kept out of the root barrel so bits-ui's menu runtime loads only on
+ * the pages that use it.
+ *
+ * Its children (`MenuItem`, `MenuSeparator`, `MenuCheckboxItem`,
+ * `MenuRadioGroup`, `MenuRadioItem`, `MenuSub`) come from the root barrel,
+ * which carries no bits-ui menu code: `ContextMenu` lends them its parts
+ * through context.
+ *
+ * @module
+ */
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/ui/index.d.ts

@@ -17,28 +17,47 @@
  *
  * @module
  */
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
 export { default as Alert } from './Alert.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Chip } from './Chip.svelte';
 export { default as ConfirmButton } from './ConfirmButton.svelte';
 export { default as Disclosure } from './Disclosure.svelte';
+export { default as Divider } from './Divider.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
 export { default as ExternalLink } from './ExternalLink.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as Link } from './Link.svelte';
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as Menu } from './Menu.svelte';
+export { default as MenuCheckboxItem } from './MenuCheckboxItem.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuRadioGroup } from './MenuRadioGroup.svelte';
+export { default as MenuRadioItem } from './MenuRadioItem.svelte';
 export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as MenuSub } from './MenuSub.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as ShareButton } from './ShareButton.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Stack } from './Stack.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as ToggleButton } from './ToggleButton.svelte';
+export { default as ToggleGroup } from './ToggleGroup.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { default as ToolbarLink } from './ToolbarLink.svelte';
+export { default as ToolbarSeparator } from './ToolbarSeparator.svelte';
+export { default as ToolbarToggleGroup } from './ToolbarToggleGroup.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as VisuallyHidden } from './VisuallyHidden.svelte';
 export * from './colour-token.ts';
 export * from './menu-context.ts';
 export * from './slug.ts';
 export * from './tones.ts';
+export type { ToggleGroupItem } from './toggle-classes.ts';

package/dist/ui/index.js

@@ -17,25 +17,43 @@
  *
  * @module
  */
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
 export { default as Alert } from './Alert.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Chip } from './Chip.svelte';
 export { default as ConfirmButton } from './ConfirmButton.svelte';
 export { default as Disclosure } from './Disclosure.svelte';
+export { default as Divider } from './Divider.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
 export { default as ExternalLink } from './ExternalLink.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as Link } from './Link.svelte';
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as Menu } from './Menu.svelte';
+export { default as MenuCheckboxItem } from './MenuCheckboxItem.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuRadioGroup } from './MenuRadioGroup.svelte';
+export { default as MenuRadioItem } from './MenuRadioItem.svelte';
 export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as MenuSub } from './MenuSub.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as ShareButton } from './ShareButton.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Stack } from './Stack.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as ToggleButton } from './ToggleButton.svelte';
+export { default as ToggleGroup } from './ToggleGroup.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { default as ToolbarLink } from './ToolbarLink.svelte';
+export { default as ToolbarSeparator } from './ToolbarSeparator.svelte';
+export { default as ToolbarToggleGroup } from './ToolbarToggleGroup.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as VisuallyHidden } from './VisuallyHidden.svelte';
 export * from "./colour-token.js";

package/dist/ui/menu-context.d.ts

@@ -1,22 +1,20 @@
 /**
- * How a {@link MenuItem} learns which {@link Menu} it is inside.
+ * How a {@link MenuItem} learns which kind of menu it is inside.
  *
- * The two menu modes render entirely different markup — a bits-ui
- * `DropdownMenu.Item` with roving focus and typeahead, or a plain anchor in a
- * `<ul class="menu">` navigation list — but a call site writes the same
- * `<MenuItem>` either way. The mode travels down as context rather than as a
- * prop so a caller can never get the two out of step, and so `Menu` stays the
- * single place the choice is made.
+ * A `MenuItem` renders entirely different markup in a `DropdownMenu` or a
+ * `ContextMenu` — a bits-ui menu item with roving focus and typeahead — and
+ * in a `Menu` or a hand-assembled list, where it is a plain anchor in a
+ * `<ul class="menu">` navigation list. A call site writes the same
+ * `<MenuItem>` either way. The mode is never a prop: it is which menu
+ * encloses the item, so a caller can never get the two out of step.
  *
- * A `MenuItem` mounted with no `Menu` above it (a list of links assembled by
- * hand) falls back to `nav`, which is the mode that needs nothing from its
- * parent.
+ * `DropdownMenu` and `ContextMenu` are the only components that import
+ * bits-ui's menus, and they lend the item parts to their descendants through
+ * context, so a navigation-only `Menu` never loads the menu runtime (#129).
  *
  * @module
  */
-/** Which of the two things daisyUI calls a `menu` a `Menu` renders: a dropdown or a navigation list. */
-export type MenuMode = 'dropdown' | 'nav';
-/** Declare the mode every descendant `MenuItem` renders in. Called by `Menu`. */
-export declare function setMenuMode(mode: () => MenuMode): void;
-/** The enclosing `Menu`'s mode, or `nav` when there is no enclosing `Menu`. */
+/** Which kind of menu an item is inside: a dropdown, a context menu or a navigation list. */
+export type MenuMode = 'dropdown' | 'context' | 'nav';
+/** The enclosing menu's mode: `dropdown` or `context` inside a bits-ui menu, otherwise `nav`. */
 export declare function getMenuMode(): () => MenuMode;

package/dist/ui/menu-context.js

@@ -1,26 +1,22 @@
 /**
- * How a {@link MenuItem} learns which {@link Menu} it is inside.
+ * How a {@link MenuItem} learns which kind of menu it is inside.
  *
- * The two menu modes render entirely different markup — a bits-ui
- * `DropdownMenu.Item` with roving focus and typeahead, or a plain anchor in a
- * `<ul class="menu">` navigation list — but a call site writes the same
- * `<MenuItem>` either way. The mode travels down as context rather than as a
- * prop so a caller can never get the two out of step, and so `Menu` stays the
- * single place the choice is made.
+ * A `MenuItem` renders entirely different markup in a `DropdownMenu` or a
+ * `ContextMenu` — a bits-ui menu item with roving focus and typeahead — and
+ * in a `Menu` or a hand-assembled list, where it is a plain anchor in a
+ * `<ul class="menu">` navigation list. A call site writes the same
+ * `<MenuItem>` either way. The mode is never a prop: it is which menu
+ * encloses the item, so a caller can never get the two out of step.
  *
- * A `MenuItem` mounted with no `Menu` above it (a list of links assembled by
- * hand) falls back to `nav`, which is the mode that needs nothing from its
- * parent.
+ * `DropdownMenu` and `ContextMenu` are the only components that import
+ * bits-ui's menus, and they lend the item parts to their descendants through
+ * context, so a navigation-only `Menu` never loads the menu runtime (#129).
  *
  * @module
  */
-import { getContext, setContext } from 'svelte';
-const MENU_MODE_KEY = Symbol('@thomasfosterau/components:menu-mode');
-/** Declare the mode every descendant `MenuItem` renders in. Called by `Menu`. */
-export function setMenuMode(mode) {
-    setContext(MENU_MODE_KEY, mode);
-}
-/** The enclosing `Menu`'s mode, or `nav` when there is no enclosing `Menu`. */
+import { getMenuParts } from "./menu-parts/menu-parts.js";
+/** The enclosing menu's mode: `dropdown` or `context` inside a bits-ui menu, otherwise `nav`. */
 export function getMenuMode() {
-    return getContext(MENU_MODE_KEY) ?? (() => 'nav');
+    const mode = getMenuParts()?.kind ?? 'nav';
+    return () => mode;
 }

package/dist/ui/menu-parts/CheckboxItemPart.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+Internal: the bits-ui checkbox item a `MenuCheckboxItem` renders inside a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  bits-ui's shared `CheckboxItem` (`DropdownMenu.CheckboxItem` is
+  `ContextMenu.CheckboxItem`): `role="menuitemcheckbox"` with `aria-checked`,
+  toggled by Enter / Space or a click without closing the menu's focus
+  management. The check mark is drawn from bits-ui's own `checked`, so the
+  visual and the accessibility tree cannot disagree; it is `aria-hidden`
+  because `aria-checked` already says it. Lent through `menu-parts.ts`.
+-->
+<script lang="ts">import { Check } from "@lucide/svelte";
+import { DropdownMenu } from "bits-ui";
+let { checked, onCheckedChange, disabled, class: className, label } = $props();
+</script>
+
+<li role="none" class={className}>
+  <DropdownMenu.CheckboxItem {checked} {onCheckedChange} {disabled}>
+    {#snippet children({ checked: on })}
+      <span class="grid size-4 shrink-0 place-items-center" aria-hidden="true">
+        {#if on}<Check class="size-4" />{/if}
+      </span>
+      {@render label()}
+    {/snippet}
+  </DropdownMenu.CheckboxItem>
+</li>

package/dist/ui/menu-parts/CheckboxItemPart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CheckboxItemPartProps } from './menu-parts.ts';
+/** Internal: the bits-ui checkbox item a `MenuCheckboxItem` renders inside a `DropdownMenu` or `ContextMenu`. */
+declare const CheckboxItemPart: import("svelte").Component<CheckboxItemPartProps, {}, "">;
+type CheckboxItemPart = ReturnType<typeof CheckboxItemPart>;
+export default CheckboxItemPart;

package/dist/ui/menu-parts/ItemPart.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+Internal: the bits-ui item a `MenuItem` renders inside a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  Rendered through `bits-ui`'s `DropdownMenu.Item` `child` snippet, so the
+  element is still the caller's own `<a>` or `<button>` — carrying bits-ui's
+  `role="menuitem"`, its focus management and its selection handling. The
+  `<li>` is `role="none"` so it does not sit between `role="menu"` and
+  `role="menuitem"`. Lent to `MenuItem` through `menu-parts.ts`.
+  `DropdownMenu.Item` is bits-ui's shared `bits/menu` item, the same
+  component as `ContextMenu.Item`, so this part serves both menus.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+let { href, current, disabled, onSelect, class: className, label } = $props();
+</script>
+
+<li role="none" class={className}>
+  <DropdownMenu.Item {disabled} {onSelect}>
+    {#snippet child({ props })}
+      {#if href === undefined}
+        <button {...props} type="button">{@render label()}</button>
+      {:else}
+        <a {...props} {href} aria-current={current ? 'page' : undefined}>
+          {@render label()}
+        </a>
+      {/if}
+    {/snippet}
+  </DropdownMenu.Item>
+</li>

package/dist/ui/menu-parts/ItemPart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ItemPartProps } from './menu-parts.ts';
+/** Internal: the bits-ui item a `MenuItem` renders inside a `DropdownMenu` or `ContextMenu`. */
+declare const ItemPart: import("svelte").Component<ItemPartProps, {}, "">;
+type ItemPart = ReturnType<typeof ItemPart>;
+export default ItemPart;

package/dist/ui/menu-parts/RadioGroupPart.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+Internal: the bits-ui radio group a `MenuRadioGroup` renders inside a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  bits-ui's shared `RadioGroup` (`role="group"`), headed by its
+  `GroupHeading` when there is a `label`, which also names the group. The
+  `MenuRadioItem`s sit in a nested `<ul role="none">` so the markup stays a
+  valid list; daisyUI's nested-menu indent and rule are reset, since this is
+  a group, not a submenu. Lent through `menu-parts.ts`.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+let { value, onValueChange, label, class: className, children } = $props();
+</script>
+
+<li role="none" class={className}>
+  <DropdownMenu.RadioGroup {value} {onValueChange}>
+    {#if label !== undefined}
+      <DropdownMenu.GroupHeading class="menu-title px-2">{label}</DropdownMenu.GroupHeading>
+    {/if}
+    <ul role="none" class="ms-0 ps-0 before:hidden">
+      {@render children()}
+    </ul>
+  </DropdownMenu.RadioGroup>
+</li>

package/dist/ui/menu-parts/RadioGroupPart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { RadioGroupPartProps } from './menu-parts.ts';
+/** Internal: the bits-ui radio group a `MenuRadioGroup` renders inside a `DropdownMenu` or `ContextMenu`. */
+declare const RadioGroupPart: import("svelte").Component<RadioGroupPartProps, {}, "">;
+type RadioGroupPart = ReturnType<typeof RadioGroupPart>;
+export default RadioGroupPart;

package/dist/ui/menu-parts/RadioItemPart.svelte

@@ -0,0 +1,22 @@
+<!-- @component
+Internal: the bits-ui radio item a `MenuRadioItem` renders inside a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  bits-ui's shared `RadioItem`: `role="menuitemradio"` with `aria-checked`,
+  exclusive within its `MenuRadioGroup`. The dot is drawn from bits-ui's own
+  `checked` and is `aria-hidden`. Lent through `menu-parts.ts`.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+let { value, disabled, class: className, label } = $props();
+</script>
+
+<li role="none" class={className}>
+  <DropdownMenu.RadioItem {value} {disabled}>
+    {#snippet children({ checked })}
+      <span class="grid size-4 shrink-0 place-items-center" aria-hidden="true">
+        {#if checked}<span class="bg-base-content size-2 rounded-full"></span>{/if}
+      </span>
+      {@render label()}
+    {/snippet}
+  </DropdownMenu.RadioItem>
+</li>

package/dist/ui/menu-parts/RadioItemPart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { RadioItemPartProps } from './menu-parts.ts';
+/** Internal: the bits-ui radio item a `MenuRadioItem` renders inside a `DropdownMenu` or `ContextMenu`. */
+declare const RadioItemPart: import("svelte").Component<RadioItemPartProps, {}, "">;
+type RadioItemPart = ReturnType<typeof RadioItemPart>;
+export default RadioItemPart;

package/dist/ui/menu-parts/SeparatorPart.svelte

@@ -0,0 +1,16 @@
+<!-- @component
+Internal: the bits-ui separator a `MenuSeparator` renders inside a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  bits-ui's own separator carries `role="separator"` and keeps it out of the
+  menu's arrow-key navigation; the `role="none"` `<li>` keeps the
+  presentational list item out of the accessibility tree. Lent to
+  `MenuSeparator` through `menu-parts.ts`.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+let { class: className } = $props();
+</script>
+
+<li role="none">
+  <DropdownMenu.Separator class={['divider my-1 h-px', className]} />
+</li>

package/dist/ui/menu-parts/SeparatorPart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SeparatorPartProps } from './menu-parts.ts';
+/** Internal: the bits-ui separator a `MenuSeparator` renders inside a `DropdownMenu` or `ContextMenu`. */
+declare const SeparatorPart: import("svelte").Component<SeparatorPartProps, {}, "">;
+type SeparatorPart = ReturnType<typeof SeparatorPart>;
+export default SeparatorPart;

package/dist/ui/menu-parts/SubPart.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+Internal: the bits-ui submenu a `MenuSub` renders inside a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  bits-ui's shared `Sub`: the `SubTrigger` is a `role="menuitem"` with
+  `aria-haspopup="menu"` that opens on → (← closes and returns to it), and
+  the `SubContent` is a `role="menu"` styled exactly as the parent menu's
+  list, with the same `role="none"` presentation layer. The chevron is
+  `aria-hidden`. Lent through `menu-parts.ts`.
+-->
+<script lang="ts">import { ChevronRight } from "@lucide/svelte";
+import { DropdownMenu } from "bits-ui";
+let { label, disabled, class: className, children } = $props();
+</script>
+
+<li role="none" class={className}>
+  <DropdownMenu.Sub>
+    <DropdownMenu.SubTrigger {disabled} class="flex justify-between">
+      <span>{label}</span>
+      <ChevronRight class="size-4" aria-hidden="true" />
+    </DropdownMenu.SubTrigger>
+    <DropdownMenu.SubContent class="z-50" sideOffset={4}>
+      <ul role="none" class="menu bg-base-100 rounded-box w-56 p-2 shadow-md">
+        {@render children()}
+      </ul>
+    </DropdownMenu.SubContent>
+  </DropdownMenu.Sub>
+</li>

package/dist/ui/menu-parts/SubPart.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SubPartProps } from './menu-parts.ts';
+/** Internal: the bits-ui submenu a `MenuSub` renders inside a `DropdownMenu` or `ContextMenu`. */
+declare const SubPart: import("svelte").Component<SubPartProps, {}, "">;
+type SubPart = ReturnType<typeof SubPart>;
+export default SubPart;

package/dist/ui/menu-parts/menu-parts.d.ts

@@ -0,0 +1,104 @@
+/**
+ * The bits-ui pieces a `DropdownMenu` or `ContextMenu` lends to the
+ * `MenuItem`, `MenuSeparator`, `MenuCheckboxItem`, `MenuRadioGroup`,
+ * `MenuRadioItem` and `MenuSub` inside it.
+ *
+ * Those children are written once for every kind of menu, but only the
+ * bits-ui menus need bits-ui's `Item` / `Separator` / `CheckboxItem` / … — and
+ * a static import of them would put the menu runtime (about 30 KB gzip) on
+ * every page that renders a plain navigation list (#129). So the parts travel
+ * down as context, set by `DropdownMenu` and `ContextMenu`, the only modules
+ * that import them. A child outside such a menu never sees them and never
+ * loads them.
+ *
+ * bits-ui's dropdown and context menus share these components (both re-export
+ * `bits/menu`'s `Item`, `Separator`, `CheckboxItem`, `RadioGroup`,
+ * `RadioItem` and `Sub*`), so one set of parts serves both (#157).
+ *
+ * Internal: not re-exported from the `ui` barrel.
+ *
+ * @module
+ */
+import { type Component, type Snippet } from 'svelte';
+/** What `MenuItem` hands the item part. */
+export interface ItemPartProps {
+    /** The resolved link target; `undefined` renders a button. */
+    href: string | undefined;
+    /** Whether the item is the current page. */
+    current: boolean;
+    /** Shown but not activatable. */
+    disabled: boolean;
+    /** Called when the item is chosen. */
+    onSelect: () => void;
+    /** Extra classes on the `<li>`. */
+    class: string | undefined;
+    /** The item's label, icon included. */
+    label: Snippet<[]>;
+}
+/** What `MenuSeparator` hands the separator part. */
+export interface SeparatorPartProps {
+    /** Extra classes on the separator. */
+    class: string | undefined;
+}
+/** What `MenuCheckboxItem` hands the checkbox item part. */
+export interface CheckboxItemPartProps {
+    /** Whether the item is checked. */
+    checked: boolean;
+    /** Called with the next state when the reader toggles it. */
+    onCheckedChange: (checked: boolean) => void;
+    /** Shown but not activatable. */
+    disabled: boolean;
+    /** Extra classes on the `<li>`. */
+    class: string | undefined;
+    /** The item's label. */
+    label: Snippet<[]>;
+}
+/** What `MenuRadioGroup` hands the radio group part. */
+export interface RadioGroupPartProps {
+    /** The chosen value. */
+    value: string;
+    /** Called with the chosen value. */
+    onValueChange: (value: string) => void;
+    /** Visible heading; also the group's accessible name. */
+    label: string | undefined;
+    /** Extra classes on the `<li>`. */
+    class: string | undefined;
+    /** The `MenuRadioItem`s. */
+    children: Snippet<[]>;
+}
+/** What `MenuRadioItem` hands the radio item part. */
+export interface RadioItemPartProps {
+    /** The value this item chooses. */
+    value: string;
+    /** Shown but not activatable. */
+    disabled: boolean;
+    /** Extra classes on the `<li>`. */
+    class: string | undefined;
+    /** The item's label. */
+    label: Snippet<[]>;
+}
+/** What `MenuSub` hands the submenu part. */
+export interface SubPartProps {
+    /** Text of the item that opens the submenu. */
+    label: string;
+    /** Shown but not activatable. */
+    disabled: boolean;
+    /** Extra classes on the `<li>`. */
+    class: string | undefined;
+    /** The submenu's items. */
+    children: Snippet<[]>;
+}
+/** The components a bits-ui menu lends its descendants, and which kind of menu it is. */
+export interface MenuParts {
+    readonly kind: 'dropdown' | 'context';
+    readonly item: Component<ItemPartProps>;
+    readonly separator: Component<SeparatorPartProps>;
+    readonly checkboxItem: Component<CheckboxItemPartProps>;
+    readonly radioGroup: Component<RadioGroupPartProps>;
+    readonly radioItem: Component<RadioItemPartProps>;
+    readonly sub: Component<SubPartProps>;
+}
+/** Lend the menu parts to every descendant. Called by `DropdownMenu` and `ContextMenu`. */
+export declare function setMenuParts(parts: MenuParts): void;
+/** The enclosing bits-ui menu's parts, or `undefined` outside one. */
+export declare function getMenuParts(): MenuParts | undefined;

package/dist/ui/menu-parts/menu-parts.js

@@ -0,0 +1,31 @@
+/**
+ * The bits-ui pieces a `DropdownMenu` or `ContextMenu` lends to the
+ * `MenuItem`, `MenuSeparator`, `MenuCheckboxItem`, `MenuRadioGroup`,
+ * `MenuRadioItem` and `MenuSub` inside it.
+ *
+ * Those children are written once for every kind of menu, but only the
+ * bits-ui menus need bits-ui's `Item` / `Separator` / `CheckboxItem` / … — and
+ * a static import of them would put the menu runtime (about 30 KB gzip) on
+ * every page that renders a plain navigation list (#129). So the parts travel
+ * down as context, set by `DropdownMenu` and `ContextMenu`, the only modules
+ * that import them. A child outside such a menu never sees them and never
+ * loads them.
+ *
+ * bits-ui's dropdown and context menus share these components (both re-export
+ * `bits/menu`'s `Item`, `Separator`, `CheckboxItem`, `RadioGroup`,
+ * `RadioItem` and `Sub*`), so one set of parts serves both (#157).
+ *
+ * Internal: not re-exported from the `ui` barrel.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+const MENU_PARTS_KEY = Symbol('@thomasfosterau/components:menu-parts');
+/** Lend the menu parts to every descendant. Called by `DropdownMenu` and `ContextMenu`. */
+export function setMenuParts(parts) {
+    setContext(MENU_PARTS_KEY, parts);
+}
+/** The enclosing bits-ui menu's parts, or `undefined` outside one. */
+export function getMenuParts() {
+    return getContext(MENU_PARTS_KEY);
+}