@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/data-display/chart/chart.svelte

@@ -0,0 +1,105 @@
+<!--
+  Origin: the React package 2.23.0 `chart.tsx` (`ChartContainer`), itself shadcn/ui new-york `chart`
+  Svelte: shadcn-svelte `chart`
+  Diverged: LayerChart for recharts. The classes that restyle the chart are
+    shadcn-svelte's, written against LayerChart's `lc-*` class names where
+    React's targeted recharts'; they take over React's `chartAxis` (no tick
+    lines, no axis line). The id comes from a module counter rather than
+    `$props.id()`, which needs Svelte 5.20 where the package supports any Svelte 5.
+-->
+<script lang="ts" module>
+  /**
+   * The frame a chart draws in: it writes the config's colours as
+   * `--color-<key>` for both schemes, scoped to this chart, and restyles
+   * LayerChart to the package's quiet axes and grid.
+   */
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { ChartConfig } from './chart-utils.js'
+
+  export type ChartContainerProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    /** Each series' label and colour; colours are written as `--color-<key>`. */
+    config: ChartConfig
+  }
+
+  let instances = 0
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import ChartStyle from './chart-style.svelte'
+  import { setChartContext } from './chart-utils.js'
+
+  const uid = `${++instances}`
+
+  let {
+    ref = $bindable(null),
+    id = uid,
+    class: className,
+    children,
+    config,
+    ...restProps
+  }: ChartContainerProps = $props()
+
+  const chartId = $derived(`chart-${id || uid.replace(/:/g, '')}`)
+
+  setChartContext({
+    get config() {
+      return config
+    },
+  })
+</script>
+
+<div
+  bind:this={ref}
+  data-chart={chartId}
+  data-slot="chart"
+  class={cn(
+    'flex aspect-video justify-center overflow-visible text-xs',
+    // Overrides
+    //
+    // Stroke around dots/marks when hovering
+    '[&_.lc-highlight-point]:stroke-transparent',
+    // override the default stroke color of lines
+    '[&_.lc-line]:stroke-border/50',
+
+    // by default, layerchart shows a line intersecting the point when hovering, this hides that
+    '[&_.lc-highlight-line]:stroke-0',
+
+    // by default, when you hover a point on a stacked series chart, it will drop the opacity
+    // of the other series, this overrides that
+    '[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible',
+
+    // We don't want the little tick lines between the axis labels and the chart, so we remove
+    // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+    // chart.
+    '[&_.lc-axis-tick]:stroke-0',
+
+    // We don't want to display the rule on the x/y axis, as there is already going to be
+    // a grid line there and rule ends up overlapping the marks because it is rendered after
+    // the marks
+    '[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
+    '[&_.lc-grid-x-radial-circle]:stroke-border [&_.lc-grid-x-radial-line]:stroke-border',
+    '[&_.lc-grid-y-radial-circle]:stroke-border [&_.lc-grid-y-radial-line]:stroke-border',
+
+    // Legend adjustments
+    '[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
+    '[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
+    '[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+
+    // Labels
+    '[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+
+    // Tick labels on th x/y axes
+    '[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
+    '[&_.lc-tooltip-rects-g]:fill-transparent',
+    '[&_.lc-layout-svg-g]:fill-transparent',
+    '[&_.lc-root-container]:w-full',
+    className,
+  )}
+  {...restProps}
+>
+  <ChartStyle id={chartId} {config} />
+  {@render children?.()}
+</div>

package/dist/components/data-display/chart/chart.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The frame a chart draws in: it writes the config's colours as
+ * `--color-<key>` for both schemes, scoped to this chart, and restyles
+ * LayerChart to the package's quiet axes and grid.
+ */
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { ChartConfig } from './chart-utils.js';
+export type ChartContainerProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    /** Each series' label and colour; colours are written as `--color-<key>`. */
+    config: ChartConfig;
+};
+declare const Chart: import("svelte").Component<ChartContainerProps, {}, "ref">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/data-display/chart/index.d.ts

