@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/ui/ShareButton.svelte

@@ -0,0 +1,64 @@
+<!-- @component
+Hands a title, a URL and some text to the platform share sheet.
+-->
+<!--
+  ShareButton — hands a title, a URL and some text to the platform share
+  sheet.
+
+  It renders NOTHING where the Web Share API is absent — every desktop
+  Firefox, and the server. A button that opens nothing is worse than no
+  button, and the caller cannot know which it has before hydration, so the
+  decision is made here and made after mount: reading `navigator.share` during
+  SSR would render a button the client then has to remove, which is a layout
+  shift on every page that carries one.
+
+  `canShare`, where the browser has it, is consulted with the SAME payload
+  that will be shared — the original implementation tested one
+  object and shared another. Where it is missing the only way to find out is
+  to try, and the rejection path handles "no". A share sheet the reader
+  dismisses also rejects; `onError` sees both, because the API does not
+  distinguish them.
+
+  ARIA contract: a plain `Button`, so nothing beyond its label. The icon is
+  decorative.
+-->
+<script lang="ts">import { Share2 } from "@lucide/svelte";
+import Button from "./Button.svelte";
+let { title, text, url, label = "Share", tone, variant = "ghost", size = "sm", class: className, onShare, onError, children } = $props();
+/**
+* Whether this browser can share at all. Set from an effect, never at
+* module or render scope: `navigator` does not exist on the server.
+*/
+let shareable = $state(false);
+$effect(() => {
+	shareable = typeof navigator !== "undefined" && typeof navigator.share === "function";
+});
+const payload = $derived({
+	...title === undefined ? {} : { title },
+	...text === undefined ? {} : { text },
+	...url === undefined ? {} : { url }
+});
+const share = async () => {
+	if (typeof navigator.canShare === "function" && !navigator.canShare(payload)) {
+		onError?.(new Error("This browser cannot share that payload."));
+		return;
+	}
+	try {
+		await navigator.share(payload);
+		onShare?.(payload);
+	} catch (error) {
+		onError?.(error);
+	}
+};
+</script>
+
+{#if shareable}
+  <Button {tone} {variant} {size} class={className} onclick={share}>
+    {#if children}
+      {@render children()}
+    {:else}
+      <Share2 class="size-4" aria-hidden="true" />
+      {label}
+    {/if}
+  </Button>
+{/if}

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { ButtonVariant, Size, Tone } from './tones.ts';
+interface Props {
+    /** Share sheet title. */
+    title?: string | undefined;
+    /** Body text offered alongside the link. */
+    text?: string | undefined;
+    /** The URL to share; the current page when omitted. */
+    url?: string | undefined;
+    /**
+     * The button's text.
+     * @defaultValue `'Share'`
+     */
+    label?: string | undefined;
+    /** Semantic colour. */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI button style.
+     * @defaultValue `'ghost'`
+     */
+    variant?: ButtonVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'sm'`
+     */
+    size?: Size | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+    /** The share sheet completed. */
+    onShare?: ((data: ShareData) => void) | undefined;
+    /** The share sheet failed, or the reader dismissed it. */
+    onError?: ((error: unknown) => void) | undefined;
+    /** Replaces the label and icon entirely. */
+    children?: Snippet<[]> | undefined;
+}
+/** Hands a title, a URL and some text to the platform share sheet. */
+declare const ShareButton: import("svelte").Component<Props, {}, "">;
+type ShareButton = ReturnType<typeof ShareButton>;
+export default ShareButton;

package/dist/ui/Skeleton.svelte

@@ -0,0 +1,43 @@
+<!-- @component
+daisyUI `skeleton` placeholders — a block, a circle or lines of text — for a surface whose data has not arrived.
+-->
+<!--
+  Skeleton — daisyUI `skeleton` placeholders for a surface whose data has not
+  arrived. Three shapes: a `block` (one box, sized by the caller's `class`), a
+  `circle` (an avatar), or `text` (`lines` rows of decreasing width, so the
+  shimmer reads as a paragraph rather than a bar).
+
+  ARIA contract: the shimmer conveys "loading" by animation alone, which is
+  nothing to a screen reader, so the wrapper is a polite live region
+  (`role="status"`) marked `aria-busy="true"` and named by `label`, and every
+  shimmering box is `aria-hidden`. The label is an `aria-label` rather than
+  visually hidden text because `status` does not take its name from its
+  content — and it is the ONLY thing announced, since the fake paragraph
+  shapes must not be read as content.
+-->
+<script lang="ts">let { variant = "block", lines = 3, label = "Loading", class: className, ...rest } = $props();
+const widths = [
+	"w-full",
+	"w-11/12",
+	"w-4/5",
+	"w-3/4",
+	"w-2/3",
+	"w-1/2"
+];
+const rows = $derived(Array.from({ length: Math.max(1, lines) }, (_, index) => widths[index % widths.length] ?? "w-full"));
+export {};
+</script>
+
+<div {...rest} role="status" aria-busy="true" aria-label={label} class={className}>
+  {#if variant === 'text'}
+    <div class="flex flex-col gap-2" aria-hidden="true">
+      {#each rows as width, index (index)}
+        <div class={['skeleton h-4', width]}></div>
+      {/each}
+    </div>
+  {:else if variant === 'circle'}
+    <div class="skeleton size-12 shrink-0 rounded-full" aria-hidden="true"></div>
+  {:else}
+    <div class="skeleton h-24 w-full" aria-hidden="true"></div>
+  {/if}
+</div>

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The placeholder shape.
+     * @defaultValue `'block'`
+     */
+    variant?: 'block' | 'text' | 'circle' | undefined;
+    /**
+     * Rows for the `text` variant.
+     * @defaultValue `3`
+     */
+    lines?: number | undefined;
+    /**
+     * What assistive technology announces in place of the shimmer.
+     * @defaultValue `'Loading'`
+     */
+    label?: string | undefined;
+}
+/** daisyUI `skeleton` placeholders — a block, a circle or lines of text — for a surface whose data has not arrived. */
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/ui/Spinner.svelte

@@ -0,0 +1,41 @@
+<!-- @component
+An indeterminate loading indicator in daisyUI's `loading` shapes, named for assistive technology unless it is decorative.
+-->
+<!--
+  Spinner — "something is happening, and there is no shape to preview": a
+  panel waiting on a fetch, a lazy section, an inline "Checking…". When the
+  content's shape is known, `Skeleton` is the better placeholder.
+
+  ARIA contract, mirroring `Skeleton`'s on purpose: the wrapper is
+  `role="status"` (a polite live region, so its appearance is announced)
+  named by `aria-label={label}` — `status` does not take its name from its
+  content — and the animated shape is `aria-hidden`. With `showLabel` the
+  visible text is `aria-hidden` too, so the label is announced once.
+
+  `decorative` is for a spinner whose meaning something else already
+  carries — `Button`'s `aria-busy`, a live region around it — and renders the
+  shape alone, `aria-hidden`, with no role. Never nest a non-decorative
+  spinner inside another live region: two regions announce twice.
+
+  Motion: daisyUI's `loading` already slows its animation under
+  `prefers-reduced-motion: reduce` rather than stopping it — a frozen spinner
+  reads as "hung" (WCAG 2.3.3) — so nothing is added here.
+-->
+<script lang="ts">import { loadingSize, loadingVariant, textTone } from "./tones.js";
+let { variant = "spinner", size = "md", tone, label = "Loading", showLabel = false, decorative = false, class: className, ...rest } = $props();
+const shape = $derived([
+	"loading",
+	loadingVariant[variant],
+	loadingSize[size],
+	tone !== undefined && textTone[tone]
+]);
+</script>
+
+{#if decorative}
+  <span {...rest} aria-hidden="true" class={[shape, className]}></span>
+{:else}
+  <span {...rest} role="status" aria-label={label} class={['inline-flex items-center gap-2', className]}>
+    <span aria-hidden="true" class={shape}></span>
+    {#if showLabel}<span aria-hidden="true">{label}</span>{/if}
+  </span>
+{/if}

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

@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Size, type SpinnerVariant, type Tone } from './tones.ts';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The daisyUI `loading` shape.
+     * @defaultValue `'spinner'`
+     */
+    variant?: SpinnerVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /** Colour, through `textTone`; inherits `currentColor` when omitted. */
+    tone?: Tone | undefined;
+    /**
+     * What assistive technology announces.
+     * @defaultValue `'Loading'`
+     */
+    label?: string | undefined;
+    /**
+     * Print `label` beside the spinner.
+     * @defaultValue `false`
+     */
+    showLabel?: boolean | undefined;
+    /**
+     * Something else already says it is loading: render the shape only, `aria-hidden`, with no role.
+     * @defaultValue `false`
+     */
+    decorative?: boolean | undefined;
+}
+/** An indeterminate loading indicator in daisyUI's `loading` shapes, named for assistive technology unless it is decorative. */
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/ui/Stack.svelte

@@ -0,0 +1,36 @@
+<!-- @component
+Overlapping cards or images on daisyUI `stack`: only the top item is exposed, the rest are visual depth.
+-->
+<!--
+  Stack — a pile with a peek of what is behind: a "3 photos" thumbnail, a
+  collapsed pile of notifications. The first item is on top.
+
+  The rule this component exists for: daisyUI's `stack` only paints the
+  items behind; every child stays in the DOM, so a screen reader would read
+  all three cards and Tab would land on links hidden behind the top one.
+  So every item after the first is `inert` (not focusable, not clickable)
+  and `aria-hidden` (not read). The depth is then reported in words: the top
+  item ends with a visually hidden `countLabel(count)` ("3 items") whenever
+  there is more than one, so it is not visual-only.
+
+  The items are data, not children: `stack.css` positions them with
+  `.stack > *:nth-child(n)`, so each must be a direct child of the root and
+  no wrapper (not even `display: contents`) can group the ones behind.
+-->
+<script lang="ts" generics="T">import { stackDirection } from "./tones.js";
+let { items, item, direction = "bottom", count, countLabel = (n) => `${n} items`, class: className, ...rest } = $props();
+const total = $derived(count ?? items.length);
+</script>
+
+<div {...rest} class={['stack', stackDirection[direction], className]}>
+  {#each items as entry, index (index)}
+    {#if index === 0}
+      <div>
+        {@render item(entry, true)}
+        {#if total > 1}<span class="sr-only">{countLabel(total)}</span>{/if}
+      </div>
+    {:else}
+      <div inert aria-hidden="true">{@render item(entry, false)}</div>
+    {/if}
+  {/each}
+</div>

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/ThemeToggle.svelte

@@ -0,0 +1,65 @@
+<!-- @component
+The light/dark switch: sets `data-theme` on the document element and remembers the choice in `localStorage`.
+-->
+<!--
+  ThemeToggle — the light / dark switch: a daisyUI `swap` label around a
+  checkbox, which writes the chosen theme name to
+  `document.documentElement.dataset.theme` and remembers it in
+  `localStorage`.
+
+  Generic on purpose. The two theme NAMES are props, because this library
+  ships tokens rather than a brand and an app may call its themes anything;
+  `storageKey` is a prop for the same reason.
+
+  **The pre-paint script is the app's job.** This component can only run
+  after hydration, so a returning visitor whose choice was dark would flash
+  light first. The fix is three lines the app inlines in its document head,
+  before any stylesheet, reading the same key:
+
+  ```html
+  <script>
+    try {
+      const t = localStorage.getItem('theme');
+      if (t) document.documentElement.dataset.theme = t;
+    } catch {}
+  </script>
+  ```
+
+  Every `localStorage` access here is wrapped: it throws outright in a private
+  window and with site data blocked, and a remembered theme is a convenience
+  that must never be able to stop the control rendering.
+
+  ARIA contract: a real checkbox with `role="switch"` — on/off, not
+  checked/unchecked — named by `label`. Both icons are `aria-hidden`; they
+  are the visual half of the state the switch already announces. Note that
+  daisyUI's `theme-controller` class is deliberately NOT used: it applies a
+  theme through CSS scoped to the checkbox, which would fight with the
+  `data-theme` this component sets on the document element.
+-->
+<script lang="ts">import { Moon, Sun } from "@lucide/svelte";
+let { lightTheme, darkTheme, storageKey = "theme", label = "Toggle dark mode", value = $bindable(), class: className } = $props();
+// Read the remembered choice after mount: `localStorage` does not exist on
+// the server, and a value read during render would not survive hydration.
+$effect(() => {
+	try {
+		const stored = globalThis.localStorage?.getItem(storageKey);
+		if (stored === darkTheme || stored === lightTheme) value = stored;
+	} catch {}
+});
+const active = $derived(value ?? lightTheme);
+const dark = $derived(active === darkTheme);
+const onchange = (event) => {
+	const next = event.currentTarget.checked ? darkTheme : lightTheme;
+	value = next;
+	document.documentElement.dataset.theme = next;
+	try {
+		globalThis.localStorage?.setItem(storageKey, next);
+	} catch {}
+};
+</script>
+
+<label class={['swap swap-rotate btn btn-ghost btn-circle', className]}>
+  <input type="checkbox" role="switch" checked={dark} aria-label={label} {onchange} />
+  <Sun class="swap-off size-5" aria-hidden="true" />
+  <Moon class="swap-on size-5" aria-hidden="true" />
+</label>

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

@@ -0,0 +1,24 @@
+interface Props {
+    /** The theme name applied when the switch is off. */
+    lightTheme: string;
+    /** The theme name applied when the switch is on. */
+    darkTheme: string;
+    /**
+     * `localStorage` key the choice is remembered under.
+     * @defaultValue `'theme'`
+     */
+    storageKey?: string | undefined;
+    /**
+     * Accessible name of the switch.
+     * @defaultValue `'Toggle dark mode'`
+     */
+    label?: string | undefined;
+    /** The active theme name. Bindable; defaults to `lightTheme`. */
+    value?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** The light/dark switch: sets `data-theme` on the document element and remembers the choice in `localStorage`. */
+declare const ThemeToggle: import("svelte").Component<Props, {}, "value">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

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}