@thomasfosterau/components 0.0.0 → 0.2.0

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

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

package/dist/ui/Toolbar.svelte

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

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

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

package/dist/ui/ToolbarButton.svelte

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

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

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

package/dist/ui/ToolbarLink.svelte

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

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

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

package/dist/ui/ToolbarSeparator.svelte

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

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

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

package/dist/ui/ToolbarToggleGroup.svelte

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

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

@@ -0,0 +1,52 @@
+import { type ToggleGroupItem } from './toggle-classes.ts';
+import { type ButtonVariant, type Size, type Tone } from './tones.ts';
+declare function $$render<V extends string>(): {
+    props: {
+        items: readonly ToggleGroupItem<V>[];
+        /** Accessible name of the set ("Text style", "Alignment"). */
+        label: string;
+        /** @defaultValue `'primary'` */
+        tone?: Tone | undefined;
+        /** @defaultValue `'ghost'` */
+        variant?: ButtonVariant | undefined;
+        /** @defaultValue `'sm'` */
+        size?: Size | undefined;
+        disabled?: boolean | undefined;
+        class?: string | undefined;
+    } & ({
+        type: "single";
+        /** The selected value, `''` for none. Bindable. */
+        value?: V | "" | undefined;
+        onValueChange?: ((value: V | "") => void) | undefined;
+        /** Pressing the selected item does nothing. */
+        required?: boolean | undefined;
+    } | {
+        type: "multiple";
+        /** The selected values. Bindable. */
+        value?: readonly V[] | undefined;
+        onValueChange?: ((value: V[]) => void) | undefined;
+        required?: undefined;
+    });
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** A set of toggles inside a `Toolbar` (Bold / Italic, alignment), sharing the toolbar's single Tab stop. */
+declare const ToolbarToggleGroup: $$IsomorphicComponent;
+type ToolbarToggleGroup<V extends string> = InstanceType<typeof ToolbarToggleGroup<V>>;
+export default ToolbarToggleGroup;

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>

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

@@ -0,0 +1,35 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The tooltip's text. Ignored when `content` is given. */
+    text?: string | undefined;
+    /** Richer tooltip content, in place of `text`. */
+    content?: Snippet<[]> | undefined;
+    /**
+     * Preferred side of the trigger; flipped on collision.
+     * @defaultValue `'top'`
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Distance in pixels from the trigger.
+     * @defaultValue `6`
+     */
+    sideOffset?: number | undefined;
+    /**
+     * Milliseconds of hover before it opens.
+     * @defaultValue `400`
+     */
+    openDelay?: number | undefined;
+    /** Whether the tooltip is open. Bindable. */
+    open?: boolean | undefined;
+    /** Extra classes on the content bubble. */
+    class?: string | undefined;
+    /** The trigger — the caller's own element, spreading `props` onto it. */
+    children: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}
+/** Supplementary text on hover and on keyboard focus, on bits-ui’s `Tooltip`. */
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/ui/VisuallyHidden.svelte

@@ -0,0 +1,23 @@
+<!-- @component
+Content for assistive technology only: in the DOM and the accessibility tree, clipped out of the visual rendering.
+-->
+<!--
+  VisuallyHidden — content for assistive technology only: present in the
+  accessibility tree and in the DOM, clipped out of the visual rendering.
+
+  The canonical use is a name for something conveyed graphically — an icon-only
+  button, a star rating, a status dot — so that what a screen reader announces
+  matches what a sighted reader sees, rather than `aria-label` guessing at it.
+  Use it for content that must be READ. Content that must merely be reachable
+  (a skip link) wants `sr-only focus:not-sr-only` instead, which this component
+  supports because the caller's `class` is merged last by Svelte's class array.
+
+  The clipping itself is Tailwind's `sr-only` utility, which this package does
+  NOT ship — it comes from the consumer's Tailwind build, the same as every
+  other class here. See the README's `@source` note.
+-->
+<script lang="ts">let { children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<span {...rest} class={['sr-only', className]}>{@render children()}</span>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** What assistive technology reads; any inline markup. */
+    children: Snippet<[]>;
+}
+/** Content for assistive technology only: in the DOM and the accessibility tree, clipped out of the visual rendering. */
+declare const VisuallyHidden: import("svelte").Component<Props, {}, "">;
+type VisuallyHidden = ReturnType<typeof VisuallyHidden>;
+export default VisuallyHidden;

