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

package/dist/components/data-display/delta-badge/delta-badge.svelte

@@ -0,0 +1,87 @@
+<!--
+  Origin: the React package 2.23.0 `delta-badge.tsx`
+  Diverged: Lucide's trending-up, trending-down and minus for Tabler's. Takes
+    `class` and spreads the rest onto the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A period-over-period change, as a tinted pill.
+   *
+   * Colour reads the sign, not the metric: up is green and down is red unless
+   * `invert` says falling is the point. Most figures on a dashboard are things
+   * you want more of, so the exceptions are marked one by one. A delta of
+   * exactly zero renders flat and muted: a dashboard of green pills where
+   * nothing moved teaches an operator to stop reading them.
+   *
+   * It carries no label. What changed is the tile it sits in.
+   */
+  export type DeltaBadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    /** The change, signed. `2.4` renders `+2.4%`, `-2.4` renders `-2.4%`. */
+    value: number
+    /** Appended to the number. `%` for a rate, `x` for a multiple. */
+    unit?: string
+    /**
+     * Ahead of the number, after the sign: `$` renders `+$1.25`. Pass `unit=""`
+     * with it, or the `%` default trails the figure.
+     */
+    prefix?: string
+    /** Decimal places. A delta is a direction, not a measurement; one is usually right. */
+    precision?: number
+    /**
+     * Set when falling is the good outcome: failed payments, time to fulfil,
+     * stock at risk. The arrow still follows the sign; only the colour flips.
+     */
+    invert?: boolean
+    /**
+     * `pill`, the default, is a tinted, self-contained badge, for beside a bare
+     * figure. `plain` drops the fill and padding, for inline in a muted sentence
+     * where a pill would compete with the text sharing its line.
+     */
+    variant?: 'pill' | 'plain'
+  }
+</script>
+
+<script lang="ts">
+  import MinusIcon from '@lucide/svelte/icons/minus'
+  import TrendingDownIcon from '@lucide/svelte/icons/trending-down'
+  import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
+
+  import { cn } from '../../../utils/cn.js'
+  import { TONE_SOFT_CLASS, TONE_TEXT_CLASS, type Tone } from '../../../utils/tone.js'
+
+  let {
+    value,
+    unit = '%',
+    prefix = '',
+    precision = 1,
+    invert = false,
+    variant = 'pill',
+    class: className,
+    ...rest
+  }: DeltaBadgeProps = $props()
+
+  const rising = $derived(value > 0)
+  const flat = $derived(value === 0)
+  const tone: Tone = $derived(flat ? 'neutral' : rising !== invert ? 'success' : 'critical')
+  const Icon = $derived(flat ? MinusIcon : rising ? TrendingUpIcon : TrendingDownIcon)
+  const sign = $derived(rising ? '+' : value < 0 ? '-' : '')
+</script>
+
+<span
+  data-slot="delta-badge"
+  class={cn(
+    'inline-flex shrink-0 items-center gap-1 text-xs font-medium tabular-nums',
+    variant === 'pill'
+      ? cn('rounded-full px-2 py-0.5', TONE_SOFT_CLASS[tone])
+      : tone === 'neutral'
+        ? 'text-muted-foreground'
+        : TONE_TEXT_CLASS[tone],
+    className,
+  )}
+  {...rest}
+>
+  <Icon class="size-3.5" />
+  {sign}{prefix}{Math.abs(value).toFixed(precision)}{unit}
+</span>

