@thomasfosterau/components 0.0.0 → 0.1.0

package/dist/data/Pagination.svelte.d.ts

@@ -0,0 +1,71 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Size } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** The offset the current page was rendered with. */
+    offset: number;
+    /** The page size the current page was rendered with. */
+    limit: number;
+    /** The unpaged total across every page. */
+    total: number;
+    /**
+     * `window` renders numbered page links with gaps; `prevNext` a bare Previous/Next pair.
+     * @defaultValue `'window'`
+     */
+    variant?: 'window' | 'prevNext' | undefined;
+    /**
+     * Build the link for a target offset. Preserving the page's own query
+     * parameters is the caller's job — `pageHref` does it for a JSON:API
+     * URL — and the result is resolved through the components context.
+     */
+    href?: ((offset: number) => string) | undefined;
+    /** Page without navigating. Ignored when `href` is given. */
+    onPage?: ((offset: number) => void) | undefined;
+    /**
+     * Pages rendered either side of the current one.
+     * @defaultValue `1`
+     */
+    siblings?: number | undefined;
+    /**
+     * The navigation landmark's accessible name.
+     * @defaultValue `'Pagination'`
+     */
+    label?: string | undefined;
+    /**
+     * Text of the previous-page control.
+     * @defaultValue `'Previous'`
+     */
+    previousLabel?: string | undefined;
+    /**
+     * Text of the next-page control.
+     * @defaultValue `'Next'`
+     */
+    nextLabel?: string | undefined;
+    /**
+     * How a numbered control is named — its digit alone is not a name.
+     * @defaultValue `"Page <page>"`
+     */
+    pageLabel?: ((page: number) => string) | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'sm'`
+     */
+    size?: Size | undefined;
+    /** Print the range line ("Showing 41–60 of 151"). */
+    showRange?: boolean | undefined;
+    /**
+     * The range line when `showRange`.
+     * @defaultValue `"Showing <start>–<end> of <total>"`
+     */
+    rangeLabel?: ((start: number, end: number, total: number) => string) | undefined;
+    /** Text between the two arms in `prevNext` mode ("Page 2 of 8"). */
+    statusLabel?: ((page: number, pages: number) => string) | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** Offset-based page navigation: numbered links with gaps or a bare Previous/Next pair, as links (`href`) or callbacks (`onPage`). */
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/data/PaginationFooter.svelte

@@ -0,0 +1,41 @@
+<!-- @component
+The count line and the pager that sit under a paginated index page.
+-->
+<!--
+  PaginationFooter — what sits under a paginated index page: the count, and
+  the pager.
+
+  The two always travel together, and rendering them separately at each call
+  site meant the same dozen lines in every listing — a dozen lines in which
+  the limit, the offset and the total are threaded through twice and can
+  disagree. Here they come from one set of props, so they cannot.
+
+  `ResultCount` and `Pagination` stay exported on their own: a page that shows
+  a count without paging, or pages without a count, is a real thing. This is
+  the pairing, not a replacement.
+
+  ARIA contract: whatever its two parts carry — a `<p>` and a labelled `<nav>`.
+-->
+<script lang="ts">import Pagination from "./Pagination.svelte";
+import ResultCount from "./ResultCount.svelte";
+let { shown, offset, limit, total, href, onPage, variant = "window", siblings = 1, size = "sm", label = "Pagination", previousLabel = "Previous", nextLabel = "Next", pageLabel, countLabel, locales, class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['space-y-4', className]}>
+  <ResultCount {shown} {total} label={countLabel} {locales} />
+  <Pagination
+    {offset}
+    {limit}
+    {total}
+    {variant}
+    {href}
+    {onPage}
+    {siblings}
+    {size}
+    {label}
+    {previousLabel}
+    {nextLabel}
+    {pageLabel}
+    {locales}
+  />
+</div>

package/dist/data/PaginationFooter.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Size } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Rows on this page — the length of what was rendered. */
+    shown: number;
+    /** The offset this page was rendered with. */
+    offset: number;
+    /** The page size this page was rendered with. */
+    limit: number;
+    /** The unpaged total. */
+    total: number;
+    /** Build the link for a target offset; the page's own query parameters included. */
+    href?: ((offset: number) => string) | undefined;
+    /** Page without navigating. Ignored when `href` is given. */
+    onPage?: ((offset: number) => void) | undefined;
+    /**
+     * `window` renders numbered page links with gaps; `prevNext` a bare Previous/Next pair.
+     * @defaultValue `'window'`
+     */
+    variant?: 'window' | 'prevNext' | undefined;
+    /**
+     * Pages rendered either side of the current one.
+     * @defaultValue `1`
+     */
+    siblings?: number | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'sm'`
+     */
+    size?: Size | undefined;
+    /**
+     * The pager landmark's accessible name.
+     * @defaultValue `'Pagination'`
+     */
+    label?: string | undefined;
+    /**
+     * Text of the previous-page control.
+     * @defaultValue `'Previous'`
+     */
+    previousLabel?: string | undefined;
+    /**
+     * Text of the next-page control.
+     * @defaultValue `'Next'`
+     */
+    nextLabel?: string | undefined;
+    /** How a numbered control is named; see `Pagination`. */
+    pageLabel?: ((page: number) => string) | undefined;
+    /** The count line, when "Showing x of y" is not the sentence wanted. */
+    countLabel?: ((shown: number, total: number) => string) | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** The count line and the pager that sit under a paginated index page. */
+declare const PaginationFooter: import("svelte").Component<Props, {}, "">;
+type PaginationFooter = ReturnType<typeof PaginationFooter>;
+export default PaginationFooter;

