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

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

@@ -0,0 +1,7 @@
+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>>;
+declare const TimelineTitle: import("svelte").Component<TimelineTitleProps, {}, "ref">;
+type TimelineTitle = ReturnType<typeof TimelineTitle>;
+export default TimelineTitle;

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

@@ -0,0 +1,12 @@
+/**
+ * Origin: the React package 2.23.0 `timeline.tsx` (`timelineDotVariants`)
+ * Diverged: split out of the component file, as badge-variants.ts is. The
+ *   neutral badge is `bg-foreground/[0.07]` rather than React's `bg-muted`, which
+ *   vanished on the muted canvas; a foreground wash reads on the page and on a
+ *   card alike, as Skeleton's does. Other classes and the defaults unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const timelineDotVariants: (props?: ({
+    tone?: "neutral" | "primary" | "info" | "success" | "warning" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TimelineDotTone = NonNullable<VariantProps<typeof timelineDotVariants>['tone']>;

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

@@ -0,0 +1,34 @@
+/**
+ * Origin: the React package 2.23.0 `timeline.tsx` (`timelineDotVariants`)
+ * Diverged: split out of the component file, as badge-variants.ts is. The
+ *   neutral badge is `bg-foreground/[0.07]` rather than React's `bg-muted`, which
+ *   vanished on the muted canvas; a foreground wash reads on the page and on a
+ *   card alike, as Skeleton's does. Other classes and the defaults unchanged.
+ */
+import { cva } from 'class-variance-authority';
+export const timelineDotVariants = cva('col-start-2 col-end-3 row-start-1 row-end-1 flex size-8 shrink-0 items-center justify-center rounded-full [&>svg]:size-4', {
+    variants: {
+        /**
+         * Solid for the event that matters, soft for the rest.
+         *
+         * The soft variants are a 15% wash of the status colour with the icon at
+         * full strength, so a row reads as its status without a saturated 32px
+         * disc competing with the text beside it. 10% read as white on a white
+         * card: the wash has to survive being a 32px circle rather than a 15px
+         * dot. `primary` is deliberately solid: it marks the entry the reader is
+         * meant to land on first. Which is why these are not `TONE_SOFT_CLASS`,
+         * whose wash is 10%.
+         */
+        tone: {
+            primary: 'bg-primary text-primary-foreground',
+            neutral: 'bg-foreground/[0.07] text-muted-foreground',
+            info: 'bg-info/15 text-info',
+            success: 'bg-success/15 text-success',
+            warning: 'bg-warning/15 text-warning',
+            critical: 'bg-destructive/15 text-destructive',
+        },
+    },
+    defaultVariants: {
+        tone: 'primary',
+    },
+});

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

