@thomasfosterau/components 0.1.0 → 0.2.0

package/dist/ui/DropdownMenu.svelte

@@ -0,0 +1,44 @@
+<!-- @component
+An application menu behind a trigger — a bits-ui dropdown of `MenuItem`s styled as a daisyUI `menu`.
+-->
+<!--
+  DropdownMenu — 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.
+
+  It is a separate component from `Menu` (site navigation) so that bits-ui's
+  dropdown runtime is reached only by an app that actually renders a
+  dropdown: `Menu`, `MenuItem`, `MenuSeparator` and `Sidebar` import nothing
+  from bits-ui (#129). The children are the same `MenuItem` /
+  `MenuSeparator` a `Menu` takes; this component lends them its bits-ui item
+  and separator parts through context (`menu-parts/menu-parts.ts`), and
+  the same for `MenuCheckboxItem`, `MenuRadioGroup`, `MenuRadioItem` and
+  `MenuSub`.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+import { menuParts } from "./menu-parts/parts.js";
+import { setMenuParts } from "./menu-parts/menu-parts.js";
+let { label, open = $bindable(false), side = "bottom", align = "end", class: className, trigger, children } = $props();
+setMenuParts(menuParts("dropdown"));
+</script>
+
+<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>

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

@@ -0,0 +1,30 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Accessible name of the open menu. */
+    label: string;
+    /** Whether the menu is open. Bindable. */
+    open?: boolean | undefined;
+    /**
+     * Which side of the trigger the menu 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 trigger — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** The `MenuItem`s. */
+    children: Snippet<[]>;
+}
+/** An application menu behind a trigger — a bits-ui dropdown of `MenuItem`s styled as a daisyUI `menu`. */
+declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/ui/Menu.svelte

@@ -1,54 +1,24 @@
 <!-- @component
-A daisyUI `menu` as either a labelled navigation list (`mode="nav"`) or a bits-ui dropdown (`mode="dropdown"`).
+A labelled navigation list: a `<nav>` landmark around a daisyUI `menu` of `MenuItem` links.
 -->
 <!--
-  Menu — one component over the two things daisyUI calls a `menu`, because a
-  call site writes the same `<MenuItem>` list for both.
+  Menu — 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="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`.
+  An application menu behind a trigger is `DropdownMenu`, which takes the
+  same `MenuItem`s. The two are separate components so this one imports
+  nothing from bits-ui: a page that only navigates (`Sidebar` included) never
+  loads the dropdown runtime (#129).
 -->
-<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 lang="ts">let { label, class: className, children } = $props();
+export {};
 </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}
+<nav aria-label={label}>
+  <ul class={['menu w-full gap-1 p-0', className]}>
+    {@render children()}
+  </ul>
+</nav>

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

@@ -1,34 +1,13 @@
 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. */
+    /** Accessible name of the navigation landmark. */
     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">;
+/** A labelled navigation list: a `<nav>` landmark around a daisyUI `menu` of `MenuItem` links. */
+declare const Menu: import("svelte").Component<Props, {}, "">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/ui/MenuCheckboxItem.svelte