package/dist/data/ResultCount.svelte

@@ -0,0 +1,27 @@
+<!-- @component
+The "Showing 24 of 310" line under a list.
+-->
+<!--
+  ResultCount — "Showing 24 of 310" under a list.
+
+  Every list an API serves is a `LIMIT`ed window, so a page that showed only
+  the window would quietly imply it was everything; this says otherwise. It
+  renders nothing when `shown` is zero: an empty result is already saying
+  "nothing here" through its empty state, and "Showing 0 of 0" beside that is
+  noise, not reassurance.
+
+  ARIA contract: a plain `<p>`. Not a live region — the count is part of the
+  page that was just rendered, not an update to it, and announcing it on
+  every keystroke of a filter is the thing live regions are misused for.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { shown, total, label, locales = getComponentsContext().locale(), class: className, ...rest } = $props();
+// Formatter and formatted string in separate `$derived`s: the constructor
+// is the expensive half and only the locale should rebuild it.
+const counts = $derived(new Intl.NumberFormat(locales));
+const text = $derived(label === undefined ? `Showing ${counts.format(shown)} of ${counts.format(total)}` : label(shown, total));
+</script>
+
+{#if shown > 0}
+  <p {...rest} class={['text-base-content/60 text-sm tabular-nums', className]}>{text}</p>
+{/if}

package/dist/data/ResultCount.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    /** Rows on this page. */
+    shown: number;
+    /** Rows the query matched in total, before the window was applied. */
+    total: number;
+    /** The whole line, when "Showing x of y" is not the sentence wanted. */
+    label?: ((shown: number, total: number) => string) | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** The "Showing 24 of 310" line under a list. */
+declare const ResultCount: import("svelte").Component<Props, {}, "">;
+type ResultCount = ReturnType<typeof ResultCount>;
+export default ResultCount;

package/dist/data/Table.svelte

@@ -0,0 +1,145 @@
+<!-- @component
+A daisyUI `table` from column definitions and rows, with optional sortable headers and activatable rows.
+-->
+<!--
+  Table — columns in, rows in, a daisyUI `table` out.
+
+  It decides nothing about WHICH rows: a caller hands it the window it wants
+  shown, in the order it wants it, and this draws the header, the body, the
+  footer and the empty state. Sorting is the same deal — the header offers
+  the control and announces the state, and the caller (or `DataGrid`) does
+  the reordering. That split is what lets one component serve both a
+  client-side grid over 40 rows and a server-paged listing over 40,000, where
+  sorting the page in hand would be a lie.
+
+  ARIA contract: a real `<table>` with `<th scope="col">` headers. `caption`
+  is the table's accessible name — an unnamed table is one a screen-reader
+  user cannot tell from the next one — and `captionHidden` keeps it for
+  assistive technology only when the page's own heading already shows it. A
+  sortable column's header is a real `<button>` inside the `<th>` (the
+  activation), and the `<th>` carries `aria-sort` (the state); the arrow
+  beside it is `aria-hidden`, because the sort must be announced by the state
+  and not by a glyph.
+
+  `onSelect` makes each row activatable with `role="button"`, `tabindex="0"`
+  and Enter/Space — a click handler on a bare `<tr>` is invisible to everyone
+  not using a mouse. It costs the row its `row` semantics, so prefer a link
+  or a button inside a cell where the row's structure matters, and keep this
+  for a grid whose whole row is one destination.
+
+  The empty state is not an optional nicety: a table body with no rows and no
+  explanation reads as broken, and only the caller knows whether "nothing"
+  means "none yet" or "none matched".
+-->
+<script lang="ts" generics="T">import { columnAriaSort, nextSortState } from "./table-types.js";
+let { rows, columns, rowKey, caption, captionHidden = false, size = "md", zebra = false, pinRows = false, sort = $bindable(undefined), onSort, onSelect, emptyMessage = "Nothing to show.", emptyState, foot, sortLabel = (column) => `Sort by ${column.header}`, containerClass, class: className, ...rest } = $props();
+const tableSize = {
+	xs: "table-xs",
+	sm: "table-sm",
+	md: "table-md",
+	lg: "table-lg",
+	xl: "table-xl"
+};
+/** Alignment and the column's own classes, shared by its `<th>` and `<td>`. */
+const columnClass = (column) => [column.align === "end" ? "text-end" : "text-start", column.class];
+const toggleSort = (column) => {
+	const next = nextSortState(sort, column.key);
+	sort = next;
+	onSort?.(next);
+};
+/** The arrow beside a sorted header. Decorative — `aria-sort` is the state. */
+const sortIndicator = (key) => {
+	if (sort === undefined || sort.key !== key) return "";
+	return sort.direction === "asc" ? "▲" : "▼";
+};
+/**
+* Everything an activatable row needs, as one spread — or nothing at all
+* when it is not activatable. Assembled here rather than as four attribute
+* ternaries in the markup, because those four have to agree with each other
+* (a `role` without a `tabindex` is a lie) and one object is where that
+* agreement is visible.
+*/
+const rowAttributes = (row) => onSelect === undefined ? {} : {
+	role: "button",
+	tabindex: 0,
+	class: "cursor-pointer",
+	onclick: () => {
+		onSelect(row);
+	},
+	onkeydown: (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		// Space scrolls the page and Enter can submit a wrapping form;
+		// an activation that also does one of those is a bug report.
+		event.preventDefault();
+		onSelect(row);
+	}
+};
+</script>
+
+<div class={['overflow-x-auto', containerClass]}>
+  <table
+    {...rest}
+    class={[
+      'table bg-base-100',
+      tableSize[size],
+      zebra && 'table-zebra',
+      pinRows && 'table-pin-rows',
+      className,
+    ]}
+  >
+    {#if caption !== undefined}
+      <caption class={captionHidden ? 'sr-only' : 'p-3 text-start text-sm font-medium'}>
+        {caption}
+      </caption>
+    {/if}
+    <thead>
+      <tr>
+        {#each columns as column (column.key)}
+          <th scope="col" class={columnClass(column)} aria-sort={column.sortable ? columnAriaSort(sort, column.key) : undefined}>
+            {#if column.sortable}
+              <button
+                type="button"
+                class="link link-hover inline-flex items-center gap-1"
+                onclick={() => {
+                  toggleSort(column);
+                }}
+                aria-label={sortLabel(column)}
+              >
+                {column.header}
+                <span aria-hidden="true" class="text-xs">{sortIndicator(column.key)}</span>
+              </button>
+            {:else}
+              {column.header}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if rows.length === 0}
+        <tr>
+          <!-- Without the colspan the message sits under the first column and
+               the table looks like it lost its data rather than never had any. -->
+          <td colspan={columns.length} class="text-base-content/60 py-8 text-center">
+            {#if emptyState}{@render emptyState()}{:else}{emptyMessage}{/if}
+          </td>
+        </tr>
+      {:else}
+        {#each rows as row (rowKey(row))}
+          <tr class="hover:bg-base-200" {...rowAttributes(row)}>
+            {#each columns as column (column.key)}
+              <td class={columnClass(column)}>
+                {#if column.cell}{@render column.cell(row)}{:else}{column.value(row)}{/if}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+    {#if foot}
+      <tfoot>
+        <tr>{@render foot()}</tr>
+      </tfoot>
+    {/if}
+  </table>
+</div>

package/dist/data/Table.svelte.d.ts

@@ -0,0 +1,75 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
+import type { Size } from '../ui/tones.ts';
+import { type SortState, type TableColumn } from './table-types.ts';
+declare function $$render<T>(): {
+    props: Omit<HTMLTableAttributes, "children"> & {
+        /** The rows to draw, in the order to draw them. */
+        rows: readonly T[];
+        /** Column definitions: header, cell renderer, sort key. */
+        columns: readonly TableColumn<T>[];
+        /** Stable identity per row — the `{#each}` key. */
+        rowKey: (row: T) => string;
+        /** The table's accessible name, rendered as its `<caption>`. */
+        caption?: string | undefined;
+        /** Keep the caption for assistive technology only. */
+        captionHidden?: boolean | undefined;
+        /**
+         * daisyUI size step.
+         * @defaultValue `'md'`
+         */
+        size?: Size | undefined;
+        /** Stripe alternate rows. */
+        zebra?: boolean | undefined;
+        /**
+         * Stick the header row while the body scrolls. Needs the scroll container
+         * to be the scrolling element, so give it a `max-h-*` through `class`
+         * when the page itself should not scroll.
+         */
+        pinRows?: boolean | undefined;
+        /** Which column is sorted, and which way. Bindable; `undefined` is unsorted. */
+        sort?: SortState | undefined;
+        /** Called with the next state when a sortable header is activated. */
+        onSort?: ((sort: SortState | undefined) => void) | undefined;
+        /** Makes every row activatable by pointer and keyboard. */
+        onSelect?: ((row: T) => void) | undefined;
+        /**
+         * The line shown instead of an empty body.
+         * @defaultValue `'Nothing to show.'`
+         */
+        emptyMessage?: string | undefined;
+        /** Richer empty state, in place of `emptyMessage`. */
+        emptyState?: Snippet<[]> | undefined;
+        /** A `<tfoot>` row — totals, or a summary. Render `<td>`/`<th>` cells. */
+        foot?: Snippet<[]> | undefined;
+        /**
+         * How a sortable column's button is named.
+         * @defaultValue `"Sort by <header>"`
+         */
+        sortLabel?: ((column: TableColumn<T>) => string) | undefined;
+        /** Classes on the scroll container the table sits in. */
+        containerClass?: string | undefined;
+    };
+    exports: {};
+    bindings: "sort";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sort";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** A daisyUI `table` from column definitions and rows, with optional sortable headers and activatable rows. */
+declare const Table: $$IsomorphicComponent;
+type Table<T> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/data/TreeList.svelte

@@ -0,0 +1,41 @@
+<!-- @component
+One collapsible node of a hierarchy: an always-visible summary row and a subtree that folds away under it.
+-->
+<!--
+  TreeList — one collapsible node of a hierarchy: a summary row that is always
+  visible, and a subtree that folds away under it.
+
+  Built on `<details>` / `<summary>` rather than a `{#if}` and a button, and
+  deliberately NOT on a bits-ui primitive: the element already gives the
+  disclosure semantics, the keyboard behaviour, and — on a modern browser —
+  find-in-page inside the collapsed content, which no JavaScript
+  implementation matches. A hand-rolled equivalent is three ARIA attributes
+  that have to stay in step with each other.
+
+  Open by default: a taxonomy the reader has to unfold node by node hides the
+  shape they came to see. Pass `open={false}` where the subtree is an aside.
+
+  ARIA contract: the platform's disclosure semantics, plus a `<ul>`/`<li>`
+  structure so the nesting is announced as nesting. No `aria-expanded` is
+  written by hand — the browser maps `open`, and a second copy can only ever
+  disagree with it. This is a disclosure tree, not an ARIA `tree` widget:
+  `role="tree"` would commit the caller to roving tabindex and typeahead over
+  arbitrary nested content, which is a much larger promise than folding a
+  taxonomy.
+-->
+<script lang="ts">let { open = $bindable(true), title, children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<ul {...rest} class={['ml-1 pl-0', className]}>
+  <li class="relative block pl-2">
+    <details bind:open>
+      <summary
+        class="focus-visible:outline-primary block cursor-pointer marker:hidden focus:outline-hidden focus-visible:outline-1 focus-visible:outline-dotted"
+      >
+        {#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+      </summary>
+      {@render children?.()}
+    </details>
+  </li>
+</ul>

package/dist/data/TreeList.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLUListElement>, 'title' | 'children'> {
+    /**
+     * Whether the subtree starts unfolded. Bindable.
+     * @defaultValue `true`
+     */
+    open?: boolean | undefined;
+    /** The always-visible summary row — its own text, or richer markup. */
+    title: string | Snippet<[]>;
+    /** The subtree — typically nested `TreeListItem`s. */
+    children?: Snippet<[]> | undefined;
+}
+/** One collapsible node of a hierarchy: an always-visible summary row and a subtree that folds away under it. */
+declare const TreeList: import("svelte").Component<Props, {}, "open">;
+type TreeList = ReturnType<typeof TreeList>;
+export default TreeList;

package/dist/data/TreeListItem.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+One leaf under a `TreeList`, drawn with the connector rule that makes the nesting readable.
+-->
+<!--
+  TreeListItem — one leaf under a `TreeList`, drawn with the connector rule
+  that makes the nesting readable.
+
+  The rule is a border on the item rather than a line drawn between items, so
+  a subtree that grows or folds redraws itself; `last:border-transparent`
+  stops it running past the final child, which is the detail that separates a
+  tree from a stack of indented rows.
+
+  ARIA contract: a plain `<li>`. It is a list item inside its parent's list,
+  and the nesting is the structure — nothing is added.
+-->
+<script lang="ts">let { children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<li
+  {...rest}
+  class={[
+    "border-base-300 border-l-2 before:absolute before:top-2 before:left-1 before:block before:content-['']",
+    'last:border-transparent',
+    className,
+  ]}
+>
+  {@render children?.()}
+</li>

package/dist/data/TreeListItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+    /** The leaf's content, beside the connector rule. */
+    children?: Snippet<[]> | undefined;
+}
+/** One leaf under a `TreeList`, drawn with the connector rule that makes the nesting readable. */
+declare const TreeListItem: import("svelte").Component<Props, {}, "">;
+type TreeListItem = ReturnType<typeof TreeListItem>;
+export default TreeListItem;

package/dist/data/description-context.d.ts

@@ -0,0 +1,33 @@
+/**
+ * How a {@link DescriptionRow} learns which {@link DescriptionList} it is
+ * inside.
+ *
+ * The four list variants render their rows differently — a `grid` row is a
+ * wrapper holding a stacked `<dt>`/`<dd>` pair, while a `card` row's `<dt>`
+ * and `<dd>` are siblings in the list's own two-column grid, because a
+ * wrapper would break the alignment the grid exists for. A call site writes
+ * the same `<DescriptionRow>` either way.
+ *
+ * The variant travels down as context rather than as a prop so a caller
+ * cannot get a list and its rows out of step, and so the list stays the
+ * single place the choice is made. A row mounted with no list above it gets
+ * the defaults, which is what makes one usable inside an app's own `<dl>`.
+ *
+ * @module
+ */
+/** The presentation a `DescriptionList` asks its rows for. */
+export interface DescriptionListStyle {
+    readonly variant: 'grid' | 'card' | 'divided' | 'inline';
+    /** Render values in a fixed-width face that breaks anywhere. */
+    readonly mono: boolean;
+    /** Render a row whose value is empty, using `emptyLabel`. */
+    readonly showEmpty: boolean;
+    /** What an empty value reads as when `showEmpty`. */
+    readonly emptyLabel: string;
+}
+/** The presentation a `DescriptionRow` uses outside any `DescriptionList`: the `grid` variant, proportional text, empty rows hidden. */
+export declare const defaultDescriptionListStyle: DescriptionListStyle;
+/** Declare the style every descendant `DescriptionRow` renders in. */
+export declare function setDescriptionListStyle(style: () => DescriptionListStyle): void;
+/** The enclosing list's style, or the defaults when there is no enclosing list. */
+export declare function getDescriptionListStyle(): () => DescriptionListStyle;

package/dist/data/description-context.js

@@ -0,0 +1,35 @@
+/**
+ * How a {@link DescriptionRow} learns which {@link DescriptionList} it is
+ * inside.
+ *
+ * The four list variants render their rows differently — a `grid` row is a
+ * wrapper holding a stacked `<dt>`/`<dd>` pair, while a `card` row's `<dt>`
+ * and `<dd>` are siblings in the list's own two-column grid, because a
+ * wrapper would break the alignment the grid exists for. A call site writes
+ * the same `<DescriptionRow>` either way.
+ *
+ * The variant travels down as context rather than as a prop so a caller
+ * cannot get a list and its rows out of step, and so the list stays the
+ * single place the choice is made. A row mounted with no list above it gets
+ * the defaults, which is what makes one usable inside an app's own `<dl>`.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+/** The presentation a `DescriptionRow` uses outside any `DescriptionList`: the `grid` variant, proportional text, empty rows hidden. */
+export const defaultDescriptionListStyle = {
+    variant: 'grid',
+    mono: false,
+    showEmpty: false,
+    emptyLabel: 'unrecorded',
+};
+const STYLE_KEY = Symbol('@thomasfosterau/components:description-list');
+/** Declare the style every descendant `DescriptionRow` renders in. */
+export function setDescriptionListStyle(style) {
+    setContext(STYLE_KEY, style);
+}
+/** The enclosing list's style, or the defaults when there is no enclosing list. */
+export function getDescriptionListStyle() {
+    return (getContext(STYLE_KEY) ??
+        (() => defaultDescriptionListStyle));
+}

package/dist/data/diff.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The segment shape `DiffText` renders.
+ *
+ * A `.ts` module rather than a `<script module>` block so the diff algorithm
+ * that produces these — which is the app's, not this package's — can import
+ * the type without reaching through a component.
+ *
+ * @module
+ */
+/** One run of a word- or character-level diff. */
+export interface DiffSegment {
+    readonly kind: 'equal' | 'insert' | 'delete';
+    readonly text: string;
+}

package/dist/data/diff.js

@@ -0,0 +1,10 @@
+/**
+ * The segment shape `DiffText` renders.
+ *
+ * A `.ts` module rather than a `<script module>` block so the diff algorithm
+ * that produces these — which is the app's, not this package's — can import
+ * the type without reaching through a component.
+ *
+ * @module
+ */
+export {};