@@ -0,0 +1,38 @@
+<!--
+  Origin: the React package 2.23.0 `timeline.tsx` (`Timeline`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLOlAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A list of events, newest first by convention, each a badge, a title and a
+   * body joined by a vertical rule.
+   *
+   * A two-column grid rather than a flex row with an absolutely positioned
+   * rule. Column two holds the badge in row one and the connector in row two;
+   * column three holds the title in row one and the body in row two. The
+   * connector is `h-full` inside its own cell, so it stretches to whatever the
+   * body needs without anyone measuring anything. `items-center` on the row
+   * puts the badge on the title's centre line, which is why the title is its
+   * own grid child.
+   */
+  export type TimelineProps = WithElementRef<HTMLOlAttributes, HTMLOListElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: TimelineProps = $props()
+</script>
+
+<ol
+  bind:this={ref}
+  data-slot="timeline"
+  class={cn('grid [&>li]:grid-cols-[0_min-content_1fr]', className)}
+  {...rest}
+>
+  {@render children?.()}
+</ol>

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

@@ -0,0 +1,18 @@
+import type { HTMLOlAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A list of events, newest first by convention, each a badge, a title and a
+ * body joined by a vertical rule.
+ *
+ * A two-column grid rather than a flex row with an absolutely positioned
+ * rule. Column two holds the badge in row one and the connector in row two;
+ * column three holds the title in row one and the body in row two. The
+ * connector is `h-full` inside its own cell, so it stretches to whatever the
+ * body needs without anyone measuring anything. `items-center` on the row
+ * puts the badge on the title's centre line, which is why the title is its
+ * own grid child.
+ */
+export type TimelineProps = WithElementRef<HTMLOlAttributes, HTMLOListElement>;
+declare const Timeline: import("svelte").Component<TimelineProps, {}, "ref">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/data-display/tree-leaf/index.d.ts

@@ -0,0 +1 @@
+export { default as TreeLeaf, type TreeLeafProps } from './tree-leaf.svelte';

package/dist/components/data-display/tree-leaf/index.js

@@ -0,0 +1 @@
+export { default as TreeLeaf } from './tree-leaf.svelte';

package/dist/components/data-display/tree-leaf/tree-leaf.svelte

@@ -0,0 +1,87 @@
+<!--
+  Origin: the React package 2.23.0 `tree-leaf.tsx`
+  Diverged: `icon` is a snippet, `label` and `trailing` strings or snippets.
+    `mediaSize` `default` is `md`, the vocabulary's middle size.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLLiAttributes } from 'svelte/elements'
+
+  const STEM_CLASS = { middle: 'h-full', last: 'h-1/2' } as const
+  const MEDIA_SIZE_CLASS = { md: 'size-8', sm: 'size-6' } as const
+
+  /**
+   * One row of a nested list: a stem down its left edge, an elbow into the
+   * row, a media chip, a label, and an optional trailing figure.
+   *
+   * Named for what it renders rather than for a `Tree` family that does not
+   * exist: a caller composes a `<ul>` of these, because the uses that exist (a
+   * bundle's components, a recipe's ingredients) nest one level deep and never
+   * more.
+   */
+  export type TreeLeafProps = Omit<HTMLLiAttributes, 'children'> & {
+    /** `last` shortens the stem to half height, so it does not run past the final row. */
+    position?: keyof typeof STEM_CLASS
+    icon: Snippet
+    label: string | Snippet
+    trailing?: string | Snippet
+    mediaSize?: keyof typeof MEDIA_SIZE_CLASS
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    position = 'middle',
+    icon,
+    label,
+    trailing,
+    mediaSize = 'md',
+    class: className,
+    ...rest
+  }: TreeLeafProps = $props()
+</script>
+
+{#snippet text(value: string | Snippet)}
+  {#if typeof value === 'string'}
+    {value}
+  {:else}
+    {@render value()}
+  {/if}
+{/snippet}
+
+<li
+  data-slot="tree-leaf"
+  data-position={position}
+  class={cn('relative flex items-center gap-3 pl-6 pt-3', className)}
+  {...rest}
+>
+  <span
+    aria-hidden="true"
+    data-slot="tree-leaf-stem"
+    class={cn('absolute left-0 top-0 w-4 border-l', STEM_CLASS[position])}
+  ></span>
+  <span
+    aria-hidden="true"
+    data-slot="tree-leaf-elbow"
+    class="absolute left-0 top-1/2 w-4 -translate-y-px border-t"
+  ></span>
+  <div
+    data-slot="tree-leaf-media"
+    class={cn(
+      "flex shrink-0 items-center justify-center rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+      MEDIA_SIZE_CLASS[mediaSize],
+    )}
+  >
+    {@render icon()}
+  </div>
+  <!-- min-w-0 with flex-1, or a long label pushes `trailing` out of the row: a
+       clipped name beside its figure beats a full name beside nothing. -->
+  <span data-slot="tree-leaf-label" class="min-w-0 flex-1 truncate text-sm"
+    >{@render text(label)}</span
+  >
+  {#if trailing}
+    <span data-slot="tree-leaf-trailing" class="shrink-0">{@render text(trailing)}</span>
+  {/if}
+</li>

package/dist/components/data-display/tree-leaf/tree-leaf.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLiAttributes } from 'svelte/elements';
+declare const STEM_CLASS: {
+    readonly middle: "h-full";
+    readonly last: "h-1/2";
+};
+declare const MEDIA_SIZE_CLASS: {
+    readonly md: "size-8";
+    readonly sm: "size-6";
+};
+/**
+ * One row of a nested list: a stem down its left edge, an elbow into the
+ * row, a media chip, a label, and an optional trailing figure.
+ *
+ * Named for what it renders rather than for a `Tree` family that does not
+ * exist: a caller composes a `<ul>` of these, because the uses that exist (a
+ * bundle's components, a recipe's ingredients) nest one level deep and never
+ * more.
+ */
+export type TreeLeafProps = Omit<HTMLLiAttributes, 'children'> & {
+    /** `last` shortens the stem to half height, so it does not run past the final row. */
+    position?: keyof typeof STEM_CLASS;
+    icon: Snippet;
+    label: string | Snippet;
+    trailing?: string | Snippet;
+    mediaSize?: keyof typeof MEDIA_SIZE_CLASS;
+};
+declare const TreeLeaf: import("svelte").Component<TreeLeafProps, {}, "">;
+type TreeLeaf = ReturnType<typeof TreeLeaf>;
+export default TreeLeaf;

package/dist/components/feedback/alert/alert-action.svelte

@@ -0,0 +1,36 @@
+<!--
+  Origin: the React package 2.23.0 `alert.tsx` (`AlertAction`), itself shadcn/ui new-york `alert`
+  Svelte: shadcn-svelte `alert`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * What the alert asks the reader to do: one button or a short row of them. On
+   * the right, centred across the title and description, from `sm`; below the
+   * text on a phone, where a third column would squeeze the sentence.
+   */
+  export type AlertActionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: AlertActionProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-action"
+  class={cn(
+    'col-start-2 mt-2 flex flex-wrap items-center gap-2 justify-self-start',
+    'sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-0 sm:ml-4 sm:self-center sm:justify-self-end',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/alert/alert-action.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * What the alert asks the reader to do: one button or a short row of them. On
+ * the right, centred across the title and description, from `sm`; below the
+ * text on a phone, where a third column would squeeze the sentence.
+ */
+export type AlertActionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const AlertAction: import("svelte").Component<AlertActionProps, {}, "ref">;
+type AlertAction = ReturnType<typeof AlertAction>;
+export default AlertAction;

package/dist/components/feedback/alert/alert-description.svelte

@@ -0,0 +1,38 @@
+<!--
+  Origin: the React package 2.23.0 `alert.tsx` (`AlertDescription`), itself shadcn/ui new-york `alert`
+  Svelte: shadcn-svelte `alert`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A block rather than a grid: as a grid, an inline `<strong>` became its own row.
+   */
+  export type AlertDescriptionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: AlertDescriptionProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-description"
+  class={cn(
+    'text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed [&>p+p]:mt-2 [&>ul]:mt-1 [&_b]:text-foreground [&_strong]:text-foreground',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/alert/alert-description.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A block rather than a grid: as a grid, an inline `<strong>` became its own row.
+ */
+export type AlertDescriptionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const AlertDescription: import("svelte").Component<AlertDescriptionProps, {}, "ref">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;

package/dist/components/feedback/alert/alert-title.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `alert.tsx` (`AlertTitle`), itself shadcn/ui new-york `alert`
+  Svelte: shadcn-svelte `alert`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * One clamped line: anything that needs a second line belongs in the description.
+   */
+  export type AlertTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: AlertTitleProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-title"
+  class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/alert/alert-title.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * One clamped line: anything that needs a second line belongs in the description.
+ */
+export type AlertTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const AlertTitle: import("svelte").Component<AlertTitleProps, {}, "ref">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;

package/dist/components/feedback/alert/alert-variants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Origin: the React package 2.23.0 `alert.tsx` (`alertVariants`), itself shadcn/ui new-york `alert`
+ * Diverged: split out of the component file, as badge-variants.ts is. The info
+ *   icon's dark step reads mise's `--color-info-400` role ramp, where React read
+ *   its own `--color-blue-400`. Everything else unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const alertVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;

package/dist/components/feedback/alert/alert-variants.js

@@ -0,0 +1,26 @@
+/**
+ * Origin: the React package 2.23.0 `alert.tsx` (`alertVariants`), itself shadcn/ui new-york `alert`
+ * Diverged: split out of the component file, as badge-variants.ts is. The info
+ *   icon's dark step reads mise's `--color-info-400` role ramp, where React read
+ *   its own `--color-blue-400`. Everything else unchanged.
+ */
+import { cva } from 'class-variance-authority';
+export const alertVariants = cva([
+    'relative w-full rounded-lg px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start text-foreground [&>svg]:size-4 [&>svg]:translate-y-0.5',
+    // A third column for `AlertAction`, from `sm` and only when there is one,
+    // so an alert without an action keeps its two columns exactly.
+    'sm:has-[>[data-slot=alert-action]]:grid-cols-[0_1fr_auto] sm:has-[>svg]:has-[>[data-slot=alert-action]]:grid-cols-[calc(var(--spacing)*4)_1fr_auto]',
+], {
+    variants: {
+        variant: {
+            default: 'bg-card border [&>svg]:text-muted-foreground',
+            info: 'bg-info-soft [&>svg]:text-info dark:[&>svg]:text-[var(--color-info-400)]',
+            success: 'bg-success-soft [&>svg]:text-success dark:[&>svg]:text-[var(--color-success-400)]',
+            warning: 'bg-warning-soft [&>svg]:text-warning dark:[&>svg]:text-[var(--color-warning-400)]',
+            destructive: 'bg-destructive-soft [&>svg]:text-destructive',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});

package/dist/components/feedback/alert/alert.svelte

@@ -0,0 +1,38 @@
+<!--
+  Origin: the React package 2.23.0 `alert.tsx` (`Alert`), itself shadcn/ui new-york `alert`
+  Svelte: shadcn-svelte `alert`
+  Diverged: none beyond the port. The variants live in alert-variants.ts.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { AlertVariant } from './alert-variants.js'
+
+  /**
+   * Status is the surface and the icon; the words stay in ink. Red body text
+   * reads as the message being an error rather than being about one. The
+   * layout has an icon column only when there is an icon, and a third column
+   * for `AlertAction` from `sm`.
+   */
+  export type AlertProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { alertVariants } from './alert-variants.js'
+
+  let { ref = $bindable(null), variant, class: className, children, ...rest }: AlertProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert"
+  role="alert"
+  class={cn(alertVariants({ variant }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/alert/alert.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { AlertVariant } from './alert-variants.js';
+/**
+ * Status is the surface and the icon; the words stay in ink. Red body text
+ * reads as the message being an error rather than being about one. The
+ * layout has an icon column only when there is an icon, and a third column
+ * for `AlertAction` from `sm`.
+ */
+export type AlertProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+};
+declare const Alert: import("svelte").Component<AlertProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/feedback/alert/index.d.ts

@@ -0,0 +1,5 @@
+export { type AlertProps, default as Alert } from './alert.svelte';
+export { type AlertActionProps, default as AlertAction } from './alert-action.svelte';
+export { type AlertDescriptionProps, default as AlertDescription } from './alert-description.svelte';
+export { type AlertTitleProps, default as AlertTitle } from './alert-title.svelte';
+export { type AlertVariant, alertVariants } from './alert-variants.js';

package/dist/components/feedback/alert/index.js

@@ -0,0 +1,5 @@
+export { default as Alert } from './alert.svelte';
+export { default as AlertAction } from './alert-action.svelte';
+export { default as AlertDescription } from './alert-description.svelte';
+export { default as AlertTitle } from './alert-title.svelte';
+export { alertVariants } from './alert-variants.js';

package/dist/components/feedback/empty/empty-content.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `empty.tsx` (`EmptyContent`), itself shadcn/ui new-york `empty`
+  Svelte: shadcn-svelte `empty`
+  Diverged: none beyond the port. The React divergences from shadcn carry over.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type EmptyContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: EmptyContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-content"
+  class={cn(
+    'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/empty/empty-content.svelte.d.ts

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

package/dist/components/feedback/empty/empty-description.svelte

@@ -0,0 +1,35 @@
+<!--
+  Origin: the React package 2.23.0 `empty.tsx` (`EmptyDescription`), itself shadcn/ui new-york `empty`
+  Svelte: shadcn-svelte `empty`
+  Diverged: none beyond the port. The React divergences from shadcn carry over.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type EmptyDescriptionProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: EmptyDescriptionProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-description"
+  class={cn(
+    'text-muted-foreground [&>a:hover]:text-primary text-sm [&>a]:underline [&>a]:underline-offset-4',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/empty/empty-description.svelte.d.ts

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

package/dist/components/feedback/empty/empty-header.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `empty.tsx` (`EmptyHeader`), itself shadcn/ui new-york `empty`
+  Svelte: shadcn-svelte `empty`
+  Diverged: none beyond the port. The React divergences from shadcn carry over.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type EmptyHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: EmptyHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-header"
+  class={cn('flex max-w-md flex-col items-center gap-2 text-center', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/feedback/empty/empty-header.svelte.d.ts

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

package/dist/components/feedback/empty/empty-media.svelte

@@ -0,0 +1,43 @@
+<!--
+  Origin: the React package 2.23.0 `empty.tsx` (`EmptyMedia`), itself shadcn/ui new-york `empty`
+  Svelte: shadcn-svelte `empty`
+  Diverged: none beyond the port. The React divergences from shadcn carry over.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { EmptyMediaVariant } from './empty-variants.js'
+
+  /**
+   * `icon` is a ringed circle on the page's own surface rather than a filled
+   * square: a frame around the glyph, which keeps a large empty panel from
+   * looking like a broken card.
+   */
+  export type EmptyMediaProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: EmptyMediaVariant
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { emptyMediaVariants } from './empty-variants.js'
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    class: className,
+    children,
+    ...rest
+  }: EmptyMediaProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-icon"
+  data-variant={variant}
+  class={cn(emptyMediaVariants({ variant }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>