@thomasfosterau/components 0.0.0 → 0.1.0

package/dist/ui/Menu.svelte

@@ -0,0 +1,54 @@
+<!-- @component
+A daisyUI `menu` as either a labelled navigation list (`mode="nav"`) or a bits-ui dropdown (`mode="dropdown"`).
+-->
+<!--
+  Menu — one component over the two things daisyUI calls a `menu`, because a
+  call site writes the same `<MenuItem>` list for both.
+
+  `mode="nav"` is site navigation: a `<nav>` landmark around a `<ul
+  class="menu">` of links, where the current page marks itself with
+  `aria-current="page"`. Links, list, landmark — no widget, no roving focus,
+  no Escape. Everything stays reachable with nothing but Tab, which is the
+  correct behaviour for navigation and the wrong behaviour for a menu.
+
+  `mode="dropdown"` is an application menu: bits-ui's `DropdownMenu`, which
+  owns `aria-haspopup`/`aria-expanded` on the trigger, arrow-key roving
+  focus, typeahead, Escape to close and focus return. The daisyUI `menu`
+  styling is applied to a `<ul>` INSIDE the content; that list and its items'
+  `<li>` wrappers carry `role="none"` so the presentation layer does not come
+  between `role="menu"` and its `role="menuitem"` children in the
+  accessibility tree.
+
+  The mode reaches `MenuItem` through context rather than a prop, so the two
+  can never be set inconsistently. See `menu-context.ts`.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+import { setMenuMode } from "./menu-context.js";
+let { mode = "nav", label, open = $bindable(false), side = "bottom", align = "end", class: className, trigger, children } = $props();
+setMenuMode(() => mode);
+</script>
+
+{#if mode === 'dropdown'}
+  <DropdownMenu.Root bind:open>
+    {#if trigger}
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          {@render trigger({ props })}
+        {/snippet}
+      </DropdownMenu.Trigger>
+    {/if}
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content {side} {align} sideOffset={8} aria-label={label} class="z-50">
+        <ul role="none" class={['menu bg-base-100 rounded-box w-56 p-2 shadow-md', className]}>
+          {@render children()}
+        </ul>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
+{:else}
+  <nav aria-label={label}>
+    <ul class={['menu w-full gap-1 p-0', className]}>
+      {@render children()}
+    </ul>
+  </nav>
+{/if}

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * `nav` renders a navigation list; `dropdown` a menu behind `trigger`.
+     * @defaultValue `'nav'`
+     */
+    mode?: 'dropdown' | 'nav' | undefined;
+    /** Accessible name of the navigation landmark / the open menu. */
+    label: string;
+    /** Whether the dropdown is open. Bindable; ignored in `nav` mode. */
+    open?: boolean | undefined;
+    /**
+     * Which side of the trigger the dropdown opens on.
+     * @defaultValue `'bottom'`
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Alignment against the trigger.
+     * @defaultValue `'end'`
+     */
+    align?: 'start' | 'center' | 'end' | undefined;
+    /** Extra classes on the `<ul class="menu">`. */
+    class?: string | undefined;
+    /** The dropdown's trigger — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** The `MenuItem`s. */
+    children: Snippet<[]>;
+}
+/** A daisyUI `menu` as either a labelled navigation list (`mode="nav"`) or a bits-ui dropdown (`mode="dropdown"`). */
+declare const Menu: import("svelte").Component<Props, {}, "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/ui/MenuItem.svelte

@@ -0,0 +1,75 @@
+<!-- @component
+One entry of a `Menu`, in whichever mode the enclosing `Menu` declared.
+-->
+<!--
+  MenuItem — one entry of a `Menu`, in whichever of the two modes the
+  enclosing `Menu` declared.
+
+  In `nav` mode it is a plain `<li><a>`: the current page takes daisyUI's
+  `menu-active` AND `aria-current="page"`, because the highlight is a
+  colour and the attribute is what says so out loud. `current` overrides the
+  context's `isCurrent(href)`, which is what an app without a router-aware
+  context uses.
+
+  In `dropdown` mode it renders 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 — rather than a `<div>` pretending to be one. An item
+  with an `href` is a link and must stay a link (middle-click, "open in new
+  tab"); an item without one is a button.
+
+  ARIA contract: the `<li>` wrapper is `role="none"` in dropdown mode so it
+  does not sit between `role="menu"` and `role="menuitem"`. `disabled` is
+  bits-ui's in dropdown mode (skipped by arrow keys, not activatable) and
+  `aria-disabled` + no `href` in nav mode, where there is no widget to skip.
+  The `icon` snippet is decorative — the label carries the meaning.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import { getMenuMode } from "./menu-context.js";
+let { href, onSelect, current, disabled = false, icon, class: className, children } = $props();
+const context = getComponentsContext();
+const mode = getMenuMode();
+const resolved = $derived(href === undefined ? undefined : context.href(href));
+// bits-ui's `onSelect` is not optional-friendly under
+// `exactOptionalPropertyTypes`; a stable wrapper is simpler than a spread.
+const select = () => onSelect?.();
+const isCurrent = $derived(current ?? (resolved === undefined ? false : context.isCurrent(resolved)));
+</script>
+
+{#snippet label()}
+  {#if icon}<span class="size-5 shrink-0" aria-hidden="true">{@render icon()}</span>{/if}
+  {@render children()}
+{/snippet}
+
+{#if mode() === 'dropdown'}
+  <li role="none" class={className}>
+    <DropdownMenu.Item {disabled} onSelect={select}>
+      {#snippet child({ props })}
+        {#if resolved === undefined}
+          <button {...props} type="button">{@render label()}</button>
+        {:else}
+          <a {...props} href={resolved} aria-current={isCurrent ? 'page' : undefined}>
+            {@render label()}
+          </a>
+        {/if}
+      {/snippet}
+    </DropdownMenu.Item>
+  </li>
+{:else}
+  <li class={className}>
+    {#if resolved === undefined}
+      <button type="button" {disabled} onclick={select}>{@render label()}</button>
+    {:else}
+      <a
+        href={disabled ? undefined : resolved}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-current={isCurrent ? 'page' : undefined}
+        class:menu-active={isCurrent}
+        onclick={select}
+      >
+        {@render label()}
+      </a>
+    {/if}
+  </li>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Where the item navigates. Omitted, the item is a button. */
+    href?: string | undefined;
+    /** Called when the item is chosen. */
+    onSelect?: (() => void) | undefined;
+    /** Whether this item is the current page; defaults to the context's answer. */
+    current?: boolean | undefined;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Leading icon. Decorative. */
+    icon?: Snippet<[]> | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The item's content: a link or button in `nav` mode, the label in `dropdown` mode. */
+    children: Snippet<[]>;
+}
+/** One entry of a `Menu`, in whichever mode the enclosing `Menu` declared. */
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/ui/MenuSeparator.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+A rule between groups of `MenuItem`s.
+-->
+<!--
+  MenuSeparator — a rule between groups of `MenuItem`s.
+
+  ARIA contract: a real `role="separator"`, which is what tells a screen
+  reader the grouping exists at all; a bare styled `<li>` is a line sighted
+  readers can see and nobody else can. In dropdown mode the role comes from
+  bits-ui's own separator (which also marks it non-focusable for the menu's
+  arrow-key navigation), wrapped in a `role="none"` `<li>` so the
+  presentational list item stays out of the accessibility tree.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+import { getMenuMode } from "./menu-context.js";
+let { class: className } = $props();
+const mode = getMenuMode();
+</script>
+
+{#if mode() === 'dropdown'}
+  <li role="none">
+    <DropdownMenu.Separator class={['divider my-1 h-px', className]} />
+  </li>
+{:else}
+  <li role="separator" class={['divider my-1 h-px', className]}></li>
+{/if}

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

@@ -0,0 +1,8 @@
+interface Props {
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A rule between groups of `MenuItem`s. */
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/ui/Popover.svelte

@@ -0,0 +1,63 @@
+<!-- @component
+A small floating panel anchored to a trigger, on bits-ui’s `Popover`.
+-->
+<!--
+  Popover — a small floating panel anchored to a trigger, on bits-ui's
+  `Popover`.
+
+  Unlike a tooltip, a popover holds INTERACTIVE content: it takes focus, it
+  closes on Escape and on an outside click, and it returns focus to the
+  trigger. All of that is bits-ui's — it is precisely the hand-rolled part
+  that is always subtly wrong.
+
+  ARIA contract: bits-ui gives the trigger `aria-haspopup="dialog"` and
+  `aria-expanded` and wires `aria-controls` to the panel, but it leaves the
+  panel's own role to the caller — so `role="dialog"` is set here, where the
+  focus trap and the Escape handler that make the role true already are. When
+  `title` is set the panel is `aria-labelledby` that heading, so it announces
+  what it is on open; without a title, label it from the call site. The close button is
+  a labelled control, not a bare glyph.
+
+  Both snippets take the caller's own element: `trigger` receives the props
+  to spread, so an existing `Button` keeps its own markup.
+-->
+<script lang="ts">import { X } from "@lucide/svelte";
+import { Popover } from "bits-ui";
+import Button from "./Button.svelte";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { open = $bindable(false), side = "bottom", align = "center", sideOffset = 8, title, closeLabel = "Close", class: className, trigger, children } = $props();
+const titleId = $props.id();
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      {@render trigger({ props })}
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      {side}
+      {align}
+      {sideOffset}
+      role="dialog"
+      aria-labelledby={title === undefined ? undefined : titleId}
+      class={['card card-border bg-base-100 rounded-box z-50 w-72 p-4 shadow-md', className]}
+    >
+      {#if closeLabel !== undefined}
+        <Popover.Close>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="sm" class="absolute top-2 right-2 btn-square">
+              <X class="size-4" aria-hidden="true" />
+              <VisuallyHidden>{closeLabel}</VisuallyHidden>
+            </Button>
+          {/snippet}
+        </Popover.Close>
+      {/if}
+      {#if title !== undefined}
+        <p id={titleId} class="mb-2 pr-8 font-semibold">{title}</p>
+      {/if}
+      {@render children()}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

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

@@ -0,0 +1,40 @@
+import { Popover } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the panel is open. Bindable. */
+    open?: boolean | undefined;
+    /**
+     * Which side of the trigger the panel opens on.
+     * @defaultValue `'bottom'`
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Alignment against the trigger along that side.
+     * @defaultValue `'center'`
+     */
+    align?: 'start' | 'center' | 'end' | undefined;
+    /**
+     * Distance in pixels from the trigger.
+     * @defaultValue `8`
+     */
+    sideOffset?: number | undefined;
+    /** Heading for the panel; becomes its accessible name. */
+    title?: string | undefined;
+    /**
+     * Accessible name of the close button. Omit to hide the button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /** Extra classes on the panel. */
+    class?: string | undefined;
+    /** The trigger — the caller's own element, spreading `props` onto it. */
+    trigger: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /** The panel body, under `title` when one is given. */
+    children: Snippet<[]>;
+}
+/** A small floating panel anchored to a trigger, on bits-ui’s `Popover`. */
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

@@ -0,0 +1,54 @@
+<!-- @component
+Supplementary text on hover and on keyboard focus, on bits-ui’s `Tooltip`.
+-->
+<!--
+  Tooltip — supplementary text on hover and on keyboard focus, on bits-ui's
+  `Tooltip`.
+
+  Provider-free by design. bits-ui's `Tooltip.Root` requires a
+  `Tooltip.Provider` ancestor (it reads the shared open-delay state from
+  context and throws without it), which means every consuming app would have
+  to remember to mount one in its root layout before a single tooltip works.
+  This component mounts its own, so `<Tooltip text="…">{trigger}</Tooltip>` is
+  the whole API. The cost is that the "skip the delay for the next tooltip"
+  behaviour is per-tooltip rather than app-wide, which is a fair trade for a
+  primitive that always works.
+
+  ARIA contract: bits-ui wires `aria-describedby` from the trigger to the
+  content — DESCRIBED, not labelled, because a tooltip supplements a name it
+  must never be the only source of. An icon-only control still needs its own
+  accessible name (`VisuallyHidden`, or `aria-label`); a tooltip is not it,
+  since a tooltip is unreachable to touch users entirely.
+
+  The trigger renders through bits-ui's `child` snippet, so the caller's own
+  element keeps its semantics instead of being wrapped in another button.
+-->
+<script lang="ts">import { Tooltip } from "bits-ui";
+let { text, content, side = "top", sideOffset = 6, openDelay = 400, open = $bindable(false), class: className, children } = $props();
+</script>
+
+<Tooltip.Provider delayDuration={openDelay}>
+  <Tooltip.Root bind:open>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        {@render children({ props })}
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Portal>
+      <Tooltip.Content
+        {side}
+        {sideOffset}
+        class={[
+          'bg-neutral text-neutral-content rounded-box z-50 max-w-xs px-3 py-1.5 text-sm shadow-md',
+          className,
+        ]}
+      >
+        {#if content}
+          {@render content()}
+        {:else if text !== undefined}
+          {text}
+        {/if}
+      </Tooltip.Content>
+    </Tooltip.Portal>
+  </Tooltip.Root>
+</Tooltip.Provider>