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

package/dist/components/data-display/metric-bar/metric-bar.svelte

@@ -0,0 +1,122 @@
+<!--
+  Origin: the React package 2.23.0 `metric-bar.tsx` (`MetricBar`)
+  Diverged: `icon` is a snippet, and `label`, `value`, `description` and
+    `trailing` take a string or a snippet, as R4-5 has a ReactNode prop. Takes
+    `class` and spreads the rest onto the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+
+  /**
+   * One measure, stated and then drawn. The figure is the answer and the bar
+   * is the context: a reader who wants the value should not estimate it from a
+   * length, and a reader comparing rows scans the bars, not the digits. So the
+   * figure sits on the label's line.
+   *
+   * Tone colours the fill only. Colouring one bar red says act on it;
+   * colouring all of them says nothing.
+   *
+   * Every slot is a `div`, since any of them may hold a block, such as a
+   * `Skeleton`.
+   */
+  export type MetricBarProps = HTMLAttributes<HTMLDivElement> & {
+    label: string | Snippet
+    /** How full the bar is, 0–100. Clamped: over 100 is a bug upstream. */
+    percent: number
+    /** The figure the bar shows, at the label's right edge. */
+    value?: string | number | Snippet
+    /** A muted line under the label. */
+    description?: string | Snippet
+    /** A glyph in a `md` `IconChip` before the label: what the row is about. */
+    icon?: Snippet
+    /**
+     * The row's place in a ranking, as a `MetricRank` before the label, for a
+     * list whose order is the point. Pass `icon` or `rank`, not both.
+     */
+    rank?: number
+    /**
+     * Beside the bar, on its line: `398 / 500 units`. The bar shortens to make
+     * room; a figure that qualifies the bar belongs on the bar's line.
+     */
+    trailing?: string | Snippet
+    /** The fill. `primary` by default; a status only where the reader should act. */
+    tone?: Tone
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { TONE_INDICATOR_CLASS } from '../../../utils/tone.js'
+  import Progress from '../../feedback/progress/progress.svelte'
+  import IconChip from '../icon-chip/icon-chip.svelte'
+  import MetricRank from './metric-rank.svelte'
+
+  let {
+    label,
+    percent,
+    value,
+    description,
+    icon,
+    rank,
+    trailing,
+    tone = 'primary',
+    class: className,
+    ...rest
+  }: MetricBarProps = $props()
+
+  const clamped = $derived(Math.min(100, Math.max(0, percent)))
+  /** The bar is data, so it needs a name of its own; the label is a separate node. */
+  const barLabel = $derived(
+    typeof label === 'string' ? `${label}: ${clamped.toFixed(0)}%` : undefined,
+  )
+</script>
+
+{#snippet content(node: string | number | Snippet)}
+  {#if typeof node === 'function'}
+    {@render node()}
+  {:else}
+    {node}
+  {/if}
+{/snippet}
+
+<div data-slot="metric-bar" class={cn('flex items-start gap-3', className)} {...rest}>
+  {#if icon}
+    <IconChip size="md">{@render icon()}</IconChip>
+  {/if}
+  {#if rank !== undefined}
+    <MetricRank {rank} />
+  {/if}
+
+  <div class="min-w-0 flex-1">
+    <div class="flex items-baseline justify-between gap-3">
+      <div class="min-w-0 truncate text-sm font-medium">{@render content(label)}</div>
+      {#if value !== undefined}
+        <div class="text-muted-foreground shrink-0 text-sm tabular-nums">
+          {@render content(value)}
+        </div>
+      {/if}
+    </div>
+
+    {#if description}
+      <div class="text-muted-foreground mt-0.5 truncate text-xs">
+        {@render content(description)}
+      </div>
+    {/if}
+
+    <div class="mt-2 flex items-center gap-3">
+      <Progress
+        value={clamped}
+        aria-label={barLabel}
+        class={cn('flex-1', TONE_INDICATOR_CLASS[tone])}
+      />
+      {#if trailing}
+        <div class="text-muted-foreground shrink-0 text-xs tabular-nums">
+          {@render content(trailing)}
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/components/data-display/metric-bar/metric-bar.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+/**
+ * One measure, stated and then drawn. The figure is the answer and the bar
+ * is the context: a reader who wants the value should not estimate it from a
+ * length, and a reader comparing rows scans the bars, not the digits. So the
+ * figure sits on the label's line.
+ *
+ * Tone colours the fill only. Colouring one bar red says act on it;
+ * colouring all of them says nothing.
+ *
+ * Every slot is a `div`, since any of them may hold a block, such as a
+ * `Skeleton`.
+ */
+export type MetricBarProps = HTMLAttributes<HTMLDivElement> & {
+    label: string | Snippet;
+    /** How full the bar is, 0–100. Clamped: over 100 is a bug upstream. */
+    percent: number;
+    /** The figure the bar shows, at the label's right edge. */
+    value?: string | number | Snippet;
+    /** A muted line under the label. */
+    description?: string | Snippet;
+    /** A glyph in a `md` `IconChip` before the label: what the row is about. */
+    icon?: Snippet;
+    /**
+     * The row's place in a ranking, as a `MetricRank` before the label, for a
+     * list whose order is the point. Pass `icon` or `rank`, not both.
+     */
+    rank?: number;
+    /**
+     * Beside the bar, on its line: `398 / 500 units`. The bar shortens to make
+     * room; a figure that qualifies the bar belongs on the bar's line.
+     */
+    trailing?: string | Snippet;
+    /** The fill. `primary` by default; a status only where the reader should act. */
+    tone?: Tone;
+};
+declare const MetricBar: import("svelte").Component<MetricBarProps, {}, "">;
+type MetricBar = ReturnType<typeof MetricBar>;
+export default MetricBar;

package/dist/components/data-display/metric-bar/metric-rank.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `metric-bar.tsx` (`MetricRank`)
+  Diverged: takes `class` and spreads the rest onto the root, as every
+    component does. The disc is the neutral wash, `bg-foreground/[0.07]`, not
+    `bg-muted`, which vanished on the muted canvas.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A place in a ranking, `1`, `2`, `3`, in a small muted circle. Smaller than
+   * an `IconChip` on purpose: the number orders the rows, it is not what they
+   * are about.
+   */
+  export type MetricRankProps = HTMLAttributes<HTMLSpanElement> & { rank: number }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { rank, class: className, ...rest }: MetricRankProps = $props()
+</script>
+
+<span
+  data-slot="metric-rank"
+  class={cn(
+    'bg-foreground/[0.07] text-muted-foreground grid size-6 shrink-0 place-items-center rounded-full text-xs tabular-nums',
+    className,
+  )}
+  {...rest}
+>
+  {rank}
+</span>

package/dist/components/data-display/metric-bar/metric-rank.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A place in a ranking, `1`, `2`, `3`, in a small muted circle. Smaller than
+ * an `IconChip` on purpose: the number orders the rows, it is not what they
+ * are about.
+ */
+export type MetricRankProps = HTMLAttributes<HTMLSpanElement> & {
+    rank: number;
+};
+declare const MetricRank: import("svelte").Component<MetricRankProps, {}, "">;
+type MetricRank = ReturnType<typeof MetricRank>;
+export default MetricRank;

package/dist/components/data-display/metric-grid/index.d.ts

@@ -0,0 +1 @@
+export { default as MetricGrid, type MetricGridItem, type MetricGridProps, } from './metric-grid.svelte';

package/dist/components/data-display/metric-grid/index.js

@@ -0,0 +1 @@
+export { default as MetricGrid, } from './metric-grid.svelte';

package/dist/components/data-display/metric-grid/metric-grid.svelte

@@ -0,0 +1,66 @@
+<!--
+  Origin: the React package 2.23.0 `metric-grid.tsx`
+  Diverged: an item's `label`, `value`, `description` and `trailing` take a
+    string or a snippet, as R4-5 has a ReactNode prop. Takes `class` and spreads
+    the rest onto the grid, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+
+  export type MetricGridItem = {
+    /** Stable across renders; a translated label is not. */
+    id: string
+    label: string | Snippet
+    /** How full this cell's bar is, 0–100. */
+    percent: number
+    value?: string | number | Snippet
+    description?: string | Snippet
+    /** Beside the bar: a percentage, a count, a unit. */
+    trailing?: string | Snippet
+    tone?: Tone
+  }
+
+  /**
+   * A breakdown as a grid of bordered cells rather than a list of rows. A
+   * reader comparing sub-groups against each other wants them adjacent, not in
+   * order; `CardList` is the shape when the order means something.
+   *
+   * Each cell is a `MetricBar`, and this does not relitigate it: a caller
+   * wanting other cell content wants `CardGrid` directly.
+   */
+  export type MetricGridProps = HTMLAttributes<HTMLDivElement> & {
+    items: MetricGridItem[]
+    /**
+     * Columns at `md` and up; one below, where two cells side by side leave no
+     * room for a label and a bar. The caller picks it, knowing how many items
+     * there are: three columns and four items leaves an orphan.
+     */
+    columns?: 2 | 3
+  }
+</script>
+
+<script lang="ts">
+  import CardGrid from '../../layout/card-grid/card-grid.svelte'
+  import CardGridCell from '../../layout/card-grid/card-grid-cell.svelte'
+  import MetricBar from '../metric-bar/metric-bar.svelte'
+
+  let { items, columns = 3, ...rest }: MetricGridProps = $props()
+</script>
+
+<CardGrid {columns} {...rest}>
+  {#each items as item (item.id)}
+    <CardGridCell>
+      <MetricBar
+        label={item.label}
+        percent={item.percent}
+        value={item.value}
+        description={item.description}
+        trailing={item.trailing}
+        tone={item.tone}
+      />
+    </CardGridCell>
+  {/each}
+</CardGrid>

package/dist/components/data-display/metric-grid/metric-grid.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+export type MetricGridItem = {
+    /** Stable across renders; a translated label is not. */
+    id: string;
+    label: string | Snippet;
+    /** How full this cell's bar is, 0–100. */
+    percent: number;
+    value?: string | number | Snippet;
+    description?: string | Snippet;
+    /** Beside the bar: a percentage, a count, a unit. */
+    trailing?: string | Snippet;
+    tone?: Tone;
+};
+/**
+ * A breakdown as a grid of bordered cells rather than a list of rows. A
+ * reader comparing sub-groups against each other wants them adjacent, not in
+ * order; `CardList` is the shape when the order means something.
+ *
+ * Each cell is a `MetricBar`, and this does not relitigate it: a caller
+ * wanting other cell content wants `CardGrid` directly.
+ */
+export type MetricGridProps = HTMLAttributes<HTMLDivElement> & {
+    items: MetricGridItem[];
+    /**
+     * Columns at `md` and up; one below, where two cells side by side leave no
+     * room for a label and a bar. The caller picks it, knowing how many items
+     * there are: three columns and four items leaves an orphan.
+     */
+    columns?: 2 | 3;
+};
+declare const MetricGrid: import("svelte").Component<MetricGridProps, {}, "">;
+type MetricGrid = ReturnType<typeof MetricGrid>;
+export default MetricGrid;

package/dist/components/data-display/metric-row/index.d.ts

@@ -0,0 +1 @@
+export { default as MetricRow, type MetricRowProps, type MetricRowStat, } from './metric-row.svelte';

package/dist/components/data-display/metric-row/index.js

@@ -0,0 +1 @@
+export { default as MetricRow, } from './metric-row.svelte';

package/dist/components/data-display/metric-row/metric-row.svelte

@@ -0,0 +1,175 @@
+<!--
+  Origin: the React package 2.23.0 `metric-row.tsx`
+  Diverged: `icon` is a snippet, and `label`, `description`, `trailing` and a
+    stat's `label` and `value` take a string or a snippet, as R4-5 has a
+    ReactNode prop. Takes `class` and spreads the rest onto the root, as every
+    component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+
+  export type MetricRowStat = {
+    /** Stable key. Labels repeat down a list, so they are not one. */
+    id: string
+    /**
+     * The caption over the figure. Optional: a lone `56%` beside its own bar
+     * explains itself.
+     */
+    label?: string | Snippet
+    value: string | number | Snippet
+    /**
+     * Colours the figure only. A row where every stat is tinted reads as an
+     * alert, the opposite of what a scannable list needs.
+     */
+    tone?: Tone
+  }
+
+  /**
+   * A subject, the figures that describe it, and one bar beneath them all.
+   *
+   * Not `MetricBar` on two counts. Several labelled figures, not one: `80%`,
+   * `3`, `1` side by side say nothing without their captions. And the bar runs
+   * the full width, under the chip too, because it summarises the row rather
+   * than belonging to any one figure. Reach for `MetricBar` when the bar is the
+   * point; for this when the row is a thing with several measurements.
+   */
+  export type MetricRowProps = HTMLAttributes<HTMLDivElement> & {
+    /** A glyph in a `md` `IconChip` before the label. */
+    icon?: Snippet
+    /** A place in a ranking, as `MetricRank`. Pass `icon` or `rank`, not both. */
+    rank?: number
+    label: string | Snippet
+    /** A muted line under the title. */
+    description?: string | Snippet
+    /** The figures along the top right, each under its own caption. */
+    stats?: MetricRowStat[]
+    /** How full the bar is, 0–100. Clamped: over 100 is a bug upstream. */
+    percent: number
+    tone?: Tone
+    /**
+     * Beside the bar: `398 / 500 units`. Inline, it takes a right-aligned slot
+     * with a floor width, so every row's bar starts and ends at the same x.
+     * `null` holds the slot empty; leave it out to give the slot up.
+     */
+    trailing?: string | Snippet | null
+    /**
+     * `below`, the default, runs the bar the full width under the row, for a
+     * row whose bar belongs to no figure in particular. `inline` puts it before
+     * the figures at a fixed width, for one figure the bar is a picture of.
+     */
+    barPlacement?: 'below' | 'inline'
+    /** Hides the bar, for a row with nothing to measure: an empty bar reads as a failure. */
+    hideBar?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { TONE_INDICATOR_CLASS, TONE_TEXT_CLASS } from '../../../utils/tone.js'
+  import Progress from '../../feedback/progress/progress.svelte'
+  import IconChip from '../icon-chip/icon-chip.svelte'
+  import MetricRank from '../metric-bar/metric-rank.svelte'
+
+  let {
+    icon,
+    rank,
+    label,
+    description,
+    stats,
+    percent,
+    tone = 'primary',
+    trailing,
+    barPlacement = 'below',
+    hideBar = false,
+    class: className,
+    ...rest
+  }: MetricRowProps = $props()
+
+  const clamped = $derived(Math.min(100, Math.max(0, percent)))
+  const inline = $derived(barPlacement === 'inline')
+  const barLabel = $derived(
+    typeof label === 'string' ? `${label}: ${clamped.toFixed(0)}%` : undefined,
+  )
+</script>
+
+{#snippet content(node: string | number | Snippet)}
+  {#if typeof node === 'function'}
+    {@render node()}
+  {:else}
+    {node}
+  {/if}
+{/snippet}
+
+{#snippet bar()}
+  <Progress value={clamped} aria-label={barLabel} class={cn('h-2', TONE_INDICATOR_CLASS[tone])} />
+{/snippet}
+
+<div data-slot="metric-row" class={cn('flex flex-col gap-3', className)} {...rest}>
+  <div class="flex items-start justify-between gap-4">
+    <div class="flex min-w-0 items-center gap-3">
+      {#if icon}
+        <IconChip size="md">{@render icon()}</IconChip>
+      {/if}
+      {#if rank !== undefined}
+        <MetricRank {rank} />
+      {/if}
+      <div class="min-w-0">
+        <div class="truncate text-sm font-medium">{@render content(label)}</div>
+        {#if description}
+          <div class="text-muted-foreground truncate text-xs">{@render content(description)}</div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Inline keeps one baseline; below, the figures stack over their captions. -->
+    <div
+      class={cn('flex shrink-0 items-center gap-5 text-right sm:gap-6', !inline && 'items-start')}
+    >
+      {#if inline && !hideBar}
+        <div class="w-24 sm:w-32">{@render bar()}</div>
+      {/if}
+
+      {#each stats ?? [] as stat (stat.id)}
+        <div>
+          {#if stat.label !== undefined}
+            <div class="text-muted-foreground text-xs whitespace-nowrap">
+              {@render content(stat.label)}
+            </div>
+          {/if}
+          <div
+            class={cn(
+              'text-sm font-semibold tabular-nums',
+              stat.tone === undefined || stat.tone === 'neutral'
+                ? 'text-foreground'
+                : TONE_TEXT_CLASS[stat.tone],
+            )}
+          >
+            {@render content(stat.value)}
+          </div>
+        </div>
+      {/each}
+
+      {#if inline && trailing !== undefined}
+        <div class="min-w-20 shrink-0 text-right tabular-nums">
+          {#if trailing !== null}
+            {@render content(trailing)}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if !inline && !hideBar}
+    <div class="flex items-center gap-3">
+      <div class="flex-1">{@render bar()}</div>
+      {#if trailing}
+        <div class="text-muted-foreground shrink-0 text-xs tabular-nums">
+          {@render content(trailing)}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,58 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+export type MetricRowStat = {
+    /** Stable key. Labels repeat down a list, so they are not one. */
+    id: string;
+    /**
+     * The caption over the figure. Optional: a lone `56%` beside its own bar
+     * explains itself.
+     */
+    label?: string | Snippet;
+    value: string | number | Snippet;
+    /**
+     * Colours the figure only. A row where every stat is tinted reads as an
+     * alert, the opposite of what a scannable list needs.
+     */
+    tone?: Tone;
+};
+/**
+ * A subject, the figures that describe it, and one bar beneath them all.
+ *
+ * Not `MetricBar` on two counts. Several labelled figures, not one: `80%`,
+ * `3`, `1` side by side say nothing without their captions. And the bar runs
+ * the full width, under the chip too, because it summarises the row rather
+ * than belonging to any one figure. Reach for `MetricBar` when the bar is the
+ * point; for this when the row is a thing with several measurements.
+ */
+export type MetricRowProps = HTMLAttributes<HTMLDivElement> & {
+    /** A glyph in a `md` `IconChip` before the label. */
+    icon?: Snippet;
+    /** A place in a ranking, as `MetricRank`. Pass `icon` or `rank`, not both. */
+    rank?: number;
+    label: string | Snippet;
+    /** A muted line under the title. */
+    description?: string | Snippet;
+    /** The figures along the top right, each under its own caption. */
+    stats?: MetricRowStat[];
+    /** How full the bar is, 0–100. Clamped: over 100 is a bug upstream. */
+    percent: number;
+    tone?: Tone;
+    /**
+     * Beside the bar: `398 / 500 units`. Inline, it takes a right-aligned slot
+     * with a floor width, so every row's bar starts and ends at the same x.
+     * `null` holds the slot empty; leave it out to give the slot up.
+     */
+    trailing?: string | Snippet | null;
+    /**
+     * `below`, the default, runs the bar the full width under the row, for a
+     * row whose bar belongs to no figure in particular. `inline` puts it before
+     * the figures at a fixed width, for one figure the bar is a picture of.
+     */
+    barPlacement?: 'below' | 'inline';
+    /** Hides the bar, for a row with nothing to measure: an empty bar reads as a failure. */
+    hideBar?: boolean;
+};
+declare const MetricRow: import("svelte").Component<MetricRowProps, {}, "">;
+type MetricRow = ReturnType<typeof MetricRow>;
+export default MetricRow;

package/dist/components/data-display/radial-stat/index.d.ts

@@ -0,0 +1 @@
+export { default as RadialStat, type RadialStatProps, type RadialThickness, } from './radial-stat.svelte';

package/dist/components/data-display/radial-stat/index.js

@@ -0,0 +1 @@
+export { default as RadialStat, } from './radial-stat.svelte';

package/dist/components/data-display/radial-stat/radial-stat.svelte

@@ -0,0 +1,113 @@
+<!--
+  Origin: the React package 2.23.0 `radial-stat.tsx`
+  Diverged: `children` is a snippet. Takes `class` and spreads the rest onto
+    the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+
+  /**
+   * How heavy the ring is, as a fraction of its diameter. `regular` is a
+   * twelfth, a ring around a figure; `thick` is a sixth, with the weight to
+   * carry a card on its own. A ratio, because a fixed stroke is a hairline at
+   * 140px and a solid disc at 48px.
+   */
+  export type RadialThickness = 'regular' | 'thick'
+
+  const THICKNESS_DIVISOR: Record<RadialThickness, number> = { regular: 12, thick: 6 }
+
+  /**
+   * A share, drawn as an arc with the figure inside it. A circle has an obvious
+   * whole, so the ring says "roughly a quarter" without the reader converting a
+   * length. Right for a handful of parts side by side; wrong for a list, where
+   * twenty rings are a wall of dials.
+   */
+  export type RadialStatProps = HTMLAttributes<HTMLDivElement> & {
+    /** 0–100. Clamped: a share over 100 is a bug upstream, not a full ring plus. */
+    percent: number
+    tone?: Tone
+    /**
+     * Outer diameter in pixels; the stroke scales with it. `diameter`, not
+     * `size`, which across the package means `sm | md | lg`.
+     */
+    diameter?: number
+    /** Ring weight. `thick` for a ring that is the subject of its own card. */
+    thickness?: RadialThickness
+    /** Replaces the printed percentage: a count, or a short word. */
+    children?: Snippet
+    /** Read by assistive tech in place of the ring. */
+    'aria-label'?: string
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { TONE_STROKE_CLASS } from '../../../utils/tone.js'
+
+  let {
+    percent,
+    tone = 'primary',
+    diameter = 72,
+    thickness = 'regular',
+    children,
+    'aria-label': ariaLabel,
+    class: className,
+    ...rest
+  }: RadialStatProps = $props()
+
+  const clamped = $derived(Math.min(100, Math.max(0, percent)))
+  const stroke = $derived(Math.max(4, Math.round(diameter / THICKNESS_DIVISOR[thickness])))
+  const radius = $derived((diameter - stroke) / 2)
+  const circumference = $derived(2 * Math.PI * radius)
+  const arc = $derived(circumference * (clamped / 100))
+  const centre = $derived(diameter / 2)
+  /**
+   * Round caps add half a stroke at each end, so on an arc shorter than the
+   * stroke they overrun it and read as a marker. Below that the cap squares
+   * off, and 0% draws nothing rather than a dot at twelve o'clock.
+   */
+  const linecap = $derived(arc >= stroke ? 'round' : 'butt')
+</script>
+
+<div
+  data-slot="radial-stat"
+  role="img"
+  aria-label={ariaLabel ?? `${clamped.toFixed(0)} percent`}
+  class={cn('relative shrink-0', className)}
+  style:width="{diameter}px"
+  style:height="{diameter}px"
+  {...rest}
+>
+  <svg width={diameter} height={diameter} viewBox="0 0 {diameter} {diameter}" aria-hidden="true">
+    <circle
+      class="stroke-muted"
+      cx={centre}
+      cy={centre}
+      r={radius}
+      fill="none"
+      stroke-width={stroke}
+    />
+    <circle
+      class={cn('transition-[stroke-dashoffset]', TONE_STROKE_CLASS[tone])}
+      cx={centre}
+      cy={centre}
+      r={radius}
+      fill="none"
+      stroke-width={stroke}
+      stroke-linecap={linecap}
+      stroke-dasharray={circumference}
+      stroke-dashoffset={circumference - arc}
+      transform="rotate(-90 {centre} {centre})"
+    />
+  </svg>
+  <div class="absolute inset-0 grid place-items-center text-sm font-medium tabular-nums">
+    {#if children}
+      {@render children()}
+    {:else}
+      {clamped.toFixed(0)}%
+    {/if}
+  </div>
+</div>