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

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

@@ -0,0 +1,98 @@
+<!--
+  Origin: the React package 2.23.0 `sparkline.tsx`
+  Diverged: plain SVG rather than recharts (round 4a, R4-3). The curve is the
+    same monotone one, from `utils/monotone-path.ts`, drawn into a stretched
+    `viewBox` with a non-scaling stroke. Takes `class` and spreads the rest onto
+    the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+
+  /**
+   * A figure's recent shape, drawn small enough to sit beside it. No axes, no
+   * grid, no tooltip, no labels: it answers "is that number climbing or
+   * falling" in the space of a word. Anything that invites closer reading
+   * belongs in a chart on its own card.
+   *
+   * The tone is the series' identity, not a verdict on its direction.
+   */
+  export type SparklineProps = HTMLAttributes<HTMLDivElement> & {
+    /** The series, oldest first. Fewer than two points draws nothing. */
+    data: number[]
+    tone?: Tone
+    /** Height in pixels. The width comes from whatever holds it. */
+    height?: number
+    /** Read by assistive tech: the shape says nothing without it. */
+    'aria-label'?: string
+  }
+
+  /** The viewBox is 100 units each way, stretched to whatever box holds it. */
+  const SIZE = 100
+
+  /**
+   * One id per instance. The gradient lives in `defs`, and two sparklines
+   * sharing an id would paint the second with the first's colour.
+   */
+  let instances = 0
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { monotonePath } from '../../../utils/monotone-path.js'
+  import { TONE_CSS_VAR } from '../../../utils/tone.js'
+
+  let { data, tone = 'primary', height = 40, class: className, ...rest }: SparklineProps = $props()
+
+  const gradientId = `sparkline-${++instances}`
+
+  const colour = $derived(TONE_CSS_VAR[tone])
+
+  /** 2px of room above and below, so the stroke is not clipped at an extreme. */
+  const points = $derived.by(() => {
+    const margin = (2 / height) * SIZE
+    const low = Math.min(...data)
+    const range = Math.max(...data) - low
+    return data.map((value, index): [number, number] => [
+      (index / (data.length - 1)) * SIZE,
+      range === 0 ? SIZE / 2 : SIZE - margin - ((value - low) / range) * (SIZE - 2 * margin),
+    ])
+  })
+
+  const line = $derived(monotonePath(points))
+  const area = $derived(`${line}L${SIZE},${SIZE}L0,${SIZE}Z`)
+</script>
+
+{#if data.length >= 2}
+  <div data-slot="sparkline" role="img" class={cn(className)} style:height="{height}px" {...rest}>
+    <svg
+      viewBox="0 0 {SIZE} {SIZE}"
+      preserveAspectRatio="none"
+      class="block size-full overflow-visible"
+      aria-hidden="true"
+    >
+      <defs>
+        <!--
+          A gradient, where a full-size chart uses a flat wash: at 40px a flat
+          fill reads as a solid block with a bumpy top, and the fade keeps the
+          line legible as the line.
+        -->
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color={colour} stop-opacity="0.35" />
+          <stop offset="100%" stop-color={colour} stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill="url(#{gradientId})" />
+      <path
+        d={line}
+        fill="none"
+        stroke={colour}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        vector-effect="non-scaling-stroke"
+      />
+    </svg>
+  </div>
+{/if}

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+/**
+ * A figure's recent shape, drawn small enough to sit beside it. No axes, no
+ * grid, no tooltip, no labels: it answers "is that number climbing or
+ * falling" in the space of a word. Anything that invites closer reading
+ * belongs in a chart on its own card.
+ *
+ * The tone is the series' identity, not a verdict on its direction.
+ */
+export type SparklineProps = HTMLAttributes<HTMLDivElement> & {
+    /** The series, oldest first. Fewer than two points draws nothing. */
+    data: number[];
+    tone?: Tone;
+    /** Height in pixels. The width comes from whatever holds it. */
+    height?: number;
+    /** Read by assistive tech: the shape says nothing without it. */
+    'aria-label'?: string;
+};
+declare const Sparkline: import("svelte").Component<SparklineProps, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

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

@@ -0,0 +1 @@
+export { default as StatTile, type StatIconAlignment, type StatIconSize, type StatRow, type StatSize, type StatSurface, type StatTileProps, } from './stat-tile.svelte';

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

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

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

@@ -0,0 +1,328 @@
+<!--
+  Origin: the React package 2.23.0 `stat-tile.tsx`
+  Diverged: the rows are a `FactList` of `FactListItem`s, each ruled by a top
+    border, where React put a `Separator` and a `FactRow` together in a `div`
+    inside the `dl`, which a `dl` does not allow. The rule sits in the same
+    places: above the first row and between rows, never below the last. `icon`,
+    `hint`, `delta`, `action`, `visual` and `footer` are snippets, and `value`,
+    `unit`, `description` and a row'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'
+  import type { IconChipShape } from '../icon-chip/icon-chip-variants.js'
+
+  /**
+   * How big the figure is, named for the density it is drawn for rather than a
+   * type step: `sm` a dense row or a figure inside another card, `md` (the
+   * default) four across, `lg` one or two across or the point of the screen.
+   */
+  export type StatSize = 'sm' | 'md' | 'lg'
+
+  const SIZE_CLASS: Record<StatSize, string> = { sm: 'text-xl', md: 'text-2xl', lg: 'text-3xl' }
+  const SIZE_SKELETON_CLASS: Record<StatSize, string> = {
+    sm: 'h-6 w-16',
+    md: 'h-7 w-20',
+    lg: 'h-9 w-24',
+  }
+
+  /**
+   * The chip's footprint, apart from the figure's density. `IconChip`'s sizes
+   * are 32 / 40 / 48px and the tile's chip was 40 / 48 / 48, so `sm` maps to the
+   * chip's `md` and `md` and `lg` to its `lg`. Defaults to `size`.
+   */
+  export type StatIconSize = StatSize
+
+  const ICON_CHIP_SIZE: Record<StatIconSize, 'md' | 'lg'> = { sm: 'md', md: 'lg', lg: 'lg' }
+
+  /**
+   * `center`, the default, centres the chip against the label, figure and
+   * description; `top` pins it level with the label, for a column a delta or a
+   * long description has made tall.
+   */
+  export type StatIconAlignment = 'center' | 'top'
+
+  const ICON_ROW_ALIGN_CLASS: Record<StatIconAlignment, string> = {
+    center: 'items-center',
+    top: 'items-start',
+  }
+
+  /**
+   * `card` is a tile in its own right, one of a row. `inset` is the summary at
+   * the top of a card whose chart or table is the evidence: recessed, no
+   * shadow, its caption small and upper-case so it does not compete with the
+   * card's own title.
+   */
+  export type StatSurface = 'card' | 'inset'
+
+  export type StatRow = {
+    /** Stable key. Labels repeat across tiles, so they are not one. */
+    id: string
+    label: string | Snippet
+    value: string | number | Snippet | null
+    /**
+     * Colours the value: "this figure has a direction". For a directional
+     * pair (stock in against stock out), not the parts of a total. Leave it
+     * off unless every row in the group has one; a single tinted row reads as
+     * an alert.
+     */
+    tone?: Tone
+  }
+
+  /**
+   * The dashboard's headline number. One tile states one figure, and the rest
+   * qualifies it: a unit, a delta, a description, a sparkline, a few rows. The
+   * icon sits in a chip so the eye lands on the number, and colour is kept for
+   * tone; a tile merely reporting a total stays in ink.
+   *
+   * Loading and error are the tile's business. An error renders the em dash a
+   * missing value does, and the tile keeps its height either way: a row of four
+   * where one has collapsed is worse than one where a tile has no answer.
+   */
+  export type StatTileProps = HTMLAttributes<HTMLDivElement> & {
+    /** A short caption above the figure. */
+    label: string
+    /**
+     * The figure, already formatted: the package has no opinion about
+     * currencies or locales. `null` renders an em dash.
+     */
+    value: string | number | Snippet | null
+    /**
+     * What the figure is counted in: `orders`, `per order`. Its own small line
+     * under the figure, since beside it a delta and a visual made every tile in
+     * a row wrap at a different point.
+     */
+    unit?: string | Snippet
+    /** The unabbreviated figure, on hover: `$45,612.40` under `$45.6k`. */
+    exactValue?: string
+    icon?: Snippet
+    /** An explanation trigger after the label; it belongs to the caption it explains. */
+    hint?: Snippet
+    /**
+     * Colours the figure only, never the chip or the card: "this figure has a
+     * direction", not "this is a problem".
+     */
+    tone?: Tone
+    size?: StatSize
+    surface?: StatSurface
+    /**
+     * `square` by default. A chip holding a face or initials is a circle; for
+     * icon chips the screen picks, and every chip in the row takes the same one.
+     */
+    iconShape?: IconChipShape
+    /** A muted line under the figure. */
+    description?: string | Snippet
+    /**
+     * After the figure, on its line: a `DeltaBadge`, so `$45.6k ↗ +15.7%` reads
+     * as one statement. Dropped on error.
+     */
+    delta?: Snippet
+    /**
+     * Top right, on the label's line: a link out to what the figure summarises.
+     * Keep it short; the label is the one that wraps.
+     */
+    action?: Snippet
+    /**
+     * A shape beside the figure, a `Sparkline` usually. It takes half the row
+     * and yields: a long figure squeezes the shape, never the reverse.
+     */
+    visual?: Snippet
+    /** Supporting facts under the figure, ruled off from it and from each other. */
+    rows?: StatRow[]
+    /** Below everything else: a bar, a total. */
+    footer?: Snippet
+    /**
+     * Right by default: the icon is ornament, so label, figure and description
+     * run straight down the left edge. Left for an icon that carries meaning.
+     */
+    iconPosition?: 'left' | 'right'
+    iconAlignment?: StatIconAlignment
+    iconTone?: Tone
+    iconSize?: StatIconSize
+    /**
+     * Lets the chip follow `tone`, so one threshold colours both and the two
+     * cannot drift into an ink figure in a red chip. Off by default: a tinted
+     * chip beside a tinted figure says the same thing twice. Supersedes
+     * `iconTone`.
+     */
+    applyToneToIcon?: boolean
+    loading?: boolean
+    error?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { TONE_TEXT_CLASS } from '../../../utils/tone.js'
+  import Skeleton from '../../feedback/skeleton/skeleton.svelte'
+  import Card from '../../layout/card/card.svelte'
+  import FactList from '../fact-list/fact-list.svelte'
+  import FactListItem from '../fact-list/fact-list-item.svelte'
+  import IconChip from '../icon-chip/icon-chip.svelte'
+
+  let {
+    label,
+    value,
+    unit,
+    exactValue,
+    icon,
+    hint,
+    tone = 'neutral',
+    size = 'md',
+    surface = 'card',
+    iconPosition = 'right',
+    iconAlignment = 'center',
+    iconTone = 'neutral',
+    iconSize,
+    iconShape = 'square',
+    applyToneToIcon = false,
+    description,
+    delta,
+    action,
+    visual,
+    rows,
+    footer,
+    loading = false,
+    error = false,
+    class: className,
+    ...rest
+  }: StatTileProps = $props()
+
+  const inset = $derived(surface === 'inset')
+  const hasValue = $derived(!error && value !== null && value !== undefined)
+  const chipTone = $derived(applyToneToIcon ? tone : iconTone)
+  const padded = $derived(inset ? '' : 'px-(--card-spacing)')
+</script>
+
+{#snippet content(node: string | number | Snippet)}
+  {#if typeof node === 'function'}
+    {@render node()}
+  {:else}
+    {node}
+  {/if}
+{/snippet}
+
+{#snippet chip()}
+  {#if icon}
+    <IconChip size={ICON_CHIP_SIZE[iconSize ?? size]} shape={iconShape} tone={chipTone}>
+      {@render icon()}
+    </IconChip>
+  {/if}
+{/snippet}
+
+{#snippet body()}
+  <div class={cn('flex gap-4', ICON_ROW_ALIGN_CLASS[iconAlignment], padded)}>
+    {#if iconPosition === 'left'}
+      {@render chip()}
+    {/if}
+
+    <div class="min-w-0 flex-1">
+      <!-- The action sits on the label's line, so it does not take the label's width. -->
+      <div class="flex items-start justify-between gap-2">
+        <div
+          class={cn(
+            'flex min-w-0 items-center gap-1.5',
+            inset ? 'text-muted-foreground text-xs tracking-wide uppercase' : 'text-foreground',
+          )}
+        >
+          <p class={cn(!inset && 'text-sm font-medium')}>{label}</p>
+          {@render hint?.()}
+        </div>
+        {#if action}
+          <div class="-mt-1 shrink-0">{@render action()}</div>
+        {/if}
+      </div>
+
+      {#if loading}
+        <Skeleton class={cn('mt-1.5', SIZE_SKELETON_CLASS[size])} />
+      {:else}
+        <div class="mt-0.5">
+          <div class="flex min-w-0 items-center justify-between gap-3">
+            <div class="min-w-0 flex-1">
+              <!-- The figure and its delta, and nothing else: one statement. -->
+              <div class="flex flex-wrap items-baseline gap-2">
+                <div
+                  class={cn(
+                    'font-heading font-bold tabular-nums',
+                    SIZE_CLASS[size],
+                    TONE_TEXT_CLASS[tone],
+                  )}
+                  title={hasValue ? exactValue : undefined}
+                >
+                  {#if hasValue && value !== null}
+                    {@render content(value)}
+                  {:else}
+                    —
+                  {/if}
+                </div>
+                {#if delta && !error}
+                  {@render delta()}
+                {/if}
+              </div>
+              {#if unit}
+                <div class="text-muted-foreground mt-0.5 text-xs">{@render content(unit)}</div>
+              {/if}
+            </div>
+            {#if visual}
+              <div class="w-1/2 min-w-0 shrink">{@render visual()}</div>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    {#if iconPosition === 'right'}
+      {@render chip()}
+    {/if}
+  </div>
+
+  {#if description}
+    <div class={cn('text-muted-foreground mt-1 text-xs', padded)}>
+      {#if loading}
+        <Skeleton class="h-4 w-40" />
+      {:else}
+        {@render content(description)}
+      {/if}
+    </div>
+  {/if}
+
+  {#if rows && rows.length > 0}
+    <!-- Ruled above the first row and between rows, never below the last. -->
+    <FactList class={cn('mt-4 gap-3', padded)}>
+      {#each rows as row (row.id)}
+        <FactListItem
+          class="border-t pt-3"
+          label={row.label}
+          value={error ? null : row.value}
+          valueClass={error ? undefined : TONE_TEXT_CLASS[row.tone ?? 'neutral']}
+        />
+      {/each}
+    </FactList>
+  {/if}
+
+  {#if footer}
+    <div class={cn('mt-3', padded)}>{@render footer()}</div>
+  {/if}
+{/snippet}
+
+{#if inset}
+  <div
+    data-slot="stat-tile"
+    class={cn('bg-muted/40 flex flex-col rounded-xl border p-4', className)}
+    {...rest}
+  >
+    {@render body()}
+  </div>
+{:else}
+  <!--
+    `shadow-md` lifts the tile a step above `Card`'s default: a dashboard's tiles
+    are the one surface meant to sit above the page.
+  -->
+  <Card data-stat-tile="" class={cn('gap-0 shadow-md', className)} {...rest}>
+    {@render body()}
+  </Card>
+{/if}

package/dist/components/data-display/stat-tile/stat-tile.svelte.d.ts

@@ -0,0 +1,125 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+import type { IconChipShape } from '../icon-chip/icon-chip-variants.js';
+/**
+ * How big the figure is, named for the density it is drawn for rather than a
+ * type step: `sm` a dense row or a figure inside another card, `md` (the
+ * default) four across, `lg` one or two across or the point of the screen.
+ */
+export type StatSize = 'sm' | 'md' | 'lg';
+/**
+ * The chip's footprint, apart from the figure's density. `IconChip`'s sizes
+ * are 32 / 40 / 48px and the tile's chip was 40 / 48 / 48, so `sm` maps to the
+ * chip's `md` and `md` and `lg` to its `lg`. Defaults to `size`.
+ */
+export type StatIconSize = StatSize;
+/**
+ * `center`, the default, centres the chip against the label, figure and
+ * description; `top` pins it level with the label, for a column a delta or a
+ * long description has made tall.
+ */
+export type StatIconAlignment = 'center' | 'top';
+/**
+ * `card` is a tile in its own right, one of a row. `inset` is the summary at
+ * the top of a card whose chart or table is the evidence: recessed, no
+ * shadow, its caption small and upper-case so it does not compete with the
+ * card's own title.
+ */
+export type StatSurface = 'card' | 'inset';
+export type StatRow = {
+    /** Stable key. Labels repeat across tiles, so they are not one. */
+    id: string;
+    label: string | Snippet;
+    value: string | number | Snippet | null;
+    /**
+     * Colours the value: "this figure has a direction". For a directional
+     * pair (stock in against stock out), not the parts of a total. Leave it
+     * off unless every row in the group has one; a single tinted row reads as
+     * an alert.
+     */
+    tone?: Tone;
+};
+/**
+ * The dashboard's headline number. One tile states one figure, and the rest
+ * qualifies it: a unit, a delta, a description, a sparkline, a few rows. The
+ * icon sits in a chip so the eye lands on the number, and colour is kept for
+ * tone; a tile merely reporting a total stays in ink.
+ *
+ * Loading and error are the tile's business. An error renders the em dash a
+ * missing value does, and the tile keeps its height either way: a row of four
+ * where one has collapsed is worse than one where a tile has no answer.
+ */
+export type StatTileProps = HTMLAttributes<HTMLDivElement> & {
+    /** A short caption above the figure. */
+    label: string;
+    /**
+     * The figure, already formatted: the package has no opinion about
+     * currencies or locales. `null` renders an em dash.
+     */
+    value: string | number | Snippet | null;
+    /**
+     * What the figure is counted in: `orders`, `per order`. Its own small line
+     * under the figure, since beside it a delta and a visual made every tile in
+     * a row wrap at a different point.
+     */
+    unit?: string | Snippet;
+    /** The unabbreviated figure, on hover: `$45,612.40` under `$45.6k`. */
+    exactValue?: string;
+    icon?: Snippet;
+    /** An explanation trigger after the label; it belongs to the caption it explains. */
+    hint?: Snippet;
+    /**
+     * Colours the figure only, never the chip or the card: "this figure has a
+     * direction", not "this is a problem".
+     */
+    tone?: Tone;
+    size?: StatSize;
+    surface?: StatSurface;
+    /**
+     * `square` by default. A chip holding a face or initials is a circle; for
+     * icon chips the screen picks, and every chip in the row takes the same one.
+     */
+    iconShape?: IconChipShape;
+    /** A muted line under the figure. */
+    description?: string | Snippet;
+    /**
+     * After the figure, on its line: a `DeltaBadge`, so `$45.6k ↗ +15.7%` reads
+     * as one statement. Dropped on error.
+     */
+    delta?: Snippet;
+    /**
+     * Top right, on the label's line: a link out to what the figure summarises.
+     * Keep it short; the label is the one that wraps.
+     */
+    action?: Snippet;
+    /**
+     * A shape beside the figure, a `Sparkline` usually. It takes half the row
+     * and yields: a long figure squeezes the shape, never the reverse.
+     */
+    visual?: Snippet;
+    /** Supporting facts under the figure, ruled off from it and from each other. */
+    rows?: StatRow[];
+    /** Below everything else: a bar, a total. */
+    footer?: Snippet;
+    /**
+     * Right by default: the icon is ornament, so label, figure and description
+     * run straight down the left edge. Left for an icon that carries meaning.
+     */
+    iconPosition?: 'left' | 'right';
+    iconAlignment?: StatIconAlignment;
+    iconTone?: Tone;
+    iconSize?: StatIconSize;
+    /**
+     * Lets the chip follow `tone`, so one threshold colours both and the two
+     * cannot drift into an ink figure in a red chip. Off by default: a tinted
+     * chip beside a tinted figure says the same thing twice. Supersedes
+     * `iconTone`.
+     */
+    applyToneToIcon?: boolean;
+    loading?: boolean;
+    error?: boolean;
+};
+declare const StatTile: import("svelte").Component<StatTileProps, {}, "">;
+type StatTile = ReturnType<typeof StatTile>;
+export default StatTile;

package/dist/components/data-display/table/context.d.ts

@@ -0,0 +1,2 @@
+export declare function setTableDensity(compact: () => boolean): void;
+export declare function useTableCompact(): () => boolean;

package/dist/components/data-display/table/context.js

@@ -0,0 +1,16 @@
+/**
+ * Origin: the React package 2.23.0 `table.tsx` (`TableDensityContext`)
+ * Diverged: Svelte context holding a getter, where React's held the boolean.
+ */
+import { getContext, setContext } from 'svelte';
+/**
+ * Row density, set once on `Table` and read by every head and cell beneath it.
+ * Context rather than a prop per cell: density is a property of the table.
+ */
+const KEY = Symbol('mise-table-density');
+export function setTableDensity(compact) {
+    setContext(KEY, compact);
+}
+export function useTableCompact() {
+    return getContext(KEY) ?? (() => false);
+}

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

@@ -0,0 +1,8 @@
+export { default as Table, type TableProps } from './table.svelte';
+export { default as TableBody, type TableBodyProps } from './table-body.svelte';
+export { default as TableCaption, type TableCaptionProps } from './table-caption.svelte';
+export { default as TableCell, type TableCellProps } from './table-cell.svelte';
+export { default as TableFooter, type TableFooterProps } from './table-footer.svelte';
+export { default as TableHead, type TableHeadProps } from './table-head.svelte';
+export { default as TableHeader, type TableHeaderProps } from './table-header.svelte';
+export { default as TableRow, type TableRowProps } from './table-row.svelte';

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

@@ -0,0 +1,8 @@
+export { default as Table } from './table.svelte';
+export { default as TableBody } from './table-body.svelte';
+export { default as TableCaption } from './table-caption.svelte';
+export { default as TableCell } from './table-cell.svelte';
+export { default as TableFooter } from './table-footer.svelte';
+export { default as TableHead } from './table-head.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableRow } from './table-row.svelte';

package/dist/components/data-display/table/table-body.svelte

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableBody`), itself shadcn/ui new-york `table`
+  Svelte: shadcn-svelte `table`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** The rows. The last row drops its rule; the table edge is enough. */
+  export type TableBodyProps = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TableBodyProps = $props()
+</script>
+
+<tbody
+  bind:this={ref}
+  data-slot="table-body"
+  class={cn('bg-card [&_tr:last-child]:border-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+</tbody>

package/dist/components/data-display/table/table-body.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** The rows. The last row drops its rule; the table edge is enough. */
+export type TableBodyProps = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>;
+declare const TableBody: import("svelte").Component<TableBodyProps, {}, "ref">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;