@thomasfosterau/components 0.0.0-stage → 0.1.0

package/dist/feedback/LoadingBoundary.svelte

@@ -0,0 +1,61 @@
+<!-- @component
+The loading and error chrome around one read.
+-->
+<!--
+  LoadingBoundary — the loading and error chrome around one read.
+
+  The four states exist because "not settled" is two different things, and
+  collapsing them is what made every mutation blank its list back to
+  "Loading…": `loading` is a FIRST read with nothing to show yet, while
+  `refreshing` is a re-fetch over content that is already on screen. Children
+  keep rendering through `refreshing` — only a first read or a failure shows
+  chrome instead of content.
+
+  The two `tone`s are the two treatments the app repos had, not a new pair:
+  `page` is a route's own read, where the message stands alone under the page
+  heading, and `section` is a detail page's secondary read, indented into the
+  flow and deliberately quiet so a failed sidebar section degrades on its own
+  instead of taking the page with it.
+
+  ARIA contract: the loading chrome is a polite `role="status"` named by what
+  it is loading, so a reader who arrives mid-fetch is told rather than
+  finding nothing. During `refreshing` the same announcement is made from a
+  visually hidden status, because the content is still there to read. A
+  failure is assertive: the reader is waiting for something that is not
+  coming.
+-->
+<script lang="ts">import Alert from "../ui/Alert.svelte";
+import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+let { state, loadingLabel = "Loading…", errorLabel = "That didn’t load. Try again.", tone = "page", class: className, loading, failed, children } = $props();
+</script>
+
+{#if state === 'error'}
+  {#if failed}
+    {@render failed({ message: errorLabel })}
+  {:else if tone === 'section'}
+    <p role="alert" class={['text-base-content/60 mt-3 text-sm leading-6', className]}>
+      {errorLabel}
+    </p>
+  {:else}
+    <Alert tone="error" live="assertive" class={className}>{errorLabel}</Alert>
+  {/if}
+{:else if state === 'loading'}
+  {#if loading}
+    {@render loading()}
+  {:else}
+    <p
+      role="status"
+      class={[
+        tone === 'section' ? 'text-base-content/50 mt-3 text-sm' : 'text-base-content/50',
+        className,
+      ]}
+    >
+      {loadingLabel}
+    </p>
+  {/if}
+{:else}
+  {#if state === 'refreshing'}
+    <VisuallyHidden role="status">{loadingLabel}</VisuallyHidden>
+  {/if}
+  {@render children()}
+{/if}

package/dist/feedback/LoadingBoundary.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Where the read has got to. */
+    state: 'loading' | 'refreshing' | 'error' | 'ready';
+    /**
+     * Announced, and shown, while the first read is in flight.
+     * @defaultValue `'Loading…'`
+     */
+    loadingLabel?: string | undefined;
+    /**
+     * The message for a failed read. Every call site has a specific one.
+     * @defaultValue `'That didn’t load. Try again.'`
+     */
+    errorLabel?: string | undefined;
+    /**
+     * Which of the two established treatments to render.
+     * @defaultValue `'page'`
+     */
+    tone?: 'page' | 'section' | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+    /** Replaces the default loading chrome. */
+    loading?: Snippet<[]> | undefined;
+    /** Replaces the default error chrome. */
+    failed?: Snippet<[{
+        message: string;
+    }]> | undefined;
+    /** The loaded content. Rendered from the first success onwards. */
+    children: Snippet<[]>;
+}
+/** The loading and error chrome around one read. */
+declare const LoadingBoundary: import("svelte").Component<Props, {}, "">;
+type LoadingBoundary = ReturnType<typeof LoadingBoundary>;
+export default LoadingBoundary;

package/dist/feedback/ProgressBar.svelte

@@ -0,0 +1,46 @@
+<!-- @component
+A native `<progress>` in a daisyUI tone.
+-->
+<!--
+  ProgressBar — a native `<progress>` in a daisyUI tone.
+
+  Native rather than a `div role="progressbar"`: the element already carries
+  the role, the value semantics and the platform's own indeterminate
+  rendering, and no hand-rolled version gets the indeterminate state right.
+
+  ARIA contract: `label` is the accessible name (a `<progress>` takes no name
+  from its contents), and `aria-valuetext` carries the percentage as words so
+  a reader hears "62 per cent" rather than "62 of 100". Omitting `value`
+  leaves the element indeterminate — no value attribute at all, which is what
+  makes the platform animate it — and drops `aria-valuetext` with it. The
+  printed percentage beside the bar is `aria-hidden`, because it restates the
+  name and value the element already exposes.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { progressTone } from "../ui/tones.js";
+let { label, value, max = 100, tone = "primary", showValue = false, locales, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const fraction = $derived(value === undefined || max <= 0 ? undefined : Math.min(1, Math.max(0, value / max)));
+// The formatter is built in one `$derived` and applied in another: building
+// an `Intl` formatter is the expensive half, and it must not be redone every
+// time the value ticks.
+const percent = $derived(new Intl.NumberFormat(locales ?? context.locale(), {
+	style: "percent",
+	maximumFractionDigits: 1
+}));
+const valueText = $derived(fraction === undefined ? undefined : percent.format(fraction));
+</script>
+
+<div class={['flex items-center gap-3', className]}>
+  <progress
+    {...rest}
+    class={['progress', progressTone[tone]]}
+    value={value === undefined ? undefined : Math.min(max, Math.max(0, value))}
+    {max}
+    aria-label={label}
+    aria-valuetext={valueText}
+  ></progress>
+  {#if showValue && valueText !== undefined}
+    <span class="w-14 shrink-0 text-right text-sm tabular-nums" aria-hidden="true">{valueText}</span>
+  {/if}
+</div>

package/dist/feedback/ProgressBar.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLProgressAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+interface Props extends Omit<HTMLProgressAttributes, 'value' | 'max'> {
+    /** Accessible name, e.g. `Seeds germinated`. */
+    label: string;
+    /** Current value in `[0, max]`. Omit for an indeterminate bar. */
+    value?: number | undefined;
+    /**
+     * The value that means complete.
+     * @defaultValue `100`
+     */
+    max?: number | undefined;
+    /**
+     * Semantic colour.
+     * @defaultValue `'primary'`
+     */
+    tone?: Tone | undefined;
+    /** Print the percentage beside the bar. */
+    showValue?: boolean | undefined;
+    /** Locale(s) for the percentage. Defaults to the components context's. */
+    locales?: string | readonly string[] | undefined;
+    /** Extra classes on the wrapper. */
+    class?: string | undefined;
+}
+/** A native `<progress>` in a daisyUI tone. */
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/feedback/SegmentBar.svelte

@@ -0,0 +1,83 @@
+<!-- @component
+One horizontal bar split into proportional, coloured segments: a vote share, a storage breakdown, a pass/fail split.
+-->
+<!--
+  SegmentBar — one horizontal bar split into proportional, coloured segments:
+  a vote share, a storage breakdown, a pass/fail split.
+
+  ARIA contract, and the whole reason this is a component: the bar is a
+  SINGLE `role="img"` whose `aria-label` spells out every segment ("Storage:
+  photos 62%, video 31%, other 7%"), so assistive technology gets the picture
+  in one read. The alternative — a run of coloured boxes, each with its own
+  label — is a dozen unlabelled or half-labelled announcements that never add
+  up to the comparison the bar is drawn to make. Every segment is therefore
+  `aria-hidden`, and the in-segment percentages are decorative.
+
+  Fractions are given, not derived from values: the caller already knows its
+  denominator (and whether the remainder should stay unfilled), and passing
+  shares keeps this component out of the business of summing anything. They
+  are clamped, and a total under 1 leaves the track showing.
+
+  A segment's colour is either a semantic `tone` or a `colourToken` — a CSS
+  custom-property NAME the app's theme declares in both its light and dark
+  themes. The value never appears here; see `ui/colour-token.ts`.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { backgroundTone } from "../ui/tones.js";
+import { colourTokenStyle } from "../ui/colour-token.js";
+import { barSize } from "./sizes.js";
+/** The custom property a segment's `colourToken` is bound to. */
+const SEGMENT_COLOUR_PROPERTY = "--segment-colour";
+let { label, segments, showValues = false, marker, size = "md", locales, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const clamp = (fraction) => Math.min(1, Math.max(0, fraction));
+const percent = $derived(new Intl.NumberFormat(locales ?? context.locale(), {
+	style: "percent",
+	maximumFractionDigits: 1
+}));
+const shares = $derived(segments.map((segment) => ({
+	segment,
+	fraction: clamp(segment.fraction)
+})));
+const description = $derived(`${label}: ${shares.map(({ segment, fraction }) => `${segment.label} ${percent.format(fraction)}`).join(", ")}`);
+</script>
+
+<div
+  {...rest}
+  role="img"
+  aria-label={description}
+  class={[
+    'bg-base-300 relative flex w-full overflow-hidden rounded-(--radius-selector)',
+    barSize[size],
+    className,
+  ]}
+>
+  {#each shares as { segment, fraction }, index (index)}
+    <div
+      aria-hidden="true"
+      class={[
+        'flex h-full items-center justify-center overflow-hidden text-xs font-medium whitespace-nowrap',
+        segment.colourToken === undefined
+          ? [backgroundTone[segment.tone ?? 'neutral'], 'text-neutral-content']
+          : 'text-base-100 bg-(--segment-colour)',
+      ]}
+      style={[
+        `width: ${(fraction * 100).toFixed(2)}%`,
+        colourTokenStyle(SEGMENT_COLOUR_PROPERTY, segment.colourToken),
+      ]
+        .filter((part) => part !== undefined)
+        .join('; ')}
+    >
+      {#if showValues && size !== 'sm' && fraction >= 0.08}
+        {percent.format(fraction)}
+      {/if}
+    </div>
+  {/each}
+  {#if marker !== undefined}
+    <div
+      aria-hidden="true"
+      class="bg-base-content absolute inset-y-0 w-0.5"
+      style={`left: ${(clamp(marker) * 100).toFixed(2)}%`}
+    ></div>
+  {/if}
+</div>

package/dist/feedback/SegmentBar.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+import { type BarSize } from './sizes.ts';
+export interface BarSegment {
+    /** Read out for this segment in the bar's accessible label. */
+    readonly label: string;
+    /** Share of the whole bar, in `[0, 1]`. */
+    readonly fraction: number;
+    /** A CSS custom-property name the app's theme declares (`--party-alp`). */
+    readonly colourToken?: string | undefined;
+    /** Semantic colour, used when there is no `colourToken`. */
+    readonly tone?: Tone | undefined;
+}
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** What the bar shows. Leads the accessible label. */
+    label: string;
+    /** The parts, in order; widths are proportional to their values. */
+    segments: readonly BarSegment[];
+    /** Print each segment's percentage inside it when it fits. */
+    showValues?: boolean | undefined;
+    /** Draw a marker at this fraction — a 50% majority line, a quota. */
+    marker?: number | undefined;
+    /**
+     * Bar height step.
+     * @defaultValue `'md'`
+     */
+    size?: BarSize | undefined;
+    /** Locale(s) for the percentages. Defaults to the components context's. */
+    locales?: string | readonly string[] | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** One horizontal bar split into proportional, coloured segments: a vote share, a storage breakdown, a pass/fail split. */
+declare const SegmentBar: import("svelte").Component<Props, {}, "">;
+type SegmentBar = ReturnType<typeof SegmentBar>;
+export default SegmentBar;

package/dist/feedback/StatTile.svelte

@@ -0,0 +1,77 @@
+<!-- @component
+One daisyUI `stat`: a headline figure with its label and optional change line and description; wrap a row in `Stats`.
+-->
+<!--
+  StatTile — one daisyUI `stat`: a headline figure with its label, an optional
+  change line and an optional description. Wrap a row of them in `Stats`.
+
+  ARIA contract: no roles, on purpose. A stat is text, and daisyUI's
+  `stat-title` / `stat-value` / `stat-desc` order puts it in the reading order
+  a reader expects — label, then figure, then the change. What the markup
+  cannot convey is the DIRECTION of the change: the arrow that tells a sighted
+  reader "up" is `aria-hidden`, so the direction is also spelled out in
+  visually hidden text beside it, and the tone colour is never the only
+  carrier.
+
+  Numbers are formatted through `Intl` for the context's locale; pass a
+  pre-formatted string for anything that is not a plain count.
+-->
+<script lang="ts">import { Minus, TrendingDown, TrendingUp } from "@lucide/svelte";
+import { getComponentsContext } from "../context.svelte.js";
+let { label, value, delta, description, upLabel = "Up", downLabel = "Down", flatLabel = "No change", locales, figure, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const chosenLocales = $derived(locales ?? context.locale());
+const countFormat = $derived(new Intl.NumberFormat(chosenLocales));
+const signedCount = $derived(new Intl.NumberFormat(chosenLocales, {
+	signDisplay: "exceptZero",
+	maximumFractionDigits: 0
+}));
+const signedDecimal = $derived(new Intl.NumberFormat(chosenLocales, {
+	signDisplay: "exceptZero",
+	maximumFractionDigits: 1
+}));
+const signedPercent = $derived(new Intl.NumberFormat(chosenLocales, {
+	style: "percent",
+	signDisplay: "exceptZero",
+	maximumFractionDigits: 1
+}));
+const formattedValue = $derived(typeof value === "number" ? countFormat.format(value) : value);
+const deltaText = $derived.by(() => {
+	if (delta === undefined) return "";
+	const unit = delta.unit ?? "count";
+	const number = unit === "count" ? signedCount.format(delta.value) : unit === "percent" ? signedPercent.format(delta.value / 100) : signedDecimal.format(delta.value);
+	return delta.label === undefined ? number : `${number} ${delta.label}`;
+});
+const direction = $derived(delta === undefined || delta.value === 0 ? "flat" : delta.value > 0 ? "up" : "down");
+const deltaClass = {
+	up: "text-success",
+	down: "text-error",
+	flat: "text-base-content/70"
+};
+</script>
+
+<div {...rest} class={['stat', className]}>
+  {#if figure}
+    <div class="stat-figure">{@render figure()}</div>
+  {/if}
+  <div class="stat-title">{label}</div>
+  <div class="stat-value tabular-nums">{formattedValue}</div>
+  {#if delta !== undefined}
+    <div class={['stat-desc flex items-center gap-1 tabular-nums', deltaClass[direction]]}>
+      {#if direction === 'up'}
+        <TrendingUp class="size-4" aria-hidden="true" />
+        <span class="sr-only">{upLabel}</span>
+      {:else if direction === 'down'}
+        <TrendingDown class="size-4" aria-hidden="true" />
+        <span class="sr-only">{downLabel}</span>
+      {:else}
+        <Minus class="size-4" aria-hidden="true" />
+        <span class="sr-only">{flatLabel}</span>
+      {/if}
+      <span>{deltaText}</span>
+    </div>
+  {/if}
+  {#if description !== undefined}
+    <div class="stat-desc">{description}</div>
+  {/if}
+</div>

package/dist/feedback/StatTile.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface StatDelta {
+    /**
+     * The change. Positive is up. With `unit: 'percent'` it is read as a
+     * percentage — `3.2` renders as `+3.2%`.
+     */
+    readonly value: number;
+    /**
+     * How to render it: a whole count, a percentage, or a decimal whose unit
+     * the caller names in `label` (`'pts swing'`).
+     */
+    readonly unit?: 'count' | 'percent' | 'points' | undefined;
+    /** Trailing words, e.g. `swing` or `since April`. */
+    readonly label?: string | undefined;
+}
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The `stat-title`. */
+    label: string;
+    /** The headline figure; a number is formatted as a count. */
+    value: string | number;
+    /** Change line under the value. */
+    delta?: StatDelta | undefined;
+    /** Plain description, rendered after the delta when both are present. */
+    description?: string | undefined;
+    /**
+     * Announced in place of the rising arrow.
+     * @defaultValue `'Up'`
+     */
+    upLabel?: string | undefined;
+    /**
+     * Announced in place of the falling arrow.
+     * @defaultValue `'Down'`
+     */
+    downLabel?: string | undefined;
+    /**
+     * Announced in place of the flat marker.
+     * @defaultValue `'No change'`
+     */
+    flatLabel?: string | undefined;
+    /** Locale(s) for the figures. Defaults to the components context's. */
+    locales?: string | readonly string[] | undefined;
+    /** Icon or sparkline in the `stat-figure` slot. */
+    figure?: Snippet<[]> | undefined;
+}
+/** One daisyUI `stat`: a headline figure with its label and optional change line and description; wrap a row in `Stats`. */
+declare const StatTile: import("svelte").Component<Props, {}, "">;
+type StatTile = ReturnType<typeof StatTile>;
+export default StatTile;

package/dist/feedback/Stats.svelte

@@ -0,0 +1,18 @@
+<!-- @component
+The daisyUI `stats` wrapper a row of `StatTile`s sits in, drawing the dividers between them.
+-->
+<!--
+  Stats — the daisyUI `stats` wrapper a row of `StatTile`s sits in. It is what
+  draws the dividers between tiles, so a lone tile still wants one.
+
+  No ARIA of its own: it is a grouping box around text. When a row of stats
+  needs a name (a dashboard with several), give it `aria-label` — the native
+  attributes spread — or put it inside a `Section` that already has a heading.
+-->
+<script lang="ts">import { statsOrientation } from "./sizes.js";
+let { orientation = "responsive", children, class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['stats', statsOrientation[orientation], className]}>
+  {@render children()}
+</div>

package/dist/feedback/Stats.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type StatsOrientation } from './sizes.ts';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Row, column, or stacked-then-row from the `sm` breakpoint up.
+     * @defaultValue `'responsive'`
+     */
+    orientation?: StatsOrientation | undefined;
+    /** The `StatTile`s. */
+    children: Snippet<[]>;
+}
+/** The daisyUI `stats` wrapper a row of `StatTile`s sits in, drawing the dividers between them. */
+declare const Stats: import("svelte").Component<Props, {}, "">;
+type Stats = ReturnType<typeof Stats>;
+export default Stats;

package/dist/feedback/Timeline.svelte

@@ -0,0 +1,86 @@
+<!-- @component
+A vertical daisyUI `timeline` of dated entries.
+-->
+<!--
+  Timeline — a vertical daisyUI `timeline` of dated entries: offices held,
+  releases shipped, a plant's life in a bed.
+
+  An `<ol>` because the order is the content: read out of sequence the list
+  means something else. Each entry shows its span on the start side, a marker
+  in the middle (filled for an open-ended, still-current entry, tinted with
+  the caller's colour token when given) and a `timeline-box` with the entry
+  itself.
+
+  ARIA contract: native list semantics plus an `aria-label` on the list, so a
+  reader hears what the sequence is before its length. The dash between the
+  two dates is `aria-hidden` and `toLabel` is read in its place — "May 2019 –
+  May 2022" is announced as a range, not a subtraction — and an open-ended
+  entry is introduced by `currentLabel` rather than by the filled marker
+  alone. Both markers are `aria-hidden`.
+
+  `colourToken` is a CSS custom-property NAME the app's theme declares; the
+  colour value itself never appears here. See `ui/colour-token.ts`.
+-->
+<script lang="ts">import { Circle, CircleDot } from "@lucide/svelte";
+import { getComponentsContext } from "../context.svelte.js";
+import { colourTokenStyle } from "../ui/colour-token.js";
+/** The custom property an entry's `colourToken` is bound to. */
+const TIMELINE_COLOUR_PROPERTY = "--timeline-colour";
+let { items, presentLabel = "present", toLabel = "to", currentLabel = "Current", label = "Timeline", item: itemBody, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<ol
+  {...rest}
+  aria-label={label}
+  class={['timeline timeline-vertical timeline-compact timeline-snap-icon', className]}
+>
+  {#each items as entry, index (entry.id)}
+    {@const current = entry.end === undefined}
+    <li style={colourTokenStyle(TIMELINE_COLOUR_PROPERTY, entry.colourToken)}>
+      {#if index > 0}<hr />{/if}
+      <div class="timeline-start text-base-content/70 mb-2 text-sm tabular-nums md:mb-0">
+        <time datetime={entry.start.dateTime}>{entry.start.label}</time>
+        <span aria-hidden="true">–</span>
+        <span class="sr-only">{toLabel}</span>
+        {#if entry.end === undefined}
+          <span>{presentLabel}</span>
+        {:else}
+          <time datetime={entry.end.dateTime}>{entry.end.label}</time>
+        {/if}
+      </div>
+      <div
+        class={[
+          'timeline-middle',
+          entry.colourToken === undefined
+            ? 'text-base-content/60'
+            : 'text-(--timeline-colour)',
+        ]}
+      >
+        {#if current}
+          <CircleDot class="size-5" aria-hidden="true" />
+          <span class="sr-only">{currentLabel}</span>
+        {:else}
+          <Circle class="size-5" aria-hidden="true" />
+        {/if}
+      </div>
+      <div class="timeline-end timeline-box">
+        {#if itemBody}
+          {@render itemBody(entry)}
+        {:else}
+          <p class="font-medium">
+            {#if entry.href !== undefined}
+              <a href={context.href(entry.href)} class="link link-hover">{entry.label}</a>
+            {:else}
+              {entry.label}
+            {/if}
+          </p>
+          {#if entry.subtitle !== undefined}
+            <p class="text-base-content/70 text-sm">{entry.subtitle}</p>
+          {/if}
+        {/if}
+      </div>
+      {#if index < items.length - 1}<hr />{/if}
+    </li>
+  {/each}
+</ol>

package/dist/feedback/Timeline.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { HTMLOlAttributes } from 'svelte/elements';
+export interface TimelineDate {
+    /** Display text, e.g. `March 1996`. */
+    readonly label: string;
+    /** Machine-readable `<time datetime>` value, e.g. `1996-03-02`. */
+    readonly dateTime?: string | undefined;
+}
+export interface TimelineEntry {
+    readonly id: string;
+    /** The entry itself — the line in the box. */
+    readonly label: string;
+    /** Second line under it. */
+    readonly subtitle?: string | undefined;
+    readonly start: TimelineDate;
+    /** Omit for an open-ended, still-current entry. */
+    readonly end?: TimelineDate | undefined;
+    /** Links the entry's label, through the components context. */
+    readonly href?: string | undefined;
+    /** A CSS custom-property name the app's theme declares (`--party-alp`). */
+    readonly colourToken?: string | undefined;
+}
+interface Props extends Omit<HTMLOlAttributes, 'children'> {
+    /** The entries, in display order. */
+    items: readonly TimelineEntry[];
+    /**
+     * Shown in place of a missing `end`.
+     * @defaultValue `'present'`
+     */
+    presentLabel?: string | undefined;
+    /**
+     * Read between the two dates of a span.
+     * @defaultValue `'to'`
+     */
+    toLabel?: string | undefined;
+    /**
+     * Introduces an open-ended entry.
+     * @defaultValue `'Current'`
+     */
+    currentLabel?: string | undefined;
+    /**
+     * Accessible name of the list.
+     * @defaultValue `'Timeline'`
+     */
+    label?: string | undefined;
+    /** Replaces the default box body. */
+    item?: Snippet<[TimelineEntry]> | undefined;
+}
+/** A vertical daisyUI `timeline` of dated entries. */
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;