@signal9/era-ui 4.12.1 → 4.14.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/notification-center.svelte

@@ -83,7 +83,9 @@
 								<p class="min-w-0 flex-1 truncate text-body text-bright">{n.title}</p>
 								<span class="shrink-0 text-body text-muted tabular-nums">{ago(n.createdAt)}</span>
 							</div>
-							{#if n.body}<p class="mt-0.5 text-body break-words text-muted">{n.body}</p>{/if}
+							{#if n.body}<p class="mt-0.5 text-body leading-body break-words text-muted">
+									{n.body}
+								</p>{/if}
 						</div>
 					</div>
 				{:else}

package/dist/os/toast.svelte

@@ -31,17 +31,20 @@
 	<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}
+		{#if n.body}<p class="mt-0.5 text-body leading-body break-words text-muted">{n.body}</p>{/if}
 		{#if n.actions.length}
 			<div class="mt-(--era-inset-sm) flex flex-wrap gap-(--era-gap)">
 				{#each n.actions as action (action.label)}

package/dist/styles/density.css

@@ -154,6 +154,25 @@
 	/* Inter-item gap */
 	--era-gap: calc(var(--era-sp) * 0.5); /* 4/5/6 */
 
+	/* PROSE LEADING — the line-height of text that WRAPS.
+	 *
+	 * Single-line control text has no leading question: era-text-trim collapses
+	 * the line box to 1 and centres the ink, which is the whole point of it.
+	 * Wrapping text is the opposite problem — the space BETWEEN lines is the
+	 * only thing holding the paragraph apart, and it must never inherit a
+	 * control's line-height (a `leading-none` row with a wrapping child sets its
+	 * lines colliding).
+	 *
+	 * A ratio, not a length: leading scales with the type, not with --era-sp, so
+	 * it stays a single number across every density mode — dense's 12px text
+	 * gets 19.2px lines, balanced's 14px gets 22.4px, both the same paragraph
+	 * colour. It replaces a 50/50 split of Tailwind's leading-relaxed (1.625)
+	 * and leading-normal (1.5) that had grown between the prose components; 1.6
+	 * is between them and is the value long-form UI text is usually set at.
+	 *
+	 * Public name: `leading-body`, the pair to `text-body`. */
+	--era-leading: 1.6;
+
 	/* Content insets — text-symmetric padding (vertical centering, reused as
 	   horizontal only where the content is a single square glyph). */
 	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 3/3/4/6 */

package/dist/styles/index.css

@@ -298,6 +298,10 @@
 @theme inline {
 	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */
 	--text-body: var(--era-text);
+	/* Prose leading — `leading-body` is the pair to `text-body`, and every piece
+	 * of text in the library that can wrap to a second line carries it. Enforced
+	 * at runtime by typography/prose-leading. */
+	--leading-body: var(--era-leading);
 	/* Radius ladder — Tailwind's own rounded-* names now walk era's concentric
 	 * ladder (rd-T = rd-xs + (h-T − h-xs)/2), ride the corners toggle, and
 	 * collapse to 0 on square. rounded-item is the menu-row radius

package/dist/styles/themes.css

@@ -50,7 +50,19 @@
 	--color-hover: oklch(0.25 0 0);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	/* Muted is body copy, not a de-emphasis wash — the /text page sets whole
+	 * paragraphs in it — so it does NOT sit flat on step 10: it leans 30% of the
+	 * way to --color-fg. Step 10 alone read as "greyed out" at paragraph length
+	 * (7.80:1 on the default dark page); the lean lands it at 9.11:1, still a
+	 * clear step below fg for the mixed-tone case (muted prose beside a bright
+	 * literal) but no longer receding. The lean is toward fg rather than a fixed
+	 * lightness so it mirrors correctly in light mode (muted DARKENS toward fg)
+	 * and keeps each theme's own hue family — the tinted scales (adobe, sand)
+	 * interpolate between two steps of their own ramp, never toward neutral.
+	 *
+	 * signalnine sets its muted by hand from measured source colours and is
+	 * deliberately exempt. */
+	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 	/* Inline link ink. Declared once here and inherited by every theme —
 	 * var(--color-bright) resolves in the element's own context, so a theme only
 	 * names this if it wants links to differ from emphasis text (signalnine
@@ -121,7 +133,7 @@
 		--color-hover: oklch(0.8 0 0);
 		--color-fg: var(--color-11);
 		--color-bright: var(--color-12);
-		--color-muted: var(--color-10);
+		--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 		/* Accent tokens */
 		--color-primary: var(--color-fg);
@@ -160,7 +172,7 @@
 	--color-hover: oklch(0.8 0 0);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 	/* Accent tokens */
 	--color-primary: var(--color-fg);
@@ -204,7 +216,7 @@
 	--color-hover: oklch(0.252 0.024 56);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 	/* Warm sandstone primary + unexpected turquoise support. */
 	--color-primary: oklch(0.74 0.108 68);
@@ -248,7 +260,7 @@
 		--color-hover: oklch(0.81 0.022 73);
 		--color-fg: var(--color-11);
 		--color-bright: var(--color-12);
-		--color-muted: var(--color-10);
+		--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 		--color-primary: oklch(0.515 0.16 38);
 		--color-primary-fg: oklch(0.96 0.014 78);
@@ -283,7 +295,7 @@
 	--color-hover: oklch(0.81 0.022 73);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 	--color-primary: oklch(0.515 0.16 38);
 	--color-primary-fg: oklch(0.96 0.014 78);
@@ -321,7 +333,7 @@
 	--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 	--color-primary: oklch(0.8 0.034 54);
 	--color-primary-fg: var(--color-1);
@@ -359,7 +371,7 @@
 		--color-hover: oklch(0.88 0.016 72);
 		--color-fg: var(--color-11);
 		--color-bright: var(--color-12);
-		--color-muted: var(--color-10);
+		--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 		--color-primary: oklch(0.55 0.12 58);
 		--color-primary-fg: oklch(0.97 0.008 80);
@@ -394,7 +406,7 @@
 	--color-hover: oklch(0.88 0.016 72);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
 
 	--color-primary: oklch(0.55 0.12 58);
 	--color-primary-fg: oklch(0.97 0.008 80);

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

@@ -8,7 +8,7 @@
 <Accordion.Content
 	bind:ref
 	class={cn(
-		'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-relaxed text-muted',
+		'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-body text-muted',
 		className
 	)}
 	{...restProps}

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/alert-dialog/alert-dialog-description.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialog.Description
 	bind:ref
-	class={cn('text-body leading-normal text-muted', className)}
+	class={cn('text-body leading-body text-muted', className)}
 	{...restProps}
 />

package/dist/ui/code-block/code-block.svelte

@@ -45,7 +45,7 @@
 	{...restProps}
 >
 	<pre
-		class="overflow-x-auto px-(--era-field-px) py-(--era-inset-md) pr-[calc(var(--era-field-px)+var(--era-h-sm)+var(--era-field-px))] font-mono text-body leading-relaxed text-fg"><code
+		class="overflow-x-auto px-(--era-field-px) py-(--era-inset-md) pr-[calc(var(--era-field-px)+var(--era-h-sm)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
 			>{#if children}{@render children()}{:else}{code}{/if}</code
 		></pre>
 	{#if copyable}

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-description.svelte

@@ -7,6 +7,6 @@
 
 <Dialog.Description
 	bind:ref
-	class={cn('text-body leading-normal text-muted', className)}
+	class={cn('text-body leading-body text-muted', className)}
 	{...restProps}
 />

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/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.1",
+	"version": "4.14.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",