package/dist/ui/accordion-context.d.ts

@@ -0,0 +1,26 @@
+/**
+ * How an {@link AccordionItem} learns its enclosing `Accordion`'s settings.
+ *
+ * `headingLevel`, `variant`, `joined`, `searchable` and the open state are
+ * the group's, never an item's: an item reads them from context so a stack
+ * cannot drift into mixed heading levels or markers. Getters, not values, so
+ * a change to the `Accordion`'s props reaches every item.
+ *
+ * @module
+ */
+import type { DisclosureVariant, HeadingLevel } from './tones.ts';
+/** What an `Accordion` lends its items. */
+export interface AccordionContext {
+    readonly headingLevel: () => HeadingLevel;
+    readonly variant: () => DisclosureVariant;
+    readonly joined: () => boolean;
+    readonly searchable: () => boolean;
+    /** Whether the item with this value is open. */
+    readonly isOpen: (value: string) => boolean;
+    /** Whether closing this open item is refused (`type="single"` with `required`). */
+    readonly isLocked: (value: string) => boolean;
+}
+/** Lend `context` to the `AccordionItem`s below. */
+export declare function setAccordionContext(context: AccordionContext): void;
+/** The enclosing `Accordion`'s settings; throws outside one, where an item has no group to belong to. */
+export declare function getAccordionContext(): AccordionContext;

package/dist/ui/accordion-context.js

@@ -0,0 +1,23 @@
+/**
+ * How an {@link AccordionItem} learns its enclosing `Accordion`'s settings.
+ *
+ * `headingLevel`, `variant`, `joined`, `searchable` and the open state are
+ * the group's, never an item's: an item reads them from context so a stack
+ * cannot drift into mixed heading levels or markers. Getters, not values, so
+ * a change to the `Accordion`'s props reaches every item.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+const ACCORDION_KEY = Symbol.for('@thomasfosterau/components/accordion');
+/** Lend `context` to the `AccordionItem`s below. */
+export function setAccordionContext(context) {
+    setContext(ACCORDION_KEY, context);
+}
+/** The enclosing `Accordion`'s settings; throws outside one, where an item has no group to belong to. */
+export function getAccordionContext() {
+    const context = getContext(ACCORDION_KEY);
+    if (context === undefined)
+        throw new Error('AccordionItem must be rendered inside an Accordion.');
+    return context;
+}

package/dist/ui/colour-token.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The colour-token indirection: how a component takes a colour it does not
+ * own.
+ *
+ * Some things are coloured by their subject rather than by a semantic tone —
+ * a political party, a taxon rank, a project label. The colour belongs to the
+ * consuming application, not to this library, and it is never an inline hex
+ * here: the app's theme declares one custom property per subject
+ * (`--party-alp`, `--rank-genus`, …) in **both** its light and dark themes,
+ * and hands a component the property's NAME.
+ *
+ * The helpers below turn that name into the single custom property the
+ * component's Tailwind classes read (`bg-(--badge-colour)`,
+ * `border-(--chip-colour)`), with the theme's `neutral` colour as the
+ * fallback for a token the theme has no entry for. The only inline style
+ * any component in this package emits is that one variable indirection —
+ * the colour value itself stays in the stylesheet.
+ *
+ * @module
+ */
+/** The custom property {@link Badge} binds a `colourToken` to. */
+export declare const BADGE_COLOUR_PROPERTY = "--badge-colour";
+/** The custom property {@link Chip} binds a `colourToken` to. */
+export declare const CHIP_COLOUR_PROPERTY = "--chip-colour";
+/**
+ * The inline `style` binding `property` to the theme token `token`, falling
+ * back to `--color-neutral` when the theme declares no such token.
+ *
+ * `token` is validated rather than trusted: a value that is not a custom
+ * property name is dropped entirely, so nothing a caller passes can break out
+ * of the `var()` it is interpolated into and inject further declarations.
+ *
+ * Returns `undefined` when there is no token, so a component can hand the
+ * result straight to `style` and emit no attribute at all.
+ *
+ * ```svelte
+ * <span style={colourTokenStyle(BADGE_COLOUR_PROPERTY, '--party-alp')}
+ *       class="bg-(--badge-colour)/15 border-(--badge-colour)">…</span>
+ * ```
+ */
+export declare function colourTokenStyle(property: string, token: string | undefined): string | undefined;