@poodle64/ui 2026.8.7

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	/**
+	 * What shows while the image is loading and after it fails. It is not a
+	 * decoration: an avatar whose source 404s is the ordinary case (a deleted
+	 * upload, an expired signed URL, an identity provider that serves no picture),
+	 * and this is the only thing standing between that and an empty circle.
+	 */
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn(
+		'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-xs font-medium',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from 'bits-ui';
+declare const AvatarFallback: import("svelte").Component<AvatarPrimitive.FallbackProps, {}, "ref">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

package/dist/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn('aspect-square size-full object-cover', className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar-image.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from 'bits-ui';
+declare const AvatarImage: import("svelte").Component<AvatarPrimitive.ImageProps, {}, "ref">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

package/dist/components/ui/avatar/avatar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	/**
+	 * The signed-in user's face, with a fallback that survives a broken image.
+	 *
+	 * It ships here because AppShell's own `identity` snippet needs it: the shell
+	 * defines the slot, so a consumer filling that slot should not have to keep a
+	 * private copy of a primitive to do it. In the app that reported this, the
+	 * avatar was the sole survivor of a hundred-file vendored folder — kept
+	 * verbatim, with a comment explaining it was a package gap — which is a copy
+	 * that can never receive an upstream fix.
+	 *
+	 * Root, Image and Fallback only. The group and badge variants in the upstream
+	 * registry had no consumer in any surveyed app, and an unused component is a
+	 * surface to keep correct for nobody.
+	 */
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	data-slot="avatar"
+	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar.svelte.d.ts

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

package/dist/components/ui/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+export { Root, Image, Fallback, Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback };

package/dist/components/ui/avatar/index.js

@@ -0,0 +1,6 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+export { Root, Image, Fallback, 
+//
+Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback };

package/dist/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive:
+					'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -0,0 +1,38 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/ui/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';

package/dist/components/ui/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants } from './badge.svelte';

package/dist/components/ui/bar-row/bar-row.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	// A labelled horizontal bar with a trailing value: a ranked-list row (a
+	// token-burn chart, a per-lane usage table) where a full StatCard or
+	// StatList row would be too heavy. `color` is a free CSS colour string
+	// rather than the shared Status vocabulary — real callers pick an
+	// arbitrary per-row colour (rank order, a per-series hue), not a health
+	// state.
+	let {
+		label,
+		value,
+		pct,
+		color = 'var(--ds-color-primary)',
+		labelWidth = '8.5rem',
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		label: string;
+		value: string | number;
+		pct: number;
+		color?: string;
+		labelWidth?: string;
+	} = $props();
+
+	const clampedPct = $derived(Math.max(0, Math.min(100, pct)));
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('grid items-center gap-[0.7rem] py-[0.28rem]', className)}
+	style="grid-template-columns: {labelWidth} 1fr 2.6rem"
+	{...restProps}
+>
+	<span class="text-foreground truncate text-sm">{label}</span>
+	<span class="bg-surface-3 h-2 overflow-hidden rounded-full">
+		<span class="block h-full rounded-full" style="width: {clampedPct}%; background: {color}"></span>
+	</span>
+	<span class="ds-tabular text-muted-foreground text-right font-mono text-sm">{value}</span>
+</div>

package/dist/components/ui/bar-row/bar-row.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    label: string;
+    value: string | number;
+    pct: number;
+    color?: string;
+    labelWidth?: string;
+};
+declare const BarRow: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type BarRow = ReturnType<typeof BarRow>;
+export default BarRow;

package/dist/components/ui/bar-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BarRow } from './bar-row.svelte';
+export { default } from './bar-row.svelte';

package/dist/components/ui/bar-row/index.js

@@ -0,0 +1,2 @@
+export { default as BarRow } from './bar-row.svelte';
+export { default } from './bar-row.svelte';

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				outline:
+					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				destructive:
+					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default:
+					'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+				xs: "h-7 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-9 gap-1.5 rounded-[min(var(--radius-md),12px)] px-3.5 text-[0.85rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
+				lg: 'h-11 gap-1.5 px-5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+				icon: 'size-10',
+				'icon-xs':
+					"size-7 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm':
+					'size-9 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-11'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/button/button.svelte.d.ts

@@ -0,0 +1,70 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/ui/button/index.js

@@ -0,0 +1,4 @@
+import Root, { buttonVariants } from './button.svelte';
+export { Root, 
+//
+Root as Button, buttonVariants };

package/dist/components/ui/card/card-action.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn(
+		'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-action.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn('px-4 group-data-[size=sm]/card:px-3', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn('text-muted-foreground text-sm', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn(
+		'bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	/**
+	 * A card title is not always a heading, so the default stays upstream
+	 * shadcn's `<div>`: a card whose title merely labels a figure would put a
+	 * phantom stop in the document outline, and a component cannot know which
+	 * kind it is being used as. Only the call site knows, so `level` is where it
+	 * says so — and then this is a real `<h1>`–`<h6>`.
+	 *
+	 * Omitting it changes nothing. That default is also what made the loss
+	 * invisible: the app this component replaced an `<h3>` in has dozens of card
+	 * titles that genuinely ARE the heading for their card's content, on pages
+	 * whose only other landmark is the page `<h1>`. Migrating onto this package
+	 * left those pages with an h1 and then nothing — one stop for an entire admin
+	 * dashboard when navigating by heading — with no error, no lint hit and no
+	 * visual difference to notice it by. Every app adopting this inherits the
+	 * same silence, which is why the escape hatch has to exist rather than the
+	 * consumer being told to hand-roll its own title.
+	 *
+	 * `level` is the heading LEVEL, never a size: the class list is identical in
+	 * both branches, so choosing `level={2}` moves the outline and not a single
+	 * pixel. Sizing stays where it already is, on `class`.
+	 */
+	let {
+		ref = $bindable(null),
+		class: className,
+		level,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<!--
+	One element expression rather than two branches. The requirement is that a
+	heading render byte-identically to the div, and the cheapest way to guarantee
+	that is to leave nowhere for the two to drift apart: the class list, the slot
+	marker and the rest props are written once and the tag name is the only thing
+	`level` touches.
+-->
+<svelte:element
+	this={level ? `h${level}` : 'div'}
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>