@poodle64/ui 2026.10.16 → 2026.10.18

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

@@ -3,6 +3,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '../../../utils.js';
 	import InfoTip from '../info-tip/info-tip.svelte';
+	import Breadcrumbs, { type BreadcrumbItem } from '../breadcrumbs/breadcrumbs.svelte';
 
 	/**
 	 * The one page-title pattern for every route. `subtitle` is a short, single
@@ -23,10 +24,11 @@
 	 * the drift this package exists to end. One component, one spacing rhythm,
 	 * two shapes.
 	 *
-	 * The trail itself stays the app's, as a snippet: a breadcrumb trail is made
-	 * of routed links, and a package with no SvelteKit runtime of its own cannot
-	 * own those (the same reasoning that makes AppShell take `currentPath` as a
-	 * prop rather than importing `$app/state`).
+	 * The trail is a list of steps (`BreadcrumbItem[]`), drawn by Breadcrumbs.
+	 * A snippet is still accepted for a trail that is not a list of links (a
+	 * record switcher in the trail's place), but a list is the default: three
+	 * apps wrote the same chevron trail by hand, one behind a 28-call-site
+	 * wrapper that existed only to turn this snippet into an array.
 	 *
 	 * `icon` and `meta` are snippets for the same reason and earn their place the
 	 * same way `breadcrumbs` did: three apps had hand-rolled the meta row and two
@@ -50,8 +52,8 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		/** A short kicker above the title. Use this OR `breadcrumbs`, not both. */
 		eyebrow?: string;
-		/** The trail above the title — the app's own routed links. */
-		breadcrumbs?: Snippet;
+		/** The trail above the title: its steps, or a snippet for a trail that is not links. */
+		breadcrumbs?: BreadcrumbItem[] | Snippet;
 		/** The glyph alone. The tinted square around it is this component's. */
 		icon?: Snippet;
 		/** Omit for a header that is a breadcrumb bar with actions. */
@@ -66,6 +68,7 @@
 
 <div
 	bind:this={ref}
+	data-slot="page-header"
 	class={cn('mb-6 flex flex-wrap items-start justify-between gap-4', className)}
 	{...restProps}
 >
@@ -83,10 +86,12 @@
 			</span>
 		{/if}
 		<div class="min-w-0">
