@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/ui/colour-token.js

@@ -0,0 +1,49 @@
+/**
+ * The colour-token indirection: how a component takes a colour it does not
+ * own.
+ *
+ * Some things are coloured by their subject rather than by a semantic tone —
+ * a political party, a taxon rank, a project label. The colour belongs to the
+ * consuming application, not to this library, and it is never an inline hex
+ * here: the app's theme declares one custom property per subject
+ * (`--party-alp`, `--rank-genus`, …) in **both** its light and dark themes,
+ * and hands a component the property's NAME.
+ *
+ * The helpers below turn that name into the single custom property the
+ * component's Tailwind classes read (`bg-(--badge-colour)`,
+ * `border-(--chip-colour)`), with the theme's `neutral` colour as the
+ * fallback for a token the theme has no entry for. The only inline style
+ * any component in this package emits is that one variable indirection —
+ * the colour value itself stays in the stylesheet.
+ *
+ * @module
+ */
+/** The custom property {@link Badge} binds a `colourToken` to. */
+export const BADGE_COLOUR_PROPERTY = '--badge-colour';
+/** The custom property {@link Chip} binds a `colourToken` to. */
+export const CHIP_COLOUR_PROPERTY = '--chip-colour';
+/** A valid CSS custom-property name: `--` then idents, and nothing else. */
+const CUSTOM_PROPERTY = /^--[a-z0-9_-]+$/i;
+/**
+ * The inline `style` binding `property` to the theme token `token`, falling
+ * back to `--color-neutral` when the theme declares no such token.
+ *
+ * `token` is validated rather than trusted: a value that is not a custom
+ * property name is dropped entirely, so nothing a caller passes can break out
+ * of the `var()` it is interpolated into and inject further declarations.
+ *
+ * Returns `undefined` when there is no token, so a component can hand the
+ * result straight to `style` and emit no attribute at all.
+ *
+ * ```svelte
+ * <span style={colourTokenStyle(BADGE_COLOUR_PROPERTY, '--party-alp')}
+ *       class="bg-(--badge-colour)/15 border-(--badge-colour)">…</span>
+ * ```
+ */
+export function colourTokenStyle(property, token) {
+    if (token === undefined)
+        return undefined;
+    const name = token.trim();
+    const safe = CUSTOM_PROPERTY.test(name) ? name : '--color-neutral';
+    return `${property}: var(${safe}, var(--color-neutral))`;
+}

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

@@ -0,0 +1,63 @@
+/**
+ * ui — buttons, badges, surfaces and small interactive affordances.
+ *
+ * The family every other family builds on: `Alert` is what a form's errors
+ * surface in, `Card` is the surface a section is drawn on, `Button` is what
+ * a dialog's actions are. Import from the package barrel rather than from
+ * here — this file is the family's own index, and the public surface is
+ * `src/lib/index.ts`.
+ *
+ * One convention worth stating once: every optional prop in this family is
+ * declared `T | undefined`, not bare `T`. The workspace compiles with
+ * `exactOptionalPropertyTypes`, under which `prop?: T` rejects an explicitly
+ * passed `undefined` — so a caller forwarding its own optional prop
+ * (`<Button {tone}>` where `tone?: Tone`) would not compile. Widening the
+ * declaration is what makes these primitives composable by the other
+ * families.
+ *
+ * @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

@@ -0,0 +1,62 @@
+/**
+ * ui — buttons, badges, surfaces and small interactive affordances.
+ *
+ * The family every other family builds on: `Alert` is what a form's errors
+ * surface in, `Card` is the surface a section is drawn on, `Button` is what
+ * a dialog's actions are. Import from the package barrel rather than from
+ * here — this file is the family's own index, and the public surface is
+ * `src/lib/index.ts`.
+ *
+ * One convention worth stating once: every optional prop in this family is
+ * declared `T | undefined`, not bare `T`. The workspace compiles with
+ * `exactOptionalPropertyTypes`, under which `prop?: T` rejects an explicitly
+ * passed `undefined` — so a caller forwarding its own optional prop
+ * (`<Button {tone}>` where `tone?: Tone`) would not compile. Widening the
+ * declaration is what makes these primitives composable by the other
+ * families.
+ *
+ * @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";
+export * from "./menu-context.js";
+export * from "./slug.js";
+export * from "./tones.js";

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

@@ -0,0 +1,20 @@
+/**
+ * How a {@link MenuItem} learns which kind of menu it is inside.
+ *
+ * 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.
+ *
+ * `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 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

@@ -0,0 +1,22 @@
+/**
+ * How a {@link MenuItem} learns which kind of menu it is inside.
+ *
+ * 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.
+ *
+ * `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 { 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() {
+    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);
+}

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

@@ -0,0 +1,12 @@
+/**
+ * The one set of bits-ui menu parts, for `DropdownMenu` and `ContextMenu` to
+ * lend their children. Importing this module is what reaches bits-ui's menu
+ * runtime, so only those two components import it.
+ *
+ * Internal: not re-exported from the `ui` barrel.
+ *
+ * @module
+ */
+import type { MenuParts } from './menu-parts.ts';
+/** The parts for a menu of the given kind. */
+export declare function menuParts(kind: MenuParts['kind']): MenuParts;

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

@@ -0,0 +1,27 @@
+/**
+ * The one set of bits-ui menu parts, for `DropdownMenu` and `ContextMenu` to
+ * lend their children. Importing this module is what reaches bits-ui's menu
+ * runtime, so only those two components import it.
+ *
+ * Internal: not re-exported from the `ui` barrel.
+ *
+ * @module
+ */
+import CheckboxItemPart from './CheckboxItemPart.svelte';
+import ItemPart from './ItemPart.svelte';
+import RadioGroupPart from './RadioGroupPart.svelte';
+import RadioItemPart from './RadioItemPart.svelte';
+import SeparatorPart from './SeparatorPart.svelte';
+import SubPart from './SubPart.svelte';
+/** The parts for a menu of the given kind. */
+export function menuParts(kind) {
+    return {
+        kind,
+        item: ItemPart,
+        separator: SeparatorPart,
+        checkboxItem: CheckboxItemPart,
+        radioGroup: RadioGroupPart,
+        radioItem: RadioItemPart,
+        sub: SubPart,
+    };
+}

package/dist/ui/slug.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Text → anchor id.
+ *
+ * Shared by {@link Heading} and anything else that has to address a section it
+ * only knows the words of. Deliberately tiny and deterministic: the same text
+ * must slug identically on the server and in the browser, or an in-page link
+ * rendered during SSR points at an id hydration then changes.
+ *
+ * @module
+ */
+/**
+ * Lower-case, strip anything that is not a word character, collapse runs of
+ * whitespace to single hyphens.
+ *
+ * ```ts
+ * slugify('Growing conditions & care') // 'growing-conditions-care'
+ * ```
+ */
+export declare function slugify(text: string): string;