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

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

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableCaption`), 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'
+
+  /** A caption under the table. */
+  export type TableCaptionProps = WithElementRef<HTMLAttributes<HTMLElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TableCaptionProps = $props()
+</script>
+
+<caption
+  bind:this={ref}
+  data-slot="table-caption"
+  class={cn('text-muted-foreground mt-4 text-sm', className)}
+  {...rest}
+>
+  {@render children?.()}
+</caption>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** A caption under the table. */
+export type TableCaptionProps = WithElementRef<HTMLAttributes<HTMLElement>>;
+declare const TableCaption: import("svelte").Component<TableCaptionProps, {}, "ref">;
+type TableCaption = ReturnType<typeof TableCaption>;
+export default TableCaption;

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

@@ -0,0 +1,45 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableCell`), itself shadcn/ui new-york `table`
+  Svelte: shadcn-svelte `table`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLTdAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type TableCellProps = WithElementRef<HTMLTdAttributes> & {
+    /** Right-aligned with tabular figures, so a column of numbers lines up. */
+    numeric?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { useTableCompact } from './context.js'
+
+  let {
+    ref = $bindable(null),
+    numeric = false,
+    class: className,
+    children,
+    ...rest
+  }: TableCellProps = $props()
+
+  const compact = useTableCompact()
+</script>
+
+<td
+  bind:this={ref}
+  data-slot="table-cell"
+  data-numeric={numeric || undefined}
+  class={cn(
+    'px-4 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+    compact() ? 'py-2.5' : 'py-3.5',
+    numeric && 'text-right tabular-nums',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</td>

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

@@ -0,0 +1,9 @@
+import type { HTMLTdAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type TableCellProps = WithElementRef<HTMLTdAttributes> & {
+    /** Right-aligned with tabular figures, so a column of numbers lines up. */
+    numeric?: boolean;
+};
+declare const TableCell: import("svelte").Component<TableCellProps, {}, "ref">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

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

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableFooter`), 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'
+
+  /** Totals, on a muted band under the body. */
+  export type TableFooterProps = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TableFooterProps = $props()
+</script>
+
+<tfoot
+  bind:this={ref}
+  data-slot="table-footer"
+  class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+</tfoot>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** Totals, on a muted band under the body. */
+export type TableFooterProps = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: import("svelte").Component<TableFooterProps, {}, "ref">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

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

@@ -0,0 +1,54 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableHead`), itself shadcn/ui new-york `table`
+  Svelte: shadcn-svelte `table`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLThAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type TableHeadProps = WithElementRef<HTMLThAttributes> & {
+    /** Right-aligns the column. Pair it with `numeric` on the column's cells. */
+    numeric?: boolean
+    /**
+     * For a header that names the things compared rather than labelling a
+     * column of values (the roles across a permission matrix): ink at body
+     * size instead of the muted caption.
+     */
+    strong?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { useTableCompact } from './context.js'
+
+  let {
+    ref = $bindable(null),
+    numeric = false,
+    strong = false,
+    class: className,
+    children,
+    ...rest
+  }: TableHeadProps = $props()
+
+  const compact = useTableCompact()
+</script>
+
+<th
+  bind:this={ref}
+  data-slot="table-head"
+  data-numeric={numeric || undefined}
+  data-strong={strong || undefined}
+  class={cn(
+    'text-muted-foreground px-4 text-left align-middle text-xs font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+    compact() ? 'h-9' : 'h-11',
+    numeric && 'text-right',
+    strong && 'text-foreground text-sm font-semibold',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</th>

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

@@ -0,0 +1,15 @@
+import type { HTMLThAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type TableHeadProps = WithElementRef<HTMLThAttributes> & {
+    /** Right-aligns the column. Pair it with `numeric` on the column's cells. */
+    numeric?: boolean;
+    /**
+     * For a header that names the things compared rather than labelling a
+     * column of values (the roles across a permission matrix): ink at body
+     * size instead of the muted caption.
+     */
+    strong?: boolean;
+};
+declare const TableHead: import("svelte").Component<TableHeadProps, {}, "ref">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

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

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableHeader`), 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 column labels, muted, ruled off from the body. */
+  export type TableHeaderProps = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TableHeaderProps = $props()
+</script>
+
+<thead
+  bind:this={ref}
+  data-slot="table-header"
+  class={cn('text-muted-foreground border-b bg-transparent [&_tr]:border-b-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+</thead>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** The column labels, muted, ruled off from the body. */
+export type TableHeaderProps = WithElementRef<HTMLAttributes<HTMLTableSectionElement>>;
+declare const TableHeader: import("svelte").Component<TableHeaderProps, {}, "ref">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

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

@@ -0,0 +1,31 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`TableRow`), 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'
+
+  /** One row. `data-state="selected"` tints it as the active nav row is tinted. */
+  export type TableRowProps = WithElementRef<HTMLAttributes<HTMLTableRowElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TableRowProps = $props()
+</script>
+
+<tr
+  bind:this={ref}
+  data-slot="table-row"
+  class={cn(
+    'border-border hover:bg-muted/40 data-[state=selected]:bg-accent border-b transition-colors',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</tr>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** One row. `data-state="selected"` tints it as the active nav row is tinted. */
+export type TableRowProps = WithElementRef<HTMLAttributes<HTMLTableRowElement>>;
+declare const TableRow: import("svelte").Component<TableRowProps, {}, "ref">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

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

@@ -0,0 +1,47 @@
+<!--
+  Origin: the React package 2.23.0 `table.tsx` (`Table`), itself shadcn/ui new-york `table`
+  Svelte: shadcn-svelte `table`
+  Diverged: `compact` reaches the heads and cells through Svelte context, as React's does through React context.
+-->
+<script lang="ts" module>
+  import type { HTMLTableAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type TableProps = WithElementRef<HTMLTableAttributes> & {
+    /**
+     * Tightens every row, the head included. The default suits a listing, where
+     * a row is a click target; `compact` is for a table being read (line items,
+     * totals, a mapping preview), where the extra height pushes the summary off
+     * the card.
+     */
+    compact?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { setTableDensity } from './context.js'
+
+  let {
+    ref = $bindable(null),
+    compact = false,
+    class: className,
+    children,
+    ...rest
+  }: TableProps = $props()
+
+  setTableDensity(() => compact)
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <table
+    bind:this={ref}
+    data-slot="table"
+    data-density={compact ? 'compact' : 'default'}
+    class={cn('w-full caption-bottom text-sm', className)}
+    {...rest}
+  >
+    {@render children?.()}
+  </table>
+</div>

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

@@ -0,0 +1,14 @@
+import type { HTMLTableAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type TableProps = WithElementRef<HTMLTableAttributes> & {
+    /**
+     * Tightens every row, the head included. The default suits a listing, where
+     * a row is a click target; `compact` is for a table being read (line items,
+     * totals, a mapping preview), where the extra height pushes the summary off
+     * the card.
+     */
+    compact?: boolean;
+};
+declare const Table: import("svelte").Component<TableProps, {}, "ref">;
+type Table = ReturnType<typeof Table>;
+export default Table;

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

@@ -0,0 +1,8 @@
+export { default as Timeline, type TimelineProps } from './timeline.svelte';
+export { default as TimelineConnector, type TimelineConnectorProps, } from './timeline-connector.svelte';
+export { default as TimelineContent, type TimelineContentProps } from './timeline-content.svelte';
+export { default as TimelineDot, type TimelineDotProps } from './timeline-dot.svelte';
+export { default as TimelineItem, type TimelineItemProps } from './timeline-item.svelte';
+export { default as TimelineSkeleton, type TimelineSkeletonProps } from './timeline-skeleton.svelte';
+export { default as TimelineTitle, type TimelineTitleProps } from './timeline-title.svelte';
+export { type TimelineDotTone, timelineDotVariants } from './timeline-variants.js';

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

@@ -0,0 +1,8 @@
+export { default as Timeline } from './timeline.svelte';
+export { default as TimelineConnector, } from './timeline-connector.svelte';
+export { default as TimelineContent } from './timeline-content.svelte';
+export { default as TimelineDot } from './timeline-dot.svelte';
+export { default as TimelineItem } from './timeline-item.svelte';
+export { default as TimelineSkeleton } from './timeline-skeleton.svelte';
+export { default as TimelineTitle } from './timeline-title.svelte';
+export { timelineDotVariants } from './timeline-variants.js';

package/dist/components/data-display/timeline/timeline-connector.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`TimelineConnector`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The rule under a badge. Rendered by every item except the last. `min-h-6`
+   * keeps a visible run of line under a one-line body, so a short entry does
+   * not collapse the badge spacing.
+   */
+  export type TimelineConnectorProps = WithElementRef<HTMLAttributes<HTMLHRElement>, HTMLHRElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: TimelineConnectorProps = $props()
+</script>
+
+<hr
+  bind:this={ref}
+  data-slot="timeline-connector"
+  aria-orientation="vertical"
+  class={cn(
+    'bg-border col-start-2 col-end-3 row-start-2 row-end-2 mx-auto h-full min-h-6 w-0.5 rounded-full border-0',
+    className,
+  )}
+  {...rest}
+>

package/dist/components/data-display/timeline/timeline-connector.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The rule under a badge. Rendered by every item except the last. `min-h-6`
+ * keeps a visible run of line under a one-line body, so a short entry does
+ * not collapse the badge spacing.
+ */
+export type TimelineConnectorProps = WithElementRef<HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
+declare const TimelineConnector: import("svelte").Component<TimelineConnectorProps, {}, "ref">;
+type TimelineConnector = ReturnType<typeof TimelineConnector>;
+export default TimelineConnector;

package/dist/components/data-display/timeline/timeline-content.svelte

@@ -0,0 +1,35 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`TimelineContent`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** The body. `pb-5` is the gap between entries; it sits here rather than on the item so the connector, which shares the row, runs the full distance. */
+  export type TimelineContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: TimelineContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="timeline-content"
+  class={cn(
+    'text-muted-foreground col-start-3 col-end-4 row-start-2 row-end-2 mr-auto space-y-1 pb-5 pl-3 text-xs',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/data-display/timeline/timeline-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** The body. `pb-5` is the gap between entries; it sits here rather than on the item so the connector, which shares the row, runs the full distance. */
+export type TimelineContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const TimelineContent: import("svelte").Component<TimelineContentProps, {}, "ref">;
+type TimelineContent = ReturnType<typeof TimelineContent>;
+export default TimelineContent;

package/dist/components/data-display/timeline/timeline-dot.svelte

@@ -0,0 +1,57 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`TimelineDot`)
+  Diverged: `indicator` is a snippet.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { TimelineDotTone } from './timeline-variants.js'
+
+  /**
+   * The badge. Renders whatever icon it is given, and a small filled circle
+   * when given nothing: an empty 32px disc reads as a component that failed to
+   * load.
+   */
+  export type TimelineDotProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    tone?: TimelineDotTone
+    /**
+     * A mark on the badge's lower-right edge (a `PresenceDot` while that
+     * entry's author is here now), drawn over the badge so the columns do not
+     * move.
+     */
+    indicator?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { timelineDotVariants } from './timeline-variants.js'
+
+  let {
+    ref = $bindable(null),
+    tone,
+    indicator,
+    class: className,
+    children,
+    ...rest
+  }: TimelineDotProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="timeline-dot"
+  role="status"
+  class={cn(timelineDotVariants({ tone }), indicator ? 'relative' : null, className)}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <span class="size-2.5 rounded-full bg-current"></span>
+  {/if}
+  {#if indicator}
+    <span class="absolute right-0 bottom-0 flex">{@render indicator()}</span>
+  {/if}
+</div>

package/dist/components/data-display/timeline/timeline-dot.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { TimelineDotTone } from './timeline-variants.js';
+/**
+ * The badge. Renders whatever icon it is given, and a small filled circle
+ * when given nothing: an empty 32px disc reads as a component that failed to
+ * load.
+ */
+export type TimelineDotProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    tone?: TimelineDotTone;
+    /**
+     * A mark on the badge's lower-right edge (a `PresenceDot` while that
+     * entry's author is here now), drawn over the badge so the columns do not
+     * move.
+     */
+    indicator?: Snippet;
+};
+declare const TimelineDot: import("svelte").Component<TimelineDotProps, {}, "ref">;
+type TimelineDot = ReturnType<typeof TimelineDot>;
+export default TimelineDot;

package/dist/components/data-display/timeline/timeline-item.svelte

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`TimelineItem`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLLiAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type TimelineItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TimelineItemProps = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="timeline-item"
+  class={cn('grid items-center gap-x-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+</li>

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

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

package/dist/components/data-display/timeline/timeline-skeleton.svelte

@@ -0,0 +1,43 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`TimelineSkeleton`)
+  Diverged: spreads the rest onto the list, as every component does.
+-->
+<script lang="ts" module>
+  import type { TimelineProps } from './timeline.svelte'
+
+  /** A timeline's loading state: neutral pulsing badges and bars in place of text. */
+  export type TimelineSkeletonProps = Omit<TimelineProps, 'children'> & {
+    /** How many placeholder entries. */
+    count?: number
+  }
+</script>
+
+<script lang="ts">
+  import Skeleton from '../../feedback/skeleton/skeleton.svelte'
+  import Timeline from './timeline.svelte'
+  import TimelineConnector from './timeline-connector.svelte'
+  import TimelineContent from './timeline-content.svelte'
+  import TimelineDot from './timeline-dot.svelte'
+  import TimelineItem from './timeline-item.svelte'
+  import TimelineTitle from './timeline-title.svelte'
+
+  let { count = 3, ...rest }: TimelineSkeletonProps = $props()
+
+  const entries = $derived(Array.from({ length: count }, (_, index) => index))
+</script>
+
+<Timeline data-slot="timeline-skeleton" {...rest}>
+  {#each entries as index (index)}
+    <TimelineItem>
+      <TimelineDot tone="neutral" class="animate-pulse" />
+      {#if index < count - 1}
+        <TimelineConnector />
+      {/if}
+      <TimelineTitle><Skeleton class="h-3.5 w-40" /></TimelineTitle>
+      <TimelineContent>
+        <Skeleton class="h-3 w-56" />
+        <Skeleton class="h-3 w-32" />
+      </TimelineContent>
+    </TimelineItem>
+  {/each}
+</Timeline>

package/dist/components/data-display/timeline/timeline-skeleton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineProps } from './timeline.svelte';
+/** A timeline's loading state: neutral pulsing badges and bars in place of text. */
+export type TimelineSkeletonProps = Omit<TimelineProps, 'children'> & {
+    /** How many placeholder entries. */
+    count?: number;
+};
+declare const TimelineSkeleton: import("svelte").Component<TimelineSkeletonProps, {}, "">;
+type TimelineSkeleton = ReturnType<typeof TimelineSkeleton>;
+export default TimelineSkeleton;

package/dist/components/data-display/timeline/timeline-title.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`TimelineTitle`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** The row's heading. A `div`, not a `p`: the slot takes any children, a `Skeleton` among them, and a block inside a paragraph is invalid HTML. */
+  export type TimelineTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TimelineTitleProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="timeline-title"
+  class={cn(
+    'text-foreground col-start-3 col-end-4 row-start-1 row-end-1 mr-auto pl-3 text-sm font-semibold',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>