@thomasfosterau/components 0.0.0 → 0.2.0

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

@@ -0,0 +1,61 @@
+<!-- @component
+The daisyUI `alert`: a tone-coloured notice with an icon, an optional lead-in and an optional dismiss button.
+-->
+<!--
+  Alert — the daisyUI `alert`: a tone-coloured notice with an icon, an
+  optional bold lead-in and an optional dismiss button.
+
+  ARIA contract, and the reason `live` is a prop rather than a constant: an
+  alert that is on the page when it loads must NOT be announced, an alert
+  that appears in response to something the reader did must be, and the
+  urgency depends on what happened. `live` picks between `role="alert"`
+  (assertive — interrupt, the default for `error`), `role="status"` (polite —
+  wait for a pause, the default for everything else) and `off`, which renders
+  no role at all. Static page furniture wants `off`; a form failure wants
+  `assertive`.
+
+  A live region must be IN the document before its content changes, so an app
+  that swaps an alert's text keeps the component mounted; one that mounts the
+  alert on failure gets the announcement from the insertion.
+
+  The tone icon is `aria-hidden` — it restates the tone, which the text
+  already carries — and the dismiss button is a labelled `Button`, not a
+  bare glyph.
+-->
+<script lang="ts">import { CircleCheck, CircleX, Info, TriangleAlert, X } from "@lucide/svelte";
+import Button from "./Button.svelte";
+import { alertTone, alertVariant } from "./tones.js";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { tone = "info", variant = "soft", title, live, icon, onDismiss, dismissLabel = "Dismiss", children, class: className, ...rest } = $props();
+const liveness = $derived(live ?? (tone === "error" ? "assertive" : "polite"));
+// `role="alert"` already implies `aria-live="assertive"` and `role="status"`
+// implies `polite`; spelling the second one out as well is how a region ends
+// up announced twice.
+const role = $derived(liveness === "assertive" ? "alert" : liveness === "polite" ? "status" : undefined);
+</script>
+
+<div {...rest} {role} class={['alert', alertTone[tone], alertVariant[variant], className]}>
+  {#if icon}
+    {@render icon()}
+  {:else if tone === 'success'}
+    <CircleCheck class="size-5 shrink-0" aria-hidden="true" />
+  {:else if tone === 'warning'}
+    <TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
+  {:else if tone === 'error'}
+    <CircleX class="size-5 shrink-0" aria-hidden="true" />
+  {:else}
+    <Info class="size-5 shrink-0" aria-hidden="true" />
+  {/if}
+  <div>
+    {#if title !== undefined}
+      <p class="font-semibold">{title}</p>
+    {/if}
+    {@render children()}
+  </div>
+  {#if onDismiss}
+    <Button variant="ghost" size="sm" class="btn-square" onclick={onDismiss}>
+      <X class="size-4" aria-hidden="true" />
+      <VisuallyHidden>{dismissLabel}</VisuallyHidden>
+    </Button>
+  {/if}
+</div>

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AlertVariant, type StatusTone } from './tones.ts';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Status colour and icon.
+     * @defaultValue `'info'`
+     */
+    tone?: StatusTone | undefined;
+    /**
+     * daisyUI alert style.
+     * @defaultValue `'soft'`
+     */
+    variant?: AlertVariant | undefined;
+    /** Bold lead-in rendered above the body. */
+    title?: string | undefined;
+    /**
+     * How — and whether — assistive technology announces this alert.
+     * Defaults to `assertive` for `error` and `polite` for every other tone.
+     */
+    live?: 'assertive' | 'polite' | 'off' | undefined;
+    /** Replace the tone's default icon. */
+    icon?: Snippet<[]> | undefined;
+    /** When set, renders a dismiss button that calls it. */
+    onDismiss?: (() => void) | undefined;
+    /**
+     * Accessible name of the dismiss button.
+     * @defaultValue `'Dismiss'`
+     */
+    dismissLabel?: string | undefined;
+    /** The message, after the optional bold lead-in. */
+    children: Snippet<[]>;
+}
+/** The daisyUI `alert`: a tone-coloured notice with an icon, an optional lead-in and an optional dismiss button. */
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/ui/Badge.svelte

@@ -0,0 +1,39 @@
+<!-- @component
+The daisyUI `badge`: a short inline label for a status, a count or a category.
+-->
+<!--
+  Badge — the daisyUI `badge`: a short, inline label for a status, a count or
+  a category.
+
+  Two colour paths. A semantic `tone` picks the badge's daisyUI colour, which
+  is what a status ("Draft", "Overdue") wants. A `colourToken` instead names a
+  custom property the consuming app's theme declares, which is what a
+  subject-coloured label (a party, a rank, a project) wants: the badge then
+  tints its border and a translucent fill from that one variable and keeps
+  `base-content` text, so it stays legible on either theme whatever the hue.
+  `colourToken` wins over `tone` — a subject's colour is not a tone.
+
+  ARIA contract: none, deliberately. A badge is a decorative frame around
+  text, so the text has to carry the meaning: a status badge showing only a
+  colour is a status nobody can read. If the badge's own text is not enough
+  in context, label the thing it sits on, not the badge.
+-->
+<script lang="ts">import { BADGE_COLOUR_PROPERTY, colourTokenStyle } from "./colour-token.js";
+import { badgeSize, badgeTone, badgeVariant } from "./tones.js";
+let { tone = "neutral", variant = "soft", size = "md", colourToken, children, class: className, ...rest } = $props();
+const classes = $derived(colourToken === undefined ? [
+	"badge",
+	badgeTone[tone],
+	badgeVariant[variant],
+	badgeSize[size],
+	className
+] : [
+	"badge border-(--badge-colour) bg-(--badge-colour)/15 text-base-content",
+	badgeSize[size],
+	className
+]);
+</script>
+
+<span {...rest} class={classes} style={colourTokenStyle(BADGE_COLOUR_PROPERTY, colourToken)}>
+  {@render children()}
+</span>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type BadgeVariant, type Size, type Tone } from './tones.ts';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Semantic colour.
+     * @defaultValue `'neutral'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI badge style.
+     * @defaultValue `'soft'`
+     */
+    variant?: BadgeVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /**
+     * A CSS custom-property name the app's theme declares (`--party-alp`).
+     * Overrides `tone` and `variant`; falls back to the theme's neutral
+     * colour when the token is undeclared.
+     */
+    colourToken?: string | undefined;
+    /** The badge text; keep it to a word or a count. */
+    children: Snippet<[]>;
+}
+/** The daisyUI `badge`: a short inline label for a status, a count or a category. */
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/Button.svelte

@@ -0,0 +1,44 @@
+<!-- @component
+The daisyUI `btn` with tone, variant and size; `loading` disables it and sets `aria-busy` without changing its name. `type` defaults to `button`, not the native `submit`.
+-->
+<!--
+  Button — the daisyUI `btn`, with tone / variant / size chosen from literal
+  lookup tables and a `loading` state that is a real busy state rather than a
+  spinner drawn over a live control.
+
+  ARIA contract: a native `<button>`, so role and keyboard (Enter and Space)
+  come from the platform and nothing is hand-rolled. While `loading` the
+  button is `disabled` AND `aria-busy="true"` — disabled alone says "you may
+  not", busy says "it is already happening" — and the spinner that replaces
+  the leading icon is `aria-hidden`, because the accessible name must not
+  change when the state does.
+
+  `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 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>
+
+<button
+  {...rest}
+  {type}
+  disabled={disabled || loading}
+  aria-busy={loading ? 'true' : undefined}
+  class={[
+    'btn',
+    tone !== undefined && buttonTone[tone],
+    buttonVariant[variant],
+    buttonSize[size],
+    block && 'btn-block',
+    className,
+  ]}
+>
+  {#if loading}
+    <Spinner decorative size="sm" />
+  {:else if icon}
+    {@render icon()}
+  {/if}
+  {@render children()}
+</button>

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type ButtonVariant, type Size, type Tone } from './tones.ts';
+interface Props extends HTMLButtonAttributes {
+    /** Semantic colour. Omitted, the button is daisyUI's neutral `btn`. */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI button style.
+     * @defaultValue `'solid'`
+     */
+    variant?: ButtonVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /** Disables the button, marks it busy and shows a spinner. */
+    loading?: boolean | undefined;
+    /** Full-width. */
+    block?: boolean | undefined;
+    /** Leading icon, replaced by the spinner while `loading`. */
+    icon?: Snippet<[]> | undefined;
+    /** The button text; its accessible name. */
+    children: Snippet<[]>;
+}
+/** The daisyUI `btn` with tone, variant and size; `loading` disables it and sets `aria-busy` without changing its name. `type` defaults to `button`, not the native `submit`. */
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,49 @@
+<!-- @component
+The bordered `base-100` surface: a padded body with an optional heading, a figure above and an actions row below.
+-->
+<!--
+  Card — the surface. One bordered box on `base-100` with a padded body, an
+  optional heading, an optional figure above it and an optional actions row
+  under it.
+
+  This component exists to END the hand-written
+  `card card-border bg-base-100 p-6 shadow-sm`, of which the four apps carried
+  56 copies. A bare `<Card>` renders exactly that look, so adopting it is a
+  substitution and never a redesign; every knob below is an opt-in for a site
+  that wanted something slightly different and previously got it by editing
+  the class list in place.
+
+  ARIA contract: `title` is a REAL heading at `headingLevel`, not a styled
+  `<p>`, so a card in a list is reachable by heading navigation and the
+  document outline stays true. The default is `h2` — a card under the page's
+  `<h1>`. `as` picks the element that carries the semantics: `article` for a
+  self-contained item (the default), `section` for a labelled region of the
+  page, `div` for pure grouping.
+-->
+<script lang="ts">import { cardSize, cardVariant } from "./tones.js";
+let { as = "article", title, headingLevel = 2, variant = "border", size = "md", padded = true, bodyClass, figure, actions, children, class: className, ...rest } = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  class={[
+    'card bg-base-100 shadow-sm',
+    cardVariant[variant],
+    cardSize[size],
+    className,
+  ]}
+>
+  {#if figure}
+    <figure>{@render figure()}</figure>
+  {/if}
+  <div class={['card-body', !padded && 'p-0', bodyClass]}>
+    {#if title !== undefined}
+      <svelte:element this={`h${headingLevel}`} class="card-title">{title}</svelte:element>
+    {/if}
+    {@render children()}
+    {#if actions}
+      <div class="card-actions justify-end">{@render actions()}</div>
+    {/if}
+  </div>
+</svelte:element>

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

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type CardVariant, type HeadingLevel, type Size } from './tones.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * The element that carries the semantics.
+     * @defaultValue `'article'`
+     */
+    as?: 'article' | 'section' | 'div' | undefined;
+    /** Heading rendered as `card-title` at the top of the body. */
+    title?: string | undefined;
+    /**
+     * Heading level for `title`.
+     * @defaultValue `2`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * daisyUI card style.
+     * @defaultValue `'border'`
+     */
+    variant?: CardVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /**
+     * Drop the body padding — for a card whose content is edge to edge.
+     * @defaultValue `true`
+     */
+    padded?: boolean | undefined;
+    /** Extra classes on the `card-body`, for layout the caller owns. */
+    bodyClass?: string | undefined;
+    /** Media block rendered above the body. */
+    figure?: Snippet<[]> | undefined;
+    /** Buttons or links rendered in the `card-actions` row. */
+    actions?: Snippet<[]> | undefined;
+    /** The body, inside the padded `card-body`, under the heading. */
+    children: Snippet<[]>;
+}
+/** The bordered `base-100` surface: a padded body with an optional heading, a figure above and an actions row below. */
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/ui/Chip.svelte

@@ -0,0 +1,58 @@
+<!-- @component
+A colour swatch beside a short code, for legends, result rows and filter lists.
+-->
+<!--
+  Chip — a colour swatch beside a short code: the unit that appears in a
+  legend, a result row, a filter list. Denser than a `Badge` and always
+  paired with a colour, where a badge is usually paired with a tone.
+
+  ARIA contract: when `title` is given the code is wrapped in `<abbr title>`,
+  so the expansion is available to hover AND to assistive technology — which
+  is the whole reason a three-letter code is acceptable here at all. The
+  swatch is `aria-hidden`: it repeats the colour, which conveys nothing on
+  its own. With `href` the chip is a real link and the code is its accessible
+  name.
+
+  The colour arrives as a token name, never a value — see `colour-token.ts`.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { CHIP_COLOUR_PROPERTY, colourTokenStyle } from "./colour-token.js";
+import { chipSize, chipSwatchSize } from "./tones.js";
+let { label, title, href, colourToken, size = "md", class: className, ...rest } = $props();
+const context = getComponentsContext();
+const style = $derived(colourTokenStyle(CHIP_COLOUR_PROPERTY, colourToken));
+</script>
+
+{#snippet body()}
+  <span
+    aria-hidden="true"
+    class={[
+      'ring-base-content/20 inline-block shrink-0 rounded-full bg-(--chip-colour) ring-1',
+      chipSwatchSize[size],
+    ]}
+  ></span>
+  {#if title !== undefined}
+    <abbr {title} class="no-underline">{label}</abbr>
+  {:else}
+    <span>{label}</span>
+  {/if}
+{/snippet}
+
+{#if href !== undefined}
+  <a
+    {...rest}
+    href={context.href(href)}
+    {style}
+    class={['link link-hover inline-flex items-center font-medium', chipSize[size], className]}
+  >
+    {@render body()}
+  </a>
+{:else}
+  <span
+    {...rest}
+    {style}
+    class={['inline-flex items-center font-medium', chipSize[size], className]}
+  >
+    {@render body()}
+  </span>
+{/if}