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

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

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

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

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `collapsible.tsx` (`CollapsibleContent`), itself shadcn/ui new-york `collapsible`
+  Svelte: shadcn-svelte `collapsible`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui'
+
+  export type CollapsibleContentProps = CollapsiblePrimitive.ContentProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: CollapsibleContentProps = $props()
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...rest} />

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

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+export type CollapsibleContentProps = CollapsiblePrimitive.ContentProps;
+declare const CollapsibleContent: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/components/layout/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `collapsible.tsx` (`CollapsibleTrigger`), itself shadcn/ui new-york `collapsible`
+  Svelte: shadcn-svelte `collapsible`
+  Diverged: `asChild` is bits-ui's `child` snippet.
+-->
+<script lang="ts" module>
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui'
+
+  export type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: CollapsibleTriggerProps = $props()
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...rest} />

package/dist/components/layout/collapsible/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+export type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps;
+declare const CollapsibleTrigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

package/dist/components/layout/collapsible/collapsible.svelte

@@ -0,0 +1,22 @@
+<!--
+  Origin: the React package 2.23.0 `collapsible.tsx` (`Collapsible`), itself shadcn/ui new-york `collapsible`
+  Svelte: shadcn-svelte `collapsible`
+  Diverged: bits-ui Collapsible for Radix, with `bind:open`; Radix's
+    `defaultOpen` is the initial value of `open`.
+-->
+<script lang="ts" module>
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui'
+
+  /**
+   * Unstyled: the primitive holds open state and nothing else. `AsideCard`
+   * builds a real card on top of it; reach for `Collapsible` directly when the
+   * surface around it is not a card.
+   */
+  export type CollapsibleProps = CollapsiblePrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), open = $bindable(false), ...rest }: CollapsibleProps = $props()
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...rest} />

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

@@ -0,0 +1,10 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+/**
+ * Unstyled: the primitive holds open state and nothing else. `AsideCard`
+ * builds a real card on top of it; reach for `Collapsible` directly when the
+ * surface around it is not a card.
+ */
+export type CollapsibleProps = CollapsiblePrimitive.RootProps;
+declare const Collapsible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

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

@@ -0,0 +1,3 @@
+export { type CollapsibleProps, default as Collapsible } from './collapsible.svelte';
+export { type CollapsibleContentProps, default as CollapsibleContent, } from './collapsible-content.svelte';
+export { type CollapsibleTriggerProps, default as CollapsibleTrigger, } from './collapsible-trigger.svelte';

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

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './collapsible.svelte';
+export { default as CollapsibleContent, } from './collapsible-content.svelte';
+export { default as CollapsibleTrigger, } from './collapsible-trigger.svelte';

package/dist/components/layout/page-header/index.d.ts

@@ -0,0 +1 @@
+export { default as PageHeader, type PageHeaderProps } from './page-header.svelte';

package/dist/components/layout/page-header/index.js

@@ -0,0 +1 @@
+export { default as PageHeader } from './page-header.svelte';

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

