@mystravil/hardpoint 0.0.0-stage → 0.1.0

package/dist/components/Tooltip.svelte

@@ -0,0 +1,200 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { Tooltip as BitsTooltip } from 'bits-ui';
+
+	export type TooltipTriggerSnippetProps = {
+		/**
+		 * Spread onto the control the tooltip belongs to. Its own handlers may
+		 * come before or after. A control with its own description writes
+		 * `aria-describedby={[props['aria-describedby'], ownId].filter(Boolean).join(' ')}`
+		 * after the spread, so it keeps both.
+		 */
+		props: Record<string, unknown>;
+	};
+
+	/**
+	 * Attributes and handlers not listed here go to the tooltip element (Bits
+	 * UI `Tooltip.Content`), among them `side` (default `top`), `align`
+	 * (default `center`), `sideOffset` (default 8) and `onEscapeKeydown`.
+	 */
+	export type TooltipProps = Omit<BitsTooltip.ContentProps, 'child' | 'children' | 'forceMount' | 'ref'> & {
+		open?: boolean;
+		/**
+		 * The tooltip, as written. It never opens on touch, so it is never the
+		 * only path to its text: the control shows the same text, or carries it
+		 * in `aria-label`.
+		 */
+		text: string;
+		/** The control the tooltip belongs to: spread `props` onto it. */
+		trigger: Snippet<[TooltipTriggerSnippetProps]>;
+		/**
+		 * Milliseconds a pointer rests on the trigger before the tooltip opens
+		 * (default 700, Bits UI's, or the TooltipGroup's). Keyboard focus opens
+		 * it at once.
+		 */
+		delayDuration?: number;
+		/** The tooltip element. */
+		ref?: HTMLElement | null;
+	};
+
+	// Bits UI keeps one tooltip open at a time per provider, and each Tooltip
+	// outside a TooltipGroup has its own provider, so the rule spans them here:
+	// the close function of the open tooltip, if any.
+	let closeOpen: (() => void) | null = null;
+</script>
+
+<script lang="ts">
+	import { createAttachmentKey } from 'svelte/attachments';
+	import { pop } from '../motion/index.js';
+	import { inTooltipGroup } from './TooltipGroup.svelte';
+
+	let {
+		open = $bindable(false),
+		text,
+		trigger,
+		delayDuration,
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: TooltipProps = $props();
+
+	const listen = createAttachmentKey();
+	const capture = createAttachmentKey();
+
+	// Inside a TooltipGroup the group's provider is shared, so the next
+	// tooltip in the row skips the delay; outside one, the tooltip has its own.
+	const grouped = inTooltipGroup();
+
+	// Opening this tooltip closes any other one, for example one a resting
+	// pointer opened when keyboard focus opens this.
+	const close = () => {
+		open = false;
+	};
+	$effect(() => {
+		if (!open) return;
+		if (closeOpen !== close) closeOpen?.();
+		closeOpen = close;
+		return () => {
+			if (closeOpen === close) closeOpen = null;
+		};
+	});
+
+	// The control, kept to compare its name with the text.
+	let control = $state<Element | null>(null);
+	const captureControl = (node: Element) => {
+		control = node;
+	};
+
+	// The usual tooltip repeats the control's name: an icon button's
+	// aria-label, or the whole of a shortened name. Describing the control by
+	// the same text would make screen readers read it twice.
+	function repeatsName(node: Element | null): boolean {
+		if (!node) return false;
+		const name = node.getAttribute('aria-label') ?? node.textContent ?? '';
+		return name.trim() === text.trim();
+	}
+
+	// A tooltip's control has its own action, so the app passes its own
+	// onclick beside the spread. Bits UI's handlers move into an attachment,
+	// so the spread order cannot drop either set: the control's onclick still
+	// runs, and the tooltip still closes on a press and opens on hover and
+	// focus. Bits UI's `disabled: false` and `tabindex: 0` are left out, so
+	// they never undo a disabled control (a disabled link Button keeps
+	// tabindex -1); the control is focusable on its own.
+	function triggerProps(props: Record<string, unknown>): Record<string, unknown> {
+		const { disabled: _disabled, tabindex: _tabindex, 'aria-describedby': describedBy, ...attrs } = props;
+		const listeners: [string, EventListener][] = [];
+		for (const [key, value] of Object.entries(attrs)) {
+			if (key.startsWith('on') && typeof value === 'function') {
+				listeners.push([key.slice(2), value as EventListener]);
+				delete attrs[key];
+			}
+		}
+		if (describedBy && !repeatsName(control)) attrs['aria-describedby'] = describedBy;
+		return {
+			...attrs,
+			[capture]: captureControl,
+			[listen]: (node: Element) => {
+				for (const [type, fn] of listeners) node.addEventListener(type, fn);
+				return () => {
+					for (const [type, fn] of listeners) node.removeEventListener(type, fn);
+				};
+			}
+		};
+	}
+</script>
+
+<!--
+	Each tooltip outside a TooltipGroup has its own Bits UI provider, so an app
+	needs no shared wrapper. A resting mouse pointer opens it after the delay;
+	keyboard focus opens it at once, but only focus that shows the focus
+	contour, so focus returned to the trigger after a mouse press opens
+	nothing. Touch never opens it: a tap runs the control's own action.
+	Escape, moving the pointer away, blur and a press on the trigger close it.
+	While open, Bits UI points the trigger's aria-describedby at the tooltip,
+	unless the text repeats the control's name. The root carries the delay
+	and the focus rule, so they hold inside a group too.
+-->
+{#snippet tooltip()}
+	<BitsTooltip.Root bind:open {delayDuration} ignoreNonKeyboardFocus>
+		<BitsTooltip.Trigger>
+			{#snippet child({ props })}
+				{@render trigger({ props: triggerProps(props) })}
+			{/snippet}
+		</BitsTooltip.Trigger>
+
+		<BitsTooltip.Portal>
+			<BitsTooltip.Content forceMount bind:ref side="top" align="center" sideOffset={8} collisionPadding={8} {...rest}>
+				{#snippet child({ wrapperProps, props, open: shown })}
+					{#if shown}
+						<div {...wrapperProps}>
+							<div {...props} role="tooltip" class={['hp-tooltip', className]} transition:pop>{text}</div>
+						</div>
+					{/if}
+				{/snippet}
+			</BitsTooltip.Content>
+		</BitsTooltip.Portal>
+	</BitsTooltip.Root>
+{/snippet}
+
+{#if grouped}
+	{@render tooltip()}
+{:else}
+	<BitsTooltip.Provider>
+		{@render tooltip()}
+	</BitsTooltip.Provider>
+{/if}
+
+<style>
+	/* On the tooltip layer (tokens.css), over popovers, menus and dialogs.
+	   Bits UI copies the z-index to the positioned wrapper. A black box with
+	   the control boundary, like the popover, as wide as its text up to
+	   --tooltip-width (an app passes style="--tooltip-width: …" for another
+	   cap) and never wider than the space beside the trigger. */
+	.hp-tooltip {
+		--tooltip-width: 280px;
+
+		position: relative;
+		z-index: var(--layer-tooltip);
+		box-sizing: border-box;
+		width: max-content;
+		max-width: min(var(--tooltip-width), var(--bits-tooltip-content-available-width));
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		font-family: var(--sans);
+		font-size: var(--type-body);
+		line-height: 24px;
+		overflow-wrap: break-word;
+	}
+
+	/* 16px where a coarse pointer reads it (keyboard focus on a tablet), the
+	   dense 14px on fine pointers. */
+	@media (pointer: fine) {
+		.hp-tooltip {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+</style>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import { Tooltip as BitsTooltip } from 'bits-ui';
+export type TooltipTriggerSnippetProps = {
+    /**
+     * Spread onto the control the tooltip belongs to. Its own handlers may
+     * come before or after. A control with its own description writes
+     * `aria-describedby={[props['aria-describedby'], ownId].filter(Boolean).join(' ')}`
+     * after the spread, so it keeps both.
+     */
+    props: Record<string, unknown>;
+};
+/**
+ * Attributes and handlers not listed here go to the tooltip element (Bits
+ * UI `Tooltip.Content`), among them `side` (default `top`), `align`
+ * (default `center`), `sideOffset` (default 8) and `onEscapeKeydown`.
+ */
+export type TooltipProps = Omit<BitsTooltip.ContentProps, 'child' | 'children' | 'forceMount' | 'ref'> & {
+    open?: boolean;
+    /**
+     * The tooltip, as written. It never opens on touch, so it is never the
+     * only path to its text: the control shows the same text, or carries it
+     * in `aria-label`.
+     */
+    text: string;
+    /** The control the tooltip belongs to: spread `props` onto it. */
+    trigger: Snippet<[TooltipTriggerSnippetProps]>;
+    /**
+     * Milliseconds a pointer rests on the trigger before the tooltip opens
+     * (default 700, Bits UI's, or the TooltipGroup's). Keyboard focus opens
+     * it at once.
+     */
+    delayDuration?: number;
+    /** The tooltip element. */
+    ref?: HTMLElement | null;
+};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/TooltipGroup.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { createContext, type Snippet } from 'svelte';
+
+	/**
+	 * Wraps a row of controls whose tooltips belong together, such as a
+	 * toolbar. The group renders no element of its own: it sets up one Bits UI
+	 * `Tooltip.Provider` that every `Tooltip` inside it shares, so once one
+	 * tooltip in the row has opened, the next opens at once while the pointer
+	 * moves along the row. Lay out the controls with your own markup inside it.
+	 */
+	export type TooltipGroupProps = {
+		/** The controls and their tooltips. */
+		children: Snippet;
+		/**
+		 * Milliseconds a pointer rests on a control before the first tooltip
+		 * opens (default 700, Bits UI's, as for a Tooltip outside a group). A
+		 * Tooltip's own `delayDuration` wins over it.
+		 */
+		delayDuration?: number;
+		/**
+		 * Milliseconds after a tooltip in the group closes during which the next
+		 * one opens without the delay (default 300, Bits UI's). 0 makes every
+		 * tooltip wait the full delay.
+		 */
+		skipDelayDuration?: number;
+	};
+
+	const [, setGroup, hasGroup] = createContext<true>();
+
+	/** A Tooltip inside a group uses the group's provider instead of its own. */
+	export function inTooltipGroup(): boolean {
+		return hasGroup();
+	}
+</script>
+
+<script lang="ts">
+	import { Tooltip } from 'bits-ui';
+
+	let { children, delayDuration, skipDelayDuration }: TooltipGroupProps = $props();
+
+	setGroup(true);
+</script>
+
+<Tooltip.Provider {delayDuration} {skipDelayDuration}>
+	{@render children()}
+</Tooltip.Provider>

package/dist/components/TooltipGroup.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type Snippet } from 'svelte';
+/**
+ * Wraps a row of controls whose tooltips belong together, such as a
+ * toolbar. The group renders no element of its own: it sets up one Bits UI
+ * `Tooltip.Provider` that every `Tooltip` inside it shares, so once one
+ * tooltip in the row has opened, the next opens at once while the pointer
+ * moves along the row. Lay out the controls with your own markup inside it.
+ */
+export type TooltipGroupProps = {
+    /** The controls and their tooltips. */
+    children: Snippet;
+    /**
+     * Milliseconds a pointer rests on a control before the first tooltip
+     * opens (default 700, Bits UI's, as for a Tooltip outside a group). A
+     * Tooltip's own `delayDuration` wins over it.
+     */
+    delayDuration?: number;
+    /**
+     * Milliseconds after a tooltip in the group closes during which the next
+     * one opens without the delay (default 300, Bits UI's). 0 makes every
+     * tooltip wait the full delay.
+     */
+    skipDelayDuration?: number;
+};
+/** A Tooltip inside a group uses the group's provider instead of its own. */
+export declare function inTooltipGroup(): boolean;
+declare const TooltipGroup: import("svelte").Component<TooltipGroupProps, {}, "">;
+type TooltipGroup = ReturnType<typeof TooltipGroup>;
+export default TooltipGroup;

package/dist/components/internal/Scrim.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	/**
+	 * The z-index token an overlay sits on (tokens.css, layer scale).
+	 * `dialog`: dialogs, their sheets and the shell drawer. `popover`:
+	 * popovers, menus, select lists and comboboxes, and their sheets on
+	 * compact widths, so they open over a dialog.
+	 */
+	export type OverlayLayer = 'dialog' | 'popover';
+
+	export type ScrimProps = {
+		/** Shown while true. Pass the Bits UI content's `open`. */
+		open: boolean;
+		layer: OverlayLayer;
+	};
+</script>
+
+<script lang="ts">
+	import { fade } from '../../motion/index.js';
+
+	let { open, layer }: ScrimProps = $props();
+
+	// A press on the scrim keeps focus where it is (on the trigger, or
+	// inside a dialog). The press still reaches Bits UI as an outside
+	// interaction, which closes the overlay.
+	function keepFocus(e: PointerEvent) {
+		e.preventDefault();
+	}
+</script>
+
+<!--
+	Dims the page behind a dialog or sheet. Render it just before the panel,
+	on the same layer, so the panel paints over it. It fades with the panel's
+	timing (--dur-sheet in, --dur-sheet-exit out).
+-->
+{#if open}
+	<div class="hp-scrim" data-layer={layer} aria-hidden="true" onpointerdown={keepFocus} transition:fade></div>
+{/if}
+
+<style>
+	/* While a floating list is open Bits UI sets pointer-events: none on
+	   <body>; the scrim takes presses again, so a tap on it closes. */
+	.hp-scrim {
+		position: fixed;
+		inset: 0;
+		z-index: var(--layer-dialog);
+		background: var(--scrim);
+		pointer-events: auto;
+	}
+	.hp-scrim[data-layer='popover'] {
+		z-index: var(--layer-popover);
+	}
+</style>

package/dist/components/internal/Scrim.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The z-index token an overlay sits on (tokens.css, layer scale).
+ * `dialog`: dialogs, their sheets and the shell drawer. `popover`:
+ * popovers, menus, select lists and comboboxes, and their sheets on
+ * compact widths, so they open over a dialog.
+ */
+export type OverlayLayer = 'dialog' | 'popover';
+export type ScrimProps = {
+    /** Shown while true. Pass the Bits UI content's `open`. */
+    open: boolean;
+    layer: OverlayLayer;
+};
+declare const Scrim: import("svelte").Component<ScrimProps, {}, "">;
+type Scrim = ReturnType<typeof Scrim>;
+export default Scrim;

package/dist/components/internal/Sheet.svelte

@@ -0,0 +1,263 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { OverlayLayer } from './Scrim.svelte';
+
+	/** Attributes and handlers not listed here go to the panel. */
+	export type SheetProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+		/**
+		 * Shown while true. Pass the `open` that the Bits UI content's
+		 * `child` snippet receives (render the content with `forceMount`), so
+		 * the sheet and its scrim slide and fade out before they unmount.
+		 */
+		open: boolean;
+		/** The title row's text, in tracked caps. */
+		title: string;
+		/** The title element's `id`, so the content can be labelled by it. */
+		titleId?: string;
+		/** The title element: `p`, or `h2` when the sheet is a dialog. */
+		titleTag?: 'p' | 'h2';
+		/** The z-index token: `dialog` for dialogs, `popover` for everything else. */
+		layer: OverlayLayer;
+		/**
+		 * Called by the close button and by a swipe down. A tap on the scrim
+		 * and Escape close through Bits UI.
+		 */
+		onclose: () => void;
+		/** The close button's accessible name. */
+		closeLabel?: string;
+		/** The panel element. */
+		ref?: HTMLElement | null;
+		/** The body, under the title row. It scrolls if it does not fit. */
+		children: Snippet;
+		/** A row pinned under the body, such as a dialog's actions. */
+		footer?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { sheet } from '../../motion/index.js';
+	import Scrim from './Scrim.svelte';
+	import { swipeDismiss } from './swipe-dismiss.js';
+	import { followVisualViewport } from './visual-viewport.svelte.js';
+
+	let {
+		open,
+		title,
+		titleId,
+		titleTag = 'p',
+		layer,
+		onclose,
+		closeLabel = 'Close',
+		ref = $bindable(null),
+		children,
+		footer,
+		class: className,
+		...rest
+	}: SheetProps = $props();
+
+	let body = $state<HTMLElement | null>(null);
+
+	// The sheet follows the visual viewport while it is open (decided
+	// 2026-11-10; internal/visual-viewport.svelte.ts): while the on-screen
+	// keyboard shortens it, the sheet's bottom edge sits on its bottom edge
+	// and the sheet may grow to its height less the header row's
+	// (--header-height and the top safe area), where it was half the screen.
+	// The focused field in the body stays in sight.
+	const viewport = followVisualViewport(() => open, () => body);
+
+	// The press that opened the sheet never acts on what the sheet now shows
+	// under the finger (decided 2026-11-10). On touch, Bits UI's Menu and
+	// Select triggers open on pointerup, and the click that follows lands on
+	// the sheet, which under reduced motion fades in where it ends up; a
+	// mouse opens them on pointerdown, and its pointerup on an item counts
+	// as a choice. So until a press starts inside the sheet, a pointerup or a
+	// pointer's click inside it stops here. A click from Enter, Space or
+	// element.click() has detail 0 and always passes.
+	function ignoreOpeningPress(node: HTMLElement) {
+		let pressed = false;
+		const press = () => (pressed = true);
+		const guard = (e: MouseEvent) => {
+			if (pressed || (e.type === 'click' && e.detail === 0)) return;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		};
+		const capture = { capture: true };
+		node.addEventListener('pointerdown', press, capture);
+		node.addEventListener('pointerup', guard, capture);
+		node.addEventListener('click', guard, capture);
+		return () => {
+			node.removeEventListener('pointerdown', press, capture);
+			node.removeEventListener('pointerup', guard, capture);
+			node.removeEventListener('click', guard, capture);
+		};
+	}
+</script>
+
+<!--
+	The bottom sheet every overlay uses on compact widths (BRIEF, Apps and
+	phones: Overlays): a scrim, then a panel at the bottom edge with a handle,
+	a caps title, a close button, the body and an optional footer. It opens at
+	half the screen at most, with no drag to expand; the body scrolls inside.
+	A swipe down dismisses it (internal/swipe-dismiss.ts). While the visual
+	viewport is shorter than the layout viewport (the on-screen keyboard), it
+	sits on top of it and may fill the space above it. The press that opened
+	it does not act inside it.
+
+	Render it inside the Bits UI content's `child` snippet and spread the
+	snippet's `props` onto it when the panel is the content element (a
+	dialog), or onto an element in the body when the content is a list (a
+	menu, a select): then pass `onInteractOutside` to the content and call
+	`preventDefault()` for presses inside `ref`, so the title row does not
+	count as outside.
+-->
+<Scrim {open} {layer} />
+{#if open}
+	{@const lifted = viewport.current}
+	<div
+		bind:this={ref}
+		{...rest}
+		class={['hp-sheet', className]}
+		data-layer={layer}
+		style:bottom={lifted ? `calc(100% - ${lifted.bottom}px)` : undefined}
+		style:padding-bottom={lifted ? '0px' : undefined}
+		style:--sheet-max-height={lifted
+			? `calc(${lifted.height}px - var(--header-height) - env(safe-area-inset-top))`
+			: undefined}
+		transition:sheet
+		{@attach ignoreOpeningPress}
+		{@attach swipeDismiss(() => onclose())}
+	>
+		<div class="hp-sheet-head">
+			<span class="hp-sheet-handle" aria-hidden="true"></span>
+			<svelte:element this={titleTag} id={titleId} class="hp-sheet-title">{title}</svelte:element>
+			<button type="button" class="hp-sheet-close" aria-label={closeLabel} onclick={() => onclose()}>
+				<svg
+					viewBox="0 0 16 16"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="square"
+					aria-hidden="true"
+				>
+					<path d="M3 3l10 10M13 3L3 13" />
+				</svg>
+			</button>
+		</div>
+		<div class="hp-sheet-body" bind:this={body}>
+			{@render children()}
+		</div>
+		{#if footer}
+			<div class="hp-sheet-footer">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	/* While a floating list is open Bits UI sets pointer-events: none on
+	   <body>; the panel takes presses again. */
+	.hp-sheet {
+		/* The height cap: half the screen, or the room above the on-screen
+		   keyboard while it is up (set inline). A list that must keep its
+		   height while it filters asks for this. */
+		--sheet-max-height: 50dvh;
+
+		position: fixed;
+		inset: auto 0 0;
+		z-index: var(--layer-dialog);
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		/* Opens at half the screen at most; the body scrolls inside. */
+		max-height: var(--sheet-max-height);
+		padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+		border-top: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		overscroll-behavior: contain;
+		pointer-events: auto;
+	}
+	.hp-sheet[data-layer='popover'] {
+		z-index: var(--layer-popover);
+	}
+
+	/* The grab area: handle, title and close button. The swipe owns touches
+	   here; the body below keeps its scroll until it reaches the top. */
+	.hp-sheet-head {
+		flex: none;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		align-items: start;
+		padding: 0 var(--space-1) 0 var(--gutter);
+		touch-action: none;
+	}
+	.hp-sheet-handle {
+		grid-column: 1 / -1;
+		justify-self: center;
+		width: var(--space-8);
+		height: var(--space-1);
+		margin-top: var(--space-2);
+		background: var(--border-control);
+	}
+	/* Tracked caps at the compact view-title size. A long title wraps (200
+	   percent zoom); the padding centres its first line on the 44px close
+	   button, so a single line sits where it always did. The clip stays: it
+	   keeps the first glyph's antialiasing inside the text edge, as before. */
+	.hp-sheet-title {
+		overflow: hidden;
+		padding-block: calc((44px - 1lh) / 2);
+		font-size: var(--type-body);
+		font-weight: 500;
+		line-height: 24px;
+		letter-spacing: var(--label-tracking);
+		text-transform: var(--label-transform);
+		overflow-wrap: anywhere;
+	}
+	.hp-sheet-close {
+		display: grid;
+		place-items: center;
+		width: 44px;
+		height: 44px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--text);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.hp-sheet-close svg {
+		width: var(--space-4);
+		height: var(--space-4);
+	}
+	.hp-sheet-close:active {
+		background: var(--surface-raised);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.hp-sheet-close {
+			transition: background-color var(--dur-hover) var(--settle);
+		}
+		.hp-sheet-close:hover {
+			background: var(--surface-hover);
+		}
+		.hp-sheet-close:active {
+			background: var(--surface-raised);
+			transition-duration: var(--dur-press);
+		}
+	}
+
+	/* A flex column, so a list inside can take the rest of the height
+	   (flex: 1 1 auto; min-height: 0) and scroll on its own. */
+	.hp-sheet-body {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+	.hp-sheet-footer {
+		flex: none;
+	}
+</style>

package/dist/components/internal/Sheet.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { OverlayLayer } from './Scrim.svelte';
+/** Attributes and handlers not listed here go to the panel. */
+export type SheetProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /**
+     * Shown while true. Pass the `open` that the Bits UI content's
+     * `child` snippet receives (render the content with `forceMount`), so
+     * the sheet and its scrim slide and fade out before they unmount.
+     */
+    open: boolean;
+    /** The title row's text, in tracked caps. */
+    title: string;
+    /** The title element's `id`, so the content can be labelled by it. */
+    titleId?: string;
+    /** The title element: `p`, or `h2` when the sheet is a dialog. */
+    titleTag?: 'p' | 'h2';
+    /** The z-index token: `dialog` for dialogs, `popover` for everything else. */
+    layer: OverlayLayer;
+    /**
+     * Called by the close button and by a swipe down. A tap on the scrim
+     * and Escape close through Bits UI.
+     */
+    onclose: () => void;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** The panel element. */
+    ref?: HTMLElement | null;
+    /** The body, under the title row. It scrolls if it does not fit. */
+    children: Snippet;
+    /** A row pinned under the body, such as a dialog's actions. */
+    footer?: Snippet;
+};
+declare const Sheet: import("svelte").Component<SheetProps, {}, "ref">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;