@mystravil/hardpoint 0.0.0-stage → 0.1.0

package/dist/components/MediaFrame.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type MediaFrameProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/**
+		 * The frame's aspect ratio, any CSS `aspect-ratio` value such as
+		 * `16 / 9`. Without it the frame takes its content's height, unless an
+		 * ancestor sets `--media-frame-ratio` (a page sets that custom property
+		 * in its media queries to change the ratio by breakpoint).
+		 */
+		ratio?: string;
+		/** The inner width in px, inside the 1px frame. Bindable, read-only. */
+		width?: number;
+		/** The inner height in px, inside the 1px frame. Bindable, read-only. */
+		height?: number;
+		/** The image, diagram or chart. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ratio,
+		width = $bindable(),
+		height = $bindable(),
+		class: className,
+		children,
+		...rest
+	}: MediaFrameProps = $props();
+</script>
+
+<!--
+	A 1px hairline frame with small + registration marks over its corners and
+	top centre (BRIEF, visual rule 8; da3-55, da3-61), for images and
+	diagrams, never text blocks. The marks paint over the content. Content
+	that fills the frame positions itself (absolute, inset 0) and reads
+	bind:width and bind:height to draw at the frame's real size.
+-->
+<div
+	{...rest}
+	class={['hp-media-frame', className]}
+	style:--media-frame-ratio={ratio}
+	bind:clientWidth={width}
+	bind:clientHeight={height}
+>
+	{@render children?.()}
+	<span class="reg top left" aria-hidden="true"></span>
+	<span class="reg top mid" aria-hidden="true"></span>
+	<span class="reg top right" aria-hidden="true"></span>
+	<span class="reg bottom left" aria-hidden="true"></span>
+	<span class="reg bottom right" aria-hidden="true"></span>
+</div>
+
+<style>
+	.hp-media-frame {
+		position: relative;
+		aspect-ratio: var(--media-frame-ratio, auto);
+		border: 1px solid var(--border);
+	}
+
+	/* A 13px + whose 1px strokes cross at its centre pixel, 12px in from
+	   the frame's inner edge. */
+	.reg {
+		position: absolute;
+		/* matches the approved specimen */
+		width: 13px;
+		/* matches the approved specimen */
+		height: 13px;
+		pointer-events: none;
+	}
+	.top {
+		top: 12px;
+	}
+	.bottom {
+		bottom: 12px;
+	}
+	.left {
+		left: 12px;
+	}
+	.right {
+		right: 12px;
+	}
+	.mid {
+		/* matches the approved specimen */
+		left: calc(50% - 6px);
+	}
+	.reg::before,
+	.reg::after {
+		content: '';
+		position: absolute;
+		background: var(--text);
+	}
+	.reg::before {
+		/* matches the approved specimen */
+		top: 6px;
+		left: 0;
+		/* matches the approved specimen */
+		width: 13px;
+		height: 1px;
+	}
+	.reg::after {
+		top: 0;
+		/* matches the approved specimen */
+		left: 6px;
+		width: 1px;
+		/* matches the approved specimen */
+		height: 13px;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type MediaFrameProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * The frame's aspect ratio, any CSS `aspect-ratio` value such as
+     * `16 / 9`. Without it the frame takes its content's height, unless an
+     * ancestor sets `--media-frame-ratio` (a page sets that custom property
+     * in its media queries to change the ratio by breakpoint).
+     */
+    ratio?: string;
+    /** The inner width in px, inside the 1px frame. Bindable, read-only. */
+    width?: number;
+    /** The inner height in px, inside the 1px frame. Bindable, read-only. */
+    height?: number;
+    /** The image, diagram or chart. */
+    children?: Snippet;
+};
+declare const MediaFrame: import("svelte").Component<MediaFrameProps, {}, "width" | "height">;
+type MediaFrame = ReturnType<typeof MediaFrame>;
+export default MediaFrame;

package/dist/components/MediaImage.svelte

