@thomasfosterau/components 0.1.0 → 0.2.0

package/dist/layout/space.js

@@ -0,0 +1,76 @@
+/**
+ * The library's spacing rhythm and the layout primitives' vocabulary, as
+ * literal class tables.
+ *
+ * `VStack`, `HStack`, `Cluster`, `Grid` and `Fits` take tokens, not class
+ * names, so every app spaces things on the same scale. Tailwind only
+ * generates classes it can see verbatim in source, so each step is spelled
+ * out once here and looked up (the `ui/tones.ts` discipline).
+ *
+ * @module
+ */
+/** Literal `gap-*` class per `Gap`; a lookup table so Tailwind's scanner sees every class. */
+export const gapClass = {
+    none: 'gap-0',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-8',
+    xl: 'gap-12',
+};
+/** Literal `items-*` class per `FlowAlign`; a lookup table so Tailwind's scanner sees every class. */
+export const alignClass = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+};
+/** Literal `justify-*` class per `FlowJustify`; a lookup table so Tailwind's scanner sees every class. */
+export const justifyClass = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+};
+/** Literal auto-fill column template per `MinItem`; a lookup table so Tailwind's scanner sees every class. */
+export const minItemClass = {
+    xs: 'grid-cols-[repeat(auto-fill,minmax(min(10rem,100%),1fr))]',
+    sm: 'grid-cols-[repeat(auto-fill,minmax(min(12rem,100%),1fr))]',
+    md: 'grid-cols-[repeat(auto-fill,minmax(min(16rem,100%),1fr))]',
+    lg: 'grid-cols-[repeat(auto-fill,minmax(min(20rem,100%),1fr))]',
+};
+/** Literal container-query class showing a `Fits` layout from this width up. */
+export const fitsShowFrom = {
+    '20rem': '@min-[20rem]:block',
+    '28rem': '@min-[28rem]:block',
+    '36rem': '@min-[36rem]:block',
+    '48rem': '@min-[48rem]:block',
+    '64rem': '@min-[64rem]:block',
+};
+/** Literal container-query class hiding a `Fits` layout from this width up. */
+export const fitsHideFrom = {
+    '20rem': '@min-[20rem]:hidden',
+    '28rem': '@min-[28rem]:hidden',
+    '36rem': '@min-[36rem]:hidden',
+    '48rem': '@min-[48rem]:hidden',
+    '64rem': '@min-[64rem]:hidden',
+};
+/**
+ * The classes of `Fits` layout `index` of `count`, given the widths at which
+ * each stops fitting (`breakpoints[i]` for layout `i`, one fewer than the
+ * layouts). The first shows from `breakpoints[0]` up, each next one between
+ * its own breakpoint and the previous one, and the last below the final
+ * breakpoint. Outside its band a layout is `display: none`, so it is out of
+ * the accessibility tree.
+ */
+export function fitsLayoutClass(index, count, breakpoints) {
+    const own = breakpoints[index];
+    const previous = index === 0 ? undefined : breakpoints[index - 1];
+    const isLast = index === count - 1;
+    return [
+        isLast ? 'block' : 'hidden',
+        !isLast && own !== undefined ? fitsShowFrom[own] : '',
+        previous === undefined ? '' : fitsHideFrom[previous],
+    ].filter((name) => name !== '');
+}

package/dist/search/types.d.ts

@@ -9,6 +9,7 @@
  *
  * @module
  */