package/dist/components/data-display/delta-badge/delta-badge.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A period-over-period change, as a tinted pill.
+ *
+ * Colour reads the sign, not the metric: up is green and down is red unless
+ * `invert` says falling is the point. Most figures on a dashboard are things
+ * you want more of, so the exceptions are marked one by one. A delta of
+ * exactly zero renders flat and muted: a dashboard of green pills where
+ * nothing moved teaches an operator to stop reading them.
+ *
+ * It carries no label. What changed is the tile it sits in.
+ */
+export type DeltaBadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    /** The change, signed. `2.4` renders `+2.4%`, `-2.4` renders `-2.4%`. */
+    value: number;
+    /** Appended to the number. `%` for a rate, `x` for a multiple. */
+    unit?: string;
+    /**
+     * Ahead of the number, after the sign: `$` renders `+$1.25`. Pass `unit=""`
+     * with it, or the `%` default trails the figure.
+     */
+    prefix?: string;
+    /** Decimal places. A delta is a direction, not a measurement; one is usually right. */
+    precision?: number;
+    /**
+     * Set when falling is the good outcome: failed payments, time to fulfil,
+     * stock at risk. The arrow still follows the sign; only the colour flips.
+     */
+    invert?: boolean;
+    /**
+     * `pill`, the default, is a tinted, self-contained badge, for beside a bare
+     * figure. `plain` drops the fill and padding, for inline in a muted sentence
+     * where a pill would compete with the text sharing its line.
+     */
+    variant?: 'pill' | 'plain';
+};
+declare const DeltaBadge: import("svelte").Component<DeltaBadgeProps, {}, "">;
+type DeltaBadge = ReturnType<typeof DeltaBadge>;
+export default DeltaBadge;

package/dist/components/data-display/delta-badge/index.d.ts

@@ -0,0 +1 @@
+export { type DeltaBadgeProps, default as DeltaBadge } from './delta-badge.svelte';

package/dist/components/data-display/delta-badge/index.js

@@ -0,0 +1 @@
+export { default as DeltaBadge } from './delta-badge.svelte';

package/dist/components/data-display/entity-label/entity-label.svelte

