@thomasfosterau/components 0.1.0 → 0.2.0

package/dist/canvas/VectorCanvas.svelte

@@ -13,12 +13,29 @@ A pan-and-zoom SVG surface over a `VectorDocument`, with each element drawn by a
   ## ARIA contract
 
   The `<svg>` is `role="application"` named by `label` (default "Vector editing
-  canvas"). `application` is the honest role for a surface whose whole input
-  vocabulary is pointer gestures the page interprets — it tells a screen reader
-  to pass keys through rather than to read the SVG as a picture. It is also a
-  promise this component alone cannot keep: an application that makes a canvas
-  its only way to do something owes the reader a second, non-pointer path to the
-  same edit, and that path is the page's, not this component's.
+  canvas"). `application` is the honest role for a surface that interprets its
+  own input — it tells a screen reader to pass keys through rather than to read
+  the SVG as a picture — and it is a promise that the surface HANDLES those
+  keys, which § Keys keeps.
+
+  ## Keys
+
+  When `interactive`, the `<svg>` is one Tab stop, and every keydown and keyup
+  on it goes to `onkey` FIRST. What a key means to the elements is the
+  application's, for the same reason a pointer gesture is. Only a key the
+  application left alone (did not `preventDefault`), and not a Ctrl, Alt or
+  Meta chord, falls through to the two bindings this component owns, because
+  it owns the viewport:
+
+  | Key                     | Does                                         |
+  | ----------------------- | -------------------------------------------- |
+  | Arrow keys (`pan` tool) | pan by 40 screen pixels; Shift for 160       |
+  | `+` / `=`, `-`          | zoom in / out about the centre of the view   |
+
+  The application says which of its elements is focused through
+  `activedescendant` (an element id inside the surface), so DOM focus stays on
+  the `<svg>` and the arrow keys never scroll the page out from under the
+  reader.
 
   ## Two decisions worth stating
 
@@ -38,7 +55,7 @@ A pan-and-zoom SVG surface over a `VectorDocument`, with each element drawn by a
   pointer geometry.
 -->
 <script lang="ts" generics="T extends CanvasElement">import { panBy, screenToCanvas, snapToGrid, sortByZIndex, zoomAbout } from "./utils.js";
-let { doc, selected = new Set(), tool = "select", width = 800, height = 600, element, interactive = true, label = "Vector editing canvas", onviewportchange, oninteract, class: className, ...rest } = $props();
+let { doc, selected = new Set(), tool = "select", width = 800, height = 600, element, interactive = true, label = "Vector editing canvas", activedescendant = "", describedby = "", overlay, onkey, onfocuschange, onviewportchange, oninteract, class: className, ...rest } = $props();
 // Scoped to this instance: two canvases on one page would otherwise share a
 // `<pattern id>`, and the second would paint the first's grid.
 const uid = $props.id();
@@ -168,6 +185,57 @@ const wheel = (event) => {
 	};
 	onviewportchange?.(zoomAbout(doc.viewport, pointer, event.deltaY > 0 ? .9 : 1.1));
 };
+/** Screen pixels one arrow press pans by with the `pan` tool; Shift multiplies it. */
+const PAN_STEP = 40;
+const COARSE_PAN = 4;
+/** Which way the view moves for each arrow: right reveals more of the right. */
+const PAN_DIRECTIONS = new Map([
+	["ArrowLeft", {
+		x: 1,
+		y: 0
+	}],
+	["ArrowRight", {
+		x: -1,
+		y: 0
+	}],
+	["ArrowUp", {
+		x: 0,
+		y: 1
+	}],
+	["ArrowDown", {
+		x: 0,
+		y: -1
+	}]
+]);
+/** The zoom factor per key; `=` is `+` without the Shift. */
+const ZOOM_KEYS = new Map([
+	["+", 1.1],
+	["=", 1.1],
+	["-", .9]
+]);
+/** The view's own keys, for whatever the application did not claim. */
+const viewKey = (event) => {
+	const factor = ZOOM_KEYS.get(event.key);
+	if (factor !== undefined) {
+		onviewportchange?.(zoomAbout(doc.viewport, {
+			x: width / 2,
+			y: height / 2
+		}, factor));
+		return true;
+	}
+	const direction = PAN_DIRECTIONS.get(event.key);
+	if (tool !== "pan" || direction === undefined) return false;
+	const step = PAN_STEP * (event.shiftKey ? COARSE_PAN : 1);
+	onviewportchange?.(panBy(doc.viewport, direction.x * step, direction.y * step));
+	return true;
+};
+const key = (event) => {
+	if (!interactive) return;
+	onkey?.(event);
+	if (event.type !== "keydown" || event.defaultPrevented) return;
+	if (event.ctrlKey || event.metaKey || event.altKey) return;
+	if (viewKey(event)) event.preventDefault();
+};
 </script>
 
 <div
