@signal9/era-ui 4.12.0 → 4.13.0

package/dist/generated-docs/dialog.md

@@ -16,6 +16,7 @@ Composed from sub-components — compose explicitly at the call site:
 - `Dialog.Title`
 - `Dialog.Description`
 - `Dialog.Close`
+- `Dialog.Header`
 
 ## Dialog.Trigger
 
@@ -33,6 +34,11 @@ Inherits all props from `PartProps<Dialog.ContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
+| `header?` | `Snippet` | — | A top bar in the pane's grammar — pass `Dialog.Header` (usually holding
+`Dialog.Title`). With it the panel goes sectioned like a Card: the bar
+runs edge to edge, the body keeps the padding, and the radius drops to
+rd-md because the panel's corners are now formed by an md bar holding xxs
+controls — the identical law that sizes the pane's own corners. |
 | `ref?` | `(forwarded)` | `null` | bindable |
 
 ## Dialog.Overlay
@@ -68,3 +74,11 @@ Inherits all props from `Omit<ButtonVariants, 'active'>`.
 |------|------|---------|-------|
 | `children?` | `Snippet` | — | — |
 | `ref?` | `(forwarded)` | `null` | bindable |
+
+## Dialog.Header
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `dismissable?` | `boolean` | `true` | Render the trailing × (a `Dialog.Close`). Off for flows that must resolve. |
+| `children?` | `Snippet` | — | — |
+| `class?` | `string` | — | — |

package/dist/generated-docs/llms-full.txt

@@ -2594,6 +2594,7 @@ Composed from sub-components — compose explicitly at the call site:
 - `Dialog.Title`
 - `Dialog.Description`
 - `Dialog.Close`
+- `Dialog.Header`
 
 ## Dialog.Trigger
 
@@ -2611,6 +2612,11 @@ Inherits all props from `PartProps<Dialog.ContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
+| `header?` | `Snippet` | — | A top bar in the pane's grammar — pass `Dialog.Header` (usually holding
+`Dialog.Title`). With it the panel goes sectioned like a Card: the bar
+runs edge to edge, the body keeps the padding, and the radius drops to
+rd-md because the panel's corners are now formed by an md bar holding xxs
+controls — the identical law that sizes the pane's own corners. |
 | `ref?` | `(forwarded)` | `null` | bindable |
 
 ## Dialog.Overlay
@@ -2647,6 +2653,14 @@ Inherits all props from `Omit<ButtonVariants, 'active'>`.
 | `children?` | `Snippet` | — | — |
 | `ref?` | `(forwarded)` | `null` | bindable |
 
+## Dialog.Header
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `dismissable?` | `boolean` | `true` | Render the trailing × (a `Dialog.Close`). Off for flows that must resolve. |
+| `children?` | `Snippet` | — | — |
+| `class?` | `string` | — | — |
+
 <!-- end: dialog -->
 
 <!-- begin: dropdown-menu -->

package/dist/generated-docs/manifest.json

@@ -572,7 +572,7 @@
       "slug": "dialog",
       "title": "Dialog",
       "summary": "A modal window for content or user input.",
-      "tokenEstimate": 407,
+      "tokenEstimate": 576,
       "sections": [
         "Import",
         "Dialog.Trigger",
@@ -580,7 +580,8 @@
         "Dialog.Overlay",
         "Dialog.Title",
         "Dialog.Description",
-        "Dialog.Close"
+        "Dialog.Close",
+        "Dialog.Header"
       ],
       "file": "dialog.md"
     },

package/dist/os/toast.svelte

@@ -31,14 +31,17 @@
 	<div class="min-w-0 flex-1">
 		<div class="flex items-start gap-(--era-gap)">
 			<p class="min-w-0 flex-1 truncate text-body text-bright">{n.title}</p>