@@ -0,0 +1,77 @@
+<!--
+  Origin: the React package 2.23.0 `entity-label.tsx`
+  Diverged: `title` and `description` are strings or snippets, and `icon` and
+    `media` are snippets.
+-->
+<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'
+
+  /**
+   * Names one thing (a person, a supplier, a document, a line item) with its
+   * mark and one qualifying line, wherever it appears: a table cell, a picker
+   * option, the head of a menu.
+   *
+   * Distinct from `Item`, which is a *row*: it owns a line of a list, with
+   * padding, a hover and actions at its end. This owns nothing but the label,
+   * so it sits inside whatever does without bringing padding of its own.
+   *
+   * `gap-3` between mark and text. The name and the line under it both
+   * truncate: a table column is as wide as its widest cell, and one long file
+   * name should not decide that for the rest.
+   */
+  export type EntityLabelProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /** The name. */
+    title: string | Snippet
+    /** One qualifying line: a size, a code, a role. */
+    description?: string | Snippet
+    /** A glyph, drawn in an `IconChip`. Takes precedence over `media`. */
+    icon?: Snippet
+    /** A mark given as is: an `Avatar` for a person or a supplier. */
+    media?: Snippet
+    iconShape?: IconChipShape
+    /** When the entity itself is in a state worth a colour. The name stays in ink. */
+    iconTone?: Tone
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import IconChip from '../icon-chip/icon-chip.svelte'
+
+  let {
+    title,
+    description,
+    icon,
+    media,
+    iconShape,
+    iconTone,
+    class: className,
+    ...rest
+  }: EntityLabelProps = $props()
+</script>
+
+{#snippet text(value: string | Snippet)}
+  {#if typeof value === 'string'}
+    {value}
+  {:else}
+    {@render value()}
+  {/if}
+{/snippet}
+
+<div data-slot="entity-label" class={cn('flex min-w-0 items-center gap-3', className)} {...rest}>
+  {#if icon}
+    <IconChip shape={iconShape} tone={iconTone}>{@render icon()}</IconChip>
+  {:else}
+    {@render media?.()}
+  {/if}
+  <div class="flex min-w-0 flex-col">
+    <div class="truncate text-sm font-medium">{@render text(title)}</div>
+    {#if description}
+      <div class="text-muted-foreground truncate text-xs">{@render text(description)}</div>
+    {/if}
+  </div>
+</div>

package/dist/components/data-display/entity-label/entity-label.svelte.d.ts

@@ -0,0 +1,33 @@
+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';
+/**
+ * Names one thing (a person, a supplier, a document, a line item) with its
+ * mark and one qualifying line, wherever it appears: a table cell, a picker
+ * option, the head of a menu.
+ *
+ * Distinct from `Item`, which is a *row*: it owns a line of a list, with
+ * padding, a hover and actions at its end. This owns nothing but the label,
+ * so it sits inside whatever does without bringing padding of its own.
+ *
+ * `gap-3` between mark and text. The name and the line under it both
+ * truncate: a table column is as wide as its widest cell, and one long file
+ * name should not decide that for the rest.
+ */
+export type EntityLabelProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /** The name. */
+    title: string | Snippet;
+    /** One qualifying line: a size, a code, a role. */
+    description?: string | Snippet;
+    /** A glyph, drawn in an `IconChip`. Takes precedence over `media`. */
+    icon?: Snippet;
+    /** A mark given as is: an `Avatar` for a person or a supplier. */
+    media?: Snippet;
+    iconShape?: IconChipShape;
+    /** When the entity itself is in a state worth a colour. The name stays in ink. */
+    iconTone?: Tone;
+};
+declare const EntityLabel: import("svelte").Component<EntityLabelProps, {}, "">;
+type EntityLabel = ReturnType<typeof EntityLabel>;
+export default EntityLabel;

package/dist/components/data-display/entity-label/index.d.ts

@@ -0,0 +1 @@
+export { default as EntityLabel, type EntityLabelProps } from './entity-label.svelte';

package/dist/components/data-display/entity-label/index.js

@@ -0,0 +1 @@
+export { default as EntityLabel } from './entity-label.svelte';

package/dist/components/data-display/fact-list/fact-list-item.svelte

@@ -0,0 +1,113 @@
+<!--
+  Origin: the React package 2.23.0 `fact-row.tsx` (`FactRow`)
+  Diverged: one item for React's `FactRow` (horizontal) and `FactField`
+    (`fact-field.tsx`, vertical), chosen by `orientation` (round 4a, R4-1).
+    Both render a `div` around a `dt` and a `dd`, so the vertical form also sits
+    in a `FactList`, where React's `FactField` was a bare `div`; its icon chip
+    sits inside the `dt`, positioned into the row's padding, because a `dl`'s
+    `div` may hold only `dt` and `dd`. `class` styles the item, as on every
+    component; React's `FactRow` put `className` on the value, which is
+    `valueClass` here. The value is a `value` prop in both orientations, where
+    `FactField` took children.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { IconChipShape } from '../icon-chip/icon-chip-variants.js'
+
+  /**
+   * One labelled fact.
+   *
+   * `horizontal`, the default, puts the term left and the value right, with
+   * `items-baseline justify-between` rather than a two-column grid: labels are
+   * short and fixed, values long and variable, and the value must not wrap.
+   * `tabular-nums` lines a column of figures up.
+   *
+   * `vertical` stacks the label above the value, for a narrow column where a
+   * right-aligned value would truncate to nothing, or a fact with a leading
+   * icon.
+   */
+  export type FactListItemProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    label: string | Snippet
+    /** An em dash when missing: a blank cell reads as a bug, not as "none". */
+    value?: string | number | Snippet | null
+    orientation?: 'horizontal' | 'vertical'
+    /**
+     * Vertical only. An `IconChip` ahead of the fact, for one that identifies
+     * (a location, a person, a category) rather than one field among several.
+     */
+    icon?: Snippet
+    /**
+     * Vertical only. `square` by default, for a column of facts under a heading;
+     * `circle` for a strip of identity facts read across, where round chips
+     * keep several of them from reading as a form.
+     */
+    iconShape?: IconChipShape
+    /**
+     * Vertical only. Lets the value wrap instead of truncating: a name is one
+     * line, but a description is worth reading past the card edge.
+     */
+    multiline?: boolean
+    /** Classes for the value, such as a sign colour on a total. */
+    valueClass?: string
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import IconChip from '../icon-chip/icon-chip.svelte'
+
+  let {
+    ref = $bindable(null),
+    label,
+    value,
+    orientation = 'horizontal',
+    icon,
+    iconShape = 'square',
+    multiline = false,
+    valueClass,
+    class: className,
+    ...rest
+  }: FactListItemProps = $props()
+
+  const vertical = $derived(orientation === 'vertical')
+  const withIcon = $derived(vertical && icon !== undefined)
+</script>
+
+{#snippet content(node: string | number | Snippet)}
+  {#if typeof node === 'function'}
+    {@render node()}
+  {:else}
+    {node}
+  {/if}
+{/snippet}
+
+<div
+  bind:this={ref}
+  data-slot="fact-list-item"
+  data-orientation={orientation}
+  class={cn(
+    vertical ? 'flex min-w-0 flex-col gap-0.5' : 'flex items-baseline justify-between gap-4',
+    withIcon && 'relative min-h-8 pl-11',
+    className,
+  )}
+  {...rest}
+>
+  <dt class={cn('text-muted-foreground', vertical ? 'text-xs' : 'text-sm')}>
+    {#if withIcon && icon}
+      <IconChip shape={iconShape} class="absolute top-0 left-0">{@render icon()}</IconChip>
+    {/if}
+    {@render content(label)}
+  </dt>
+  <dd
+    class={cn(
+      'text-sm font-medium',
+      vertical ? (multiline ? 'min-w-0' : 'truncate') : 'text-right tabular-nums',
+      valueClass,
+    )}
+  >
+    {@render content(value ?? '—')}
+  </dd>
+</div>

package/dist/components/data-display/fact-list/fact-list-item.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { IconChipShape } from '../icon-chip/icon-chip-variants.js';
+/**
+ * One labelled fact.
+ *
+ * `horizontal`, the default, puts the term left and the value right, with
+ * `items-baseline justify-between` rather than a two-column grid: labels are
+ * short and fixed, values long and variable, and the value must not wrap.
+ * `tabular-nums` lines a column of figures up.
+ *
+ * `vertical` stacks the label above the value, for a narrow column where a
+ * right-aligned value would truncate to nothing, or a fact with a leading
+ * icon.
+ */
+export type FactListItemProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    label: string | Snippet;
+    /** An em dash when missing: a blank cell reads as a bug, not as "none". */
+    value?: string | number | Snippet | null;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Vertical only. An `IconChip` ahead of the fact, for one that identifies
+     * (a location, a person, a category) rather than one field among several.
+     */
+    icon?: Snippet;
+    /**
+     * Vertical only. `square` by default, for a column of facts under a heading;
+     * `circle` for a strip of identity facts read across, where round chips
+     * keep several of them from reading as a form.
+     */
+    iconShape?: IconChipShape;
+    /**
+     * Vertical only. Lets the value wrap instead of truncating: a name is one
+     * line, but a description is worth reading past the card edge.
+     */
+    multiline?: boolean;
+    /** Classes for the value, such as a sign colour on a total. */
+    valueClass?: string;
+};
+declare const FactListItem: import("svelte").Component<FactListItemProps, {}, "ref">;
+type FactListItem = ReturnType<typeof FactListItem>;
+export default FactListItem;

package/dist/components/data-display/fact-list/fact-list.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `fact-list.tsx`
+  Diverged: holds `FactListItem`s, which absorb React's `FactRow` and
+    `FactField` (round 4a, R4-1). The list itself is React's.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The `dl` a column of facts sits in. An item's `dt`/`dd` pair is only valid
+   * inside a `dl`; left to callers, the wrapper was typed thirty times, drifted
+   * into other gaps, and was left out altogether on five cards.
+   *
+   * A summary split into what a thing is and what it totals is two lists with a
+   * `Separator` between them, not one list with a prop for the rule. A single
+   * row, like a grand total, is a list of one.
+   */
+  export type FactListProps = WithElementRef<HTMLAttributes<HTMLDListElement>> & {
+    /**
+     * `gap-1` instead of `gap-2`, for an aside where the list is a footnote to a
+     * preview above it rather than the card's content.
+     */
+    compact?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    compact = false,
+    class: className,
+    children,
+    ...rest
+  }: FactListProps = $props()
+</script>
+
+<dl
+  bind:this={ref}
+  data-slot="fact-list"
+  class={cn('flex flex-col', compact ? 'gap-1' : 'gap-2', className)}
+  {...rest}
+>
+  {@render children?.()}
+</dl>

package/dist/components/data-display/fact-list/fact-list.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The `dl` a column of facts sits in. An item's `dt`/`dd` pair is only valid
+ * inside a `dl`; left to callers, the wrapper was typed thirty times, drifted
+ * into other gaps, and was left out altogether on five cards.
+ *
+ * A summary split into what a thing is and what it totals is two lists with a
+ * `Separator` between them, not one list with a prop for the rule. A single
+ * row, like a grand total, is a list of one.
+ */
+export type FactListProps = WithElementRef<HTMLAttributes<HTMLDListElement>> & {
+    /**
+     * `gap-1` instead of `gap-2`, for an aside where the list is a footnote to a
+     * preview above it rather than the card's content.
+     */
+    compact?: boolean;
+};
+declare const FactList: import("svelte").Component<FactListProps, {}, "ref">;
+type FactList = ReturnType<typeof FactList>;
+export default FactList;

package/dist/components/data-display/fact-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FactList, type FactListProps } from './fact-list.svelte';
+export { default as FactListItem, type FactListItemProps } from './fact-list-item.svelte';

package/dist/components/data-display/fact-list/index.js

@@ -0,0 +1,2 @@
+export { default as FactList } from './fact-list.svelte';
+export { default as FactListItem } from './fact-list-item.svelte';

package/dist/components/data-display/icon-chip/icon-chip-variants.d.ts

@@ -0,0 +1,21 @@
+import { type Size, type Tone } from '../../../utils/tone.js';
+export type IconChipShape = 'square' | 'circle';
+export declare const iconChipVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The chip's classes, for a component that draws the chip on an element it
+ * already owns.
+ *
+ * `ItemMedia variant="icon"` is the case: a slot with its own alignment rules,
+ * whose chip used to be a second, hand-kept copy of this one — the same 32px
+ * squircle, but without the muted ink or a `tone`. Wrapping an `IconChip`
+ * inside the slot would add a node and move the alignment off the chip;
+ * reading the classes from here keeps one chip and one element.
+ */
+export declare function iconChipClassName({ size, shape, tone, }?: {
+    size?: Size;
+    shape?: IconChipShape;
+    tone?: Tone;
+}): string;

package/dist/components/data-display/icon-chip/icon-chip-variants.js

@@ -0,0 +1,44 @@
+/**
+ * Origin: the React package 2.23.0 `icon-chip.tsx` (`iconChipVariants`, `iconChipClassName`)
+ * Diverged: split out of the component file, as badge-variants.ts is. Classes
+ *   unchanged; `iconChipClassName` types its options inline rather than picking
+ *   them from the component's props.
+ */
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../utils/cn.js';
+import { TONE_SOFT_CLASS } from '../../../utils/tone.js';
+export const iconChipVariants = cva('inline-grid shrink-0 place-items-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        size: {
+            sm: "size-8 [&_svg:not([class*='size-'])]:size-4",
+            md: "size-10 [&_svg:not([class*='size-'])]:size-5",
+            lg: "size-12 [&_svg:not([class*='size-'])]:size-5",
+        },
+        shape: {
+            square: '',
+            circle: 'rounded-full',
+        },
+    },
+    compoundVariants: [
+        { shape: 'square', size: 'sm', class: 'rounded-lg' },
+        { shape: 'square', size: 'md', class: 'rounded-xl' },
+        { shape: 'square', size: 'lg', class: 'rounded-xl' },
+    ],
+    defaultVariants: {
+        size: 'sm',
+        shape: 'square',
+    },
+});
+/**
+ * The chip's classes, for a component that draws the chip on an element it
+ * already owns.
+ *
+ * `ItemMedia variant="icon"` is the case: a slot with its own alignment rules,
+ * whose chip used to be a second, hand-kept copy of this one — the same 32px
+ * squircle, but without the muted ink or a `tone`. Wrapping an `IconChip`
+ * inside the slot would add a node and move the alignment off the chip;
+ * reading the classes from here keeps one chip and one element.
+ */
+export function iconChipClassName({ size = 'sm', shape = 'square', tone = 'neutral', } = {}) {
+    return cn(iconChipVariants({ size, shape }), TONE_SOFT_CLASS[tone]);
+}

package/dist/components/data-display/icon-chip/icon-chip.svelte

@@ -0,0 +1,53 @@
+<!--
+  Origin: the React package 2.23.0 `icon-chip.tsx`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Size, Tone } from '../../../utils/tone.js'
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { IconChipShape } from './icon-chip-variants.js'
+
+  /**
+   * A glyph on a tinted tile: the leading mark of a fact, a heading, a tile, a
+   * row. `sm` by default because most chips sit beside a line of text; `md` and
+   * `lg` stand in open space. Neutral is muted ink on `--muted`: a chip takes a
+   * colour only when the thing it marks is in a state worth one.
+   */
+  export type IconChipProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    /** `sm` 32px, `md` 40px, `lg` 48px. */
+    size?: Size
+    /**
+     * `square` is a squircle whose radius steps with the size; `circle` is for a
+     * composition that has chosen it. The slot owns the shape, not what sits in it.
+     */
+    shape?: IconChipShape
+    tone?: Tone
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { iconChipClassName } from './icon-chip-variants.js'
+
+  let {
+    ref = $bindable(null),
+    size = 'sm',
+    shape = 'square',
+    tone = 'neutral',
+    class: className,
+    children,
+    ...rest
+  }: IconChipProps = $props()
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="icon-chip"
+  data-tone={tone}
+  class={cn(iconChipClassName({ size, shape, tone }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</span>

package/dist/components/data-display/icon-chip/icon-chip.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Size, Tone } from '../../../utils/tone.js';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { IconChipShape } from './icon-chip-variants.js';
+/**
+ * A glyph on a tinted tile: the leading mark of a fact, a heading, a tile, a
+ * row. `sm` by default because most chips sit beside a line of text; `md` and
+ * `lg` stand in open space. Neutral is muted ink on `--muted`: a chip takes a
+ * colour only when the thing it marks is in a state worth one.
+ */
+export type IconChipProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    /** `sm` 32px, `md` 40px, `lg` 48px. */
+    size?: Size;
+    /**
+     * `square` is a squircle whose radius steps with the size; `circle` is for a
+     * composition that has chosen it. The slot owns the shape, not what sits in it.
+     */
+    shape?: IconChipShape;
+    tone?: Tone;
+};
+declare const IconChip: import("svelte").Component<IconChipProps, {}, "ref">;
+type IconChip = ReturnType<typeof IconChip>;
+export default IconChip;

package/dist/components/data-display/icon-chip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconChip, type IconChipProps } from './icon-chip.svelte';
+export { type IconChipShape, iconChipClassName, iconChipVariants } from './icon-chip-variants.js';

package/dist/components/data-display/icon-chip/index.js

@@ -0,0 +1,2 @@
+export { default as IconChip } from './icon-chip.svelte';
+export { iconChipClassName, iconChipVariants } from './icon-chip-variants.js';

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

@@ -0,0 +1,11 @@
+export { default as Item, type ItemProps } from './item.svelte';
+export { default as ItemActions, type ItemActionsProps } from './item-actions.svelte';
+export { default as ItemContent, type ItemContentProps } from './item-content.svelte';
+export { default as ItemDescription, type ItemDescriptionProps } from './item-description.svelte';
+export { default as ItemFooter, type ItemFooterProps } from './item-footer.svelte';
+export { default as ItemGroup, type ItemGroupProps } from './item-group.svelte';
+export { default as ItemHeader, type ItemHeaderProps } from './item-header.svelte';
+export { default as ItemMedia, type ItemMediaProps } from './item-media.svelte';
+export { default as ItemSeparator, type ItemSeparatorProps } from './item-separator.svelte';
+export { default as ItemTitle, type ItemTitleProps } from './item-title.svelte';
+export { type ItemMediaVariant, type ItemSize, type ItemVariant, itemMediaVariants, itemVariants, } from './item-variants.js';