+/** One row of the command palette: an id, a label, the group it sits in, and what activating it does. */
 export interface CommandItem {
     /** Stable id. Unique within its group; it is what bits-ui ranks and selects on. */
     id: string;
@@ -27,7 +28,9 @@ export interface CommandItem {
 }
 /** A palette section: an id rows point at, and the heading it renders. */
 export interface CommandGroup {
+    /** What a `CommandItem`'s `group` names. */
     id: string;
+    /** The section heading. */
     label: string;
 }
 /**

package/dist/seo/og-image.d.ts

@@ -22,13 +22,14 @@ export declare const OG_SUBTITLE_PARAM = "d";
 /** Query param carrying the cache-busting version token. */
 export declare const OG_VERSION_PARAM = "v";
 /**
- * Length caps on the title / description carried in the URL. A renderer
- * should re-apply them defensively; here they keep the emitted URL short.
+ * Longest title, in characters, carried in a share-card URL. A renderer
+ * should re-apply this cap (and `OG_SUBTITLE_MAX_LENGTH`) defensively; here
+ * they keep the emitted URL short.
  */
 export declare const OG_TITLE_MAX_LENGTH = 120;
 /** Longest description, in characters, carried in a share-card URL; see `OG_TITLE_MAX_LENGTH`. */
 export declare const OG_SUBTITLE_MAX_LENGTH = 200;
-/** The rendered card's size — the 1.91:1 Open Graph standard. */
+/** Share-card width in pixels — the 1.91:1 Open Graph standard, with `OG_IMAGE_HEIGHT`. */
 export declare const OG_IMAGE_WIDTH = 1200;
 /** Share-card height in pixels; see `OG_IMAGE_WIDTH`. */
 export declare const OG_IMAGE_HEIGHT = 630;

package/dist/seo/og-image.js

@@ -22,13 +22,14 @@ export const OG_SUBTITLE_PARAM = 'd';
 /** Query param carrying the cache-busting version token. */
 export const OG_VERSION_PARAM = 'v';
 /**
- * Length caps on the title / description carried in the URL. A renderer
- * should re-apply them defensively; here they keep the emitted URL short.
+ * Longest title, in characters, carried in a share-card URL. A renderer
+ * should re-apply this cap (and `OG_SUBTITLE_MAX_LENGTH`) defensively; here
+ * they keep the emitted URL short.
  */
 export const OG_TITLE_MAX_LENGTH = 120;
 /** Longest description, in characters, carried in a share-card URL; see `OG_TITLE_MAX_LENGTH`. */
 export const OG_SUBTITLE_MAX_LENGTH = 200;
-/** The rendered card's size — the 1.91:1 Open Graph standard. */
+/** Share-card width in pixels — the 1.91:1 Open Graph standard, with `OG_IMAGE_HEIGHT`. */
 export const OG_IMAGE_WIDTH = 1200;
 /** Share-card height in pixels; see `OG_IMAGE_WIDTH`. */
 export const OG_IMAGE_HEIGHT = 630;

package/dist/tips/tip-stack.d.ts

@@ -7,6 +7,7 @@
  *
  * @module
  */
+/** Which tips are on screen, most recent last, so Escape closes only the topmost one. */
 export interface TipStack {
     /** Mark a tip visible, moving it to the top if it was already there. */
     push: (id: string) => void;

package/dist/tips/tip-store.svelte.d.ts

@@ -16,7 +16,8 @@
  */
 import type { TipConfig, TipState } from './types.ts';
 /**
- * The subset of `Storage` this needs, so a test can pass a plain object.
+ * The subset of the DOM `Storage` interface a tip store reads and writes, so a
+ * test can pass a plain object.
  *
  * The signatures are the DOM `Storage` interface's own, `null` included: this
  * type exists so `globalThis.localStorage` satisfies it structurally.

package/dist/ui/Accordion.svelte

@@ -0,0 +1,75 @@
+<!-- @component
+A stack of headed, collapsible sections on bits-ui `Accordion`, with single- or multi-open behaviour.
+-->
+<!--
+  Accordion — a vertical stack of `AccordionItem`s, each a real heading whose
+  button expands its panel. `type="single"` keeps at most one open (an FAQ, a
+  care guide by season); `type="multiple"` lets any number open.
+
+  Why not a stack of `Disclosure`s: `<summary>` has an implicit button role
+  whose children are presentational, so a heading inside it drops out of the
+  heading tree, and native `<details name>` groups have no "which one is
+  open" value and no "keep one open" rule. A single `Disclosure` stays
+  native; this is for the heading-structured, coordinated case.
+
+  ARIA and keyboard contract (APG Accordion): bits-ui gives each trigger
+  `aria-expanded`, Enter / Space to toggle, ↑ / ↓ and Home / End between
+  headers. We render each header as a native `<h{headingLevel}>`, wire
+  `aria-controls` from the button to its panel, and make each panel a
+  `region` labelled by its button. With `required`, the open item's button
+  reports `aria-disabled="true"`, so a reader isn't offered an action that
+  does nothing. With `searchable` (the default) a closed panel keeps
+  `hidden="until-found"`, so find-in-page still reaches it and opens it, the
+  one advantage `<details>` had.
+
+  `headingLevel`, `variant`, `joined` and `searchable` reach the items
+  through context (`accordion-context.ts`), so they cannot drift per item.
+-->
+<script lang="ts">import { Accordion } from "bits-ui";
+import { setAccordionContext } from "./accordion-context.js";
+let { type, value = $bindable(), required = false, headingLevel = 3, variant = "arrow", joined = true, searchable = true, disabled = false, children, class: className, ...rest } = $props();
+function openValues() {
+	if (value === undefined || value === "") return [];
+	return typeof value === "string" ? [value] : value;
+}
+setAccordionContext({
+	headingLevel: () => headingLevel,
+	variant: () => variant,
+	joined: () => joined,
+	searchable: () => searchable,
+	isOpen: (item) => openValues().includes(item),
+	isLocked: (item) => type === "single" && required && value === item
+});
+const rootClass = $derived([
+	"w-full",
+	joined && "join join-vertical",
+	className
+]);
+</script>
+
+{#snippet root({ props }: { props: Record<string, unknown> })}
+  <div {...rest} {...props} class={rootClass}>{@render children()}</div>
+{/snippet}
+
+{#if type === 'single'}
+  <Accordion.Root
+    type="single"
+    {disabled}
+    bind:value={
+      () => (typeof value === 'string' ? value : ''),
+      (next) => {
+        // `required`: a change to '' is the open item closing; refuse it.
+        if (required && next === '') return;
+        value = next;
+      }
+    }
+    child={root}
+  />
+{:else}
+  <Accordion.Root
+    type="multiple"
+    {disabled}
+    bind:value={() => [...openValues()], (next) => (value = next)}
+    child={root}
+  />
+{/if}

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

@@ -0,0 +1,50 @@
+import { Accordion } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DisclosureVariant, HeadingLevel } from './tones.ts';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> & {
+    /**
+     * The level of each item's heading.
+     * @defaultValue `3`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * The expand marker, shared with `Disclosure`.
+     * @defaultValue `'arrow'`
+     */
+    variant?: DisclosureVariant | undefined;
+    /**
+     * Join the items into one bordered block (daisyUI `join join-vertical`).
+     * @defaultValue `true`
+     */
+    joined?: boolean | undefined;
+    /**
+     * Keep closed panels reachable by find-in-page (`hidden="until-found"`).
+     * @defaultValue `true`
+     */
+    searchable?: boolean | undefined;
+    /** Disable every item. */
+    disabled?: boolean | undefined;
+    /** The `AccordionItem`s. */
+    children: Snippet<[]>;
+} & ({
+    /** At most one item open. */
+    type: 'single';
+    /** The open item's value, `''` for none. Bindable. */
+    value?: string | undefined;
+    /**
+     * Refuse to close the open item, so exactly one stays open once one is.
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+} | {
+    /** Any number of items open. */
+    type: 'multiple';
+    /** The open items' values. Bindable. */
+    value?: readonly string[] | undefined;
+    required?: undefined;
+});
+/** A stack of headed, collapsible sections on bits-ui `Accordion`, with single- or multi-open behaviour. */
+declare const Accordion: import("svelte").Component<Props, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/ui/AccordionItem.svelte

@@ -0,0 +1,73 @@
+<!-- @component
+One headed, collapsible section of an `Accordion`.
+-->
+<!--
+  AccordionItem — a heading whose button expands a panel. Must sit inside an
+  `Accordion`, which supplies the heading level, the marker and the open
+  state (see `accordion-context.ts`).
+
+  The header is a native `<h{level}>` rendered through bits-ui's `child`
+  snippet, so the redundant `role="heading"` / `aria-level` bits-ui would put
+  on a `<div>` are dropped. The daisyUI marker is the heading's `::after`,
+  outside the button, so it never joins the button's accessible name.
+-->
+<script lang="ts">import { Accordion } from "bits-ui";
+import { getAccordionContext } from "./accordion-context.js";
+import { collapseVariant } from "./tones.js";
+const uid = $props.id();
+let { value = uid, title, disabled, contentClass, children, class: className, ...rest } = $props();
+const accordion = getAccordionContext();
+const triggerId = `${uid}-trigger`;
+const contentId = `${uid}-content`;
+const open = $derived(accordion.isOpen(value));
+const locked = $derived(accordion.isLocked(value));
+</script>
+
+<Accordion.Item {value} {...disabled === undefined ? {} : { disabled }}>
+  {#snippet child({ props: itemProps })}
+    <div
+      {...rest}
+      {...itemProps}
+      class={[
+        'collapse border-base-300 bg-base-100 border',
+        open ? 'collapse-open' : 'collapse-close',
+        collapseVariant[accordion.variant()],
+        accordion.joined() && 'join-item',
+        className,
+      ]}
+    >
+  <Accordion.Header level={accordion.headingLevel()}>
+    {#snippet child({ props })}
+      {@const { role: _role, 'aria-level': _level, ...headerProps } = props}
+      <svelte:element
+        this={`h${accordion.headingLevel()}`}
+        {...headerProps}
+        class="collapse-title p-0 text-base font-medium"
+      >
+        <Accordion.Trigger id={triggerId}>
+          {#snippet child({ props: triggerProps })}
+            <button
+              {...triggerProps}
+              aria-controls={contentId}
+              {...locked ? { 'aria-disabled': 'true' } : {}}
+              class="w-full cursor-pointer px-4 py-4 pe-12 text-start disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+            </button>
+          {/snippet}
+        </Accordion.Trigger>
+      </svelte:element>
+    {/snippet}
+  </Accordion.Header>
+  <Accordion.Content
+    id={contentId}
+    role="region"
+    aria-labelledby={triggerId}
+    hiddenUntilFound={accordion.searchable()}
+    class={['collapse-content', contentClass]}
+  >
+    {@render children()}
+  </Accordion.Content>
+    </div>
+  {/snippet}
+</Accordion.Item>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Identifies the item in the `Accordion`'s `value`; defaults to a generated id. */
+    value?: string | undefined;
+    /** The header text, or a snippet for richer markup. */
+    title: string | Snippet<[]>;
+    /** Disable this item's button. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the panel. */
+    contentClass?: string | undefined;
+    /** The panel's content. */
+    children: Snippet<[]>;
+}
+/** One headed, collapsible section of an `Accordion`. */
+declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/ui/Button.svelte

@@ -16,7 +16,8 @@ The daisyUI `btn` with tone, variant and size; `loading` disables it and sets `a
   `type` defaults to `button`: a button inside a form that does not say what
   it is submits it, which is almost never what a call site means.
 -->
-<script lang="ts">import { buttonSize, buttonTone, buttonVariant } from "./tones.js";
+<script lang="ts">import Spinner from "./Spinner.svelte";
+import { buttonSize, buttonTone, buttonVariant } from "./tones.js";
 let { tone, variant = "solid", size = "md", loading = false, block = false, icon, children, type = "button", disabled = false, class: className, ...rest } = $props();
 </script>
 
@@ -35,7 +36,7 @@ let { tone, variant = "solid", size = "md", loading = false, block = false, icon
   ]}
 >
   {#if loading}
-    <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+    <Spinner decorative size="sm" />
   {:else if icon}
     {@render icon()}
   {/if}

package/dist/ui/ButtonGroup.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+A named cluster of independent buttons in a daisyUI `join`; each stays its own Tab stop.
+-->
+<!--
+  ButtonGroup — "Save | Save as… | Discard" on a form: presentational, a
+  `role="group"` with a name, no keyboard behaviour by design. For a row of
+  controls that should be ONE Tab stop with arrow keys, use `Toolbar`.
+
+  Children join the bar by taking `class="join-item"` themselves. The
+  group does not reach into them through a context, so `Button` stays
+  free of any group coupling.
+-->
+<script lang="ts">let { label, orientation = "horizontal", children, class: className, ...rest } = $props();
+const orientationClass = {
+	horizontal: "",
+	vertical: "join-vertical",
+	responsive: "join-vertical sm:join-horizontal"
+};
+export {};
+</script>
+
+<div {...rest} role="group" aria-label={label} class={['join', orientationClass[orientation], className]}>
+  {@render children()}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Accessible name of the group ("Save options"). */
+    label: string;
+    /**
+     * `responsive` stacks below `sm`.
+     * @defaultValue `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical' | 'responsive' | undefined;
+    /** The buttons, each with `class="join-item"`. */
+    children: Snippet<[]>;
+}
+/** A named cluster of independent buttons in a daisyUI `join`; each stays its own Tab stop. */
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/ui/ContextMenu.svelte

@@ -0,0 +1,75 @@
+<!-- @component
+A menu that opens at the pointer on a right-click (or long-press) of a region, on bits-ui's `ContextMenu`.
+-->
+<!--
+  ContextMenu — the actions for one thing (a row in a list, a node on a
+  canvas, an image), opened where the reader right-clicks it, long-presses it
+  on touch, or presses Shift+F10 / the Menu key while it has focus. Built on
+  bits-ui's `ContextMenu`, which owns the menu at the pointer, roving focus,
+  typeahead, → / ← for submenus, Escape and outside click to close, and focus
+  return. Its children are the same `MenuItem`, `MenuSeparator`,
+  `MenuCheckboxItem`, `MenuRadioGroup` / `MenuRadioItem` and `MenuSub` that a
+  `DropdownMenu` takes; this component lends them the bits-ui parts through
+  context (`menu-parts/`).
+
+  Never the only route to an action. A context menu is invisible until it is
+  summoned, and touch screen-reader users (and many keyboard users) never
+  discover it. Put every action somewhere visible too: a row's "More"
+  `DropdownMenu`, a toolbar.
+
+  The region is the caller's own element: the `trigger` snippet receives
+  `props` to spread onto it. Those props make it focusable (`tabindex="0"`,
+  which a natively focusable element does not mind; pass a `tabindex` of your
+  own after the spread to override it), because browsers fire `contextmenu`
+  for the keyboard only on the focused element. Shift+F10 and the Menu key
+  are handled here rather than left to the browser, so they open the menu at
+  the region's corner the same way everywhere.
+
+  ARIA contract: the content is `role="menu"` named by `label`; the daisyUI
+  `menu` `<ul>` and its `<li>`s are `role="none"`, exactly as in
+  `DropdownMenu`, so `role="menu"` owns its items. `disabled` lets the
+  browser's own context menu show instead.
+
+  Not part of the root barrel: it is its own entry,
+  `@thomasfosterau/components/context-menu`, so the menu runtime loads only on
+  the pages that use it.
+-->
+<script lang="ts">import { ContextMenu } from "bits-ui";
+import { menuParts } from "./menu-parts/parts.js";
+import { setMenuParts } from "./menu-parts/menu-parts.js";
+let { label, open = $bindable(false), disabled = false, class: className, trigger, children } = $props();
+setMenuParts(menuParts("context"));
+// Shift+F10 and the Menu key: open at the region's bottom-left corner by
+// dispatching the `contextmenu` event bits-ui's trigger listens for.
+// `preventDefault` stops the browser from generating its own as well.
+const openFromKeyboard = (event) => {
+	if (disabled) return;
+	const isMenuKey = event.key === "ContextMenu" || event.shiftKey && event.key === "F10";
+	if (!isMenuKey) return;
+	event.preventDefault();
+	const region = event.currentTarget;
+	if (!(region instanceof HTMLElement)) return;
+	const rect = region.getBoundingClientRect();
+	region.dispatchEvent(new MouseEvent("contextmenu", {
+		bubbles: true,
+		cancelable: true,
+		clientX: rect.left,
+		clientY: rect.bottom
+	}));
+};
+</script>
+
+<ContextMenu.Root bind:open>
+  <ContextMenu.Trigger {disabled} tabindex={0} onkeydown={openFromKeyboard}>
+    {#snippet child({ props })}
+      {@render trigger({ props })}
+    {/snippet}
+  </ContextMenu.Trigger>
+  <ContextMenu.Portal>
+    <ContextMenu.Content 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>
+    </ContextMenu.Content>
+  </ContextMenu.Portal>
+</ContextMenu.Root>

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

@@ -0,0 +1,25 @@
+import { ContextMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Accessible name of the open menu ("Actions for Rosa canina"). */
+    label: string;
+    /** Whether the menu is open. Bindable. */
+    open?: boolean | undefined;
+    /**
+     * Turn the menu off; the browser's own context menu shows instead.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<ul class="menu">`. */
+    class?: string | undefined;
+    /** The region the menu belongs to — the caller's own element, spreading `props`. */
+    trigger: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /** The menu's items. */
+    children: Snippet<[]>;
+}
+/** A menu that opens at the pointer on a right-click (or long-press) of a region, on bits-ui's `ContextMenu`. */
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/ui/Disclosure.svelte

@@ -16,6 +16,13 @@ A native `<details>` wearing daisyUI’s `collapse`.
   a second copy can only be wrong). `open` is bindable, so a caller can drive
   the state, and the four apps' "open this section because its form failed"
   case is a one-line binding.
+
+  Exclusive groups are native too: give several `Disclosure`s the same
+  `name` (spread onto `<details>`) and the browser keeps at most one open.
+  What a `Disclosure` cannot carry is a heading, because `<summary>`'s
+  children are presentational, so a heading inside it drops out of the
+  heading tree. For a stack of headed sections, or a bindable "which one is
+  open", use `Accordion`.
 -->
 <script lang="ts">import { collapseVariant } from "./tones.js";
 let { open = $bindable(false), title, variant = "arrow", contentClass, children, class: className, ...rest } = $props();

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLDetailsAttributes } from 'svelte/elements';
 import { type DisclosureVariant } from './tones.ts';
-interface Props extends Omit<HTMLAttributes<HTMLDetailsElement>, 'title'> {
+interface Props extends Omit<HTMLDetailsAttributes, 'title' | 'open'> {
     /** Whether the section is expanded. Bindable. */
     open?: boolean | undefined;
     /** The summary — its own text, or a snippet for richer markup. */

package/dist/ui/Divider.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+A horizontal or vertical rule between content, optionally labelled ("or"), in daisyUI's `divider` styles.
+-->
+<!--
+  Divider — a rule between sections or side-by-side items, optionally with a
+  short label on it ("or" between two sign-in methods).
+
+  Hand-rolled, not on bits-ui's `Separator` (AGENTS.md asks for the reason):
+  that primitive's whole contribution is `role="separator"` +
+  `aria-orientation`, or `role="none"` when decorative — two attributes,
+  written here directly, with no bits-ui on the always-loaded path.
+
+  ARIA contract:
+  - Unlabelled: `role="separator"`; vertical adds
+    `aria-orientation="vertical"` (horizontal is the implicit default). It
+    is a `<div>`, not a native `<hr>`, because daisyUI draws the rule with
+    `::before` / `::after`, which a void `<hr>` cannot render.
+  - Labelled: NOT a separator. A non-focusable separator's children are
+    presentational, so the label would be lost to assistive technology. The
+    wrapper is `role="none"` and the text reads in flow — "Sign in with a
+    passkey / or / Continue with email" (WAI-ARIA 1.2, separator).
+  - `decorative`: `aria-hidden="true"`, nothing announced.
+
+  Not `MenuSeparator`, which must be an `<li>` inside a menu and defers to
+  bits-ui's menu separator for roving focus; use that one inside `Menu`.
+-->
+<script lang="ts">import { dividerAlign, dividerOrientation, dividerTone } from "./tones.js";
+let { orientation = "horizontal", decorative = false, align = "center", tone, children, class: className, ...rest } = $props();
+const classes = $derived([
+	"divider",
+	dividerOrientation[orientation],
+	dividerAlign[align],
+	tone !== undefined && dividerTone[tone],
+	className
+]);
+const role = $derived(decorative || children !== undefined ? "none" : "separator");
+</script>
+
+<div
+  {...rest}
+  {role}
+  aria-orientation={role === 'separator' && orientation === 'vertical' ? 'vertical' : undefined}
+  aria-hidden={decorative ? 'true' : undefined}
+  class={classes}
+>
+  {#if children}<span>{@render children()}</span>{/if}
+</div>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type DividerAlign, type Tone } from './tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Which way the rule runs: `vertical` sits between side-by-side items.
+     * @defaultValue `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * The rule marks no real boundary: hide it from assistive technology.
+     * @defaultValue `false`
+     */
+    decorative?: boolean | undefined;
+    /**
+     * Where a label sits along the rule.
+     * @defaultValue `'center'`
+     */
+    align?: DividerAlign | undefined;
+    /** Semantic colour of the rule. */
+    tone?: Tone | undefined;
+    /** Short text on the rule ("or"). */
+    children?: Snippet<[]> | undefined;
+}
+/** A horizontal or vertical rule between content, optionally labelled ("or"), in daisyUI's `divider` styles. */
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;