+			<!-- The dismiss family's ×: xxs tier, whose default glyph is the 12px
+			     dismiss ink (the size class that sat on the <X> lost to the Button
+			     variant's [&_svg] selector and never applied). -->
 			<Button
 				icon
-				size="icon"
+				size="xxs"
 				aria-label="Dismiss"
 				class="-mt-1 -mr-1 shrink-0"
 				onclick={() => notif.dismiss(n.id)}
 			>
-				<X class="size-(--era-h-xs)" />
+				<X />
 			</Button>
 		</div>
 		{#if n.body}<p class="mt-0.5 text-body break-words text-muted">{n.body}</p>{/if}

package/dist/ui/alert-dialog/alert-dialog-content.svelte

@@ -15,7 +15,7 @@
 	<AlertDialog.Content
 		bind:ref
 		class={cn(
-			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-lg) border border-divider bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{...restProps}

package/dist/ui/badge/badge.svelte

@@ -5,7 +5,13 @@
 		// min-w matches height (design rule #5): a single glyph — a count, a
 		// keycap letter — renders as a perfect square/circle instead of a
 		// skinny pill; wider content is unaffected.
-		base: 'inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs) era-text-trim',
+		//
+		// shrink-0 + whitespace-nowrap: a pill IS its text's size — it has no slack
+		// to give up, so letting a flex ancestor squeeze it just slid the background
+		// out from under the ink and the label bled past the fill. A pill that must
+		// fit a tight row does it the Tool.Chip way: the BOX holds and an inner
+		// min-w-0 span truncates. Enforced at runtime by layout/pill-holds-its-ink.
+		base: 'inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-xxs) era-text-trim',
 		variants: {
 			tone: {
 				default: 'bg-hover text-fg',

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

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         success: "bg-success text-success-fg";
         warning: "bg-warning text-warning-fg";
     };
-}, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs) era-text-trim", {
+}, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-xxs) era-text-trim", {
     tone: {
         default: "bg-hover text-fg";
         accent: "bg-primary text-primary-fg";

package/dist/ui/button-group/button-group.svelte

@@ -19,7 +19,10 @@
 <div
 	bind:this={ref}
 	class={cn(
-		'flex gap-(--era-xs-inset-sm)',
+		// shrink-0: a segmented control is its buttons' width — Badge/Chip's law
+		// one tier up. Squeezed, its rounded fill slid out from under the end
+		// buttons (measured 4px at touch on the board).
+		'flex shrink-0 gap-(--era-xs-inset-sm)',
 		orientation === 'vertical'
 			? 'flex-col items-stretch p-(--era-xs-inset-sm) [&>*]:justify-start'
 			: 'items-center',

package/dist/ui/chip/chip.svelte

@@ -11,7 +11,9 @@
 	//                   select trigger): h-xxs = sp + 10, leaving the 3/5/7
 	//                   concentric gap so it sits evenly inset, not cramped.
 	export const chipVariants = tv({
-		base: 'inline-flex items-center bg-hover font-mono text-body leading-none text-fg shadow-(--era-shadow) era-text-trim',
+		// shrink-0 + nowrap for the same reason Badge carries them: the pill is
+		// already exactly its text's size, so any squeeze puts ink outside the fill.
+		base: 'inline-flex shrink-0 items-center bg-hover font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim',
 		variants: {
 			size: {
 				sm: 'h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)',

package/dist/ui/chip/chip.svelte.d.ts

@@ -7,7 +7,7 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
         true: "";
         false: "";
     };
-}, undefined, "inline-flex items-center bg-hover font-mono text-body leading-none text-fg shadow-(--era-shadow) era-text-trim", {
+}, undefined, "inline-flex shrink-0 items-center bg-hover font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim", {
     size: {
         sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
         xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";

package/dist/ui/command-bar/command-bar.svelte

@@ -207,7 +207,14 @@
 	     itself by the font's own metrics. The input and the ghost mirror BOTH inherit
 	     it, so they centre by the identical mechanism — no native-input-centering vs
 	     flex-centering divergence that reads as the ghost sitting a hair high. -->
-	<div class="relative h-full min-w-0 flex-1 text-body leading-(--era-h-md) text-bright">
+	<!-- overflow-hidden: the transparent <input> clips its text natively, but the
+	     MIRROR that actually paints it did not — so in a host narrower than the
+	     prompt line (placeholder included), the text bled past the bar's rounded
+	     end where any real input would clip. Safe with the line-height centring:
+	     the box is the bar's full h-md, well above the ink (clipped-glyphs' law). -->
+	<div
+		class="relative h-full min-w-0 flex-1 overflow-hidden text-body leading-(--era-h-md) text-bright"
+	>
 		<!-- Transparent input: it owns editing and the caret only, so the visible text
 		     can come entirely from the mirror below (see it for why). Everything but
 		     the see-through fill is inherited: font + line-height from the container,

package/dist/ui/dialog/dialog-content.svelte

@@ -1,25 +1,47 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
 	import { cn, type PartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
+		header,
 		class: className,
 		...restProps
-	}: PartProps<Dialog.ContentProps> = $props();
+	}: PartProps<Dialog.ContentProps> & {
+		/**
+		 * A top bar in the pane's grammar — pass `Dialog.Header` (usually holding
+		 * `Dialog.Title`). With it the panel goes sectioned like a Card: the bar
+		 * runs edge to edge, the body keeps the padding, and the radius drops to
+		 * rd-md because the panel's corners are now formed by an md bar holding xxs
+		 * controls — the identical law that sizes the pane's own corners.
+		 */
+		header?: Snippet;
+	} = $props();
 </script>
 
 <Dialog.Portal>
 	<Dialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<!-- border-divider: the pane's hairline-edge law. A floating panel must be
+	     separable from what's behind it, and on the flat surface shadow-lg
+	     collapses to none — without the hairline the whole edge was a tone step. -->
 	<Dialog.Content
 		bind:ref
 		class={cn(
-			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur',
+			header ? 'rounded-(--era-rd-md)' : 'gap-(--era-gap) rounded-(--era-rd-lg) p-(--era-pad-md)',
 			className
 		)}
 		{...restProps}
 	>
-		{@render children?.()}
+		{#if header}
+			{@render header()}
+			<div class="flex min-h-0 flex-col gap-(--era-gap) p-(--era-pad-md)">
+				{@render children?.()}
+			</div>
+		{:else}
+			{@render children?.()}
+		{/if}
 	</Dialog.Content>
 </Dialog.Portal>

package/dist/ui/dialog/dialog-content.svelte.d.ts

@@ -1,5 +1,16 @@
+import type { Snippet } from 'svelte';
 import { Dialog } from 'bits-ui';
 import { type PartProps } from '../../utils/index.js';
-declare const DialogContent: import("svelte").Component<PartProps<Dialog.ContentProps>, {}, "ref">;
+type $$ComponentProps = PartProps<Dialog.ContentProps> & {
+    /**
+     * A top bar in the pane's grammar — pass `Dialog.Header` (usually holding
+     * `Dialog.Title`). With it the panel goes sectioned like a Card: the bar
+     * runs edge to edge, the body keeps the padding, and the radius drops to
+     * rd-md because the panel's corners are now formed by an md bar holding xxs
+     * controls — the identical law that sizes the pane's own corners.
+     */
+    header?: Snippet;
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogContent = ReturnType<typeof DialogContent>;
 export default DialogContent;

package/dist/ui/dialog/dialog-header.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog } from 'bits-ui';
+	import X from '@lucide/svelte/icons/x';
+	import { Bar } from '../bar';
+	import { Button } from '../button';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		dismissable = true,
+		children,
+		class: className
+	}: {
+		/** Render the trailing × (a `Dialog.Close`). Off for flows that must resolve. */
+		dismissable?: boolean;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<!-- The pane handle's chrome, verbatim, for an overlay's top bar — one grammar
+     for every floating panel's header so a dialog and a pane read as the same
+     kind of surface:
+
+       · an md bar holding xxs controls, walls and gap --era-xxs-inset-md
+       · the divider drawn OUTSIDE the box (an inset one eats a pixel of every
+         child's bottom gap — see Pane.Handle)
+       · the leading side at --era-inset-md: a title has no corner to nest, so
+         it takes the text inset, the same asymmetry the pane and the
+         Conversations row document
+       · the × is the dismiss family's: an xxs Button whose tier default IS the
+         12px ink, destructive like Pane.Close
+
+     Rendered flush by Dialog.Content / Sheet.Content when passed as their
+     `header` snippet, so the bar spans the panel edge to edge and the panel's
+     radius follows this corner region (rd-md — the same law that sizes the
+     pane's own corners). -->
+<Bar
+	size="md"
+	content="xxs"
+	class={cn(
+		'shrink-0 rounded-t-none rounded-b-(--era-rd-md) pl-(--era-inset-md) [box-shadow:0_1px_0_var(--color-divider-faded)] select-none',
+		className
+	)}
+>
+	{@render children?.()}
+	{#if dismissable}
+		<Dialog.Close>
+			{#snippet child({ props })}
+				<Button icon size="xxs" tone="destructive" aria-label="Close" class="ml-auto" {...props}>
+					<X />
+				</Button>
+			{/snippet}
+		</Dialog.Close>
+	{/if}
+</Bar>

package/dist/ui/dialog/dialog-header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Render the trailing × (a `Dialog.Close`). Off for flows that must resolve. */
+    dismissable?: boolean;
+    children?: Snippet;
+    class?: string;
+};
+declare const DialogHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/ui/dialog/index.d.ts

@@ -7,3 +7,4 @@ export { default as Overlay } from './dialog-overlay.svelte';
 export { default as Title } from './dialog-title.svelte';
 export { default as Description } from './dialog-description.svelte';
 export { default as Close } from './dialog-close.svelte';
+export { default as Header } from './dialog-header.svelte';

package/dist/ui/dialog/index.js

@@ -7,3 +7,4 @@ export { default as Overlay } from './dialog-overlay.svelte';
 export { default as Title } from './dialog-title.svelte';
 export { default as Description } from './dialog-description.svelte';
 export { default as Close } from './dialog-close.svelte';
+export { default as Header } from './dialog-header.svelte';

package/dist/ui/kv/kv.svelte

@@ -21,7 +21,10 @@
 <span
 	bind:this={ref}
 	class={cn(
-		'inline-flex h-(--era-h-xxs) items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body era-text-trim leading-none shadow-(--era-shadow)',
+		// shrink-0 + nowrap like Badge/Chip: the overflow-hidden here is for the
+		// key cell's squared corners, not a licence to crush — squeezed, this pill
+		// clipped its value instead of bleeding it, which is quieter but no truer.
+		'inline-flex h-(--era-h-xxs) shrink-0 items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body era-text-trim leading-none whitespace-nowrap shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

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

@@ -1,2 +1,2 @@
-export { Root, Portal, Trigger, Title, Description, Close } from '../dialog/index.js';
+export { Root, Portal, Trigger, Title, Description, Close, Header } from '../dialog/index.js';
 export { default as Content, sheetVariants } from './sheet-content.svelte';

package/dist/ui/sheet/index.js

@@ -1,5 +1,5 @@
 // Sheet is a Dialog anchored to a screen edge. Root/Trigger/Title/Description/
 // Close are the Dialog wrappers verbatim (same behavior); only Content differs
 // (edge-positioned, with a `side` prop).
-export { Root, Portal, Trigger, Title, Description, Close } from '../dialog/index.js';
+export { Root, Portal, Trigger, Title, Description, Close, Header } from '../dialog/index.js';
 export { default as Content, sheetVariants } from './sheet-content.svelte';

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

@@ -4,38 +4,73 @@
 	// A Sheet is a Dialog pinned to a screen edge — the idiomatic mobile drawer
 	// (bottom for controls, left/right for navigation). Positioning + which
 	// corners round follow the `side`; everything else is the dialog surface.
+	// border-divider on every side: the pane's hairline-edge law — on flat,
+	// shadow-lg collapses to none and the sheet's edge was a bare tone step.
 	export const sheetVariants = tv({
-		base: 'fixed z-50 flex flex-col gap-(--era-gap) overflow-y-auto bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+		base: 'fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur',
 		variants: {
 			side: {
-				top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-(--era-rd-lg)',
-				bottom: 'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--era-rd-lg)',
-				left: 'inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--era-rd-lg)',
-				right: 'inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--era-rd-lg)'
-			}
+				top: 'inset-x-0 top-0 max-h-[85dvh]',
+				bottom: 'inset-x-0 bottom-0 max-h-[85dvh]',
+				left: 'inset-y-0 left-0 w-[min(20rem,85vw)]',
+				right: 'inset-y-0 right-0 w-[min(20rem,85vw)]'
+			},
+			/**
+			 * With a header the sheet is sectioned (the bar flush, the BODY scrolls
+			 * — scrolling the root would carry the bar away with the content) and
+			 * its detached corners drop to rd-md: they are formed by an md bar
+			 * holding xxs controls, the pane's own corner law. Without one, the
+			 * padded rd-lg surface is unchanged.
+			 */
+			header: { true: '', false: 'gap-(--era-gap) overflow-y-auto p-(--era-pad-md)' }
 		},
-		defaultVariants: { side: 'bottom' }
+		compoundVariants: [
+			{ side: 'top', header: false, class: 'rounded-b-(--era-rd-lg)' },
+			{ side: 'bottom', header: false, class: 'rounded-t-(--era-rd-lg)' },
+			{ side: 'left', header: false, class: 'rounded-r-(--era-rd-lg)' },
+			{ side: 'right', header: false, class: 'rounded-l-(--era-rd-lg)' },
+			{ side: 'top', header: true, class: 'rounded-b-(--era-rd-md)' },
+			{ side: 'bottom', header: true, class: 'rounded-t-(--era-rd-md)' },
+			{ side: 'left', header: true, class: 'rounded-r-(--era-rd-md)' },
+			{ side: 'right', header: true, class: 'rounded-l-(--era-rd-md)' }
+		],
+		defaultVariants: { side: 'bottom', header: false }
 	});
 </script>
 
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { Dialog } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
 		side = 'bottom',
 		children,
+		header,
 		class: className,
 		...restProps
 	}: PartProps<Dialog.ContentProps> & {
 		/** Screen edge the sheet is anchored to. */
 		side?: 'top' | 'right' | 'bottom' | 'left';
+		/** A top bar in the pane's grammar — pass `Sheet.Header` holding `Sheet.Title`. */
+		header?: Snippet;
 	} = $props();
 </script>
 
 <Dialog.Portal>
 	<Dialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
-	<Dialog.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
-		{@render children?.()}
+	<Dialog.Content
+		bind:ref
+		class={cn(sheetVariants({ side, header: header != null }), className)}
+		{...restProps}
+	>
+		{#if header}
+			{@render header()}
+			<div class="flex min-h-0 flex-1 flex-col gap-(--era-gap) overflow-y-auto p-(--era-pad-md)">
+				{@render children?.()}
+			</div>
+		{:else}
+			{@render children?.()}
+		{/if}
 	</Dialog.Content>
 </Dialog.Portal>

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

@@ -1,30 +1,66 @@
 import { type PartProps } from '../../utils/index.js';
 export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
     side: {
-        top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--era-rd-lg)";
-        bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--era-rd-lg)";
-        left: "inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--era-rd-lg)";
-        right: "inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--era-rd-lg)";
+        top: "inset-x-0 top-0 max-h-[85dvh]";
+        bottom: "inset-x-0 bottom-0 max-h-[85dvh]";
+        left: "inset-y-0 left-0 w-[min(20rem,85vw)]";
+        right: "inset-y-0 right-0 w-[min(20rem,85vw)]";
     };
-}, undefined, "fixed z-50 flex flex-col gap-(--era-gap) overflow-y-auto bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur", {
+    /**
+     * With a header the sheet is sectioned (the bar flush, the BODY scrolls
+     * — scrolling the root would carry the bar away with the content) and
+     * its detached corners drop to rd-md: they are formed by an md bar
+     * holding xxs controls, the pane's own corner law. Without one, the
+     * padded rd-lg surface is unchanged.
+     */
+    header: {
+        true: "";
+        false: "gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+    };
+}, undefined, "fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur", {
     side: {
-        top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--era-rd-lg)";
-        bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--era-rd-lg)";
-        left: "inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--era-rd-lg)";
-        right: "inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--era-rd-lg)";
+        top: "inset-x-0 top-0 max-h-[85dvh]";
+        bottom: "inset-x-0 bottom-0 max-h-[85dvh]";
+        left: "inset-y-0 left-0 w-[min(20rem,85vw)]";
+        right: "inset-y-0 right-0 w-[min(20rem,85vw)]";
+    };
+    /**
+     * With a header the sheet is sectioned (the bar flush, the BODY scrolls
+     * — scrolling the root would carry the bar away with the content) and
+     * its detached corners drop to rd-md: they are formed by an md bar
+     * holding xxs controls, the pane's own corner law. Without one, the
+     * padded rd-lg surface is unchanged.
+     */
+    header: {
+        true: "";
+        false: "gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     side: {
-        top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--era-rd-lg)";
-        bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--era-rd-lg)";
-        left: "inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--era-rd-lg)";
-        right: "inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--era-rd-lg)";
+        top: "inset-x-0 top-0 max-h-[85dvh]";
+        bottom: "inset-x-0 bottom-0 max-h-[85dvh]";
+        left: "inset-y-0 left-0 w-[min(20rem,85vw)]";
+        right: "inset-y-0 right-0 w-[min(20rem,85vw)]";
+    };
+    /**
+     * With a header the sheet is sectioned (the bar flush, the BODY scrolls
+     * — scrolling the root would carry the bar away with the content) and
+     * its detached corners drop to rd-md: they are formed by an md bar
+     * holding xxs controls, the pane's own corner law. Without one, the
+     * padded rd-lg surface is unchanged.
+     */
+    header: {
+        true: "";
+        false: "gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
     };
 }, undefined>>;
+import type { Snippet } from 'svelte';
 import { Dialog } from 'bits-ui';
 type $$ComponentProps = PartProps<Dialog.ContentProps> & {
     /** Screen edge the sheet is anchored to. */
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /** A top bar in the pane's grammar — pass `Sheet.Header` holding `Sheet.Title`. */
+    header?: Snippet;
 };
 declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type SheetContent = ReturnType<typeof SheetContent>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.12.0",
+	"version": "4.13.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",