@@ -0,0 +1,256 @@
+<script lang="ts" module>
+	import type { HTMLImgAttributes } from 'svelte/elements';
+
+	export type MediaImageProps = Omit<HTMLImgAttributes, 'src' | 'alt' | 'children'> & {
+		/**
+		 * The image's URL. Leave it undefined while the app does not know it
+		 * yet: the frame waits, as it does while the image loads. A different
+		 * URL starts a new load; the same one changes nothing.
+		 */
+		src?: string;
+		/** The text alternative, required. `""` for a decorative image. */
+		alt: string;
+		/** The `<img>` element, while there is a `src`. Bindable, read-only. */
+		ref?: HTMLImageElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { useMotion } from '../motion/context.js';
+	import { duration } from '../motion/transitions.js';
+	import Skeleton from './Skeleton.svelte';
+	import { resolveImage } from './internal/resolve.js';
+
+	let { src, alt, ref = $bindable(null), class: className, ...rest }: MediaImageProps = $props();
+
+	const motion = useMotion();
+
+	// waiting: no src yet, or the image has not loaded; the block shows
+	//   after --skeleton-delay. fade and resolve: the image reveals over the
+	//   block. shown: the image alone. error: the image failed to load.
+	type Phase = 'waiting' | 'fade' | 'resolve' | 'shown' | 'error';
+	let phase = $state<Phase>('waiting');
+
+	let root = $state<HTMLDivElement>();
+	/** The src the phase belongs to. */
+	let current = untrack(() => src);
+	/** The image a resolve draws, and its step in ms, read when it arrived. */
+	let arrived: HTMLImageElement | undefined;
+	let step = 0;
+
+	// Before the DOM update, so the image of a new src starts hidden. A block
+	// already on screen stays: the wait goes on with the new src.
+	$effect.pre(() => {
+		const next = src;
+		untrack(() => {
+			if (next === current) return;
+			current = next;
+			phase = 'waiting';
+		});
+	});
+
+	// One <img> per src (see the {#key} below), so this runs once per load.
+	// The app's own onload and onerror sit on the element through `rest` and
+	// fire as usual.
+	function watch(img: HTMLImageElement) {
+		return untrack(() => {
+			let alive = true;
+			let pending = false;
+			let cancel: (() => void) | undefined;
+
+			const fail = () => {
+				if (alive && phase === 'waiting') phase = 'error';
+			};
+
+			// The image is decoded, so its first frame on screen is never blank.
+			const arrive = () => {
+				if (!alive || phase !== 'waiting') return;
+				const node = root;
+				// Before the block showed, or with no box to reveal in: at once.
+				const block = node?.querySelector(':scope > .hp-skeleton');
+				if (!node || block?.getAttribute('data-state') !== 'visible' || !node.clientWidth || !node.clientHeight) {
+					phase = 'shown';
+					return;
+				}
+				// Read now, so a token retuned during the load applies.
+				if (motion.expressive && img.naturalWidth > 0) {
+					step = duration(node, '--resolve-step');
+					if (step > 0) {
+						arrived = img;
+						phase = 'resolve';
+						return;
+					}
+				}
+				const ms = duration(node, '--dur-reveal');
+				if (ms <= 0) {
+					phase = 'shown';
+					return;
+				}
+				const settle = getComputedStyle(node).getPropertyValue('--settle').trim();
+				// Started before the DOM update, so the image's first frame is
+				// already at 0 over the block.
+				const fade = img.animate(
+					{ opacity: [0, 1] },
+					{ duration: ms, easing: CSS.supports('transition-timing-function', settle) ? settle : 'ease-out' }
+				);
+				fade.onfinish = () => {
+					if (alive) phase = 'shown';
+				};
+				cancel = () => fade.cancel();
+				phase = 'fade';
+			};
+
+			const onload = () => {
+				// Only the first load counts: a later one is a new srcset
+				// candidate, or an event Svelte replays after hydration.
+				if (pending || phase !== 'waiting') return;
+				pending = true;
+				img.decode().then(arrive, () => {
+					if (img.naturalWidth > 0) arrive();
+					else fail();
+				});
+			};
+
+			if (img.complete) {
+				// Cached, or loaded before hydration: at once. A complete image
+				// without a size is broken, unless it is an SVG without one.
+				if (img.naturalWidth > 0) phase = 'shown';
+				else
+					img.decode().then(() => {
+						if (alive && phase === 'waiting') phase = 'shown';
+					}, fail);
+			}
+			img.addEventListener('load', onload);
+			img.addEventListener('error', fail);
+			return () => {
+				alive = false;
+				cancel?.();
+				img.removeEventListener('load', onload);
+				img.removeEventListener('error', fail);
+			};
+		});
+	}
+
+	// The canvas mounts with the resolve, after the DOM update and before it
+	// is painted; it unmounts when the resolve ends or a new src starts.
+	function mosaic(canvas: HTMLCanvasElement) {
+		return untrack(() => {
+			const img = arrived;
+			if (!img) {
+				phase = 'shown';
+				return;
+			}
+			return resolveImage(canvas, img, step, () => {
+				if (phase === 'resolve') phase = 'shown';
+			});
+		});
+	}
+</script>
+
+<!--
+	An image that fills a MediaFrame and takes over from a skeleton block
+	when it loads (BRIEF, motion rules 2 and 10):
+
+	  <MediaFrame ratio="3 / 2"><MediaImage src={url} alt="…" /></MediaFrame>
+
+	It lies over the frame's whole inner box (absolute, inset 0) and covers
+	it (`object-fit: cover`, the only fit for now: a frame crops, it never
+	letterboxes). So the frame needs a size of its own: a `ratio`, or
+	`--media-frame-ratio`. A frame without one takes its content's height,
+	and this has none, so the frame shrinks to its two border lines.
+
+	While there is no `src` or the image has not loaded, a block Skeleton
+	fills the frame; it appears after `--skeleton-delay`, as everywhere else.
+	An image already complete when it mounts (cached, or loaded before
+	hydration), or one that arrives before the block showed, appears at
+	once. Otherwise it reveals once `img.decode()` is done, so its first
+	frame is never blank: in the expressive tier (`useMotion().expressive`)
+	it resolves from a mosaic that sharpens in five steps of `--resolve-step`
+	(internal/resolve.ts); everywhere else, and so with reduced motion, it
+	fades in over the block for `--dur-reveal` on `--settle`, as LoadRegion's
+	crossfade does. The fade changes only opacity, so it runs under reduced
+	motion. `--resolve-step`, `--dur-reveal` and `--settle` are read from
+	the element when the image arrives. An image from another origin
+	without CORS headers resolves too: the mosaic is drawn, never read. An
+	image rendered on the server stays hidden until hydration.
+
+	On a load error the block goes and no broken-image glyph shows: the
+	frame shows the `alt` as a muted caption in its middle, so a sighted
+	user still learns what the image held, or nothing for `alt=""`. The
+	app's `onerror` fires; a different `src` tries again.
+
+	The <img> with its `alt` is in the DOM and the accessibility tree from
+	the moment it has a `src`; while it waits it is hidden by opacity only.
+	The block, the canvas and the caption are `aria-hidden`, and pointer
+	events pass through them. No live region: the page says what loads. It
+	never takes focus. `class` and other attributes go to the <img>
+	(`srcset`, `sizes`, `loading`, `width`, `height`, handlers). The root
+	`div.hp-media-image` carries `data-state` waiting | fade | resolve |
+	shown | error.
+-->
+<div class="hp-media-image" data-state={phase} bind:this={root}>
+	{#if phase === 'waiting' || phase === 'fade' || phase === 'resolve'}
+		<Skeleton variant="block" height="100%" />
+	{/if}
+	{#if src}
+		{#key src}
+			<img {...rest} {src} {alt} class={className} bind:this={ref} {@attach watch} />
+		{/key}
+	{/if}
+	{#if phase === 'resolve'}
+		<canvas aria-hidden="true" {@attach mosaic}></canvas>
+	{/if}
+	{#if phase === 'error' && alt}
+		<span class="caption hp-caption" aria-hidden="true">{alt}</span>
+	{/if}
+</div>
+
+<style>
+	/* Over the frame's inner box; the frame's marks paint over it. */
+	.hp-media-image {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+	}
+	.hp-media-image > :global(.hp-skeleton),
+	canvas {
+		pointer-events: none;
+	}
+	img,
+	canvas {
+		position: absolute;
+		inset: 0;
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+	img {
+		object-fit: cover;
+	}
+	/* Hidden by opacity only, so the image stays in the accessibility tree.
+	   A broken image would draw the browser's glyph and its alt. */
+	[data-state='waiting'] > img,
+	[data-state='resolve'] > img,
+	[data-state='error'] > img {
+		opacity: 0;
+	}
+	/* Nearest neighbour if the box does not fill whole device pixels: the
+	   blocks stay square and crisp, never blurred. */
+	canvas {
+		image-rendering: pixelated;
+	}
+
+	/* The alt of an image that failed, centred, clear of the frame's marks. */
+	.caption {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		padding: var(--space-8);
+		overflow: hidden;
+		color: var(--muted);
+		text-align: center;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+export type MediaImageProps = Omit<HTMLImgAttributes, 'src' | 'alt' | 'children'> & {
+    /**
+     * The image's URL. Leave it undefined while the app does not know it
+     * yet: the frame waits, as it does while the image loads. A different
+     * URL starts a new load; the same one changes nothing.
+     */
+    src?: string;
+    /** The text alternative, required. `""` for a decorative image. */
+    alt: string;
+    /** The `<img>` element, while there is a `src`. Bindable, read-only. */
+    ref?: HTMLImageElement | null;
+};
+declare const MediaImage: import("svelte").Component<MediaImageProps, {}, "ref">;
+type MediaImage = ReturnType<typeof MediaImage>;
+export default MediaImage;

package/dist/components/Menu.svelte

@@ -0,0 +1,258 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	export type MenuTriggerSnippetProps = {
+		/** Spread onto the button that opens the menu. */
+		props: Record<string, unknown>;
+	};
+
+	/**
+	 * Attributes and handlers not listed here go to the menu element (Bits UI
+	 * `DropdownMenu.Content`), among them `side` (default `bottom`), `align`
+	 * (default `start`), `sideOffset` (default 8), `collisionPadding`
+	 * (default 8), `loop`, `onCloseAutoFocus`, `onEscapeKeydown` and
+	 * `onInteractOutside`. The placement props apply from 600px only; below it
+	 * the menu is a bottom sheet.
+	 */
+	export type MenuProps = Omit<BitsDropdownMenu.ContentProps, 'child' | 'children' | 'forceMount' | 'ref'> & {
+		open?: boolean;
+		/**
+		 * The menu's accessible name, and the sheet's title below 600px. Use the
+		 * trigger's accessible name: its text, or an icon button's `aria-label`.
+		 * A fixed string the app defines, set in caps as the sheet's title, so it
+		 * never carries user data; name a row's item through the trigger's
+		 * `aria-describedby`.
+		 */
+		label: string;
+		/** The button the menu opens from: spread `props` onto it. */
+		trigger: Snippet<[MenuTriggerSnippetProps]>;
+		/** The items: MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuGroup and MenuSeparator. */
+		children: Snippet;
+		/** The sheet's close button's accessible name (below 600px). */
+		closeLabel?: string;
+		/** The menu element, `role="menu"`. */
+		ref?: HTMLElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { pop } from '../motion/index.js';
+	import Sheet from './internal/Sheet.svelte';
+
+	let {
+		open = $bindable(false),
+		label,
+		trigger,
+		children,
+		closeLabel = 'Close',
+		ref = $bindable(null),
+		class: className,
+		onInteractOutside,
+		onCloseAutoFocus,
+		side = 'bottom',
+		align = 'start',
+		sideOffset = 8,
+		collisionPadding = 8,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		customAnchor,
+		...rest
+	}: MenuProps = $props();
+
+	// Placement belongs to the menu under the trigger; the sheet always sits
+	// at the bottom edge, so ContentStatic never receives these.
+	const placement = $derived({
+		side,
+		align,
+		sideOffset,
+		collisionPadding,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		customAnchor
+	});
+
+	// The form follows the width (BRIEF, Apps and phones: Overlays): a menu
+	// under its trigger from 600px, the shared bottom sheet below it.
+	const wide = new MediaQuery('min-width: 600px', true);
+
+	// Bits UI moves real focus to the highlighted item, whether keys or a
+	// pointer moved it. Only a highlight the keys moved draws the focus
+	// contour; a pointer's draws the tint alone. The items read the contour
+	// from --menu-contour, which .hp-menu[data-keyboard] sets.
+	let keyboard = $state(false);
+
+	let sheetNode = $state<HTMLElement | null>(null);
+	let triggerNode = $state<HTMLElement | null>(null);
+
+	function close() {
+		open = false;
+	}
+
+	// The sheet's title row and handle sit outside the menu element; pressing
+	// them is not an outside press.
+	function insideSheet(e: PointerEvent) {
+		if (sheetNode && e.target instanceof Node && sheetNode.contains(e.target)) {
+			e.preventDefault();
+			return;
+		}
+		onInteractOutside?.(e);
+	}
+
+	// Bits UI leaves focus where an outside press put it, so a click on
+	// another control keeps it. Below 600px the only thing outside is the
+	// scrim, and a press there is a dismiss like the close button, so focus
+	// returns to the trigger as it does after the close button.
+	function returnFocus(e: Event) {
+		onCloseAutoFocus?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		triggerNode?.focus();
+	}
+
+	// Listens on the menu element without replacing Bits UI's own handlers
+	// in `props`.
+	function trackInput(node: HTMLElement) {
+		const keys = () => (keyboard = true);
+		const pointer = () => (keyboard = false);
+		node.addEventListener('keydown', keys, true);
+		node.addEventListener('pointerdown', pointer, true);
+		node.addEventListener('pointermove', pointer, true);
+		return () => {
+			node.removeEventListener('keydown', keys, true);
+			node.removeEventListener('pointerdown', pointer, true);
+			node.removeEventListener('pointermove', pointer, true);
+		};
+	}
+</script>
+
+<!--
+	Bits UI gives the trigger aria-haspopup="menu", aria-expanded and
+	aria-controls; the menu element takes role="menu" and `label` as its
+	name. Opened by keys, focus moves to the first item; opened by a pointer,
+	to the menu itself. Arrow keys move the highlight and loop, letters jump
+	by typeahead, Enter or Space runs the item. Escape, choosing an item and,
+	below 600px, the close button, a swipe down or a press on the scrim close
+	it and return focus to the trigger. From 600px a press outside closes it
+	and leaves focus where the press put it; Tab closes it and moves on.
+-->
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger
+		bind:ref={triggerNode}
+		onkeydowncapture={() => (keyboard = true)}
+		onpointerdowncapture={() => (keyboard = false)}
+	>
+		{#snippet child({ props })}
+			{@render trigger({ props })}
+		{/snippet}
+	</DropdownMenu.Trigger>
+
+	<DropdownMenu.Portal>
+		{#if wide.current}
+			<DropdownMenu.Content forceMount bind:ref {...placement} {onInteractOutside} {onCloseAutoFocus} {...rest}>
+				{#snippet child({ wrapperProps, props, open: shown })}
+					{#if shown}
+						<div {...wrapperProps}>
+							<div
+								{...props}
+								class={['hp-menu', className]}
+								data-form="popover"
+								data-keyboard={keyboard || undefined}
+								aria-label={label}
+								transition:pop
+								{@attach trackInput}
+							>
+								{@render children()}
+							</div>
+						</div>
+					{/if}
+				{/snippet}
+			</DropdownMenu.Content>
+		{:else}
+			<DropdownMenu.ContentStatic
+				forceMount
+				bind:ref
+				{...rest}
+				preventScroll
+				onInteractOutside={insideSheet}
+				onCloseAutoFocus={returnFocus}
+			>
+				{#snippet child({ props, open: shown })}
+					<Sheet open={shown} layer="popover" title={label} {closeLabel} onclose={close} bind:ref={sheetNode}>
+						<div
+							{...props}
+							class={['hp-menu', className]}
+							data-form="sheet"
+							data-keyboard={keyboard || undefined}
+							aria-label={label}
+							{@attach trackInput}
+						>
+							{@render children()}
+						</div>
+					</Sheet>
+				{/snippet}
+			</DropdownMenu.ContentStatic>
+		{/if}
+	</DropdownMenu.Portal>
+</DropdownMenu.Root>
+
+<style>
+	/* The list in both forms. Items read two inherited properties:
+	   --menu-inset, the row's side padding, so item text lines up with the
+	   menu's edge here and with the sheet's title there; and --menu-contour,
+	   the outline a highlighted row draws, which only keys turn on. The menu
+	   element takes focus when a pointer opens it; the rows show where focus
+	   is, so the menu itself draws no contour. */
+	.hp-menu {
+		--menu-inset: var(--space-3);
+		--menu-contour: none;
+
+		box-sizing: border-box;
+		padding-block: var(--space-1);
+		background: var(--canvas);
+		color: var(--text);
+		font-family: var(--sans);
+		outline: none;
+	}
+	.hp-menu[data-keyboard] {
+		--menu-contour: 2px solid var(--focus);
+	}
+
+	/* ---- Popover (600px and up): a black panel under its trigger --------- */
+
+	/* On the popover layer (tokens.css), over the shell and over an open
+	   dialog; Bits UI copies the z-index to the positioned wrapper. At least
+	   as wide as the trigger and 192px, at most 320px, and as tall as the
+	   space beside the trigger; a longer list scrolls inside. */
+	.hp-menu[data-form='popover'] {
+		position: relative;
+		z-index: var(--layer-popover);
+		width: max-content;
+		min-width: max(var(--bits-dropdown-menu-anchor-width), 192px);
+		max-width: min(320px, var(--bits-dropdown-menu-content-available-width));
+		max-height: var(--bits-dropdown-menu-content-available-height);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		border: 1px solid var(--border-control);
+	}
+
+	/* ---- Sheet (compact): the list is the sheet's body, which scrolls ---- */
+
+	.hp-menu[data-form='sheet'] {
+		--menu-inset: var(--gutter);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+export type MenuTriggerSnippetProps = {
+    /** Spread onto the button that opens the menu. */
+    props: Record<string, unknown>;
+};
+/**
+ * Attributes and handlers not listed here go to the menu element (Bits UI
+ * `DropdownMenu.Content`), among them `side` (default `bottom`), `align`
+ * (default `start`), `sideOffset` (default 8), `collisionPadding`
+ * (default 8), `loop`, `onCloseAutoFocus`, `onEscapeKeydown` and
+ * `onInteractOutside`. The placement props apply from 600px only; below it
+ * the menu is a bottom sheet.
+ */
+export type MenuProps = Omit<BitsDropdownMenu.ContentProps, 'child' | 'children' | 'forceMount' | 'ref'> & {
+    open?: boolean;
+    /**
+     * The menu's accessible name, and the sheet's title below 600px. Use the
+     * trigger's accessible name: its text, or an icon button's `aria-label`.
+     * A fixed string the app defines, set in caps as the sheet's title, so it
+     * never carries user data; name a row's item through the trigger's
+     * `aria-describedby`.
+     */
+    label: string;
+    /** The button the menu opens from: spread `props` onto it. */
+    trigger: Snippet<[MenuTriggerSnippetProps]>;
+    /** The items: MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuGroup and MenuSeparator. */
+    children: Snippet;
+    /** The sheet's close button's accessible name (below 600px). */
+    closeLabel?: string;
+    /** The menu element, `role="menu"`. */
+    ref?: HTMLElement | null;
+};
+declare const Menu: import("svelte").Component<MenuProps, {}, "ref" | "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;