@@ -176,6 +244,10 @@ const wheel = (event) => {
   style:height="{height}px"
   style:touch-action="none"
 >
+  <!-- Svelte's a11y table files `application` under the non-interactive roles;
+       ARIA defines it as the role that takes focus and handles its own keys,
+       which is exactly what the tabindex and the key handlers are for. -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
   <svg
     {...rest}
     bind:this={surface}
@@ -183,7 +255,14 @@ const wheel = (event) => {
     {height}
     role="application"
     aria-label={label}
-    class="cursor-crosshair"
+    aria-activedescendant={activedescendant === '' ? undefined : activedescendant}
+    aria-describedby={describedby === '' ? undefined : describedby}
+    tabindex={interactive ? 0 : undefined}
+    class="focus-visible:outline-primary cursor-crosshair focus:outline-none focus-visible:outline-2 focus-visible:-outline-offset-2"
+    onkeydown={key}
+    onkeyup={key}
+    onfocus={() => onfocuschange?.(true)}
+    onblur={() => onfocuschange?.(false)}
     onpointerdown={down}
     onpointermove={move}
     onpointerup={up}
@@ -234,6 +313,8 @@ const wheel = (event) => {
           {/if}
         </g>
       {/each}
+
+      {@render overlay?.()}
     </g>
   </svg>
 </div>

package/dist/canvas/VectorCanvas.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 import type { CanvasElement, Point, VectorDocument, Viewport } from './types.ts';
 declare function $$render<T extends CanvasElement>(): {
-    props: Omit<SVGAttributes<SVGSVGElement>, "class" | "height" | "width"> & {
+    props: Omit<SVGAttributes<SVGSVGElement>, "class" | "onfocus" | "onblur" | "onkeydown" | "onkeyup" | "height" | "width"> & {
         /** The document to draw: its elements, viewport and grid. */
         doc: VectorDocument<T>;
         /**
@@ -37,6 +37,24 @@ declare function $$render<T extends CanvasElement>(): {
          * @defaultValue `'Vector editing canvas'`
          */
         label?: string | undefined;
+        /**
+         * The id of the element that has keyboard focus inside the surface, for
+         * `aria-activedescendant`; `''` for none.
+         * @defaultValue `''`
+         */
+        activedescendant?: string | undefined;
+        /**
+         * The id of an element describing the surface's keys, for
+         * `aria-describedby`; `''` for none.
+         * @defaultValue `''`
+         */
+        describedby?: string | undefined;
+        /** Drawn above every element, in canvas coordinates: a cursor, a guide. */
+        overlay?: Snippet<[]> | undefined;
+        /** Every keydown and keyup on the surface, before its own keys; `preventDefault` claims the key. */
+        onkey?: ((event: KeyboardEvent) => void) | undefined;
+        /** Whether the surface has keyboard focus, each time that changes. */
+        onfocuschange?: ((focused: boolean) => void) | undefined;
         /**
          * The viewport after a pan or a zoom.
          *

package/dist/canvas/types.d.ts

@@ -10,7 +10,7 @@
  *
  * @module @thomasfosterau/components/canvas/types
  */
-/** Stable identity for an element. */
+/** Stable identity for a canvas element. */
 export type ElementId = string;
 /** A point in canvas coordinates — the document's own space, not the screen's. */
 export interface Point {

package/dist/charts/types.d.ts

@@ -24,5 +24,5 @@ export interface ChartSeries {
      */
     readonly points: readonly ChartPoint[];
 }
-/** How the magnitude is drawn. */
+/** How a `Chart` draws its values: as a line, a filled area, or bars. */
 export type ChartKind = 'line' | 'area' | 'bar';

package/dist/citations/list-format.js

@@ -18,7 +18,9 @@
  * the index it was asked to format.
  */
 export const formatListParts = (items, options = {}) => {
-    const format = new Intl.ListFormat(options.locales, {
+    // A mutable copy: TS6's `Intl.ListFormat` (svelte-check) takes no readonly array.
+    const { locales } = options;
+    const format = new Intl.ListFormat(typeof locales === 'object' ? [...locales] : locales, {
         style: options.style ?? 'long',
         type: options.type ?? 'conjunction',
     });

package/dist/data/ChatBubble.svelte

@@ -0,0 +1,48 @@
+<!-- @component
+One message of a `MessageThread`: author, time, avatar, the body and a status line, as a daisyUI `chat` bubble.
+-->
+<!--
+  ChatBubble — an `<li>` holding an `<article>` named by its header, so a
+  reader moves message to message and hears "Ada Lovelace, 3 minutes ago"
+  before the body. The time is a real `<time datetime>` (`DateTime`, or
+  `RelativeTime` with the absolute instant in `title`). The avatar is
+  decorative (`aria-hidden`): the author's name is already text.
+
+  `side` is visual only: messages from the viewer sit at the end, and the
+  author string ("You") is what says whose they are, never the position or
+  the colour. The `<article>` is the daisyUI `chat` grid itself, so its
+  image / header / bubble / footer are its direct children, as
+  `chat.css` requires.
+-->
+<script lang="ts">import DateTime from "../formatting/DateTime.svelte";
+import RelativeTime from "../formatting/RelativeTime.svelte";
+import { chatBubbleTone } from "../ui/tones.js";
+let { author, sentAt, side = "start", tone, relative = false, locales, avatar, footer, children, class: className, ...rest } = $props();
+const uid = $props.id();
+const headerId = `${uid}-header`;
+const sideClass = {
+	start: "chat-start",
+	end: "chat-end"
+};
+</script>
+
+<li>
+  <article {...rest} aria-labelledby={headerId} class={['chat', sideClass[side], className]}>
+    {#if avatar}
+      <div class="chat-image avatar" aria-hidden="true">{@render avatar()}</div>
+    {/if}
+    <div class="chat-header" id={headerId}>
+      {author}{#if sentAt !== undefined}<span class="sr-only">,</span>
+        {#if relative}
+          <RelativeTime value={sentAt} {locales} class="text-xs opacity-60" />
+        {:else}
+          <DateTime value={sentAt} {locales} dateStyle="medium" timeStyle="short" class="text-xs opacity-60" />
+        {/if}
+      {/if}
+    </div>
+    <div class={['chat-bubble', tone !== undefined && chatBubbleTone[tone]]}>{@render children()}</div>
+    {#if footer}
+      <div class="chat-footer opacity-60">{@render footer()}</div>
+    {/if}
+  </article>
+</li>

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

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Display name of the author; part of the message's accessible name. */
+    author: string;
+    /** When it was sent: a `Date`, epoch milliseconds or an ISO string. */
+    sentAt?: Date | number | string | undefined;
+    /**
+     * `'end'` for the viewer's own messages.
+     * @defaultValue `'start'`
+     */
+    side?: 'start' | 'end' | undefined;
+    /** Bubble colour. Omitted, daisyUI's neutral bubble. */
+    tone?: Tone | undefined;
+    /**
+     * Show `sentAt` relative ("3 minutes ago") rather than absolute.
+     * @defaultValue `false`
+     */
+    relative?: boolean | undefined;
+    /** Locale(s) for the time; falls back to the components context. */
+    locales?: string | readonly string[] | undefined;
+    /** The avatar (an `Avatar` or an image); decorative here. */
+    avatar?: Snippet<[]> | undefined;
+    /** Status line under the bubble ("Delivered", "Edited"). */
+    footer?: Snippet<[]> | undefined;
+    /** The message body. */
+    children: Snippet<[]>;
+}
+/** One message of a `MessageThread`: author, time, avatar, the body and a status line, as a daisyUI `chat` bubble. */
+declare const ChatBubble: import("svelte").Component<Props, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;

package/dist/data/DescriptionList.svelte

@@ -1,10 +1,14 @@
 <!-- @component
-Label/value pairs as a `grid`, a bordered `card`, `divided` rows or `inline` pairs.
+Label/value pairs as a `grid`, a bordered `card`, `divided` rows, `inline` pairs, or `bare` pairs in a layout the caller supplies.
 -->
 <!--
   DescriptionList — label / value pairs, in the four shapes a detail page
   wants them: a two-column `grid`, a bordered `card` with the labels in a
-  fixed gutter, `divided` rows, or `inline` pairs running across a line.
+  fixed gutter, `divided` rows, or `inline` pairs running across a line —
+  or `bare`, which adds no layout of its own: the `<dl>` takes only the
+  caller's `class` (say `grid grid-cols-[auto_1fr] gap-x-4`) and every
+  row's `<dt>`/`<dd>` is a direct child of it, so a consumer-owned grid can
+  mix `DescriptionRow`s with its own `<dt>`/`<dd>` pairs and keep its columns.
 
   One component rather than the two the apps had. They had split it by how the
   VALUE arrives — one took rows as strings, the other took them as markup —
@@ -30,7 +34,9 @@ const listClass = {
 	grid: "grid grid-cols-1 gap-3 sm:grid-cols-2",
 	card: "card card-border card-body bg-base-100 grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-[12rem_1fr]",
 	divided: "divide-base-300 divide-y",
-	inline: "flex flex-wrap gap-x-6 gap-y-2"
+	inline: "flex flex-wrap gap-x-6 gap-y-2",
+	// The caller's `class` is the whole layout.
+	bare: ""
 };
 // A getter, not a snapshot: the rows re-read it, so a list whose `variant`
 // changes re-styles the rows it already mounted.

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

@@ -20,7 +20,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     /** The rows — `DescriptionRow`s, or any other `<dt>`/`<dd>` pairs. */
     children: Snippet<[]>;
 }
-/** Label/value pairs as a `grid`, a bordered `card`, `divided` rows or `inline` pairs. */
+/** Label/value pairs as a `grid`, a bordered `card`, `divided` rows, `inline` pairs, or `bare` pairs in a layout the caller supplies. */
 declare const DescriptionList: import("svelte").Component<Props, {}, "">;
 type DescriptionList = ReturnType<typeof DescriptionList>;
 export default DescriptionList;

package/dist/data/DescriptionRow.svelte

@@ -12,10 +12,11 @@ One label and its value inside a `DescriptionList`.
   Both settings come from the enclosing list by default and can be overridden
   per row.
 
-  The `card` variant's `<dt>` and `<dd>` are siblings of every other row's,
-  directly in the list's two-column grid: a wrapper would break the alignment
-  the grid exists for. Every other variant wraps the pair, so the two stay
-  together when the rows wrap.
+  The `card` and `bare` variants' `<dt>` and `<dd>` are siblings of every
+  other row's, directly in the `<dl>` (the list's own two-column grid for
+  `card`, whatever layout the caller gave it for `bare`): a wrapper would
+  break the alignment the grid exists for. Every other variant wraps the
+  pair, so the two stay together when the rows wrap.
 
   ARIA contract: the `<dt>`/`<dd>` pairing is the whole contract — nothing is
   added to it, and nothing needs to be.
@@ -43,7 +44,7 @@ const ddClass = $derived([
 {/snippet}
 
 {#if visible}
-  {#if style().variant === 'card'}
+  {#if style().variant === 'card' || style().variant === 'bare'}
     {@render pair()}
   {:else if style().variant === 'inline'}
     <div class="flex items-baseline gap-2">{@render pair()}</div>

package/dist/data/MessageThread.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+A conversation: a named region holding an ordered list of `ChatBubble`s.
+-->
+<!--
+  MessageThread — comments on a planting, a support thread, a note from the
+  garden coordinator. A `<section aria-label>` (a `region` a reader can jump
+  to) around an `<ol>`, because order is the content. Its children are
+  `ChatBubble`s, each an `<li>`.
+
+  `live` is for a thread that grows while it is read (live chat): the
+  section becomes `role="log"`, which announces appended messages politely.
+  Off by default, because a static comment history must not read itself
+  out as it renders.
+-->
+<script lang="ts">let { label, live = false, children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<section
+  {...rest}
+  aria-label={label}
+  role={live ? 'log' : undefined}
+  aria-live={live ? 'polite' : undefined}
+  class={className}
+>
+  <ol class="flex list-none flex-col gap-1 p-0">
+    {@render children()}
+  </ol>
+</section>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Accessible name, e.g. `'Comments on Bed 4'`. */
+    label: string;
+    /**
+     * Announce new messages as they arrive (`role="log"`).
+     * @defaultValue `false`
+     */
+    live?: boolean | undefined;
+    /** The `ChatBubble`s, oldest first. */
+    children: Snippet<[]>;
+}
+/** A conversation: a named region holding an ordered list of `ChatBubble`s. */
+declare const MessageThread: import("svelte").Component<Props, {}, "">;
+type MessageThread = ReturnType<typeof MessageThread>;
+export default MessageThread;

package/dist/data/Pagination.svelte

@@ -33,7 +33,7 @@ Offset-based page navigation: numbered links with gaps or a bare Previous/Next p
 import { getComponentsContext } from "../context.svelte.js";
 import { buttonSize } from "../ui/tones.js";
 import { pageWindow } from "./pagination.js";
-let { offset, limit, total, variant = "window", href, onPage, siblings = 1, label = "Pagination", previousLabel = "Previous", nextLabel = "Next", pageLabel = (page) => `Page ${page}`, size = "sm", showRange = false, rangeLabel, statusLabel, locales = getComponentsContext().locale(), class: className, ...rest } = $props();
+let { offset, limit, total, variant = "window", href, onPage, siblings = 1, label = "Pagination", previousLabel = "Previous", nextLabel = "Next", pageLabel = (page) => `Page ${page}`, formatPage = (page) => String(page), size = "sm", showRange = false, rangeLabel, statusLabel, locales = getComponentsContext().locale(), class: className, ...rest } = $props();
 const context = getComponentsContext();
 const view = $derived(pageWindow({
 	offset,
@@ -42,7 +42,7 @@ const view = $derived(pageWindow({
 // The formatter and the formatted string are separate `$derived`s so the
 // (relatively expensive) `Intl.NumberFormat` is not rebuilt when only the
 // offset moves. Counts are quantities and get grouped; the page NUMBERS
-// below are identifiers and stay bare.
+// below are identifiers and stay bare unless `formatPage` says otherwise.
 const counts = $derived(new Intl.NumberFormat(locales));
 const rangeText = $derived(rangeLabel === undefined ? `Showing ${counts.format(view.from)}–${counts.format(view.to)} of ${counts.format(total)}` : rangeLabel(view.from, view.to, total));
 /** A target offset's href, resolved through the context. */
@@ -104,11 +104,11 @@ const inertClass = $derived(["btn btn-disabled join-item", buttonSize[size]]);
             {:else if item.current}
               <span class={['btn btn-active join-item', buttonSize[size]]} aria-current="page">
                 <span class="sr-only">{pageLabel(item.page)}</span>
-                <span aria-hidden="true">{item.page}</span>
+                <span aria-hidden="true">{formatPage(item.page)}</span>
               </span>
             {:else if href !== undefined}
               <a href={linkTo(item.offset)} class={itemClass} aria-label={pageLabel(item.page)}>
-                <span aria-hidden="true">{item.page}</span>
+                <span aria-hidden="true">{formatPage(item.page)}</span>
               </a>
             {:else}
               <button
@@ -119,7 +119,7 @@ const inertClass = $derived(["btn btn-disabled join-item", buttonSize[size]]);
                   onPage?.(item.offset);
                 }}
               >
-                <span aria-hidden="true">{item.page}</span>
+                <span aria-hidden="true">{formatPage(item.page)}</span>
               </button>
             {/if}
           </li>

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

@@ -45,6 +45,14 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
      * @defaultValue `"Page <page>"`
      */
     pageLabel?: ((page: number) => string) | undefined;
+    /**
+     * How a page number is written on its control — the visible digits only;
+     * `pageLabel` is the accessible name. Page numbers are identifiers, so they
+     * are bare by default; pass e.g. `(page) => new Intl.NumberFormat('en-AU').format(page)`
+     * to group them ("1,000").
+     * @defaultValue `String(page)`
+     */
+    formatPage?: ((page: number) => string) | undefined;
     /**
      * daisyUI size step.
      * @defaultValue `'sm'`

package/dist/data/PaginationFooter.svelte

@@ -18,7 +18,7 @@ The count line and the pager that sit under a paginated index page.
 -->
 <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();
+let { shown, offset, limit, total, href, onPage, variant = "window", siblings = 1, size = "sm", label = "Pagination", previousLabel = "Previous", nextLabel = "Next", pageLabel, formatPage, countLabel, locales, class: className, ...rest } = $props();
 </script>
 
 <div {...rest} class={['space-y-4', className]}>
@@ -36,6 +36,7 @@ let { shown, offset, limit, total, href, onPage, variant = "window", siblings =
     {previousLabel}
     {nextLabel}
     {pageLabel}
+    {formatPage}
     {locales}
   />
 </div>

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

@@ -45,6 +45,8 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     nextLabel?: string | undefined;
     /** How a numbered control is named; see `Pagination`. */
     pageLabel?: ((page: number) => string) | undefined;
+    /** Passed to `Pagination`: how a page number's visible digits are written. */
+    formatPage?: ((page: number) => string) | undefined;
     /** The count line, when "Showing x of y" is not the sentence wanted. */
     countLabel?: ((shown: number, total: number) => string) | undefined;
     /**

package/dist/data/Table.svelte

@@ -76,6 +76,10 @@ const rowAttributes = (row) => onSelect === undefined ? {} : {
 };
 </script>
 
+{#snippet cellBody(column: TableColumn<T>, row: T)}
+  {#if column.cell}{@render column.cell(row)}{:else}{column.value(row)}{/if}
+{/snippet}
+
 <div class={['overflow-x-auto', containerClass]}>
   <table
     {...rest}
@@ -128,9 +132,11 @@ const rowAttributes = (row) => onSelect === undefined ? {} : {
         {#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>
+              {#if column.rowHeader}
+                <th scope="row" class={['font-normal', columnClass(column)]}>{@render cellBody(column, row)}</th>
+              {:else}
+                <td class={columnClass(column)}>{@render cellBody(column, row)}</td>
+              {/if}
             {/each}
           </tr>
         {/each}

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

@@ -2,11 +2,12 @@
  * 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 list variants render their rows differently — a `grid` row is a
+ * wrapper holding a stacked `<dt>`/`<dd>` pair, while a `card` or `bare`
+ * row's `<dt>` and `<dd>` are direct children of the `<dl>`, because a
+ * wrapper would break the alignment of a two-column grid (the list's own for
+ * `card`, the consumer's for `bare`). 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
@@ -17,7 +18,12 @@
  */
 /** The presentation a `DescriptionList` asks its rows for. */
 export interface DescriptionListStyle {
-    readonly variant: 'grid' | 'card' | 'divided' | 'inline';
+    /**
+     * The layout. `bare` adds no layout classes to the list and renders each
+     * row's `<dt>`/`<dd>` as direct children of the `<dl>`, for a consumer that
+     * lays the list out itself.
+     */
+    readonly variant: 'grid' | 'card' | 'divided' | 'inline' | 'bare';
     /** Render values in a fixed-width face that breaks anywhere. */
     readonly mono: boolean;
     /** Render a row whose value is empty, using `emptyLabel`. */

package/dist/data/description-context.js

@@ -2,11 +2,12 @@
  * 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 list variants render their rows differently — a `grid` row is a
+ * wrapper holding a stacked `<dt>`/`<dd>` pair, while a `card` or `bare`
+ * row's `<dt>` and `<dd>` are direct children of the `<dl>`, because a
+ * wrapper would break the alignment of a two-column grid (the list's own for
+ * `card`, the consumer's for `bare`). 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

package/dist/data/index.d.ts

@@ -16,12 +16,14 @@
  *
  * @module
  */
+export { default as ChatBubble } from './ChatBubble.svelte';
 export { default as DataGrid } from './DataGrid.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as DescriptionRow } from './DescriptionRow.svelte';
 export { default as DiffText } from './DiffText.svelte';
 export { default as ItemList } from './ItemList.svelte';
 export { default as LinkListItem } from './LinkListItem.svelte';
+export { default as MessageThread } from './MessageThread.svelte';
 export { default as Pagination } from './Pagination.svelte';
 export { default as PaginationFooter } from './PaginationFooter.svelte';
 export { default as ResultCount } from './ResultCount.svelte';

package/dist/data/index.js

@@ -16,12 +16,14 @@
  *
  * @module
  */
+export { default as ChatBubble } from './ChatBubble.svelte';
 export { default as DataGrid } from './DataGrid.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as DescriptionRow } from './DescriptionRow.svelte';
 export { default as DiffText } from './DiffText.svelte';
 export { default as ItemList } from './ItemList.svelte';
 export { default as LinkListItem } from './LinkListItem.svelte';
+export { default as MessageThread } from './MessageThread.svelte';
 export { default as Pagination } from './Pagination.svelte';
 export { default as PaginationFooter } from './PaginationFooter.svelte';
 export { default as ResultCount } from './ResultCount.svelte';

package/dist/data/table-types.d.ts

@@ -34,6 +34,13 @@ export interface TableColumn<T> {
     readonly cell?: Snippet<[T]> | undefined;
     /** Whether the header offers a sort control on this column. */
     readonly sortable?: boolean | undefined;
+    /**
+     * Render this column's body cells as `<th scope="row">` — the row's header,
+     * so a screen reader moving down another column announces it with each cell
+     * ("Jane Smith, 48,000"). Give it to the column that names the row, usually
+     * one per table.
+     */
+    readonly rowHeader?: boolean | undefined;
     /** Right-align numeric columns. */
     readonly align?: 'start' | 'end' | undefined;
     /** Extra classes on this column's header and body cells. */