@thomasfosterau/components 0.1.0 → 0.2.0

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

@@ -0,0 +1,48 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type StackDirection } from './tones.ts';
+declare function $$render<T>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        /** The items, top first. Only the first is exposed; the rest are depth. */
+        items: readonly T[];
+        /** Draws one item; `top` is true for the first. */
+        item: Snippet<[item: T, top: boolean]>;
+        /**
+         * Which side the items behind peek out from.
+         * @defaultValue `'bottom'`
+         */
+        direction?: StackDirection | undefined;
+        /**
+         * Total count when more exist than are passed (3 shown of 12).
+         * @defaultValue `items.length`
+         */
+        count?: number | undefined;
+        /**
+         * Words for the depth, read after the top item.
+         * @defaultValue `(n) => \`${n} items\``
+         */
+        countLabel?: ((count: number) => string) | undefined;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Overlapping cards or images on daisyUI `stack`: only the top item is exposed, the rest are visual depth. */
+declare const Stack: $$IsomorphicComponent;
+type Stack<T> = InstanceType<typeof Stack<T>>;
+export default Stack;

package/dist/ui/ToggleButton.svelte

@@ -0,0 +1,58 @@
+<!-- @component
+A button that stays pressed (`aria-pressed`), on bits-ui `Toggle`.
+-->
+<!--
+  ToggleButton — "Bold", "Show frost dates", "Mute", "Favourite": a button
+  whose state persists between presses. Not a `fields/Toggle` (a switch: a
+  setting that takes effect, `role="switch"`), not a `Checkbox` (a form
+  value).
+
+  ARIA contract: bits-ui's `aria-pressed`, and Space / Enter both toggle.
+  The accessible name never changes with state: "Mute" stays "Mute" when
+  pressed, because the state is `aria-pressed`'s job. An icon-only button
+  must have a `label` (the types enforce it), read as visually hidden text;
+  `tooltip` opts in to showing it on hover and focus. `data-state="on" |
+  "off"` is a supported styling hook. Pressed is not colour alone: see
+  `toggle-classes.ts`; `pressedIcon` adds a shape change.
+-->
+<script lang="ts">import { Toggle } from "bits-ui";
+import { toggleClasses } from "./toggle-classes.js";
+import { buttonSize } from "./tones.js";
+import Tooltip from "./Tooltip.svelte";
+let { pressed = $bindable(false), onPressedChange, tone = "neutral", variant = "ghost", size = "md", icon, pressedIcon, tooltip = false, iconOnly = false, label, children, disabled, class: className, ...rest } = $props();
+</script>
+
+{#snippet button(extra: Record<string, unknown>)}
+  <Toggle.Root
+    {...extra}
+    bind:pressed
+    {...onPressedChange === undefined ? {} : { onPressedChange }}
+    {...disabled == null ? {} : { disabled }}
+  >
+    {#snippet child({ props, pressed: on })}
+      <button
+        {...rest}
+        {...props}
+        type="button"
+        class={[
+          'btn',
+          buttonSize[size],
+          toggleClasses(on, tone, variant),
+          iconOnly && 'btn-square',
+          className,
+        ]}
+      >
+        {#if on && pressedIcon}{@render pressedIcon()}{:else if icon}{@render icon()}{/if}
+        {#if iconOnly}<span class="sr-only">{label}</span>{:else}{@render children?.()}{/if}
+      </button>
+    {/snippet}
+  </Toggle.Root>
+{/snippet}
+
+{#if tooltip && label !== undefined}
+  <Tooltip text={label}>
+    {#snippet children({ props })}{@render button(props)}{/snippet}
+  </Tooltip>
+{:else}
+  {@render button({})}
+{/if}

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

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type ButtonVariant, type Size, type Tone } from './tones.ts';
+type Props = Omit<HTMLButtonAttributes, 'type' | 'children'> & {
+    /** Whether the button is pressed. Bindable. */
+    pressed?: boolean | undefined;
+    /** Called with the next state after a press. */
+    onPressedChange?: ((pressed: boolean) => void) | undefined;
+    /**
+     * Colour while pressed.
+     * @defaultValue `'neutral'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * Look while not pressed.
+     * @defaultValue `'ghost'`
+     */
+    variant?: ButtonVariant | undefined;
+    /** @defaultValue `'md'` */
+    size?: Size | undefined;
+    /** Leading icon. */
+    icon?: Snippet<[]> | undefined;
+    /** Icon shown in place of `icon` while pressed (an outlined star becomes a filled one). */
+    pressedIcon?: Snippet<[]> | undefined;
+    /**
+     * Show the label in a tooltip on hover and focus (icon-only buttons).
+     * @defaultValue `false`
+     */
+    tooltip?: boolean | undefined;
+} & ({
+    iconOnly?: false | undefined;
+    label?: undefined;
+    /** The button text; its accessible name. */
+    children: Snippet<[]>;
+} | {
+    /** Hide the text: only the icon shows, and `label` is the accessible name. */
+    iconOnly: true;
+    /** The accessible name of an icon-only button. Constant across states. */
+    label: string;
+    children?: undefined;
+});
+/** A button that stays pressed (`aria-pressed`), on bits-ui `Toggle`. */
+declare const ToggleButton: import("svelte").Component<Props, {}, "pressed">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
+export default ToggleButton;

package/dist/ui/ToggleGroup.svelte

@@ -0,0 +1,142 @@
+<!-- @component
+A set of toggle buttons answering one question, exclusively or independently, on bits-ui `ToggleGroup`.
+-->
+<!--
+  ToggleGroup — a segmented control (`type="single"`: Grid | List | Map,
+  Day | Week | Month) or a set of independent toggles (`type="multiple"`:
+  B / I / U, "Show: Annuals Perennials Bulbs"), as daisyUI `btn`s in a
+  `join`. One Tab stop, arrow keys between items (bits-ui's roving focus).
+
+  ARIA contract:
+  - `type="multiple"`: a `role="group"` of buttons with `aria-pressed`;
+    arrows move focus, Space / Enter toggles.
+  - `type="single"`: bits-ui makes the items `role="radio"` with
+    `aria-checked` but keeps its root a `group`; radios belong in a
+    `radiogroup`, so the root's role is overridden. As in an APG radio
+    group, arrows move focus AND select (bits-ui only moves focus, so the
+    root completes the move), and Tab into the group lands on the checked
+    item, not the first. With `required`, pressing the checked item does
+    nothing, so one item always stays selected.
+  - Named by `label` (`aria-label`) or, inside a `FormField`, by the label
+    element (`labelId` → `aria-labelledby`); `describedBy` and `invalid` as
+    every field control. An item's name never changes with state; an
+    icon-only item reads its `label` as visually hidden text, and
+    `tooltip` opts in to showing it on hover and focus.
+  - With `name`, the selection posts with a form: one hidden input per
+    selected value (bits-ui's group has no hidden inputs of its own).
+-->
+<script lang="ts" generics="V extends string">import { Check } from "@lucide/svelte";
+import { ToggleGroup } from "bits-ui";
+import { toggleClasses, toggleSetters } from "./toggle-classes.js";
+import { buttonSize } from "./tones.js";
+import Tooltip from "./Tooltip.svelte";
+let { type, items, value = $bindable(), onValueChange, required = false, label, labelId, describedBy = "", invalid = false, name, orientation = "horizontal", loop = true, tone = "primary", variant = "solid", size = "md", block = false, showCheck = false, tooltip = false, disabled = false, item: itemBody, class: className, ...rest } = $props();
+const selected = $derived(value === undefined || value === "" ? [] : typeof value === "string" ? [value] : value);
+const setters = toggleSetters({
+	required: () => required,
+	assign: (next) => value = next,
+	notify: () => onValueChange
+});
+const MOVE_KEYS = new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End"
+]);
+/** Single mode: once bits-ui has moved focus, select what it moved to. */
+function selectFollowsFocus(event) {
+	if (type !== "single" || !MOVE_KEYS.has(event.key)) return;
+	const focused = document.activeElement;
+	if (!(focused instanceof HTMLElement)) return;
+	const next = focused.dataset["value"];
+	if (next !== undefined && next !== value && !focused.hasAttribute("data-disabled")) setters.single(next);
+}
+/** Single mode: Tab into the group lands on the checked item. */
+function focusChecked(event) {
+	const root = event.currentTarget;
+	if (type !== "single" || !(root instanceof HTMLElement)) return;
+	if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+	const checked = root.querySelector("[aria-checked=\"true\"]");
+	if (checked !== null && checked !== event.target) checked.focus();
+}
+</script>
+
+{#snippet root({ props }: { props: Record<string, unknown> })}
+  <div
+    {...props}
+    {...rest}
+    role={type === 'single' ? 'radiogroup' : 'group'}
+    aria-label={labelId === undefined ? label : undefined}
+    aria-labelledby={labelId}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    aria-invalid={invalid ? 'true' : undefined}
+    aria-required={type === 'single' && required ? 'true' : undefined}
+    aria-orientation={orientation}
+    onkeydown={selectFollowsFocus}
+    onfocusin={focusChecked}
+    class={['join', orientation === 'vertical' && 'join-vertical', block && 'flex w-full', className]}
+  >
+    {#each items as entry (entry.value)}
+      {#if tooltip && entry.iconOnly}
+        <Tooltip text={entry.label}>
+          {#snippet children({ props: tip })}{@render itemButton(entry, tip)}{/snippet}
+        </Tooltip>
+      {:else}
+        {@render itemButton(entry, {})}
+      {/if}
+    {/each}
+  </div>
+{/snippet}
+
+{#snippet itemButton(entry: ToggleGroupItem<V>, extra: Record<string, unknown>)}
+  <ToggleGroup.Item {...extra} value={entry.value} disabled={entry.disabled ?? false}>
+    {#snippet child({ props, pressed })}
+      <button
+        {...props}
+        type="button"
+        class={[
+          'btn join-item',
+          buttonSize[size],
+          toggleClasses(pressed, tone, variant),
+          block && 'flex-1',
+          entry.iconOnly && !block && 'btn-square',
+        ]}
+      >
+        {#if itemBody}
+          {@render itemBody(entry, { pressed })}
+        {:else}
+          {#if showCheck && pressed}<Check class="size-4" aria-hidden="true" />{/if}
+          {@render entry.icon?.()}
+          {#if entry.iconOnly}<span class="sr-only">{entry.label}</span>{:else}{entry.label}{/if}
+        {/if}
+      </button>
+    {/snippet}
+  </ToggleGroup.Item>
+{/snippet}
+
+{#if type === 'single'}
+  <ToggleGroup.Root
+    type="single"
+    bind:value={() => (typeof value === 'string' ? value : ''), setters.single}
+    {orientation}
+    {loop}
+    {disabled}
+    child={root}
+  />
+{:else}
+  <ToggleGroup.Root
+    type="multiple"
+    bind:value={() => [...selected], setters.multiple}
+    {orientation}
+    {loop}
+    {disabled}
+    child={root}
+  />
+{/if}
+{#if name !== undefined}
+  {#each selected as selectedValue (selectedValue)}
+    <input type="hidden" {name} value={selectedValue} />
+  {/each}
+{/if}

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

@@ -0,0 +1,86 @@
+import { ToggleGroup } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ToggleGroupItem } from './toggle-classes.ts';
+import { type ButtonVariant, type Size, type Tone } from './tones.ts';
+declare function $$render<V extends string>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "onchange" | "children"> & ({
+        items: readonly ToggleGroupItem<V>[];
+        /** Accessible name of the group ("View", "Formatting"); omit when `labelId` names it. */
+        label?: string | undefined;
+        /** `FieldControl`: the visible label's id; the group is `aria-labelledby` it. */
+        labelId?: string | undefined;
+        /** `FieldControl`: space-separated ids for `aria-describedby`. */
+        describedBy?: string | undefined;
+        /** `FieldControl`: the field is in error. */
+        invalid?: boolean | undefined;
+        /** Posts the selection with a form: one hidden input per selected value. */
+        name?: string | undefined;
+        /** @defaultValue `'horizontal'` */
+        orientation?: "horizontal" | "vertical" | undefined;
+        /** @defaultValue `true` */
+        loop?: boolean | undefined;
+        /**
+         * Colour of a pressed item.
+         * @defaultValue `'primary'`
+         */
+        tone?: Tone | undefined;
+        /**
+         * Look of an unpressed item.
+         * @defaultValue `'solid'`
+         */
+        variant?: ButtonVariant | undefined;
+        /** @defaultValue `'md'` */
+        size?: Size | undefined;
+        /** Stretch to the container's width, items sharing it equally. */
+        block?: boolean | undefined;
+        /** A check mark (`aria-hidden`) on pressed items, a second non-colour cue. */
+        showCheck?: boolean | undefined;
+        /** Show icon-only items' labels in a tooltip on hover and focus. */
+        tooltip?: boolean | undefined;
+        disabled?: boolean | undefined;
+        /** Per-item content in place of icon + label; the label stays the name unless you render it. */
+        item?: Snippet<[ToggleGroupItem<V>, {
+            pressed: boolean;
+        }]> | undefined;
+    } & ({
+        type: "single";
+        /** The selected value, `''` for none. Bindable. */
+        value?: V | "" | undefined;
+        onValueChange?: ((value: V | "") => void) | undefined;
+        /**
+         * Keep one item selected: pressing the selected item does nothing.
+         * @defaultValue `false`
+         */
+        required?: boolean | undefined;
+    } | {
+        type: "multiple";
+        /** The selected values. Bindable. */
+        value?: readonly V[] | undefined;
+        onValueChange?: ((value: V[]) => void) | undefined;
+        /** `FieldControl`: accepted for the spread; a multiple group may be empty. */
+        required?: boolean | 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 toggle buttons answering one question, exclusively or independently, on bits-ui `ToggleGroup`. */
+declare const ToggleGroup: $$IsomorphicComponent;
+type ToggleGroup<V extends string> = InstanceType<typeof ToggleGroup<V>>;
+export default ToggleGroup;

package/dist/ui/Toolbar.svelte

@@ -0,0 +1,40 @@
+<!-- @component
+A `role="toolbar"` on bits-ui `Toolbar`: one Tab stop, arrow keys between its controls.
+-->
+<!--
+  Toolbar — an editor's formatting row, a table's bulk-action bar, a canvas
+  tool palette (APG Toolbar). Its controls are `ToolbarButton`,
+  `ToolbarLink`, `ToolbarToggleGroup` and `ToolbarSeparator`, all bits-ui
+  toolbar parts, so the whole row is ONE Tab stop with arrow keys within it.
+  A plain `Button` or a nested `ToggleGroup` inside it would each add Tab
+  stops of their own and break that.
+
+  A toolbar is a composite widget. For a cluster of independent actions
+  ("Save | Save as… | Discard") where each should be its own Tab stop, use
+  `ButtonGroup`.
+
+  ARIA and keyboard contract: bits-ui's `role="toolbar"` and roving
+  tabindex; ← / → (↑ / ↓ when vertical), Home / End, wrapping with `loop`.
+  We add the name (`label` → `aria-label`) and `aria-orientation`.
+-->
+<script lang="ts">import { Toolbar } from "bits-ui";
+let { label, orientation = "horizontal", loop = true, children, class: className, ...rest } = $props();
+</script>
+
+<Toolbar.Root {orientation} {loop}>
+  {#snippet child({ props })}
+    <div
+      {...rest}
+      {...props}
+      aria-label={label}
+      aria-orientation={orientation}
+      class={[
+        'rounded-box bg-base-200 inline-flex items-center gap-1 p-1',
+        orientation === 'vertical' && 'flex-col',
+        className,
+      ]}
+    >
+      {@render children()}
+    </div>
+  {/snippet}
+</Toolbar.Root>

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

@@ -0,0 +1,20 @@
+import { Toolbar } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Accessible name ("Formatting", "Bulk actions"). */
+    label: string;
+    /** @defaultValue `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Arrow keys wrap from the last control to the first.
+     * @defaultValue `true`
+     */
+    loop?: boolean | undefined;
+    /** The controls: `ToolbarButton`, `ToolbarLink`, `ToolbarToggleGroup`, `ToolbarSeparator`. */
+    children: Snippet<[]>;
+}
+/** A `role="toolbar"` on bits-ui `Toolbar`: one Tab stop, arrow keys between its controls. */
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/ui/ToolbarButton.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+A button inside a `Toolbar`: one of its roving-focus controls, wearing the library's `Button`.
+-->
+<!--
+  ToolbarButton — rendered through bits-ui `Toolbar.Button`'s `child`
+  snippet onto `Button`, so the button look and the `loading` contract stay
+  one implementation. `iconOnly` hides the text visually; it stays the
+  accessible name (never `title`).
+-->
+<script lang="ts">import { Toolbar } from "bits-ui";
+import Button from "./Button.svelte";
+let { tone, variant = "ghost", size = "sm", icon, iconOnly = false, children, disabled, class: className, ...rest } = $props();
+</script>
+
+<Toolbar.Button {...disabled == null ? {} : { disabled }}>
+  {#snippet child({ props })}
+    <Button
+      {...rest}
+      {...props}
+      {tone}
+      {variant}
+      {size}
+      {icon}
+      class={[iconOnly && 'btn-square', className]}
+    >
+      {#if iconOnly}<span class="sr-only">{@render children()}</span>{:else}{@render children()}{/if}
+    </Button>
+  {/snippet}
+</Toolbar.Button>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonVariant, Size, Tone } from './tones.ts';
+interface Props extends Omit<HTMLButtonAttributes, 'type' | 'children'> {
+    /** Semantic colour. */
+    tone?: Tone | undefined;
+    /** @defaultValue `'ghost'` */
+    variant?: ButtonVariant | undefined;
+    /** @defaultValue `'sm'` */
+    size?: Size | undefined;
+    /** Leading icon. */
+    icon?: Snippet<[]> | undefined;
+    /** Hide the text visually; it remains the accessible name. */
+    iconOnly?: boolean | undefined;
+    /** The button text; its accessible name. */
+    children: Snippet<[]>;
+}
+/** A button inside a `Toolbar`: one of its roving-focus controls, wearing the library's `Button`. */
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/ui/ToolbarLink.svelte

@@ -0,0 +1,21 @@
+<!-- @component
+A link inside a `Toolbar`: one of its roving-focus controls, resolved through the components context.
+-->
+<!--
+  ToolbarLink — bits-ui `Toolbar.Link`, styled as a small ghost button, with
+  `href` resolved through `getComponentsContext().href()` like every other
+  link in the library.
+-->
+<script lang="ts">import { Toolbar } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+let { href, children, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<Toolbar.Link>
+  {#snippet child({ props })}
+    <a {...rest} {...props} href={context.href(href)} class={['btn btn-ghost btn-sm', className]}>
+      {@render children()}
+    </a>
+  {/snippet}
+</Toolbar.Link>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAnchorAttributes, 'children'> {
+    /** App-relative path, resolved through the context's `href()`. */
+    href: string;
+    /** The link text; its accessible name. */
+    children: Snippet<[]>;
+}
+/** A link inside a `Toolbar`: one of its roving-focus controls, resolved through the components context. */
+declare const ToolbarLink: import("svelte").Component<Props, {}, "">;
+type ToolbarLink = ReturnType<typeof ToolbarLink>;
+export default ToolbarLink;

package/dist/ui/ToolbarSeparator.svelte

@@ -0,0 +1,22 @@
+<!-- @component
+A rule between groups of controls in a `Toolbar`, perpendicular to it.
+-->
+<!--
+  ToolbarSeparator — `role="separator"` with the perpendicular
+  `aria-orientation` (a vertical rule in a horizontal toolbar). Not
+  focusable, so the arrow keys skip it.
+-->
+<script lang="ts">let { toolbarOrientation = "horizontal", class: className, ...rest } = $props();
+const vertical = $derived(toolbarOrientation === "horizontal");
+export {};
+</script>
+
+<div
+  {...rest}
+  role="separator"
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  class={[
+    vertical ? 'bg-base-300 mx-1 h-6 w-px self-center' : 'bg-base-300 my-1 h-px w-6 self-center',
+    className,
+  ]}
+></div>

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The orientation of the enclosing toolbar; the rule runs across it.
+     * @defaultValue `'horizontal'`
+     */
+    toolbarOrientation?: 'horizontal' | 'vertical' | undefined;
+}
+/** A rule between groups of controls in a `Toolbar`, perpendicular to it. */
+declare const ToolbarSeparator: import("svelte").Component<Props, {}, "">;
+type ToolbarSeparator = ReturnType<typeof ToolbarSeparator>;
+export default ToolbarSeparator;

package/dist/ui/ToolbarToggleGroup.svelte

@@ -0,0 +1,66 @@
+<!-- @component
+A set of toggles inside a `Toolbar` (Bold / Italic, alignment), sharing the toolbar's single Tab stop.
+-->
+<!--
+  ToolbarToggleGroup — `ToggleGroup`'s props and look, built on bits-ui
+  `Toolbar.Group` / `Toolbar.GroupItem` rather than a nested
+  `ToggleGroup`: a nested group keeps its own roving focus, which the
+  toolbar knows nothing about, and the toolbar's one Tab stop breaks. Here
+  the items are toolbar controls, so ← / → run across the whole toolbar.
+
+  `type="multiple"`: a `role="group"` of `aria-pressed` buttons.
+  `type="single"`: the items are `radio`s, so the group is overridden to a
+  `radiogroup`; as in the APG toolbar example, the arrows only move focus
+  across the toolbar and Space / Enter selects. With `required`, pressing
+  the selected item does nothing.
+-->
+<script lang="ts" generics="V extends string">import { Toolbar } from "bits-ui";
+import { toggleClasses, toggleSetters } from "./toggle-classes.js";
+import { buttonSize } from "./tones.js";
+let { type, items, label, value = $bindable(), onValueChange, required = false, tone = "primary", variant = "ghost", size = "sm", disabled = false, class: className } = $props();
+const setters = toggleSetters({
+	required: () => required,
+	assign: (next) => value = next,
+	notify: () => onValueChange
+});
+</script>
+
+{#snippet group({ props }: { props: Record<string, unknown> })}
+  <div
+    {...props}
+    role={type === 'single' ? 'radiogroup' : 'group'}
+    aria-label={label}
+    class={['inline-flex items-center gap-0.5', className]}
+  >
+    {#each items as entry (entry.value)}
+      <Toolbar.GroupItem value={entry.value} disabled={entry.disabled ?? false}>
+        {#snippet child({ props: itemProps, pressed })}
+          <button
+            {...itemProps}
+            type="button"
+            class={['btn', buttonSize[size], toggleClasses(pressed, tone, variant), entry.iconOnly && 'btn-square']}
+          >
+            {@render entry.icon?.()}
+            {#if entry.iconOnly}<span class="sr-only">{entry.label}</span>{:else}{entry.label}{/if}
+          </button>
+        {/snippet}
+      </Toolbar.GroupItem>
+    {/each}
+  </div>
+{/snippet}
+
+{#if type === 'single'}
+  <Toolbar.Group
+    type="single"
+    bind:value={() => (typeof value === 'string' ? value : ''), setters.single}
+    {disabled}
+    child={group}
+  />
+{:else}
+  <Toolbar.Group
+    type="multiple"
+    bind:value={() => [...(Array.isArray(value) ? value : [])], setters.multiple}
+    {disabled}
+    child={group}
+  />
+{/if}