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

package/dist/components/layout/card/card-content.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`CardContent`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export const CONTENT_STACK_CLASS = {
+    sm: 'flex flex-col gap-3',
+    md: 'flex flex-col gap-4',
+    lg: 'flex flex-col gap-6',
+  } as const
+
+  /**
+   * `stack` turns on a vertical flex with a gap, for content that is several
+   * blocks rather than one. Off by default: `CardContent` stays a plain block,
+   * which is right for one child. `sm` / `md` / `lg` name the three gaps
+   * cards actually reach for, so the choice is made once, here.
+   */
+  export type CardContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    stack?: keyof typeof CONTENT_STACK_CLASS
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    stack,
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: CardContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-content"
+  data-stack={stack}
+  class={cn('px-(--card-spacing)', stack && CONTENT_STACK_CLASS[stack], className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card-content.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export declare const CONTENT_STACK_CLASS: {
+    readonly sm: "flex flex-col gap-3";
+    readonly md: "flex flex-col gap-4";
+    readonly lg: "flex flex-col gap-6";
+};
+/**
+ * `stack` turns on a vertical flex with a gap, for content that is several
+ * blocks rather than one. Off by default: `CardContent` stays a plain block,
+ * which is right for one child. `sm` / `md` / `lg` name the three gaps
+ * cards actually reach for, so the choice is made once, here.
+ */
+export type CardContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    stack?: keyof typeof CONTENT_STACK_CLASS;
+};
+declare const CardContent: import("svelte").Component<CardContentProps, {}, "ref">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

package/dist/components/layout/card/card-description.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`CardDescription`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type CardDescriptionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: CardDescriptionProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-description"
+  class={cn('text-muted-foreground text-sm', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card-description.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type CardDescriptionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const CardDescription: import("svelte").Component<CardDescriptionProps, {}, "ref">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

package/dist/components/layout/card/card-footer.svelte

@@ -0,0 +1,62 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`CardFooter`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * `bleed` runs the footer to the card's edges, for a footer that is one wide
+   * target ("View all orders") rather than content with actions in it. Three
+   * things happen together, which is why it is one prop: the card's bottom
+   * padding is cancelled, the horizontal padding goes (a Button inside gets
+   * the card's gutter back, so its label lines up with the title), and the
+   * bottom corners are rounded and clipped.
+   *
+   * `divided` draws the rule above the footer, the mirror of `CardHeader`'s.
+   *
+   * `variant="muted"` is the recessed band: a wash, its own `py-3`, and a
+   * bottom radius that matches the card's own.
+   */
+  export type CardFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    bleed?: boolean
+    divided?: boolean
+    variant?: 'default' | 'muted'
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    bleed = false,
+    divided = false,
+    variant = 'default',
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: CardFooterProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-footer"
+  data-bleed={bleed || undefined}
+  data-variant={variant}
+  class={cn(
+    'flex items-center px-(--card-spacing) [.border-t]:pt-(--card-spacing)',
+    divided && 'border-t',
+    variant === 'muted' &&
+      'bg-muted/40 text-muted-foreground rounded-b-[min(var(--radius-4xl),24px)] py-3 text-sm',
+    bleed &&
+      '-mb-(--card-spacing) overflow-hidden rounded-b-[min(var(--radius-4xl),24px)] px-0 [.border-t]:pt-0 [&_[data-slot=button]]:px-(--card-spacing)',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card-footer.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * `bleed` runs the footer to the card's edges, for a footer that is one wide
+ * target ("View all orders") rather than content with actions in it. Three
+ * things happen together, which is why it is one prop: the card's bottom
+ * padding is cancelled, the horizontal padding goes (a Button inside gets
+ * the card's gutter back, so its label lines up with the title), and the
+ * bottom corners are rounded and clipped.
+ *
+ * `divided` draws the rule above the footer, the mirror of `CardHeader`'s.
+ *
+ * `variant="muted"` is the recessed band: a wash, its own `py-3`, and a
+ * bottom radius that matches the card's own.
+ */
+export type CardFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    bleed?: boolean;
+    divided?: boolean;
+    variant?: 'default' | 'muted';
+};
+declare const CardFooter: import("svelte").Component<CardFooterProps, {}, "ref">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/components/layout/card/card-header.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`CardHeader`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The two explicit row tracks appear only when a `CardAction` is present.
+   * Upstream declares them unconditionally, so a title-only header carried an
+   * empty second track and its gutter. `auto-rows-min` already makes as many
+   * rows as there are children.
+   *
+   * `divided` draws the rule under the header. It is `border-b`, spelled as a
+   * prop rather than a class a caller has to already know works.
+   */
+  export type CardHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    divided?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    divided = false,
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: CardHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-header"
+  class={cn(
+    '@container/card-header grid auto-rows-min items-start gap-1 px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+    divided && 'border-b',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card-header.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The two explicit row tracks appear only when a `CardAction` is present.
+ * Upstream declares them unconditionally, so a title-only header carried an
+ * empty second track and its gutter. `auto-rows-min` already makes as many
+ * rows as there are children.
+ *
+ * `divided` draws the rule under the header. It is `border-b`, spelled as a
+ * prop rather than a class a caller has to already know works.
+ */
+export type CardHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    divided?: boolean;
+};
+declare const CardHeader: import("svelte").Component<CardHeaderProps, {}, "ref">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/components/layout/card/card-title.svelte

@@ -0,0 +1,61 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`CardTitle`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: takes `icon` and `iconTone`, absorbing React's `SectionTitle`
+    (`section-title.tsx`).
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A flex row, so a hint or a status badge sits on the title's baseline
+   * without the caller arranging it. `min-w-0` lets a long title truncate
+   * against its neighbour instead of pushing it out of the header.
+   *
+   * With an `icon`, it marks where a section starts, at `CardTitle`'s size, so
+   * the heading labels the section rather than competing with the figures
+   * inside it.
+   */
+  export type CardTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /** A leading glyph. Bare and muted at `size-4` unless `iconTone` is given. */
+    icon?: Snippet
+    /**
+     * Draws `icon` in an `IconChip` of this tone. Omit it for a quiet heading.
+     * `primary` when the headings are the page's structure, as on a long form.
+     * Never a status tone: a heading is not a status.
+     */
+    iconTone?: Tone
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import IconChip from '../../data-display/icon-chip/icon-chip.svelte'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    icon,
+    iconTone,
+    children,
+    ...rest
+  }: CardTitleProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-title"
+  class={cn('font-heading flex min-w-0 items-center gap-2 text-base font-medium', className)}
+  {...rest}
+>
+  {#if icon && iconTone}
+    <IconChip tone={iconTone}>{@render icon()}</IconChip>
+  {:else if icon}
+    <span class="text-muted-foreground [&_svg]:size-4">{@render icon()}</span>
+  {/if}
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card-title.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A flex row, so a hint or a status badge sits on the title's baseline
+ * without the caller arranging it. `min-w-0` lets a long title truncate
+ * against its neighbour instead of pushing it out of the header.
+ *
+ * With an `icon`, it marks where a section starts, at `CardTitle`'s size, so
+ * the heading labels the section rather than competing with the figures
+ * inside it.
+ */
+export type CardTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /** A leading glyph. Bare and muted at `size-4` unless `iconTone` is given. */
+    icon?: Snippet;
+    /**
+     * Draws `icon` in an `IconChip` of this tone. Omit it for a quiet heading.
+     * `primary` when the headings are the page's structure, as on a long form.
+     * Never a status tone: a heading is not a status.
+     */
+    iconTone?: Tone;
+};
+declare const CardTitle: import("svelte").Component<CardTitleProps, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/layout/card/card.svelte

@@ -0,0 +1,60 @@
+<!--
+  Origin: the React package 2.23.0 `card.tsx` (`Card`), itself shadcn/ui new-york `card`
+  Svelte: shadcn-svelte `card`
+  Diverged: none beyond the port. The React header lists the divergences from shadcn.
+-->
+<script lang="ts" module>
+  import { cva, type VariantProps } from 'class-variance-authority'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export const cardVariants = cva(
+    'ring-foreground/5 dark:ring-foreground/10 flex flex-col gap-4 rounded-[min(var(--radius-4xl),24px)] py-(--card-spacing) shadow-sm ring-1 [--card-spacing:--spacing(5)]',
+    {
+      variants: {
+        variant: {
+          default: 'bg-card text-card-foreground',
+          ghost: 'bg-transparent shadow-none ring-0 py-0 gap-2',
+        },
+      },
+      defaultVariants: {
+        variant: 'default',
+      },
+    },
+  )
+
+  export type CardVariant = NonNullable<VariantProps<typeof cardVariants>['variant']>
+
+  /**
+   * Padding is a `--card-spacing` variable on both axes, at 20px, so a
+   * full-bleed child can cancel it. The edge is a ring plus a shadow rather
+   * than a border. `ghost` drops the surface for a block that wants the
+   * card's rhythm but sits straight on the page.
+   */
+  export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: CardVariant
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    variant = 'default',
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: CardProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card"
+  data-variant={variant}
+  class={cn(cardVariants({ variant }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card/card.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export declare const cardVariants: (props?: ({
+    variant?: "default" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CardVariant = NonNullable<VariantProps<typeof cardVariants>['variant']>;
+/**
+ * Padding is a `--card-spacing` variable on both axes, at 20px, so a
+ * full-bleed child can cancel it. The edge is a ring plus a shadow rather
+ * than a border. `ghost` drops the surface for a block that wants the
+ * card's rhythm but sits straight on the page.
+ */
+export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: CardVariant;
+};
+declare const Card: import("svelte").Component<CardProps, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/layout/card/index.d.ts

@@ -0,0 +1,7 @@
+export { type CardProps, type CardVariant, default as Card } from './card.svelte';
+export { type CardActionProps, default as CardAction } from './card-action.svelte';
+export { type CardContentProps, default as CardContent } from './card-content.svelte';
+export { type CardDescriptionProps, default as CardDescription } from './card-description.svelte';
+export { type CardFooterProps, default as CardFooter } from './card-footer.svelte';
+export { type CardHeaderProps, default as CardHeader } from './card-header.svelte';
+export { type CardTitleProps, default as CardTitle } from './card-title.svelte';

package/dist/components/layout/card/index.js

@@ -0,0 +1,7 @@
+export { default as Card } from './card.svelte';
+export { default as CardAction } from './card-action.svelte';
+export { default as CardContent } from './card-content.svelte';
+export { default as CardDescription } from './card-description.svelte';
+export { default as CardFooter } from './card-footer.svelte';
+export { default as CardHeader } from './card-header.svelte';
+export { default as CardTitle } from './card-title.svelte';

package/dist/components/layout/card-grid/card-grid-cell.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `card-grid.tsx`
+  Diverged: React draws the cell inline in `CardGrid`'s map; here it is a part,
+    so a caller writes the cells as children.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * One cell. Bordered rather than filled or shadowed, deliberately lighter than
+   * `Card`: a wash or a ring on every cell of a dense grid competes with what
+   * the content needs to carry attention.
+   */
+  export type CardGridCellProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: CardGridCellProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-grid-cell"
+  class={cn('rounded-lg border p-4', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card-grid/card-grid-cell.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * One cell. Bordered rather than filled or shadowed, deliberately lighter than
+ * `Card`: a wash or a ring on every cell of a dense grid competes with what
+ * the content needs to carry attention.
+ */
+export type CardGridCellProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const CardGridCell: import("svelte").Component<CardGridCellProps, {}, "ref">;
+type CardGridCell = ReturnType<typeof CardGridCell>;
+export default CardGridCell;

package/dist/components/layout/card-grid/card-grid.svelte

@@ -0,0 +1,51 @@
+<!--
+  Origin: the React package 2.23.0 `card-grid.tsx`
+  Diverged: the cells are `CardGridCell` children rather than an `items` array
+    of `{ id, content }`, since a Svelte snippet does not sit naturally in an
+    array. The classes are React's.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A responsive grid of bordered cells, with no opinion on what fills them.
+   * `MetricGrid` is this with a `MetricBar` in every cell; a caller whose cells
+   * are not a percent breakdown wants the grid on its own.
+   */
+  export type CardGridProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /**
+     * Columns at `md` and up. Below that it is always one: two cells side by
+     * side on a phone leave no room for real content.
+     */
+    columns?: 2 | 3 | 4
+  }
+
+  const COLUMN_CLASSES: Record<NonNullable<CardGridProps['columns']>, string> = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    columns = 3,
+    class: className,
+    children,
+    ...rest
+  }: CardGridProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-grid"
+  class={cn('grid gap-4', COLUMN_CLASSES[columns], className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card-grid/card-grid.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A responsive grid of bordered cells, with no opinion on what fills them.
+ * `MetricGrid` is this with a `MetricBar` in every cell; a caller whose cells
+ * are not a percent breakdown wants the grid on its own.
+ */
+export type CardGridProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /**
+     * Columns at `md` and up. Below that it is always one: two cells side by
+     * side on a phone leave no room for real content.
+     */
+    columns?: 2 | 3 | 4;
+};
+declare const CardGrid: import("svelte").Component<CardGridProps, {}, "ref">;
+type CardGrid = ReturnType<typeof CardGrid>;
+export default CardGrid;

package/dist/components/layout/card-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { type CardGridProps, default as CardGrid } from './card-grid.svelte';
+export { type CardGridCellProps, default as CardGridCell } from './card-grid-cell.svelte';

package/dist/components/layout/card-grid/index.js

@@ -0,0 +1,2 @@
+export { default as CardGrid } from './card-grid.svelte';
+export { default as CardGridCell } from './card-grid-cell.svelte';

package/dist/components/layout/card-list/card-list.svelte

@@ -0,0 +1,59 @@
+<!--
+  Origin: the React package 2.23.0 `card-list.tsx`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A list of rows inside a card, separated by full-width rules. The rules run
+   * to the card's edges: inset, they read as stripes drawn on the content;
+   * full-bleed, they read as the card divided into rows.
+   *
+   * It cancels the card's horizontal padding and gives it back to each row, so
+   * a row still lines up with the header. That is why it reads `--card-spacing`
+   * rather than a literal. It has to sit inside a padded `CardContent`, the
+   * padding it cancels; `px-0` there as well cancels it twice.
+   *
+   * `divide-y` sets only a border width, so a child with its own border colour
+   * (an `Item`'s `border-transparent`) would paint the rule invisible. The rule's
+   * colour is set here too, qualified by `[data-slot]` so it outranks the child.
+   */
+  export type CardListProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /**
+     * Tighter rows, for rows of one line. The default `py-4` is sized for a
+     * leading chip and two lines. A prop rather than a class at the call site:
+     * a second arbitrary variant does not reliably win against this one.
+     */
+    compact?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    compact = false,
+    class: className,
+    children,
+    ...rest
+  }: CardListProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="card-list"
+  class={cn(
+    '-mx-(--card-spacing) divide-y [&>*]:px-(--card-spacing)',
+    compact ? '[&>*]:py-2.5' : '[&>*]:py-4',
+    '[&>[data-slot]+[data-slot]]:border-t-border',
+    '[&>[data-slot]]:rounded-none',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/card-list/card-list.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A list of rows inside a card, separated by full-width rules. The rules run
+ * to the card's edges: inset, they read as stripes drawn on the content;
+ * full-bleed, they read as the card divided into rows.
+ *
+ * It cancels the card's horizontal padding and gives it back to each row, so
+ * a row still lines up with the header. That is why it reads `--card-spacing`
+ * rather than a literal. It has to sit inside a padded `CardContent`, the
+ * padding it cancels; `px-0` there as well cancels it twice.
+ *
+ * `divide-y` sets only a border width, so a child with its own border colour
+ * (an `Item`'s `border-transparent`) would paint the rule invisible. The rule's
+ * colour is set here too, qualified by `[data-slot]` so it outranks the child.
+ */
+export type CardListProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /**
+     * Tighter rows, for rows of one line. The default `py-4` is sized for a
+     * leading chip and two lines. A prop rather than a class at the call site:
+     * a second arbitrary variant does not reliably win against this one.
+     */
+    compact?: boolean;
+};
+declare const CardList: import("svelte").Component<CardListProps, {}, "ref">;
+type CardList = ReturnType<typeof CardList>;
+export default CardList;

package/dist/components/layout/card-list/index.d.ts

@@ -0,0 +1 @@
+export { type CardListProps, default as CardList } from './card-list.svelte';