@@ -0,0 +1,5 @@
+export { type ChartContainerProps, default as ChartContainer } from './chart.svelte';
+export { chartAreaFillOpacity, chartComparisonSeriesClass, chartGrid, chartLineStrokeWidth, } from './chart-defaults.js';
+export { type ChartStyleProps, default as ChartStyle } from './chart-style.svelte';
+export { type ChartTooltipProps, default as ChartTooltip } from './chart-tooltip.svelte';
+export { type ChartConfig, getPayloadConfigFromPayload, useChart } from './chart-utils.js';

package/dist/components/data-display/chart/index.js

@@ -0,0 +1,5 @@
+export { default as ChartContainer } from './chart.svelte';
+export { chartAreaFillOpacity, chartComparisonSeriesClass, chartGrid, chartLineStrokeWidth, } from './chart-defaults.js';
+export { default as ChartStyle } from './chart-style.svelte';
+export { default as ChartTooltip } from './chart-tooltip.svelte';
+export { getPayloadConfigFromPayload, useChart } from './chart-utils.js';

package/dist/components/data-display/checklist/checklist-card.svelte

@@ -0,0 +1,157 @@
+<!--
+  Origin: the React package 2.23.0 `checklist-card.tsx`
+  Diverged: one of the checklist family (round 8 plan, R8-4), its rows drawn by
+    the family's shared row heading. `action`, `footer`, `collapsedControl` and
+    each item's `action` are snippets. Lucide's list-checks. Spreads the rest
+    onto the card, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  import type { CardProps } from '../../layout/card/card.svelte'
+  import type { ChecklistCardItem } from './checklist-types.js'
+
+  /**
+   * A progress card small enough to live above a sidebar's nav: a ring, a
+   * heading, and the next few unmet rows.
+   *
+   * Not `ReadinessChecklist`, which answers "what does this page still need
+   * from me" and tags rows Required in warning colour. This answers "what is
+   * worth doing next", where an untouched row is not a problem.
+   *
+   * The ring is `success` at the end and `primary` before it, and that is not
+   * a prop: a setup checklist has one finish line.
+   */
+  export type ChecklistCardProps = Omit<CardProps, 'title' | 'children' | 'variant'> & {
+    title: string
+    /**
+     * 0–100, clamped, rounded for the figure only. Not derived from `items`:
+     * the card shows the next few rows and the ring counts all of them.
+     */
+    percent: number
+    items: ChecklistCardItem[]
+    /**
+     * The sidebar's icon-rail mode: no card, just a solid icon button at a nav
+     * icon's width, with the share in its accessible name.
+     */
+    collapsed?: boolean
+    /** Replaces the collapsed button, so it can match the caller's own nav buttons. */
+    collapsedControl?: Snippet
+    /**
+     * `md` for a card on its own; `sm` for one pinned above a sidebar's nav.
+     * `sm` scales the ring, the title, the rows and the card's padding together.
+     */
+    size?: 'sm' | 'md'
+    /**
+     * `outline` drops the fill and the shadow for a visible ring: on a dark
+     * sidebar a dark fill barely reads as a card, and a border separates it.
+     */
+    variant?: 'default' | 'outline'
+    /** The header's corner: a "Hide" button. */
+    action?: Snippet
+    /** The way to the full list: "See all steps". */
+    footer?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import ListChecksIcon from '@lucide/svelte/icons/list-checks'
+
+  import { cn } from '../../../utils/cn.js'
+  import Card from '../../layout/card/card.svelte'
+  import CardContent from '../../layout/card/card-content.svelte'
+  import CardFooter from '../../layout/card/card-footer.svelte'
+  import CardHeader from '../../layout/card/card-header.svelte'
+  import CardTitle from '../../layout/card/card-title.svelte'
+  import CardList from '../../layout/card-list/card-list.svelte'
+  import RadialStat from '../radial-stat/radial-stat.svelte'
+  import ChecklistRowHeading from './checklist-row-heading.svelte'
+
+  let {
+    title,
+    percent,
+    items,
+    collapsed = false,
+    collapsedControl,
+    size = 'md',
+    variant = 'default',
+    action,
+    footer,
+    class: className,
+    ...rest
+  }: ChecklistCardProps = $props()
+
+  const bounded = $derived(Math.min(100, Math.max(0, percent)))
+  // Rounded for the figure only: 99.6% reads 100% while the ring keeps its gap
+  // and its unfinished colour.
+  const shown = $derived(Math.round(bounded))
+  const tone = $derived(bounded >= 100 ? 'success' : 'primary')
+  // Collapsed, the name carries the title; expanded, CardTitle is beside it.
+  const ringLabel = $derived(collapsed ? `${title}: ${shown}% complete` : `${shown}% complete`)
+  const small = $derived(size === 'sm')
+</script>
+
+{#if collapsed}
+  <div data-slot="checklist-card" class={cn('flex justify-center', className)}>
+    {#if collapsedControl}
+      {@render collapsedControl()}
+    {:else}
+      <!-- A solid icon rather than the bare ring: at 0% the ring is an empty
+           track, which reads as nothing against a dark rail. -->
+      <div
+        role="img"
+        aria-label={ringLabel}
+        class="bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-md"
+      >
+        <ListChecksIcon aria-hidden="true" class="size-6" />
+      </div>
+    {/if}
+  </div>
+{:else}
+  <Card
+    class={cn(
+      // `sm` tightens --card-spacing itself, so every Card part follows it.
+      small && '[--card-spacing:--spacing(3)]',
+      // ring-border rather than Card's hairline, which reads as nothing once
+      // the fill it separated from is gone too.
+      variant === 'outline' && 'bg-transparent shadow-none ring-1 ring-border',
+      className,
+    )}
+    {...rest}
+  >
+    <CardHeader class="flex items-center gap-3">
+      <RadialStat percent={bounded} {tone} diameter={small ? 40 : 48} aria-label={ringLabel} />
+      <CardTitle class={cn('flex-1', small && 'text-sm')}>{title}</CardTitle>
+      {@render action?.()}
+    </CardHeader>
+
+    {#if items.length > 0}
+      <CardContent>
+        <!-- biome-ignore lint/a11y/useSemanticElements: CardList is a div, so full-bleed rules can cancel the card padding; a ul or li there would take the rules off the edges, and role list/listitem is the ARIA equivalent -->
+        <CardList compact role="list" class={small ? '[&>*]:py-2' : undefined}>
+          {#each items as item (item.id)}
+            <!-- biome-ignore lint/a11y/useSemanticElements: CardList is a div, so full-bleed rules can cancel the card padding; a ul or li there would take the rules off the edges, and role list/listitem is the ARIA equivalent -->
+            <div
+              data-slot="checklist-card-item"
+              role="listitem"
+              class={cn('flex items-center gap-2', small ? 'text-xs' : 'text-sm')}
+            >
+              <ChecklistRowHeading
+                state={item.done ? 'completed' : 'pending'}
+                label={item.label}
+                {size}
+              />
+              {#if item.action}
+                <div class="shrink-0 text-xs">{@render item.action()}</div>
+              {/if}
+            </div>
+          {/each}
+        </CardList>
+      </CardContent>
+    {/if}
+
+    {#if footer}
+      <CardFooter divided class={cn(small && 'text-xs')}>{@render footer()}</CardFooter>
+    {/if}
+  </Card>
+{/if}

package/dist/components/data-display/checklist/checklist-card.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { CardProps } from '../../layout/card/card.svelte';
+import type { ChecklistCardItem } from './checklist-types.js';
+/**
+ * A progress card small enough to live above a sidebar's nav: a ring, a
+ * heading, and the next few unmet rows.
+ *
+ * Not `ReadinessChecklist`, which answers "what does this page still need
+ * from me" and tags rows Required in warning colour. This answers "what is
+ * worth doing next", where an untouched row is not a problem.
+ *
+ * The ring is `success` at the end and `primary` before it, and that is not
+ * a prop: a setup checklist has one finish line.
+ */
+export type ChecklistCardProps = Omit<CardProps, 'title' | 'children' | 'variant'> & {
+    title: string;
+    /**
+     * 0–100, clamped, rounded for the figure only. Not derived from `items`:
+     * the card shows the next few rows and the ring counts all of them.
+     */
+    percent: number;
+    items: ChecklistCardItem[];
+    /**
+     * The sidebar's icon-rail mode: no card, just a solid icon button at a nav
+     * icon's width, with the share in its accessible name.
+     */
+    collapsed?: boolean;
+    /** Replaces the collapsed button, so it can match the caller's own nav buttons. */
+    collapsedControl?: Snippet;
+    /**
+     * `md` for a card on its own; `sm` for one pinned above a sidebar's nav.
+     * `sm` scales the ring, the title, the rows and the card's padding together.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * `outline` drops the fill and the shadow for a visible ring: on a dark
+     * sidebar a dark fill barely reads as a card, and a border separates it.
+     */
+    variant?: 'default' | 'outline';
+    /** The header's corner: a "Hide" button. */
+    action?: Snippet;
+    /** The way to the full list: "See all steps". */
+    footer?: Snippet;
+};
+declare const ChecklistCard: import("svelte").Component<ChecklistCardProps, {}, "">;
+type ChecklistCard = ReturnType<typeof ChecklistCard>;
+export default ChecklistCard;

package/dist/components/data-display/checklist/checklist-row-heading.svelte

@@ -0,0 +1,56 @@
+<!--
+  Origin: the React package 2.23.0 `task-checklist.tsx` (`TaskRowHeading`, `TaskStateIcon`), with `checklist-card.tsx`'s row
+  Diverged: one part for both components' rows (round 8 plan, R8-4): the icon,
+    the state a screen reader hears, and the truncating label. ChecklistCard's
+    `done` reads as `completed` and is announced "Completed:"/"Not started:",
+    where React's said "Done:"/"Not done:". Lucide's circle-check, filled by
+    class, for Tabler's filled check; circle-dashed and circle-minus. Not
+    exported.
+-->
+<script lang="ts" module>
+  import type { ChecklistTaskState } from './checklist-types.js'
+
+  export type ChecklistRowHeadingProps = {
+    state: ChecklistTaskState
+    label: string
+    /** `sm` for ChecklistCard's small size. */
+    size?: 'sm' | 'md'
+  }
+</script>
+
+<script lang="ts">
+  import CircleCheckIcon from '@lucide/svelte/icons/circle-check'
+  import CircleDashedIcon from '@lucide/svelte/icons/circle-dashed'
+  import CircleMinusIcon from '@lucide/svelte/icons/circle-minus'
+
+  import { cn } from '../../../utils/cn.js'
+  import { CHECKLIST_STATE_LABEL } from './checklist-types.js'
+
+  let { state, label, size = 'md' }: ChecklistRowHeadingProps = $props()
+
+  const iconSize = $derived(size === 'sm' ? 'size-3.5' : 'size-4')
+</script>
+
+{#if state === 'completed'}
+  <!-- Filled: the circle takes the colour and the check is cut out of it. -->
+  <CircleCheckIcon
+    aria-hidden="true"
+    class={cn('text-success fill-current shrink-0 [&_path]:text-background', iconSize)}
+  />
+{:else if state === 'skipped'}
+  <CircleMinusIcon aria-hidden="true" class={cn('text-muted-foreground shrink-0', iconSize)} />
+{:else}
+  <CircleDashedIcon aria-hidden="true" class={cn('text-muted-foreground shrink-0', iconSize)} />
+{/if}
+
+<!-- The state is a glyph and a colour, and neither reaches a screen reader. -->
+<span class="sr-only">{CHECKLIST_STATE_LABEL[state]}</span>
+
+<!-- `title` because the row truncates, and a long step name has no other way
+     to be read. -->
+<span
+  title={label}
+  class={cn('min-w-0 flex-1 truncate', state !== 'pending' && 'text-muted-foreground')}
+>
+  {label}
+</span>

package/dist/components/data-display/checklist/checklist-row-heading.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ChecklistTaskState } from './checklist-types.js';
+export type ChecklistRowHeadingProps = {
+    state: ChecklistTaskState;
+    label: string;
+    /** `sm` for ChecklistCard's small size. */
+    size?: 'sm' | 'md';
+};
+declare const ChecklistRowHeading: import("svelte").Component<ChecklistRowHeadingProps, {}, "">;
+type ChecklistRowHeading = ReturnType<typeof ChecklistRowHeading>;
+export default ChecklistRowHeading;

package/dist/components/data-display/checklist/checklist-task-row.svelte

@@ -0,0 +1,101 @@
+<!--
+  Origin: the React package 2.23.0 `task-checklist.tsx` (`TaskChecklistRow`)
+  Diverged: bits-ui Collapsible for Radix's; Lucide's chevron-down. Not exported.
+-->
+<script lang="ts" module>
+  import type { ChecklistTask } from './checklist-types.js'
+
+  export type ChecklistTaskRowProps = {
+    task: ChecklistTask
+    open: boolean
+    onExpandedChange?: (id: string | null) => void
+  }
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui'
+
+  import { cn } from '../../../utils/cn.js'
+  import CollapsibleContent from '../../layout/collapsible/collapsible-content.svelte'
+  import CollapsibleTrigger from '../../layout/collapsible/collapsible-trigger.svelte'
+  import Hint from '../../overlays/hint/hint.svelte'
+  import ChecklistRowHeading from './checklist-row-heading.svelte'
+
+  let { task, open, onExpandedChange }: ChecklistTaskRowProps = $props()
+
+  const hasBody = $derived(Boolean(task.description || task.media || task.learnMore))
+  const focusRing =
+    'focus-visible:border-ring focus-visible:ring-ring/50 rounded-md outline-none focus-visible:ring-[3px]'
+</script>
+
+{#snippet trailing()}
+  <!-- Sized to its own content, so the Hint reads as attached to the title; the
+       spacer after it pushes the actions to the row's far side. -->
+  {#if task.hint}
+    <Hint>{@render task.hint()}</Hint>
+  {/if}
+  <div class="min-w-0 flex-1"></div>
+  {#if task.actions}
+    <div class="shrink-0 text-sm">{@render task.actions()}</div>
+  {/if}
+{/snippet}
+
+{#if !hasBody}
+  <!-- A row with nothing to reveal is not a disclosure, so it does not render
+       as one: no chevron that does nothing, no aria-controls pointing nowhere. -->
+  <!-- biome-ignore lint/a11y/useSemanticElements: CardList is a div, so full-bleed rules can cancel the card padding; a ul or li there would take the rules off the edges, and role list/listitem is the ARIA equivalent -->
+  <div data-slot="checklist-task" role="listitem" class="flex items-center gap-2">
+    <div class="flex min-w-0 items-center gap-2 text-sm">
+      <ChecklistRowHeading state={task.state} label={task.label} />
+    </div>
+    {@render trailing()}
+  </div>
+{:else}
+  <!-- Controlled by the caller's `expandedId`, so the open row and the URL
+       fragment are the same fact. Closing reports null. -->
+  <!-- biome-ignore lint/a11y/useSemanticElements: CardList is a div, so full-bleed rules can cancel the card padding; a ul or li there would take the rules off the edges, and role list/listitem is the ARIA equivalent -->
+  <CollapsiblePrimitive.Root
+    data-slot="checklist-task"
+    role="listitem"
+    {open}
+    onOpenChange={(next) => onExpandedChange?.(next ? task.id : null)}
+  >
+    <div class="flex items-center gap-2">
+      <CollapsibleTrigger
+        class={cn('flex min-w-0 items-center gap-2 text-left text-sm', focusRing)}
+      >
+        <ChecklistRowHeading state={task.state} label={task.label} />
+      </CollapsibleTrigger>
+      {@render trailing()}
+      <!-- A second trigger for the same row, in its far corner past the
+           actions; one control for a screen reader, two places to reach it. -->
+      <CollapsibleTrigger
+        class={cn('shrink-0', focusRing)}
+        aria-label={open ? 'Collapse' : 'Expand'}
+      >
+        <ChevronDownIcon
+          aria-hidden="true"
+          class={cn(
+            'text-muted-foreground size-4 shrink-0 transition-transform',
+            open && 'rotate-180',
+          )}
+        />
+      </CollapsibleTrigger>
+    </div>
+    <CollapsibleContent>
+      <!-- Indented past the status icon, so the body hangs under the label. -->
+      <div class="flex flex-col gap-3 pt-3 pl-6 text-sm">
+        {#if task.description}
+          <p class="text-muted-foreground">{task.description}</p>
+        {/if}
+        {#if task.media}
+          <div>{@render task.media()}</div>
+        {/if}
+        {#if task.learnMore}
+          <div>{@render task.learnMore()}</div>
+        {/if}
+      </div>
+    </CollapsibleContent>
+  </CollapsiblePrimitive.Root>
+{/if}

package/dist/components/data-display/checklist/checklist-task-row.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ChecklistTask } from './checklist-types.js';
+export type ChecklistTaskRowProps = {
+    task: ChecklistTask;
+    open: boolean;
+    onExpandedChange?: (id: string | null) => void;
+};
+declare const ChecklistTaskRow: import("svelte").Component<ChecklistTaskRowProps, {}, "">;
+type ChecklistTaskRow = ReturnType<typeof ChecklistTaskRow>;
+export default ChecklistTaskRow;

package/dist/components/data-display/checklist/checklist-types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Origin: the React package 2.23.0 `task-checklist.tsx` and `checklist-card.tsx` (their item types)
+ * Diverged: the two components' row types side by side, sharing one state set
+ *   (round 8 plan, R8-4). React's `ReactNode` fields are snippets.
+ */
+import type { Snippet } from 'svelte';
+/**
+ * `skipped` is its own state rather than a flavour of `completed`. A step a
+ * location has no use for is finished with, but it was not *done*: folding the
+ * two together would claim work that never happened.
+ */
+export type ChecklistTaskState = 'completed' | 'skipped' | 'pending';
+export type ChecklistTask = {
+    /**
+     * Stable, and the value `expandedId` matches on; unique across every group,
+     * since it can live in a URL fragment.
+     */
+    id: string;
+    label: string;
+    /** Shown when the row is open: what the step is and why it is worth doing. */
+    description?: string;
+    /** The same kind of fact as `description`, read beside the title in a `Hint`. */
+    hint?: Snippet;
+    state: ChecklistTaskState;
+    /**
+     * At the end of the row, beside the disclosure rather than inside it (a
+     * button in a button is invalid): "Add a category".
+     */
+    actions?: Snippet;
+    /** Revealed on open: a screenshot or a short clip of the step. */
+    media?: Snippet;
+    /** Revealed on open: the way to the documentation. */
+    learnMore?: Snippet;
+};
+export type ChecklistGroup = {
+    /** Stable across renders; the each-block key and nothing else. */
+    key: string;
+    label: string;
+    /** 0–100, clamped. The server's answer, not counted from `tasks`. */
+    percent: number;
+    tasks: ChecklistTask[];
+};
+export type ChecklistCardItem = {
+    id: string;
+    label: string;
+    done: boolean;
+    /** At the end of the row: "Start", pointing at wherever the step is done. */
+    action?: Snippet;
+};
+/** Prefixes a row's accessible name, so the states differ without the icon or its colour. */
+export declare const CHECKLIST_STATE_LABEL: Record<ChecklistTaskState, string>;

package/dist/components/data-display/checklist/checklist-types.js

@@ -0,0 +1,6 @@
+/** Prefixes a row's accessible name, so the states differ without the icon or its colour. */
+export const CHECKLIST_STATE_LABEL = {
+    completed: 'Completed:',
+    skipped: 'Skipped:',
+    pending: 'Not started:',
+};

package/dist/components/data-display/checklist/checklist.svelte

@@ -0,0 +1,78 @@
+<!--
+  Origin: the React package 2.23.0 `task-checklist.tsx` (`TaskChecklist`)
+  Diverged: React's TaskChecklist, renamed Checklist in the checklist family
+    (round 8 plan, R8-4): "Task" said nothing the list does not. Its rows share
+    the family's row heading with ChecklistCard. Spreads the rest onto the
+    root, as every component does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { ChecklistGroup } from './checklist-types.js'
+
+  /**
+   * The full "Get started" list: setup steps grouped into cards, each row
+   * folding open to its description and whatever the caller hangs off it.
+   *
+   * The page-sized companion to `ChecklistCard`, which lives above a sidebar's
+   * nav and shows the next few rows of one flat list. Not `Readiness`, which
+   * answers "what does this page still need before I can save it".
+   */
+  export type ChecklistProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    groups: ChecklistGroup[]
+    /**
+     * The `id` of the one open row, or nothing open. Controlled, with no
+     * internal fallback, so it can follow a URL fragment without disagreeing
+     * with it. One row at a time by construction.
+     */
+    expandedId?: string
+    /** The id to move to, or `null` when the open row was closed. */
+    onExpandedChange?: (id: string | null) => void
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Progress from '../../feedback/progress/progress.svelte'
+  import Card from '../../layout/card/card.svelte'
+  import CardContent from '../../layout/card/card-content.svelte'
+  import CardHeader from '../../layout/card/card-header.svelte'
+  import CardTitle from '../../layout/card/card-title.svelte'
+  import CardList from '../../layout/card-list/card-list.svelte'
+  import ChecklistTaskRow from './checklist-task-row.svelte'
+
+  let { groups, expandedId, onExpandedChange, class: className, ...rest }: ChecklistProps = $props()
+
+  const bound = (percent: number) => Math.min(100, Math.max(0, percent))
+</script>
+
+<div data-slot="checklist" class={cn('flex flex-col gap-4', className)} {...rest}>
+  {#each groups as group (group.key)}
+    {@const percent = bound(group.percent)}
+    {@const shown = Math.round(percent)}
+    <Card>
+      <CardHeader class="gap-3">
+        <CardTitle class="justify-between">
+          <span title={group.label} class="min-w-0 truncate">{group.label}</span>
+          <span class="text-muted-foreground shrink-0 text-sm font-normal tabular-nums"
+            >{shown}%</span
+          >
+        </CardTitle>
+        <!-- The name carries the share as well as the group: the bar is the
+             sighted reading, the name the whole reading for everyone else. -->
+        <Progress value={percent} aria-label="{group.label}: {shown}% complete" />
+      </CardHeader>
+      {#if group.tasks.length > 0}
+        <CardContent>
+          <!-- compact: every row is one line until a reader opens it. -->
+          <!-- biome-ignore lint/a11y/useSemanticElements: CardList is a div, so full-bleed rules can cancel the card padding; a ul or li there would take the rules off the edges, and role list/listitem is the ARIA equivalent -->
+          <CardList compact role="list">
+            {#each group.tasks as task (task.id)}
+              <ChecklistTaskRow {task} open={task.id === expandedId} {onExpandedChange} />
+            {/each}
+          </CardList>
+        </CardContent>
+      {/if}
+    </Card>
+  {/each}
+</div>