@@ -0,0 +1,33 @@
+<!-- @component
+An on/off entry of a `DropdownMenu` or `ContextMenu` (`role="menuitemcheckbox"`).
+-->
+<!--
+  MenuCheckboxItem — a setting toggled from a menu ("Show archived"). It
+  renders the checkbox item part its enclosing `DropdownMenu` or
+  `ContextMenu` lends it through context (`menu-parts/CheckboxItemPart.svelte`),
+  so this file imports nothing from bits-ui and costs a navigation-only page
+  nothing (#129).
+
+  ARIA contract: `role="menuitemcheckbox"` with `aria-checked` from bits-ui;
+  the check mark is `aria-hidden`. A checkbox item belongs to an application
+  menu, not a navigation list, so outside a `DropdownMenu` / `ContextMenu` it
+  renders nothing.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { checked = $bindable(false), onCheckedChange, disabled = false, class: className, children } = $props();
+const parts = getMenuParts();
+const change = (next) => {
+	checked = next;
+	onCheckedChange?.(next);
+};
+</script>
+
+{#if parts}
+  <parts.checkboxItem
+    {checked}
+    onCheckedChange={change}
+    {disabled}
+    class={className}
+    label={children}
+  />
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * Whether the item is checked. Bindable.
+     * @defaultValue `false`
+     */
+    checked?: boolean | undefined;
+    /** Called with the next state when the reader toggles it. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The item's label. */
+    children: Snippet<[]>;
+}
+/** An on/off entry of a `DropdownMenu` or `ContextMenu` (`role="menuitemcheckbox"`). */
+declare const MenuCheckboxItem: import("svelte").Component<Props, {}, "checked">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

package/dist/ui/MenuItem.svelte

@@ -1,9 +1,9 @@
 <!-- @component
-One entry of a `Menu`, in whichever mode the enclosing `Menu` declared.
+One entry of a `Menu` (a navigation link), or of a `DropdownMenu` or `ContextMenu` (a bits-ui menu item).
 -->
 <!--
-  MenuItem — one entry of a `Menu`, in whichever of the two modes the
-  enclosing `Menu` declared.
+  MenuItem — one entry of a `Menu`, `DropdownMenu` or `ContextMenu`; which
+  one is decided by the enclosing menu, never by a prop.
 
   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
@@ -11,25 +11,28 @@ One entry of a `Menu`, in whichever mode the enclosing `Menu` declared.
   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.
+  Inside a `DropdownMenu` or `ContextMenu` it renders the item part that menu lends it
+  (`menu-parts/ItemPart.svelte`, through context), which goes 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. This file imports nothing from bits-ui, so a
+  navigation-only page never loads the dropdown runtime (#129). 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.
+  ARIA contract: inside a `DropdownMenu` the `<li>` wrapper is `role="none"`
+  so it does not sit between `role="menu"` and `role="menuitem"`, and
+  `disabled` is bits-ui's (skipped by arrow keys, not activatable). In a
+  navigation list `disabled` is `aria-disabled` + no `href`, 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";
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { getMenuParts } from "./menu-parts/menu-parts.js";
 let { href, onSelect, current, disabled = false, icon, class: className, children } = $props();
 const context = getComponentsContext();
-const mode = getMenuMode();
+const parts = getMenuParts();
 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.
@@ -42,20 +45,15 @@ const isCurrent = $derived(current ?? (resolved === undefined ? false : context.
   {@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>
+{#if parts}
+  <parts.item
+    href={resolved}
+    current={isCurrent}
+    {disabled}
+    onSelect={select}
+    class={className}
+    {label}
+  />
 {:else}
   <li class={className}>
     {#if resolved === undefined}

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

@@ -12,10 +12,10 @@ interface Props {
     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. */
+    /** The item's label. */
     children: Snippet<[]>;
 }
-/** One entry of a `Menu`, in whichever mode the enclosing `Menu` declared. */
+/** One entry of a `Menu` (a navigation link), or of a `DropdownMenu` or `ContextMenu` (a bits-ui menu item). */
 declare const MenuItem: import("svelte").Component<Props, {}, "">;
 type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

package/dist/ui/MenuRadioGroup.svelte

@@ -0,0 +1,25 @@
+<!-- @component
+A set of mutually exclusive `MenuRadioItem`s in a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  MenuRadioGroup — one choice from a few, made in a menu ("Sort by: name,
+  date, size"). It renders the radio group part its enclosing `DropdownMenu`
+  or `ContextMenu` lends it through context (`menu-parts/RadioGroupPart.svelte`),
+  so this file imports nothing from bits-ui (#129).
+
+  ARIA contract: a `role="group"` named by its visible `label` heading, around
+  `role="menuitemradio"` items, exactly one `aria-checked`. Outside a
+  `DropdownMenu` / `ContextMenu` it renders nothing.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { value = $bindable(""), onValueChange, label, class: className, children } = $props();
+const parts = getMenuParts();
+const change = (next) => {
+	value = next;
+	onValueChange?.(next);
+};
+</script>
+
+{#if parts}
+  <parts.radioGroup {value} onValueChange={change} {label} class={className} {children} />
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * The chosen item's value; empty string when none is chosen. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /** Called with the chosen value. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Visible group heading; also its accessible name. */
+    label?: string | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The `MenuRadioItem`s. */
+    children: Snippet<[]>;
+}
+/** A set of mutually exclusive `MenuRadioItem`s in a `DropdownMenu` or `ContextMenu`. */
+declare const MenuRadioGroup: import("svelte").Component<Props, {}, "value">;
+type MenuRadioGroup = ReturnType<typeof MenuRadioGroup>;
+export default MenuRadioGroup;

package/dist/ui/MenuRadioItem.svelte

@@ -0,0 +1,20 @@
+<!-- @component
+One option of a `MenuRadioGroup` (`role="menuitemradio"`).
+-->
+<!--
+  MenuRadioItem — one option of a `MenuRadioGroup`. It renders the radio
+  item part its enclosing `DropdownMenu` or `ContextMenu` lends it through
+  context (`menu-parts/RadioItemPart.svelte`), so this file imports nothing
+  from bits-ui (#129).
+
+  ARIA contract: `role="menuitemradio"` with `aria-checked`; the dot is
+  `aria-hidden`. Outside a `DropdownMenu` / `ContextMenu` it renders nothing.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { value, disabled = false, class: className, children } = $props();
+const parts = getMenuParts();
+</script>
+
+{#if parts}
+  <parts.radioItem {value} {disabled} class={className} label={children} />
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The value this item chooses in its `MenuRadioGroup`. */
+    value: string;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The item's label. */
+    children: Snippet<[]>;
+}
+/** One option of a `MenuRadioGroup` (`role="menuitemradio"`). */
+declare const MenuRadioItem: import("svelte").Component<Props, {}, "">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;

package/dist/ui/MenuSeparator.svelte

@@ -6,21 +6,22 @@ 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.
+  readers can see and nobody else can. Inside a `DropdownMenu` or `ContextMenu` it renders the
+  separator part that menu lends it through context: 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. This file imports nothing from bits-ui (#129).
+
+  Outside a menu, use `Divider`: it is the free-standing rule, and this one
+  must stay an `<li>` inside the menu's list.
 -->
-<script lang="ts">import { DropdownMenu } from "bits-ui";
-import { getMenuMode } from "./menu-context.js";
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
 let { class: className } = $props();
-const mode = getMenuMode();
+const parts = getMenuParts();
 </script>
 
-{#if mode() === 'dropdown'}
-  <li role="none">
-    <DropdownMenu.Separator class={['divider my-1 h-px', className]} />
-  </li>
+{#if parts}
+  <parts.separator class={className} />
 {:else}
   <li role="separator" class={['divider my-1 h-px', className]}></li>
 {/if}

package/dist/ui/MenuSub.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+A submenu of a `DropdownMenu` or `ContextMenu`: an item that opens a further menu.
+-->
+<!--
+  MenuSub — an item that opens a further menu ("Move to ▸"). It renders the
+  submenu part its enclosing `DropdownMenu` or `ContextMenu` lends it through
+  context (`menu-parts/SubPart.svelte`), so this file imports nothing from
+  bits-ui (#129). The children are the same `MenuItem`s, separators and
+  checkbox / radio items the parent menu takes.
+
+  ARIA contract: the opener is a `role="menuitem"` with
+  `aria-haspopup="menu"` and `aria-expanded`; → opens the submenu and focuses
+  its first item, ← closes it and returns focus to the opener. Outside a
+  `DropdownMenu` / `ContextMenu` it renders nothing: a navigation list has no
+  submenus to open.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { label, disabled = false, class: className, children } = $props();
+const parts = getMenuParts();
+</script>
+
+{#if parts}
+  <parts.sub {label} {disabled} class={className} {children} />
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Text of the item that opens the submenu. */
+    label: string;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The submenu's items. */
+    children: Snippet<[]>;
+}
+/** A submenu of a `DropdownMenu` or `ContextMenu`: an item that opens a further menu. */
+declare const MenuSub: import("svelte").Component<Props, {}, "">;
+type MenuSub = ReturnType<typeof MenuSub>;
+export default MenuSub;

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>