-			{#if breadcrumbs}
+			{#if typeof breadcrumbs === 'function'}
 				<div class="text-muted-foreground mb-1.5 flex min-w-0 items-center text-sm">
 					{@render breadcrumbs()}
 				</div>
+			{:else if breadcrumbs?.length}
+				<Breadcrumbs items={breadcrumbs} class="mb-1.5" />
 			{/if}
 			{#if eyebrow}
 				<div class="text-primary text-2xs tracking-eyebrow mb-1 font-medium uppercase">

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

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
+import { type BreadcrumbItem } from '../breadcrumbs/breadcrumbs.svelte';
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /** A short kicker above the title. Use this OR `breadcrumbs`, not both. */
     eyebrow?: string;
-    /** The trail above the title — the app's own routed links. */
-    breadcrumbs?: Snippet;
+    /** The trail above the title: its steps, or a snippet for a trail that is not links. */
+    breadcrumbs?: BreadcrumbItem[] | Snippet;
     /** The glyph alone. The tinted square around it is this component's. */
     icon?: Snippet;
     /** Omit for a header that is a breadcrumb bar with actions. */

package/dist/components/ui/page-section/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PageSection } from './page-section.svelte';
+export { default } from './page-section.svelte';

package/dist/components/ui/page-section/index.js

@@ -0,0 +1,2 @@
+export { default as PageSection } from './page-section.svelte';
+export { default } from './page-section.svelte';

package/dist/components/ui/page-section/page-section.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * A section of a page, under its PageHeader: a heading, an optional line of
+	 * explanation, trailing actions, and the section's content at one distance
+	 * below them.
+	 *
+	 * One app had five recipes for this one role, from an 11px uppercase kicker
+	 * to a 20px display heading, and each page spaced its content from the
+	 * heading differently. The heading and the gap under it are this
+	 * component's, because those are the halves that drift.
+	 *
+	 * Level 2 is a section, in the display face one step under the page title.
+	 * Level 3 is a subsection, in the body face at a Panel title's size, so a
+	 * titled card and a subsection read as the same rank. There is no uppercase
+	 * kicker form: a small caps label above content is the column head of a
+	 * table or a nav group, never a heading.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		title,
+		level = 2,
+		description,
+		count,
+		actions,
+		children,
+		id,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title'> & {
+		title: string;
+		/** 2, a section of the page; 3, a section within one. */
+		level?: 2 | 3;
+		/** A sentence or two under the heading. It wraps. */
+		description?: string;
+		/** How many things the section holds, set beside the heading. */
+		count?: number;
+		/** Controls for the section, trailing the heading. */
+		actions?: Snippet;
+		children?: Snippet;
+		/** The heading's id, for a link to the section. One is generated otherwise. */
+		id?: string;
+	} = $props();
+
+	const fallbackId = $props.id();
+	const headingId = $derived(id ?? `section-${fallbackId}`);
+</script>
+
+<section
+	bind:this={ref}
+	aria-labelledby={headingId}
+	data-slot="page-section"
+	class={cn('flex min-w-0 flex-col', level === 2 ? 'gap-4' : 'gap-3', className)}
+	{...restProps}
+>
+	<!-- Actions share the heading's row, so on a phone they stay beside the
+	     heading rather than dropping under the description. -->
+	<header class="flex min-w-0 flex-col gap-1">
+		<div class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2">
+			<svelte:element
+				this={`h${level}`}
+				id={headingId}
+				class={cn(
+					'flex min-w-0 items-baseline gap-2 scroll-mt-4 font-semibold',
+					level === 2
+						? 'font-display text-section tracking-[var(--ds-font-display-tracking,-0.015em)]'
+						: 'text-body leading-tight tracking-tight'
+				)}
+			>
+				<span class="min-w-0">{title}</span>
+				{#if count !== undefined}
+					<span
+						class="text-muted-foreground font-sans text-sm font-normal tracking-normal tabular-nums"
+						>{count}</span
+					>
+				{/if}
+			</svelte:element>
+			{#if actions}
+				<div class="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+		{#if description}
+			<p class="text-muted-foreground ds-measure text-sm" data-measure="prose">{description}</p>
+		{/if}
+	</header>
+	{@render children?.()}
+</section>

package/dist/components/ui/page-section/page-section.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+     * A section of a page, under its PageHeader: a heading, an optional line of
+     * explanation, trailing actions, and the section's content at one distance
+     * below them.
+     *
+     * One app had five recipes for this one role, from an 11px uppercase kicker
+     * to a 20px display heading, and each page spaced its content from the
+     * heading differently. The heading and the gap under it are this
+     * component's, because those are the halves that drift.
+     *
+     * Level 2 is a section, in the display face one step under the page title.
+     * Level 3 is a subsection, in the body face at a Panel title's size, so a
+     * titled card and a subsection read as the same rank. There is no uppercase
+     * kicker form: a small caps label above content is the column head of a
+     * table or a nav group, never a heading.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title'> & {
+    title: string;
+    /** 2, a section of the page; 3, a section within one. */
+    level?: 2 | 3;
+    /** A sentence or two under the heading. It wraps. */
+    description?: string;
+    /** How many things the section holds, set beside the heading. */
+    count?: number;
+    /** Controls for the section, trailing the heading. */
+    actions?: Snippet;
+    children?: Snippet;
+    /** The heading's id, for a link to the section. One is generated otherwise. */
+    id?: string;
+};
+declare const PageSection: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

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

@@ -0,0 +1,13 @@
+import Root from './sheet.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Body from './sheet-body.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { sheetVariants, type SheetSide } from './sheet-content.svelte';
+export { Root, Trigger, Close, Portal, Overlay, Content, Header, Body, Footer, Title, Description, Root as Sheet, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Body as SheetBody, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

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

@@ -0,0 +1,15 @@
+import Root from './sheet.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Body from './sheet-body.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { sheetVariants } from './sheet-content.svelte';
+export { Root, Trigger, Close, Portal, Overlay, Content, Header, Body, Footer, Title, Description, 
+//
+Root as Sheet, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Body as SheetBody, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

package/dist/components/ui/sheet/sheet-body.svelte

@@ -0,0 +1,21 @@
+<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>
+
+<!-- The part that scrolls, so the header and footer stay put. -->
+<div
+	bind:this={ref}
+	data-slot="sheet-body"
+	class={cn('min-h-0 flex-1 overflow-y-auto p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sheet/sheet-body.svelte.d.ts

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

package/dist/components/ui/sheet/sheet-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="sheet-close" {type} {...restProps} />

package/dist/components/ui/sheet/sheet-close.svelte.d.ts

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

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

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	// A sheet stands on the hairline-and-ladder depth every other kit surface
+	// uses (README §Depth): an edge border against the dimmed page, no shadow.
+	// A side sheet takes a phone's whole width: a sliver of dimmed page beside
+	// it is too narrow to read and too narrow to aim at.
+	export const sheetVariants = tv({
+		base: 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150',
+		variants: {
+			side: {
+				right: 'data-closed:slide-out-to-right data-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-sm',
+				left: 'data-closed:slide-out-to-left data-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-sm',
+				bottom: 'data-closed:slide-out-to-bottom data-open:slide-in-from-bottom inset-x-0 bottom-0 max-h-[85%] rounded-t-xl border-t',
+				top: 'data-closed:slide-out-to-top data-open:slide-in-from-top inset-x-0 top-0 max-h-[85%] rounded-b-xl border-b'
+			}
+		},
+		defaultVariants: { side: 'right' }
+	});
+
+	export type SheetSide = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import XIcon from '@lucide/svelte/icons/x';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import { Button } from '../button/index.js';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import SheetPortal from './sheet-portal.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		showCloseButton = true,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		side?: SheetSide;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPortal>

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

@@ -0,0 +1,37 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+}, undefined, "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150", {
+    side: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    side: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+}, undefined, "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150", unknown, unknown, undefined>>;
+export type SheetSide = VariantProps<typeof sheetVariants>['side'];
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { ComponentProps, Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import SheetPortal from './sheet-portal.svelte';
+type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    side?: SheetSide;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    showCloseButton?: boolean;
+    children: Snippet;
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,23 @@
+<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="sheet-footer"
+	class={cn(
+		'bg-muted/50 mt-auto flex shrink-0 flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:justify-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,21 @@
+<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>
+
+<!-- pr-12 keeps the title clear of the content's close button. -->
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('flex shrink-0 flex-col gap-1.5 border-b p-4 pr-12', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/components/ui/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-overlay.svelte.d.ts

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

package/dist/components/ui/sheet/sheet-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

package/dist/components/ui/sheet/sheet-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SheetPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type SheetPortal = ReturnType<typeof SheetPortal>;
+export default SheetPortal;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<!-- AppDialog's title treatment, so a sheet and a dialogue name themselves alike. -->
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn(
+		'font-display text-lg leading-tight font-semibold tracking-[var(--ds-font-display-tracking,-0.025em)]',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-title.svelte.d.ts

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

package/dist/components/ui/sheet/sheet-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="sheet-trigger" {type} {...restProps} />

package/dist/components/ui/sheet/sheet-trigger.svelte.d.ts

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

package/dist/components/ui/sheet/sheet.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const Sheet: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/ui/skeleton/skeleton.svelte

@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('bg-muted animate-pulse rounded-md', className)}
+	class={cn('bg-muted animate-pulse rounded-md motion-reduce:animate-none', className)}
 	{...restProps}
 ></div>

package/dist/styles.css

@@ -296,11 +296,19 @@
 	/* Eyebrow / column-head tracking — pairs with text-2xs + uppercase. */
 	--tracking-eyebrow: 0.06em;
 
+	/* The type scale, by role (README §The type scale). An app sets none of
+	   these; a role with no key here is set in the component that owns it. */
+
 	/* Page-title and large-readout size (PageHeader, StatCard). */
 	--text-display: 1.75rem;
 	--text-display--line-height: 2.125rem;
 	--text-display--letter-spacing: -0.02em;
 
+	/* A section of a page, under its title (PageSection). */
+	--text-section: 1.25rem;
+	--text-section--line-height: 1.75rem;
+	--text-section--letter-spacing: -0.015em;
+
 	/* Panel/card heading size — one step above the sm body default. */
 	--text-body: 0.9375rem;