@@ -0,0 +1,118 @@
+<!--
+  Origin: the React package 2.23.0 `page-header.tsx`
+  Diverged: the ReactNode slots are snippets; `description` and `eyebrow` also
+    take a plain string (R3-4). Adds `data-slot="page-header"`.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  /**
+   * Which affordance a page carries, by what kind of page it is:
+   *
+   * - list: nothing above the title; the title is the section's name.
+   * - create / edit: `backLink` (the way out); the title is what you are doing.
+   * - detail: `breadcrumb`, to the parent or carrying the leaf; the title is
+   *   the entity, or its kind and the entity, never the crumb repeated.
+   * - multi-step flow: `breadcrumb` carrying the leaf, and no title.
+   */
+  export interface PageHeaderProps {
+    /**
+     * Omit it when the trail carries the leaf and repeating it would add
+     * nothing. Without a title there is no `h1`, so the body owns the heading.
+     */
+    title?: string
+    description?: string | Snippet
+    /** The trail of ancestors, above the title. Pass this or `backLink`, not both. */
+    breadcrumb?: Snippet
+    /** A way back out, where the breadcrumb would be: the create-and-edit shape. */
+    backLink?: Snippet
+    /** A short uppercase label naming the kind of page when the title cannot. */
+    eyebrow?: string | Snippet
+    /** Inline with the title: a switcher, a status badge. */
+    titleAccessory?: Snippet
+    /** One line, capped at `max-w-3xl`, with the whole title as a tooltip. For titles someone else wrote. */
+    truncateTitle?: boolean
+    /** The right-hand action cluster. */
+    actions?: Snippet
+    class?: string
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    title,
+    description,
+    breadcrumb,
+    backLink,
+    eyebrow,
+    titleAccessory,
+    truncateTitle = false,
+    actions,
+    class: className,
+  }: PageHeaderProps = $props()
+
+  const above = $derived(backLink ?? breadcrumb)
+</script>
+
+{#snippet text(content: string | Snippet)}
+  {#if typeof content === 'string'}
+    {content}
+  {:else}
+    {@render content()}
+  {/if}
+{/snippet}
+
+{#snippet pageTitle(value: string)}
+  <h1
+    title={truncateTitle ? value : undefined}
+    class={cn(
+      'font-heading text-2xl font-bold tracking-tight lg:text-3xl',
+      truncateTitle && 'max-w-3xl min-w-0 truncate',
+    )}
+  >
+    {value}
+  </h1>
+{/snippet}
+
+<div data-slot="page-header" class={cn('flex min-w-0 flex-col gap-2', className)}>
+  {@render above?.()}
+
+  {#if eyebrow}
+    <p class="text-muted-foreground text-xs font-medium tracking-widest uppercase">
+      {@render text(eyebrow)}
+    </p>
+  {/if}
+
+  <!-- Stacked on a narrow screen and a row from `lg`: actions drop below the title rather than squeezing it. -->
+  <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+    <div class="min-w-0 flex-1">
+      {#if title && titleAccessory}
+        <!-- A truncated title gives way to its accessory; an untruncated one wraps. -->
+        <div
+          class={cn('flex items-center gap-3', truncateTitle ? 'min-w-0 flex-nowrap' : 'flex-wrap')}
+        >
+          {@render pageTitle(title)}
+          {@render titleAccessory()}
+        </div>
+      {:else if title}
+        {@render pageTitle(title)}
+      {:else}
+        <!-- An accessory with no title still has a place: a badge beside a trail. -->
+        {@render titleAccessory?.()}
+      {/if}
+
+      {#if description}
+        <!-- Clamped on a phone: three lines of context before the first control is not context. -->
+        <div class="text-muted-foreground mt-1 line-clamp-2 text-sm sm:line-clamp-none">
+          {@render text(description)}
+        </div>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+/**
+ * Which affordance a page carries, by what kind of page it is:
+ *
+ * - list: nothing above the title; the title is the section's name.
+ * - create / edit: `backLink` (the way out); the title is what you are doing.
+ * - detail: `breadcrumb`, to the parent or carrying the leaf; the title is
+ *   the entity, or its kind and the entity, never the crumb repeated.
+ * - multi-step flow: `breadcrumb` carrying the leaf, and no title.
+ */
+export interface PageHeaderProps {
+    /**
+     * Omit it when the trail carries the leaf and repeating it would add
+     * nothing. Without a title there is no `h1`, so the body owns the heading.
+     */
+    title?: string;
+    description?: string | Snippet;
+    /** The trail of ancestors, above the title. Pass this or `backLink`, not both. */
+    breadcrumb?: Snippet;
+    /** A way back out, where the breadcrumb would be: the create-and-edit shape. */
+    backLink?: Snippet;
+    /** A short uppercase label naming the kind of page when the title cannot. */
+    eyebrow?: string | Snippet;
+    /** Inline with the title: a switcher, a status badge. */
+    titleAccessory?: Snippet;
+    /** One line, capped at `max-w-3xl`, with the whole title as a tooltip. For titles someone else wrote. */
+    truncateTitle?: boolean;
+    /** The right-hand action cluster. */
+    actions?: Snippet;
+    class?: string;
+}
+declare const PageHeader: import("svelte").Component<PageHeaderProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/layout/page-layout/index.d.ts

@@ -0,0 +1 @@
+export { default as PageLayout, type PageLayoutProps } from './page-layout.svelte';

package/dist/components/layout/page-layout/index.js

@@ -0,0 +1 @@
+export { default as PageLayout } from './page-layout.svelte';

package/dist/components/layout/page-layout/page-layout.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `page-layout.tsx`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The padded column every routed page sits in, so the gutter and the vertical
+   * rhythm are decided once rather than per route.
+   */
+  export type PageLayoutProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: PageLayoutProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="page-layout"
+  class={cn('flex flex-col gap-4 py-4 px-4 md:gap-6 md:py-6 lg:px-6', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/layout/page-layout/page-layout.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The padded column every routed page sits in, so the gutter and the vertical
+ * rhythm are decided once rather than per route.
+ */
+export type PageLayoutProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const PageLayout: import("svelte").Component<PageLayoutProps, {}, "ref">;
+type PageLayout = ReturnType<typeof PageLayout>;
+export default PageLayout;

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

@@ -0,0 +1 @@
+export { default as Separator, type SeparatorProps } from './separator.svelte';

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

@@ -0,0 +1 @@
+export { default as Separator } from './separator.svelte';

package/dist/components/layout/separator/separator.svelte

@@ -0,0 +1,34 @@
+<!--
+  Origin: the React package 2.23.0 `separator.tsx`, itself shadcn/ui new-york `separator`
+  Svelte: shadcn-svelte `separator`
+  Diverged: unaudited, as in the React package. bits-ui Separator for Radix Separator.
+-->
+<script lang="ts" module>
+  import { Separator as SeparatorPrimitive } from 'bits-ui'
+
+  export type SeparatorProps = SeparatorPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    orientation = 'horizontal',
+    decorative = true,
+    ref = $bindable(null),
+    class: className,
+    ...rest
+  }: SeparatorProps = $props()
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  data-slot="separator"
+  {decorative}
+  {orientation}
+  class={cn(
+    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+    className,
+  )}
+  {...rest}
+/>

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

@@ -0,0 +1,5 @@
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+export type SeparatorProps = SeparatorPrimitive.RootProps;
+declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

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

@@ -0,0 +1 @@
+export { default as SummaryCard, type SummaryCardProps } from './summary-card.svelte';

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

@@ -0,0 +1 @@
+export { default as SummaryCard } from './summary-card.svelte';

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

@@ -0,0 +1,51 @@
+<!--
+  Origin: the React package 2.23.0 `summary-card.tsx`
+  Diverged: React's SectionTitle is CardTitle's `icon`, as the structure spec
+    folded it. `icon` and `action` are snippets. Spreads the rest onto the card,
+    as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  import type { CardProps } from '../card/card.svelte'
+
+  /**
+   * A read-only account of what one step produced.
+   *
+   * Read-only is the whole idea. Every field shown here is owned by somewhere
+   * else (an earlier step of a builder, or a server that has already acted),
+   * and editing in two places is how the two drift apart. Whatever way back
+   * exists goes in `action` and nowhere else.
+   *
+   * `h-full`, so a row of these lines up when one card has more fields than
+   * its neighbours.
+   */
+  export type SummaryCardProps = Omit<CardProps, 'title' | 'children'> & {
+    icon: Snippet
+    title: string
+    /** The way back to where these fields are edited, if there is one. */
+    action?: Snippet
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Card from '../card/card.svelte'
+  import CardAction from '../card/card-action.svelte'
+  import CardContent from '../card/card-content.svelte'
+  import CardHeader from '../card/card-header.svelte'
+  import CardTitle from '../card/card-title.svelte'
+
+  let { icon, title, action, class: className, children, ...rest }: SummaryCardProps = $props()
+</script>
+
+<Card class={cn('h-full gap-4', className)} {...rest}>
+  <CardHeader>
+    <CardTitle {icon}>{title}</CardTitle>
+    {#if action}
+      <CardAction>{@render action()}</CardAction>
+    {/if}
+  </CardHeader>
+  <CardContent stack="sm">{@render children()}</CardContent>
+</Card>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { CardProps } from '../card/card.svelte';
+/**
+ * A read-only account of what one step produced.
+ *
+ * Read-only is the whole idea. Every field shown here is owned by somewhere
+ * else (an earlier step of a builder, or a server that has already acted),
+ * and editing in two places is how the two drift apart. Whatever way back
+ * exists goes in `action` and nowhere else.
+ *
+ * `h-full`, so a row of these lines up when one card has more fields than
+ * its neighbours.
+ */
+export type SummaryCardProps = Omit<CardProps, 'title' | 'children'> & {
+    icon: Snippet;
+    title: string;
+    /** The way back to where these fields are edited, if there is one. */
+    action?: Snippet;
+    children: Snippet;
+};
+declare const SummaryCard: import("svelte").Component<SummaryCardProps, {}, "">;
+type SummaryCard = ReturnType<typeof SummaryCard>;
+export default SummaryCard;

package/dist/components/navigation/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,38 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`BreadcrumbEllipsis`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * Stands in for crumbs dropped from the middle of a long trail.
+   */
+  export type BreadcrumbEllipsisProps = WithElementRef<
+    HTMLAttributes<HTMLSpanElement>,
+    HTMLSpanElement
+  >
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: BreadcrumbEllipsisProps = $props()
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-ellipsis"
+  aria-hidden="true"
+  class={cn('shrink-0 select-none', className)}
+  {...rest}
+>
+  …<span class="sr-only">More</span>
+</span>

package/dist/components/navigation/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * Stands in for crumbs dropped from the middle of a long trail.
+ */
+export type BreadcrumbEllipsisProps = WithElementRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+declare const BreadcrumbEllipsis: import("svelte").Component<BreadcrumbEllipsisProps, {}, "ref">;
+type BreadcrumbEllipsis = ReturnType<typeof BreadcrumbEllipsis>;
+export default BreadcrumbEllipsis;

package/dist/components/navigation/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`BreadcrumbItem`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLLiAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * `min-w-0` so a long crumb can truncate rather than push the trail past the
+   * edge. Crumbs that must never shrink (the root, the leaf) say so with `shrink-0`.
+   */
+  export type BreadcrumbItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: BreadcrumbItemProps = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-item"
+  class={cn('flex min-w-0 items-center gap-2', className)}
+  {...rest}
+>
+  {@render children?.()}
+</li>

package/dist/components/navigation/breadcrumb/breadcrumb-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLLiAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * `min-w-0` so a long crumb can truncate rather than push the trail past the
+ * edge. Crumbs that must never shrink (the root, the leaf) say so with `shrink-0`.
+ */
+export type BreadcrumbItemProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>;
+declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "ref">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/components/navigation/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,42 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`BreadcrumbLink`)
+  Diverged: React's `asChild` becomes a `child` snippet that receives the
+    link's props, for a router's own link component. A SvelteKit app needs only
+    `href`, since its links are plain anchors.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type BreadcrumbLinkProps = WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
+    /** Renders your own link with these props instead of an anchor. */
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    href,
+    child,
+    class: className,
+    children,
+    ...rest
+  }: BreadcrumbLinkProps = $props()
+
+  const linkProps = $derived({
+    'data-slot': 'breadcrumb-link',
+    class: cn('hover:text-foreground truncate transition-colors', className),
+    ...rest,
+  })
+</script>
+
+{#if child}
+  {@render child({ props: { ...linkProps, href } })}
+{:else}
+  <a bind:this={ref} {href} {...linkProps}>{@render children?.()}</a>
+{/if}

package/dist/components/navigation/breadcrumb/breadcrumb-link.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type BreadcrumbLinkProps = WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
+    /** Renders your own link with these props instead of an anchor. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const BreadcrumbLink: import("svelte").Component<BreadcrumbLinkProps, {}, "ref">;
+type BreadcrumbLink = ReturnType<typeof BreadcrumbLink>;
+export default BreadcrumbLink;

package/dist/components/navigation/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`BreadcrumbList`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLOlAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type BreadcrumbListProps = WithElementRef<HTMLOlAttributes, HTMLOListElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: BreadcrumbListProps = $props()
+</script>
+
+<ol
+  bind:this={ref}
+  data-slot="breadcrumb-list"
+  class={cn('text-muted-foreground flex min-w-0 items-center gap-2 text-sm', className)}
+  {...rest}
+>
+  {@render children?.()}
+</ol>

package/dist/components/navigation/breadcrumb/breadcrumb-list.svelte.d.ts

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

package/dist/components/navigation/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,31 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`BreadcrumbPage`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The leaf. Not a link, because it points at where you already are:
+   * `aria-current="page"` on plain text, not a link that refuses to be followed.
+   */
+  export type BreadcrumbPageProps = WithElementRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: BreadcrumbPageProps = $props()
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-page"
+  aria-current="page"
+  class={cn('text-foreground truncate', className)}
+  {...rest}
+>
+  {@render children?.()}
+</span>