@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,521 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TriggerContext, useTriggerProps } from "../../primitives/TriggerContext.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { useWarnOnce } from "../../utils/warn-once.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { focusFirstInteractive, tabbables } from "../../utils/focus.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { DensityZeroButtons } from "../button/DensityZeroButtons.js";
+import { closedByOverlayOptions } from "../../utils/closed-by.js";
+import { DIALOG_ROOT_STYLE, dialogStyles } from "./dialog-styles.js";
+import { Children, Fragment, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useDialog, useFocusRing, useModalOverlay, useObjectRef, useOverlayTrigger } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+//#region src/components/dialog/Dialog.tsx
+/** Material Symbols "close" (Apache-2.0). */
+function CloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+	});
+}
+/** How browsers serialise a computed `transparent`. */
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
+/** A corner radius in px; a percentage resolves against the origin's shorter side. */
+function cornerRadius(value, rect) {
+	if (!value.endsWith("%")) return value || "0px";
+	return `${parseFloat(value) / 100 * Math.min(rect.width, rect.height)}px`;
+}
+/** The origin's box as insets from the window (the full-screen dialog's box). */
+function measureOrigin(origin) {
+	const isElement = origin instanceof Element;
+	const rect = isElement ? origin.getBoundingClientRect() : origin;
+	const style = isElement ? getComputedStyle(origin) : null;
+	const radius = cornerRadius(style?.borderTopLeftRadius ?? "0px", rect);
+	const top = rect.top;
+	const left = rect.left;
+	const right = window.innerWidth - rect.right;
+	const bottom = window.innerHeight - rect.bottom;
+	const background = style?.backgroundColor ?? TRANSPARENT;
+	return {
+		clip: `inset(${top}px ${right}px ${bottom}px ${left}px round ${radius})`,
+		color: background === TRANSPARENT ? "var(--md-sys-color-surface-container-high)" : background
+	};
+}
+const DialogTriggerContext = createContext(null);
+/**
+* Calls `onOpened` once the enter motion has finished: every CSS transition running on the
+* scrim, the motion wrapper, the panel and the panel's parts when they first render. Styles
+* are read on the first frame, so the `@starting-style` transitions have begun. A transition
+* cut short (the dialog closes while entering) never finishes, so a dialog that closes early
+* doesn't report opening.
+*/
+function useOpened(scrimRef, motionRef, panelRef, onOpened) {
+	const latest = useRef(onOpened);
+	useLayoutEffect(() => {
+		latest.current = onOpened;
+	});
+	useEffect(() => {
+		let active = true;
+		const frame = requestAnimationFrame(() => {
+			const panel = panelRef.current;
+			const transitions = [
+				scrimRef.current,
+				motionRef.current,
+				panel,
+				...panel?.children ?? []
+			].flatMap((element) => {
+				if (!element || typeof element.getAnimations !== "function") return [];
+				getComputedStyle(element).opacity;
+				return element.getAnimations().filter((animation) => "transitionProperty" in animation);
+			});
+			Promise.all(transitions.map((transition) => transition.finished)).then(() => {
+				if (active) latest.current?.();
+			}, () => void 0);
+		});
+		return () => {
+			active = false;
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		scrimRef,
+		motionRef,
+		panelRef
+	]);
+}
+const DialogPartsContext = createContext({
+	titleProps: {},
+	contentProps: {},
+	hasIcon: false,
+	fullScreen: "never",
+	close: () => void 0,
+	setHasContent: () => void 0,
+	setHeaderAction: () => void 0,
+	bottomBar: false
+});
+/**
+* Opens a `Dialog` from a button. The first child is the trigger (any button-like
+* component); the rest is the dialog.
+*
+* @example
+* <DialogTrigger>
+*   <Button>Delete</Button>
+*   <Dialog>…</Dialog>
+* </DialogTrigger>
+*/
+function DialogTrigger({ children, open, defaultOpen, onOpenChange }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, state, triggerRef);
+	const triggerValue = useTriggerProps({
+		...triggerProps,
+		ref: triggerRef
+	});
+	const [trigger, ...dialog] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(DialogTriggerContext, {
+		value: {
+			state,
+			overlayProps,
+			triggerRef
+		},
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerValue,
+			children: trigger
+		}), dialog]
+	});
+}
+/**
+* M3 basic dialog: a modal panel over a scrim, rendered in a portal that keeps the
+* surrounding theme. It's an alert dialog (described by its `DialogContent`). Focus moves
+* to its first interactive element (or one marked `autoFocus`), is contained, and is
+* restored on close; Escape closes it; the page behind does not scroll and is hidden from
+* assistive tech. Name it with a `DialogTitle` (or `aria-label`).
+*
+* It enters with the M3 dialog motion: it slides 50px away from the window edge it sits
+* against while its container grows from that edge, then its headline and content fade in,
+* then its actions; it leaves by fading its parts, sliding back and shrinking, then fading.
+* Any children take part: the actions phase is for `DialogActions` (or any child with
+* `data-slot="actions"`), and every other child fades in with the content. `onOpened` and
+* `onClosed` report the end of each motion; `instant` turns it off.
+*
+* `className` and `style` go on the outermost element, a full-window layer around the
+* positioner whose inline placement they can't move, so a layout class (`static`,
+* `overflow-hidden`, a transform) never hides, clips or stretches the dialog; style the
+* surface with `classNames.panel`. `ref` and other attributes go on the dialog panel.
+*
+* @example
+* <Dialog icon={<DeleteIcon />}>
+*   {({ close }) => (
+*     <>
+*       <DialogTitle>Delete 3 files?</DialogTitle>
+*       <DialogContent>They will be removed from all devices.</DialogContent>
+*       <DialogActions>
+*         <Button variant="text" onPress={close}>Cancel</Button>
+*         <Button variant="text" onPress={remove}>Delete</Button>
+*       </DialogActions>
+*     </>
+*   )}
+* </Dialog>
+*/
+function Dialog({ open, defaultOpen, onOpenChange, origin, onClosed, ...props }) {
+	const trigger = useContext(DialogTriggerContext);
+	const ownState = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const state = trigger?.state ?? ownState;
+	const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, "opacity", !props.instant);
+	const onClosedRef = useRef(onClosed);
+	useLayoutEffect(() => {
+		onClosedRef.current = onClosed;
+	});
+	const wasPresent = useRef(isPresent);
+	useEffect(() => {
+		if (wasPresent.current && !isPresent) onClosedRef.current?.();
+		wasPresent.current = isPresent;
+	}, [isPresent]);
+	const usesOrigin = origin !== void 0 && (props.fullScreen ?? "never") !== "never";
+	const [measured, setMeasured] = useState(null);
+	if (!isPresent && measured !== null) setMeasured(null);
+	const triggerRef = trigger?.triggerRef;
+	const isOpen = state.isOpen;
+	useLayoutEffect(() => {
+		if (!usesOrigin || !isPresent) return;
+		const target = origin === "trigger" ? triggerRef?.current : origin;
+		setMeasured({ box: target ? measureOrigin(target) : null });
+	}, [
+		usesOrigin,
+		origin,
+		triggerRef,
+		isOpen,
+		isPresent
+	]);
+	if (!isPresent || usesOrigin && measured === null) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		children: /* @__PURE__ */ jsx(DialogModal, {
+			...props,
+			state,
+			isExiting,
+			exitProps,
+			triggerOverlayProps: trigger?.overlayProps,
+			originBox: usesOrigin ? measured?.box ?? null : null
+		})
+	});
+}
+function DialogModal({ state, isExiting, exitProps, triggerOverlayProps, originBox, role: roleProp, closedBy, icon, fullScreen = "never", placement = "center", instant = false, transition = "reveal", onOpened, children, className, classNames, style, ref, ...rest }) {
+	const role = roleProp ?? (fullScreen === "never" ? "alertdialog" : "dialog");
+	const panelRef = useObjectRef(ref);
+	const motionRef = useRef(null);
+	const scrimRef = useRef(null);
+	useOpened(scrimRef, motionRef, panelRef, onOpened);
+	const [hasContent, setHasContent] = useState(false);
+	const [headerAction, setHeaderAction] = useState(false);
+	const { modalProps, underlayProps } = useModalOverlay(closedByOverlayOptions(closedBy ?? (role === "alertdialog" ? "closerequest" : "any"), isExiting), state, panelRef);
+	const { dialogProps, titleProps, contentProps } = useDialog({
+		...rest,
+		role
+	}, panelRef);
+	const describedBy = rest["aria-describedby"] ?? (hasContent ? dialogProps["aria-describedby"] : void 0);
+	useEffect(() => focusFirstInteractive(panelRef.current, leastDestructiveAction), [panelRef]);
+	const hasIcon = fullScreen !== "always" && icon !== void 0 && icon !== null;
+	const bottomBar = fullScreen !== "never" && !headerAction;
+	const origin = originBox !== null;
+	const styles = dialogStyles({
+		hasIcon,
+		fullScreen,
+		placement,
+		bottomBar,
+		origin,
+		instant,
+		transition
+	});
+	const exiting = isExiting || void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: scrimRef,
+		"aria-hidden": "true",
+		"data-exiting": exiting,
+		className: styles.scrim({ class: classNames?.scrim })
+	}), /* @__PURE__ */ jsx("div", {
+		style: {
+			...style,
+			...DIALOG_ROOT_STYLE
+		},
+		className: styles.root({ class: className }),
+		children: /* @__PURE__ */ jsx("div", {
+			...underlayProps,
+			className: styles.positioner({ class: classNames?.positioner }),
+			children: /* @__PURE__ */ jsx("div", {
+				...exitProps,
+				ref: motionRef,
+				"data-exiting": exiting,
+				style: originBox ? {
+					"--m3-dialog-origin": originBox.clip,
+					"--m3-dialog-origin-color": originBox.color
+				} : void 0,
+				className: styles.motion(),
+				children: /* @__PURE__ */ jsx("div", {
+					...mergeProps(rest, triggerOverlayProps ?? {}, modalProps, dialogProps),
+					"aria-describedby": describedBy,
+					ref: panelRef,
+					"data-exiting": exiting,
+					"data-tokens": mergeDataTokens("md-comp-dialog", rest),
+					"data-full-screen": fullScreen === "never" ? void 0 : fullScreen,
+					"data-origin": origin || void 0,
+					className: styles.panel({ class: [transition === "reveal" && styles.parts(), classNames?.panel] }),
+					children: /* @__PURE__ */ jsx(TriggerContext, {
+						value: null,
+						children: /* @__PURE__ */ jsxs(DialogPartsContext, {
+							value: {
+								titleProps,
+								contentProps,
+								hasIcon,
+								fullScreen,
+								close: state.close,
+								setHasContent,
+								setHeaderAction,
+								bottomBar
+							},
+							children: [hasIcon && /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "icon",
+								className: styles.icon({ class: cn(fullScreen === "compact" && "max-medium:hidden", classNames?.icon) }),
+								children: icon
+							}), typeof children === "function" ? children({ close: state.close }) : children]
+						})
+					})
+				})
+			})
+		})
+	})] });
+}
+/**
+* The dialog's headline; it also names the dialog for assistive tech. In a dialog that can
+* be full screen, use `DialogHeader` instead.
+*/
+function DialogTitle({ className, ...props }) {
+	const { titleProps, hasIcon } = useContext(DialogPartsContext);
+	return /* @__PURE__ */ jsx("h2", {
+		...mergeProps(titleProps, props),
+		"data-slot": "title",
+		className: dialogStyles({ hasIcon }).title({ class: className })
+	});
+}
+const DEFAULT_HEADER_LABELS = { close: "Close" };
+/**
+* The headline of a dialog that can be full screen. In full screen it is the M3 full-screen
+* dialog's header: a close icon button, the headline and the confirming action. Otherwise
+* it is a plain `DialogTitle`, and the dialog's `DialogActions` carry the actions.
+*
+* @example
+* <Dialog fullScreen="compact">
+*   <DialogHeader action={<Button variant="text" onPress={save}>Save</Button>}>
+*     Edit name
+*   </DialogHeader>
+*   <DialogContent>…</DialogContent>
+*   <DialogActions>…</DialogActions>
+* </Dialog>
+*/
+function DialogHeader({ children, labels, action, divider = false, closeDisabled = false, className, classNames, ...props }) {
+	const { titleProps, hasIcon, fullScreen, close, setHeaderAction } = useContext(DialogPartsContext);
+	const hasAction = action !== void 0;
+	useLayoutEffect(() => {
+		setHeaderAction(hasAction);
+		return () => setHeaderAction(false);
+	}, [hasAction, setHeaderAction]);
+	const styles = dialogStyles({
+		hasIcon,
+		fullScreen,
+		divider
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: styles.header({ class: cn(classNames?.root, className) }),
+		children: [
+			fullScreen !== "never" && /* @__PURE__ */ jsx(IconButton, {
+				variant: "standard",
+				density: 0,
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				"aria-label": labels?.close ?? DEFAULT_HEADER_LABELS.close,
+				disabled: closeDisabled,
+				onPress: close,
+				className: styles.headerButton({ class: cn(styles.close(), classNames?.close) })
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				...titleProps,
+				"data-slot": "title",
+				className: styles.title({ class: classNames?.title }),
+				children
+			}),
+			fullScreen !== "never" && action !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: styles.headerButton(),
+				children: /* @__PURE__ */ jsx(DensityZeroButtons, { children: action })
+			})
+		]
+	});
+}
+/**
+* Whether an element's content is taller than its box, from a `ResizeObserver` on it and
+* its children (so it is measured only when a size changes).
+*/
+function useOverflows(ref) {
+	const [overflows, setOverflows] = useState(false);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setOverflows(element.scrollHeight > element.clientHeight + 1));
+		observer.observe(element);
+		for (const child of element.children) observer.observe(child);
+		return () => observer.disconnect();
+	}, [ref]);
+	return overflows;
+}
+/**
+* The dialog's supporting text or content; scrolls when the dialog is too tall. It describes
+* an alert dialog. While it scrolls it is focusable (with a focus ring), so the keyboard can
+* scroll it (`data-scrollable`); the dialog's initial focus still goes to its first control.
+*/
+function DialogContent({ className, dividers = false, ref, ...props }) {
+	const { fullScreen, contentProps, setHasContent } = useContext(DialogPartsContext);
+	const contentRef = useObjectRef(ref);
+	const overflows = useOverflows(contentRef);
+	const { isFocusVisible, focusProps } = useFocusRing();
+	useLayoutEffect(() => {
+		setHasContent(true);
+		return () => setHasContent(false);
+	}, [setHasContent]);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(contentProps, overflows ? focusProps : {}, props),
+		ref: contentRef,
+		tabIndex: props.tabIndex ?? (overflows ? 0 : void 0),
+		"data-scrollable": overflows || void 0,
+		"data-focus-visible": overflows && isFocusVisible || void 0,
+		"data-slot": "content",
+		className: dialogStyles({
+			fullScreen,
+			dividers
+		}).content({ class: className })
+	});
+}
+/** The elements among `children`, counting a fragment's children rather than the fragment. */
+function countActions(children) {
+	let count = 0;
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		count += child.type === Fragment ? countActions(child.props.children) : 1;
+	});
+	return count;
+}
+/** `children` as a flat list, with fragments' children in place of the fragments. */
+function flatChildren(children) {
+	return Children.toArray(children).flatMap((child) => isValidElement(child) && child.type === Fragment ? flatChildren(child.props.children) : [child]);
+}
+/**
+* Where a dialog's initial focus goes when its first interactive element is one of its
+* actions: the dismissive, least destructive action (the WAI-ARIA alert dialog pattern:
+* "focus the least destructive action"). That's the first action in source order, which is
+* the row's first button on one line and its last when stacked, since stacked actions are
+* rendered with the confirming action on top. The row says which (`data-stacked`) in the
+* same render that reorders it, so the rule holds whenever the dialog takes focus, before
+* or after the actions stack.
+*/
+function leastDestructiveAction(first) {
+	const row = first.closest("[data-slot=\"actions\"]");
+	if (!row) return first;
+	const actions = tabbables(row);
+	return (row.hasAttribute("data-stacked") ? actions.at(-1) : actions[0]) ?? first;
+}
+/**
+* Whether the actions are stacked: they don't fit on one line, and the layout lets them
+* stack (`--m3-dialog-actions-stack`, off in the full-screen bottom bar). Measured on mount
+* and on every resize of the row or a button. Switching reorders the buttons, and moving
+* the focused one drops focus to the page, so it's focused again.
+*/
+function useStackedActions(ref) {
+	const [stacked, setStacked] = useState(false);
+	const current = useRef(false);
+	const focused = useRef(null);
+	useLayoutEffect(() => {
+		const row = ref.current;
+		if (!row) return;
+		const measure = () => {
+			if (row.clientWidth === 0) return;
+			const style = getComputedStyle(row);
+			const items = [...row.children];
+			const gap = parseFloat(style.columnGap) || 0;
+			const room = row.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+			const needed = items.reduce((sum, item) => sum + item.offsetWidth, 0) + gap * (items.length - 1);
+			const next = style.getPropertyValue("--m3-dialog-actions-stack").trim() === "1" && items.length > 1 && needed > room + .5;
+			if (next === current.current) return;
+			current.current = next;
+			setStacked(next);
+		};
+		const onFocusIn = (event) => {
+			if (event.target instanceof HTMLElement) focused.current = event.target;
+		};
+		const onFocusOut = (event) => {
+			if (event.relatedTarget !== null) focused.current = null;
+		};
+		row.addEventListener("focusin", onFocusIn);
+		row.addEventListener("focusout", onFocusOut);
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		observer?.observe(row);
+		for (const item of row.children) observer?.observe(item);
+		measure();
+		return () => {
+			row.removeEventListener("focusin", onFocusIn);
+			row.removeEventListener("focusout", onFocusOut);
+			observer?.disconnect();
+		};
+	}, [ref]);
+	useLayoutEffect(() => {
+		const element = focused.current;
+		const active = element?.ownerDocument.activeElement;
+		if (element?.isConnected && (!active || active === element.ownerDocument.body)) element.focus();
+	}, [stacked]);
+	return stacked;
+}
+/**
+* Row of actions at the end of the dialog, 8px apart. Put the confirming action last:
+* when the actions do not fit on one line they stack with it on top (M3: "Confirming
+* actions appear above dismissive actions"). Stacked, the buttons are rendered in that
+* visual order, so Tab and screen readers reach the confirming action first, top to bottom,
+* as they reach the dismissive one first in a row. When the actions are the dialog's first
+* controls, its initial focus goes to the dismissive action, stacked (the bottom one) or
+* not: the least destructive choice, as the WAI-ARIA alert dialog pattern asks; a stack
+* that forms or unforms later keeps focus where it is. While the dialog is full screen they're
+* hidden when `DialogHeader` carries the confirming action, and otherwise form the spec's
+* 56px bottom action bar. Use at most two actions (the spec); in development it warns once
+* when it holds more.
+*/
+function DialogActions({ className, children, ref, ...props }) {
+	const { fullScreen, bottomBar } = useContext(DialogPartsContext);
+	const actionCount = countActions(children);
+	useWarnOnce(actionCount > 2, `[@windmorph/react] DialogActions holds ${actionCount} actions; M3 dialogs have at most two (no third such as "Learn more"). Show more inline, or before the dialog opens.`);
+	const rowRef = useObjectRef(ref);
+	const stacked = useStackedActions(rowRef);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: rowRef,
+		"data-slot": "actions",
+		"data-stacked": stacked || void 0,
+		className: dialogStyles({
+			fullScreen,
+			bottomBar
+		}).actions({ class: className }),
+		children: stacked ? flatChildren(children).reverse() : flatChildren(children)
+	});
+}
+//#endregion
+export { Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, leastDestructiveAction };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/components/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["Overlay"],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  Fragment,\n  createContext,\n  isValidElement,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type RefObject,\n  type CSSProperties,\n  type DOMAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useDialog,\n  useFocusRing,\n  useModalOverlay,\n  useObjectRef,\n  useOverlayTrigger,\n  type AriaDialogProps,\n} from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport { Overlay } from '../../primitives/Overlay';\nimport {\n  TriggerContext,\n  useTriggerProps,\n  type TriggerContextValue,\n} from '../../primitives/TriggerContext';\nimport { usePresence } from '../../primitives/use-presence';\nimport { closedByOverlayOptions, type ClosedBy } from '../../utils/closed-by';\nimport { cn } from '../../utils/cn';\nimport { focusFirstInteractive, tabbables } from '../../utils/focus';\nimport { useWarnOnce } from '../../utils/warn-once';\nimport { DensityZeroButtons } from '../button/DensityZeroButtons';\nimport { IconButton } from '../icon-button/IconButton';\nimport { DIALOG_ROOT_STYLE, dialogStyles } from './dialog-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** Material Symbols \"close\" (Apache-2.0). */\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n    </svg>\n  );\n}\n\n/**\n * When a dialog fills the window (the M3 full-screen dialog): `never`, `always`, or\n * `compact` for windows narrower than 600px only, the M3 recommendation.\n */\nexport type DialogFullScreen = 'never' | 'always' | 'compact';\n\n/**\n * How a basic dialog enters and leaves: `reveal`, the M3 dialog motion, or `scale`, the\n * original pop (a fade with a scale from 90%).\n */\nexport type DialogTransition = 'reveal' | 'scale';\n\n/** Where a basic dialog sits in the window, keeping the spec's 56px margin on wider windows. */\nexport type DialogPlacement = 'center' | 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * What a full-screen dialog grows out of (a container transform): `\"trigger\"` for the\n * `DialogTrigger`'s button, an element such as a FAB, or a box in window coordinates.\n */\nexport type DialogOrigin = 'trigger' | Element | DOMRectReadOnly;\n\ninterface DialogTriggerContextValue {\n  state: OverlayTriggerState;\n  /** Links the dialog to its trigger (`aria-controls`). */\n  overlayProps: { id?: string };\n  /** The trigger, for `origin=\"trigger\"`. */\n  triggerRef: RefObject<HTMLElement | null>;\n}\n\n/** Where a container transform starts, measured from its origin. */\ninterface OriginBox {\n  /** The origin's box and corners as a `clip-path` of the window. */\n  clip: string;\n  /** The origin's container colour, or the dialog's own when it has none. */\n  color: string;\n}\n\n/** How browsers serialise a computed `transparent`. */\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)';\n\n/** A corner radius in px; a percentage resolves against the origin's shorter side. */\nfunction cornerRadius(value: string, rect: DOMRectReadOnly): string {\n  if (!value.endsWith('%')) return value || '0px';\n  return `${(parseFloat(value) / 100) * Math.min(rect.width, rect.height)}px`;\n}\n\n/** The origin's box as insets from the window (the full-screen dialog's box). */\nfunction measureOrigin(origin: Element | DOMRectReadOnly): OriginBox {\n  const isElement = origin instanceof Element;\n  const rect = isElement ? origin.getBoundingClientRect() : origin;\n  const style = isElement ? getComputedStyle(origin) : null;\n  const radius = cornerRadius(style?.borderTopLeftRadius ?? '0px', rect);\n  const top = rect.top;\n  const left = rect.left;\n  const right = window.innerWidth - rect.right;\n  const bottom = window.innerHeight - rect.bottom;\n  const background = style?.backgroundColor ?? TRANSPARENT;\n  return {\n    clip: `inset(${top}px ${right}px ${bottom}px ${left}px round ${radius})`,\n    color: background === TRANSPARENT ? 'var(--md-sys-color-surface-container-high)' : background,\n  };\n}\n\nconst DialogTriggerContext = createContext<DialogTriggerContextValue | null>(null);\n\n/**\n * Calls `onOpened` once the enter motion has finished: every CSS transition running on the\n * scrim, the motion wrapper, the panel and the panel's parts when they first render. Styles\n * are read on the first frame, so the `@starting-style` transitions have begun. A transition\n * cut short (the dialog closes while entering) never finishes, so a dialog that closes early\n * doesn't report opening.\n */\nfunction useOpened(\n  scrimRef: RefObject<HTMLElement | null>,\n  motionRef: RefObject<HTMLElement | null>,\n  panelRef: RefObject<HTMLElement | null>,\n  onOpened: (() => void) | undefined,\n) {\n  const latest = useRef(onOpened);\n  useLayoutEffect(() => {\n    latest.current = onOpened;\n  });\n  useEffect(() => {\n    let active = true;\n    const frame = requestAnimationFrame(() => {\n      const panel = panelRef.current;\n      const elements = [scrimRef.current, motionRef.current, panel, ...(panel?.children ?? [])];\n      const transitions = elements.flatMap((element) => {\n        if (!element || typeof element.getAnimations !== 'function') return [];\n        // Reading a style starts the transitions that haven't started yet.\n        void getComputedStyle(element).opacity;\n        return element.getAnimations().filter((animation) => 'transitionProperty' in animation);\n      });\n      Promise.all(transitions.map((transition) => transition.finished)).then(\n        () => {\n          if (active) latest.current?.();\n        },\n        () => undefined,\n      );\n    });\n    return () => {\n      active = false;\n      cancelAnimationFrame(frame);\n    };\n  }, [scrimRef, motionRef, panelRef]);\n}\n\ninterface DialogPartsContextValue {\n  titleProps: DOMAttributes<HTMLElement>;\n  /** The id an alert dialog's description (`DialogContent`) takes. */\n  contentProps: DOMAttributes<HTMLElement>;\n  hasIcon: boolean;\n  fullScreen: DialogFullScreen;\n  close: () => void;\n  /** `DialogContent` reports that it's there, so the dialog is described by it. */\n  setHasContent: (has: boolean) => void;\n  /** `DialogHeader` reports whether it holds the confirming action. */\n  setHeaderAction: (has: boolean) => void;\n  /** Full screen without a header action: `DialogActions` become a bottom bar. */\n  bottomBar: boolean;\n}\n\nconst DialogPartsContext = createContext<DialogPartsContextValue>({\n  titleProps: {},\n  contentProps: {},\n  hasIcon: false,\n  fullScreen: 'never',\n  close: () => undefined,\n  setHasContent: () => undefined,\n  setHeaderAction: () => undefined,\n  bottomBar: false,\n});\n\nexport interface DialogTriggerProps {\n  /** The trigger (a Button, IconButton, …) followed by the `Dialog`. */\n  children: ReactNode;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the dialog opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Opens a `Dialog` from a button. The first child is the trigger (any button-like\n * component); the rest is the dialog.\n *\n * @example\n * <DialogTrigger>\n *   <Button>Delete</Button>\n *   <Dialog>…</Dialog>\n * </DialogTrigger>\n */\nexport function DialogTrigger({ children, open, defaultOpen, onOpenChange }: DialogTriggerProps) {\n  const state = useOverlayTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const triggerRef = useRef<HTMLElement>(null);\n  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n  const triggerValue = useTriggerProps({\n    ...(triggerProps as TriggerContextValue),\n    ref: triggerRef,\n  });\n  const [trigger, ...dialog] = Children.toArray(children);\n  return (\n    <DialogTriggerContext value={{ state, overlayProps, triggerRef }}>\n      <TriggerContext value={triggerValue}>{trigger}</TriggerContext>\n      {dialog}\n    </DialogTriggerContext>\n  );\n}\n\nexport interface DialogClassNames {\n  /** The dimmed layer behind the dialog. */\n  scrim?: string;\n  /**\n   * The fixed, full-window flex box that places the dialog. It pads 24px on compact windows\n   * and 56px from the medium breakpoint, and `placement` sets its alignment, so alignment\n   * classes here (`items-*`, `justify-*`) position the dialog anywhere within the spec's\n   * margin, and padding classes change that margin.\n   */\n  positioner?: string;\n  /** The dialog's surface: its colour, corners, padding, size and shadow. */\n  panel?: string;\n  /** The icon above the title. */\n  icon?: string;\n}\n\nexport interface DialogRenderProps {\n  /** Closes the dialog. */\n  close: () => void;\n}\n\nexport interface DialogProps\n  extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role'>, Omit<AriaDialogProps, 'role'> {\n  /** Controlled open state, when not inside a `DialogTrigger`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled, when not inside a `DialogTrigger`. @default false */\n  defaultOpen?: boolean;\n  /** Called when the dialog opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Basic dialogs are alert dialogs on the web (the spec): they need a decision, are\n   * described by their `DialogContent`, and aren't dismissed by pressing outside. A dialog\n   * that can be full screen is a `dialog`.\n   * @default \"alertdialog\", or \"dialog\" when fullScreen isn't \"never\"\n   */\n  role?: 'dialog' | 'alertdialog';\n  /**\n   * How the user can close the dialog, as HTML's `<dialog closedby>`: `any` (Escape or a\n   * press outside), `closerequest` (Escape only) or `none` (only its own buttons or the app).\n   * @default \"closerequest\" for an alertdialog, \"any\" otherwise\n   */\n  closedBy?: ClosedBy;\n  /** Icon above the title (which is then centred). Decorative. Not shown in full screen. */\n  icon?: ReactNode;\n  /**\n   * Fills the window, with a `DialogHeader` holding the close button, title and confirming\n   * action instead of `DialogActions` (or with them as a bottom bar when the header has no\n   * action). `compact`, the spec's recommendation, does so only below 600px; `always` fills\n   * every window. @default \"never\"\n   */\n  fullScreen?: DialogFullScreen;\n  /**\n   * Grows the full-screen dialog out of this origin and shrinks it back into it on close,\n   * the spec's container transform from a FAB: `\"trigger\"` (the `DialogTrigger`'s button),\n   * an element, or a box in window coordinates. The clip, corners and container colour\n   * move from the origin to the window on the slow spatial spring and the content fades\n   * in; reduced motion keeps only the fades. Used only while the dialog is full screen.\n   */\n  origin?: DialogOrigin;\n  /**\n   * Where a basic dialog sits: centred (the spec's default) or against one side of the\n   * window, keeping 24px from its edges on compact windows and 56px on wider ones. For any\n   * other position, align it with `classNames.positioner` (for example\n   * `\"items-start justify-end\"` for the top end corner). It also sets the motion's\n   * direction: centred or at the top the dialog slides down and grows downward as it\n   * enters, at the bottom up, and at the start or end along the x axis (mirrored in\n   * right-to-left layouts).\n   * @default \"center\"\n   */\n  placement?: DialogPlacement;\n  children?: ReactNode | ((props: DialogRenderProps) => ReactNode);\n  /**\n   * Classes for the dialog's parts, merged over the library's: `scrim`, `positioner` (the\n   * full-window box that places the dialog; align it anywhere with `items-*` and\n   * `justify-*`), `panel` (the surface) and `icon`.\n   */\n  classNames?: DialogClassNames;\n  /** Goes on the outermost element, with `className`. */\n  style?: CSSProperties;\n  /**\n   * How a basic dialog enters and leaves. `reveal` is the M3 dialog motion: it slides 50px\n   * away from the edge it sits against while its container grows from that edge, and its\n   * headline and content, then its actions, fade in. `scale` is the library's original pop,\n   * an extension beyond the M3 motion: the dialog fades in while it scales up from 90%, and\n   * fades out while it scales to 95%, from the centre (`placement=\"center\"`) or from the edge\n   * it sits against. Either way reduced motion keeps only the fades and `instant` turns the\n   * motion off. A full-screen dialog keeps its own motion and ignores it.\n   * @default \"reveal\"\n   */\n  transition?: DialogTransition;\n  /**\n   * Skips the enter and exit motion: the dialog, its parts and the scrim appear and leave at\n   * once, and the dialog leaves the document as soon as it closes. Reduced motion already\n   * keeps only the fades. @default false\n   */\n  instant?: boolean;\n  /**\n   * Called when the dialog has finished opening: once its enter motion (the slide, the\n   * container's growth and every part's fade) has ended, or right after it opens with\n   * `instant`. Not called when it closes before then.\n   */\n  onOpened?: () => void;\n  /**\n   * Called when the dialog has finished closing: once its exit motion has ended and it has\n   * left the document, or right after it closes with `instant`.\n   */\n  onClosed?: () => void;\n}\n\n/**\n * M3 basic dialog: a modal panel over a scrim, rendered in a portal that keeps the\n * surrounding theme. It's an alert dialog (described by its `DialogContent`). Focus moves\n * to its first interactive element (or one marked `autoFocus`), is contained, and is\n * restored on close; Escape closes it; the page behind does not scroll and is hidden from\n * assistive tech. Name it with a `DialogTitle` (or `aria-label`).\n *\n * It enters with the M3 dialog motion: it slides 50px away from the window edge it sits\n * against while its container grows from that edge, then its headline and content fade in,\n * then its actions; it leaves by fading its parts, sliding back and shrinking, then fading.\n * Any children take part: the actions phase is for `DialogActions` (or any child with\n * `data-slot=\"actions\"`), and every other child fades in with the content. `onOpened` and\n * `onClosed` report the end of each motion; `instant` turns it off.\n *\n * `className` and `style` go on the outermost element, a full-window layer around the\n * positioner whose inline placement they can't move, so a layout class (`static`,\n * `overflow-hidden`, a transform) never hides, clips or stretches the dialog; style the\n * surface with `classNames.panel`. `ref` and other attributes go on the dialog panel.\n *\n * @example\n * <Dialog icon={<DeleteIcon />}>\n *   {({ close }) => (\n *     <>\n *       <DialogTitle>Delete 3 files?</DialogTitle>\n *       <DialogContent>They will be removed from all devices.</DialogContent>\n *       <DialogActions>\n *         <Button variant=\"text\" onPress={close}>Cancel</Button>\n *         <Button variant=\"text\" onPress={remove}>Delete</Button>\n *       </DialogActions>\n *     </>\n *   )}\n * </Dialog>\n */\nexport function Dialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  origin,\n  onClosed,\n  ...props\n}: DialogProps) {\n  const trigger = useContext(DialogTriggerContext);\n  const ownState = useOverlayTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const state = trigger?.state ?? ownState;\n  const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, 'opacity', !props.instant);\n  const onClosedRef = useRef(onClosed);\n  useLayoutEffect(() => {\n    onClosedRef.current = onClosed;\n  });\n  const wasPresent = useRef(isPresent);\n  useEffect(() => {\n    if (wasPresent.current && !isPresent) onClosedRef.current?.();\n    wasPresent.current = isPresent;\n  }, [isPresent]);\n  const usesOrigin = origin !== undefined && (props.fullScreen ?? 'never') !== 'never';\n  // The origin is measured before the dialog is in the document (a layout effect, then a\n  // synchronous re-render before paint), so the dialog's first style already starts on the\n  // origin; and again as it closes, in case the origin moved. `box` is null when there's\n  // nothing to measure (`\"trigger\"` outside a `DialogTrigger`).\n  const [measured, setMeasured] = useState<{ box: OriginBox | null } | null>(null);\n  if (!isPresent && measured !== null) setMeasured(null);\n  const triggerRef = trigger?.triggerRef;\n  const isOpen = state.isOpen;\n  useLayoutEffect(() => {\n    if (!usesOrigin || !isPresent) return;\n    const target = origin === 'trigger' ? triggerRef?.current : origin;\n    setMeasured({ box: target ? measureOrigin(target) : null });\n  }, [usesOrigin, origin, triggerRef, isOpen, isPresent]);\n  if (!isPresent || (usesOrigin && measured === null)) return null;\n  return (\n    <Overlay exiting={isExiting}>\n      <DialogModal\n        {...props}\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        triggerOverlayProps={trigger?.overlayProps}\n        originBox={usesOrigin ? (measured?.box ?? null) : null}\n      />\n    </Overlay>\n  );\n}\n\nfunction DialogModal({\n  state,\n  isExiting,\n  exitProps,\n  triggerOverlayProps,\n  originBox,\n  role: roleProp,\n  closedBy,\n  icon,\n  fullScreen = 'never',\n  placement = 'center',\n  instant = false,\n  transition = 'reveal',\n  onOpened,\n  children,\n  className,\n  classNames,\n  style,\n  ref,\n  ...rest\n}: Omit<DialogProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'onClosed'> & {\n  state: OverlayTriggerState;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  triggerOverlayProps?: { id?: string };\n  originBox: OriginBox | null;\n}) {\n  const role = roleProp ?? (fullScreen === 'never' ? 'alertdialog' : 'dialog');\n  const panelRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const motionRef = useRef<HTMLDivElement>(null);\n  const scrimRef = useRef<HTMLDivElement>(null);\n  useOpened(scrimRef, motionRef, panelRef, onOpened);\n  const [hasContent, setHasContent] = useState(false);\n  const [headerAction, setHeaderAction] = useState(false);\n  const { modalProps, underlayProps } = useModalOverlay(\n    closedByOverlayOptions(\n      closedBy ?? (role === 'alertdialog' ? 'closerequest' : 'any'),\n      isExiting,\n    ),\n    state,\n    panelRef,\n  );\n  const { dialogProps, titleProps, contentProps } = useDialog({ ...rest, role }, panelRef);\n  // An alert dialog is described by its content; leave the reference out when there's none.\n  const describedBy =\n    rest['aria-describedby'] ?? (hasContent ? dialogProps['aria-describedby'] : undefined);\n\n  // The spec: \"focus should automatically land on the first interactive element within the\n  // dialog\", not on the panel `useDialog` focuses. A scrolling `DialogContent` is focusable\n  // (so the keyboard can scroll it) but isn't a control. When that element is one of the\n  // actions, focus goes to the least destructive one (`leastDestructiveAction`).\n  useEffect(() => focusFirstInteractive(panelRef.current, leastDestructiveAction), [panelRef]);\n\n  const hasIcon = fullScreen !== 'always' && icon !== undefined && icon !== null;\n  const bottomBar = fullScreen !== 'never' && !headerAction;\n  const origin = originBox !== null;\n  const styles = dialogStyles({\n    hasIcon,\n    fullScreen,\n    placement,\n    bottomBar,\n    origin,\n    instant,\n    transition,\n  });\n  const exiting = isExiting || undefined;\n\n  return (\n    <>\n      <div\n        ref={scrimRef}\n        aria-hidden=\"true\"\n        data-exiting={exiting}\n        className={styles.scrim({ class: classNames?.scrim })}\n      />\n      <div style={{ ...style, ...DIALOG_ROOT_STYLE }} className={styles.root({ class: className })}>\n        <div {...underlayProps} className={styles.positioner({ class: classNames?.positioner })}>\n          <div\n            {...exitProps}\n            ref={motionRef}\n            data-exiting={exiting}\n            style={\n              originBox\n                ? ({\n                    '--m3-dialog-origin': originBox.clip,\n                    '--m3-dialog-origin-color': originBox.color,\n                  } as CSSProperties)\n                : undefined\n            }\n            className={styles.motion()}\n          >\n            <div\n              {...mergeProps(rest, triggerOverlayProps ?? {}, modalProps, dialogProps)}\n              aria-describedby={describedBy}\n              ref={panelRef}\n              data-exiting={exiting}\n              // The component tokens' hook (dialog-tokens.ts).\n              data-tokens={mergeDataTokens('md-comp-dialog', rest)}\n              data-full-screen={fullScreen === 'never' ? undefined : fullScreen}\n              data-origin={origin || undefined}\n              className={styles.panel({\n                class: [transition === 'reveal' && styles.parts(), classNames?.panel],\n              })}\n            >\n              <TriggerContext value={null}>\n                <DialogPartsContext\n                  value={{\n                    titleProps,\n                    contentProps,\n                    hasIcon,\n                    fullScreen,\n                    close: state.close,\n                    setHasContent,\n                    setHeaderAction,\n                    bottomBar,\n                  }}\n                >\n                  {hasIcon && (\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"icon\"\n                      className={styles.icon({\n                        class: cn(\n                          fullScreen === 'compact' && 'max-medium:hidden',\n                          classNames?.icon,\n                        ),\n                      })}\n                    >\n                      {icon}\n                    </span>\n                  )}\n                  {typeof children === 'function' ? children({ close: state.close }) : children}\n                </DialogPartsContext>\n              </TriggerContext>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport type DialogTitleProps = ComponentPropsWithRef<'h2'>;\n\n/**\n * The dialog's headline; it also names the dialog for assistive tech. In a dialog that can\n * be full screen, use `DialogHeader` instead.\n */\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  const { titleProps, hasIcon } = useContext(DialogPartsContext);\n  return (\n    <h2\n      {...mergeProps(titleProps, props)}\n      data-slot=\"title\"\n      className={dialogStyles({ hasIcon }).title({ class: className })}\n    />\n  );\n}\n\nexport interface DialogHeaderClassNames {\n  /** The header row; `className` is merged here too. */\n  root?: string;\n  /** The close button. */\n  close?: string;\n  /** The headline. */\n  title?: string;\n}\n\n/** Words a {@link DialogHeader} announces. */\nexport interface DialogHeaderLabels {\n  /** The full-screen close button's name. @default \"Close\" */\n  close: string;\n}\n\nconst DEFAULT_HEADER_LABELS: DialogHeaderLabels = { close: 'Close' };\n\nexport interface DialogHeaderProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {\n  /** The headline; it names the dialog. */\n  children: ReactNode;\n  /** Words the header announces, with English defaults. */\n  labels?: Partial<DialogHeaderLabels>;\n  /**\n   * The confirming action, usually a text `Button` (\"Save\"). Shown in full screen only;\n   * without it, a full-screen dialog shows its `DialogActions` as a bottom bar.\n   */\n  action?: ReactNode;\n  /** A 1px `outline-variant` divider under the full-screen header. @default false */\n  divider?: boolean;\n  /**\n   * Disables the full-screen close button, e.g. while the confirming action is saving, so the\n   * dialog can't be left halfway. Pair it with the `Dialog`'s `closedBy=\"none\"` to keep Escape\n   * from closing it too. @default false\n   */\n  closeDisabled?: boolean;\n  /** Classes for each part, by slot. */\n  classNames?: DialogHeaderClassNames;\n}\n\n/**\n * The headline of a dialog that can be full screen. In full screen it is the M3 full-screen\n * dialog's header: a close icon button, the headline and the confirming action. Otherwise\n * it is a plain `DialogTitle`, and the dialog's `DialogActions` carry the actions.\n *\n * @example\n * <Dialog fullScreen=\"compact\">\n *   <DialogHeader action={<Button variant=\"text\" onPress={save}>Save</Button>}>\n *     Edit name\n *   </DialogHeader>\n *   <DialogContent>…</DialogContent>\n *   <DialogActions>…</DialogActions>\n * </Dialog>\n */\nexport function DialogHeader({\n  children,\n  labels,\n  action,\n  divider = false,\n  closeDisabled = false,\n  className,\n  classNames,\n  ...props\n}: DialogHeaderProps) {\n  const { titleProps, hasIcon, fullScreen, close, setHeaderAction } =\n    useContext(DialogPartsContext);\n  const hasAction = action !== undefined;\n  useLayoutEffect(() => {\n    setHeaderAction(hasAction);\n    return () => setHeaderAction(false);\n  }, [hasAction, setHeaderAction]);\n  const styles = dialogStyles({ hasIcon, fullScreen, divider });\n  return (\n    <div {...props} className={styles.header({ class: cn(classNames?.root, className) })}>\n      {fullScreen !== 'never' && (\n        <IconButton\n          variant=\"standard\"\n          density={0}\n          icon={<CloseIcon />}\n          aria-label={labels?.close ?? DEFAULT_HEADER_LABELS.close}\n          disabled={closeDisabled}\n          onPress={close}\n          className={styles.headerButton({ class: cn(styles.close(), classNames?.close) })}\n        />\n      )}\n      <h2 {...titleProps} data-slot=\"title\" className={styles.title({ class: classNames?.title })}>\n        {children}\n      </h2>\n      {fullScreen !== 'never' && action !== undefined && (\n        <div className={styles.headerButton()}>\n          <DensityZeroButtons>{action}</DensityZeroButtons>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface DialogContentProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * The basic dialog's optional dividers: 1px `outline-variant` lines across the panel\n   * above and below the content, e.g. around a scrolling list. Not drawn in full screen.\n   * @default false\n   */\n  dividers?: boolean;\n}\n\n/**\n * Whether an element's content is taller than its box, from a `ResizeObserver` on it and\n * its children (so it is measured only when a size changes).\n */\nfunction useOverflows(ref: RefObject<HTMLElement | null>) {\n  const [overflows, setOverflows] = useState(false);\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() =>\n      setOverflows(element.scrollHeight > element.clientHeight + 1),\n    );\n    observer.observe(element);\n    for (const child of element.children) observer.observe(child);\n    return () => observer.disconnect();\n  }, [ref]);\n  return overflows;\n}\n\n/**\n * The dialog's supporting text or content; scrolls when the dialog is too tall. It describes\n * an alert dialog. While it scrolls it is focusable (with a focus ring), so the keyboard can\n * scroll it (`data-scrollable`); the dialog's initial focus still goes to its first control.\n */\nexport function DialogContent({ className, dividers = false, ref, ...props }: DialogContentProps) {\n  const { fullScreen, contentProps, setHasContent } = useContext(DialogPartsContext);\n  const contentRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const overflows = useOverflows(contentRef);\n  const { isFocusVisible, focusProps } = useFocusRing();\n  useLayoutEffect(() => {\n    setHasContent(true);\n    return () => setHasContent(false);\n  }, [setHasContent]);\n  return (\n    <div\n      {...mergeProps(contentProps, overflows ? focusProps : {}, props)}\n      ref={contentRef}\n      tabIndex={props.tabIndex ?? (overflows ? 0 : undefined)}\n      data-scrollable={overflows || undefined}\n      data-focus-visible={(overflows && isFocusVisible) || undefined}\n      data-slot=\"content\"\n      className={dialogStyles({ fullScreen, dividers }).content({ class: className })}\n    />\n  );\n}\n\nexport type DialogActionsProps = ComponentPropsWithRef<'div'>;\n\n/** The elements among `children`, counting a fragment's children rather than the fragment. */\nfunction countActions(children: ReactNode): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) return;\n    count += child.type === Fragment ? countActions(child.props.children) : 1;\n  });\n  return count;\n}\n\n/** `children` as a flat list, with fragments' children in place of the fragments. */\nfunction flatChildren(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap((child) =>\n    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n      ? flatChildren(child.props.children)\n      : [child],\n  );\n}\n\n/**\n * Where a dialog's initial focus goes when its first interactive element is one of its\n * actions: the dismissive, least destructive action (the WAI-ARIA alert dialog pattern:\n * \"focus the least destructive action\"). That's the first action in source order, which is\n * the row's first button on one line and its last when stacked, since stacked actions are\n * rendered with the confirming action on top. The row says which (`data-stacked`) in the\n * same render that reorders it, so the rule holds whenever the dialog takes focus, before\n * or after the actions stack.\n */\nexport function leastDestructiveAction(first: HTMLElement): HTMLElement {\n  const row = first.closest<HTMLElement>('[data-slot=\"actions\"]');\n  if (!row) return first;\n  const actions = tabbables(row);\n  return (row.hasAttribute('data-stacked') ? actions.at(-1) : actions[0]) ?? first;\n}\n\n/**\n * Whether the actions are stacked: they don't fit on one line, and the layout lets them\n * stack (`--m3-dialog-actions-stack`, off in the full-screen bottom bar). Measured on mount\n * and on every resize of the row or a button. Switching reorders the buttons, and moving\n * the focused one drops focus to the page, so it's focused again.\n */\nfunction useStackedActions(ref: RefObject<HTMLDivElement | null>) {\n  const [stacked, setStacked] = useState(false);\n  const current = useRef(false);\n  // The button with focus, kept until focus moves somewhere else.\n  const focused = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    const row = ref.current;\n    if (!row) return;\n    const measure = () => {\n      // A hidden row (the header carries the confirming action) keeps its order.\n      if (row.clientWidth === 0) return;\n      const style = getComputedStyle(row);\n      const items = [...row.children] as HTMLElement[];\n      const gap = parseFloat(style.columnGap) || 0;\n      const room =\n        row.clientWidth -\n        (parseFloat(style.paddingLeft) || 0) -\n        (parseFloat(style.paddingRight) || 0);\n      const needed =\n        items.reduce((sum, item) => sum + item.offsetWidth, 0) + gap * (items.length - 1);\n      const next =\n        style.getPropertyValue('--m3-dialog-actions-stack').trim() === '1' &&\n        items.length > 1 &&\n        needed > room + 0.5;\n      if (next === current.current) return;\n      current.current = next;\n      setStacked(next);\n    };\n    const onFocusIn = (event: FocusEvent) => {\n      if (event.target instanceof HTMLElement) focused.current = event.target;\n    };\n    const onFocusOut = (event: FocusEvent) => {\n      if (event.relatedTarget !== null) focused.current = null;\n    };\n    row.addEventListener('focusin', onFocusIn);\n    row.addEventListener('focusout', onFocusOut);\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(row);\n    for (const item of row.children) observer?.observe(item);\n    measure();\n    return () => {\n      row.removeEventListener('focusin', onFocusIn);\n      row.removeEventListener('focusout', onFocusOut);\n      observer?.disconnect();\n    };\n  }, [ref]);\n  useLayoutEffect(() => {\n    const element = focused.current;\n    const active = element?.ownerDocument.activeElement;\n    if (element?.isConnected && (!active || active === element.ownerDocument.body)) element.focus();\n  }, [stacked]);\n  return stacked;\n}\n\n/**\n * Row of actions at the end of the dialog, 8px apart. Put the confirming action last:\n * when the actions do not fit on one line they stack with it on top (M3: \"Confirming\n * actions appear above dismissive actions\"). Stacked, the buttons are rendered in that\n * visual order, so Tab and screen readers reach the confirming action first, top to bottom,\n * as they reach the dismissive one first in a row. When the actions are the dialog's first\n * controls, its initial focus goes to the dismissive action, stacked (the bottom one) or\n * not: the least destructive choice, as the WAI-ARIA alert dialog pattern asks; a stack\n * that forms or unforms later keeps focus where it is. While the dialog is full screen they're\n * hidden when `DialogHeader` carries the confirming action, and otherwise form the spec's\n * 56px bottom action bar. Use at most two actions (the spec); in development it warns once\n * when it holds more.\n */\nexport function DialogActions({ className, children, ref, ...props }: DialogActionsProps) {\n  const { fullScreen, bottomBar } = useContext(DialogPartsContext);\n  const actionCount = countActions(children);\n  useWarnOnce(\n    actionCount > 2,\n    `[@windmorph/react] DialogActions holds ${actionCount} actions; M3 dialogs have at most two ` +\n      '(no third such as \"Learn more\"). Show more inline, or before the dialog opens.',\n  );\n  const rowRef = useObjectRef(ref);\n  const stacked = useStackedActions(rowRef);\n  return (\n    <div\n      {...props}\n      ref={rowRef}\n      data-slot=\"actions\"\n      data-stacked={stacked || undefined}\n      className={dialogStyles({ fullScreen, bottomBar }).actions({ class: className })}\n    >\n      {/* The same keys either way, so switching moves the buttons rather than remounting them. */}\n      {stacked ? flatChildren(children).reverse() : flatChildren(children)}\n    </div>\n  );\n}\n"],"mappings":"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"}