@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/dialog/dialog-styles.js

@@ -0,0 +1,377 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/dialog/dialog-styles.ts
+/** The dialog root's placement, inline so it wins over consumer layout classes. */
+const DIALOG_ROOT_STYLE = {
+	position: "fixed",
+	inset: 0
+};
+/** Variant definitions for {@link Dialog} and its parts. */
+const dialogStyles = tv({
+	slots: {
+		scrim: [
+			"fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100",
+			"[transition-property:opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]",
+			"starting:opacity-0",
+			"data-exiting:opacity-0",
+			"data-exiting:[transition-duration:var(--md-sys-motion-duration-short-3)]",
+			"data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear)]"
+		],
+		root: "z-(--md-sys-z-dialog)",
+		positioner: "fixed inset-0 z-(--md-sys-z-dialog) flex p-[24px] medium:p-[56px]",
+		motion: [
+			"flex max-h-full max-w-full",
+			"[--m3-dialog-corner:var(--md-comp-dialog-container-shape,var(--md-sys-shape-corner-extra-large))]",
+			"[--m3-dialog-open-clip:inset(-32px_round_calc(var(--m3-dialog-corner)_+_32px))]",
+			"[--m3-dialog-enter-clip:inset(0_0_100%_round_var(--m3-dialog-corner))]",
+			"[--m3-dialog-exit-clip:inset(0_0_65%_round_var(--m3-dialog-corner))]",
+			"[--m3-dialog-slide:0_-50px] [--m3-dialog-scale-origin:center]",
+			"translate-none opacity-100 [clip-path:var(--m3-dialog-open-clip)]",
+			"starting:[translate:var(--m3-dialog-slide)] starting:opacity-0",
+			"starting:[clip-path:var(--m3-dialog-enter-clip)]",
+			"data-exiting:[translate:var(--m3-dialog-slide)] data-exiting:opacity-0",
+			"data-exiting:[clip-path:var(--m3-dialog-exit-clip)]",
+			"motion-reduce:data-exiting:translate-none",
+			"motion-reduce:data-exiting:[clip-path:var(--m3-dialog-open-clip)]",
+			"[transition-property:opacity,translate,clip-path] motion-reduce:[transition-property:opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-spatial-default-easing)]",
+			"data-exiting:[transition-duration:var(--md-sys-motion-duration-short-1),var(--md-sys-motion-duration-short-3),var(--md-sys-motion-duration-short-3)]",
+			"data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear),var(--md-sys-motion-easing-emphasized-accelerate),var(--md-sys-motion-easing-emphasized-accelerate)]",
+			"data-exiting:[transition-delay:var(--md-sys-motion-duration-short-2),0s,0s]",
+			"motion-reduce:data-exiting:[transition-delay:0s]",
+			"motion-reduce:data-exiting:[transition-duration:var(--md-sys-motion-duration-short-3)]"
+		],
+		parts: "",
+		panel: [
+			"flex max-h-full min-w-[min(280px,calc(100vw-48px))] max-w-[560px] flex-col p-[24px]",
+			"rounded-[var(--_md-comp-dialog-container-shape)] bg-[var(--_md-comp-dialog-container-color)]",
+			"text-on-surface shadow-[shadow:var(--_md-comp-dialog-container-elevation)]",
+			"outline-none",
+			"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]"
+		],
+		icon: ["mx-auto inline-flex pb-[16px] [&>svg]:size-[24px]", "text-[color:var(--_md-comp-dialog-with-icon-icon-color)]"],
+		title: ["pb-[16px] text-headline-small font-brand", "text-[color:var(--_md-comp-dialog-headline-color)]"],
+		header: "",
+		headerButton: "",
+		close: "[--md-comp-icon-button-icon-color:var(--md-sys-color-on-surface)]",
+		content: [
+			"min-h-0 flex-1 overflow-y-auto pb-[24px] text-body-medium",
+			"text-[color:var(--_md-comp-dialog-supporting-text-color)]",
+			"focus-ring"
+		],
+		actions: ["flex flex-wrap-reverse items-center justify-end gap-[8px] [--m3-dialog-actions-stack:1]", "data-stacked:flex-wrap"]
+	},
+	variants: {
+		hasIcon: {
+			true: { title: "text-center" },
+			false: { title: "text-start" }
+		},
+		placement: {
+			center: { positioner: "items-center justify-center" },
+			top: {
+				positioner: "items-start justify-center",
+				motion: "[--m3-dialog-scale-origin:top]"
+			},
+			bottom: {
+				positioner: "items-end justify-center",
+				motion: [
+					"[--m3-dialog-enter-clip:inset(100%_0_0_round_var(--m3-dialog-corner))]",
+					"[--m3-dialog-exit-clip:inset(65%_0_0_round_var(--m3-dialog-corner))]",
+					"[--m3-dialog-slide:0_50px] [--m3-dialog-scale-origin:bottom]"
+				]
+			},
+			start: {
+				positioner: "items-center justify-start",
+				motion: [
+					"[--m3-dialog-enter-clip:inset(0_100%_0_0_round_var(--m3-dialog-corner))]",
+					"[--m3-dialog-exit-clip:inset(0_65%_0_0_round_var(--m3-dialog-corner))]",
+					"[--m3-dialog-slide:-50px_0] [--m3-dialog-scale-origin:left]",
+					"rtl:[--m3-dialog-enter-clip:inset(0_0_0_100%_round_var(--m3-dialog-corner))]",
+					"rtl:[--m3-dialog-exit-clip:inset(0_0_0_65%_round_var(--m3-dialog-corner))]",
+					"rtl:[--m3-dialog-slide:50px_0] rtl:[--m3-dialog-scale-origin:right]"
+				]
+			},
+			end: {
+				positioner: "items-center justify-end",
+				motion: [
+					"[--m3-dialog-enter-clip:inset(0_0_0_100%_round_var(--m3-dialog-corner))]",
+					"[--m3-dialog-exit-clip:inset(0_0_0_65%_round_var(--m3-dialog-corner))]",
+					"[--m3-dialog-slide:50px_0] [--m3-dialog-scale-origin:right]",
+					"rtl:[--m3-dialog-enter-clip:inset(0_100%_0_0_round_var(--m3-dialog-corner))]",
+					"rtl:[--m3-dialog-exit-clip:inset(0_65%_0_0_round_var(--m3-dialog-corner))]",
+					"rtl:[--m3-dialog-slide:-50px_0] rtl:[--m3-dialog-scale-origin:left]"
+				]
+			}
+		},
+		fullScreen: {
+			never: {
+				headerButton: "hidden",
+				parts: [
+					"motion-safe:*:starting:opacity-0 motion-safe:data-exiting:*:opacity-0",
+					"*:[transition-property:opacity]",
+					"*:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+					"*:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+					"*:[transition-delay:var(--md-sys-motion-duration-short-1)]",
+					"*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]",
+					"*:data-[slot=actions]:[transition-delay:var(--md-sys-motion-duration-short-3)]",
+					"data-exiting:*:[transition-duration:var(--md-sys-motion-duration-short-2)]",
+					"data-exiting:*:[transition-timing-function:var(--md-sys-motion-easing-linear)]",
+					"data-exiting:*:[transition-delay:0s] data-exiting:*:data-[slot=actions]:[transition-delay:0s]",
+					"data-exiting:*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-duration-short-2)]",
+					"data-exiting:*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-easing-linear)]"
+				]
+			},
+			always: {
+				positioner: "p-0 medium:p-0",
+				motion: [
+					"size-full [--m3-dialog-slide:0_48px]",
+					"[--m3-dialog-open-clip:none] [--m3-dialog-enter-clip:none] [--m3-dialog-exit-clip:none]",
+					"[transition-duration:var(--md-sys-motion-spring-effects-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]",
+					"data-exiting:[transition-delay:0s]",
+					"data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+				],
+				panel: ["size-full max-h-none max-w-none rounded-none p-0 shadow-none", "bg-surface-container-high"],
+				header: "flex h-[56px] shrink-0 items-center gap-[4px] ps-[4px] pe-[12px]",
+				title: "min-w-0 flex-1 truncate ps-[4px] pb-0 text-start text-title-large",
+				content: "px-[24px] pt-[24px]",
+				actions: "hidden"
+			},
+			compact: {
+				positioner: "max-medium:p-0",
+				motion: [
+					"max-medium:size-full max-medium:[--m3-dialog-slide:0_48px]",
+					"max-medium:[--m3-dialog-open-clip:none] max-medium:[--m3-dialog-enter-clip:none]",
+					"max-medium:[--m3-dialog-exit-clip:none]",
+					"max-medium:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]",
+					"max-medium:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]",
+					"max-medium:data-exiting:[transition-delay:0s]",
+					"max-medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"max-medium:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+				],
+				parts: [
+					"medium:motion-safe:*:starting:opacity-0 medium:motion-safe:data-exiting:*:opacity-0",
+					"medium:*:[transition-property:opacity]",
+					"medium:*:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+					"medium:*:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+					"medium:*:[transition-delay:var(--md-sys-motion-duration-short-1)]",
+					"medium:*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"medium:*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]",
+					"medium:*:data-[slot=actions]:[transition-delay:var(--md-sys-motion-duration-short-3)]",
+					"medium:data-exiting:*:[transition-duration:var(--md-sys-motion-duration-short-2)]",
+					"medium:data-exiting:*:[transition-timing-function:var(--md-sys-motion-easing-linear)]",
+					"medium:data-exiting:*:[transition-delay:0s]",
+					"medium:data-exiting:*:data-[slot=actions]:[transition-delay:0s]",
+					"medium:data-exiting:*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-duration-short-2)]",
+					"medium:data-exiting:*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-easing-linear)]"
+				],
+				panel: [
+					"max-medium:size-full max-medium:max-h-none max-medium:max-w-none",
+					"max-medium:rounded-none max-medium:p-0 max-medium:shadow-none",
+					"max-medium:bg-surface-container-high"
+				],
+				header: ["max-medium:flex max-medium:h-[56px] max-medium:shrink-0 max-medium:items-center", "max-medium:gap-[4px] max-medium:ps-[4px] max-medium:pe-[12px]"],
+				headerButton: "medium:hidden",
+				title: ["max-medium:min-w-0 max-medium:flex-1 max-medium:truncate max-medium:ps-[4px]", "max-medium:pb-0 max-medium:text-start max-medium:text-title-large"],
+				content: "max-medium:px-[24px] max-medium:pt-[24px]",
+				actions: "max-medium:hidden"
+			}
+		},
+		/** Full screen without a header action: the actions form a 56px bottom bar. */
+		bottomBar: {
+			true: {},
+			false: {}
+		},
+		/** A divider under the full-screen header. */
+		divider: {
+			true: {},
+			false: {}
+		},
+		/** The basic dialog's optional dividers above and below `DialogContent`. */
+		dividers: {
+			true: {},
+			false: {}
+		},
+		/** A container transform from a trigger (`origin`) into the full-screen dialog. */
+		origin: {
+			true: {},
+			false: {}
+		},
+		/**
+		* The basic dialog's enter and exit: `reveal`, the M3 dialog motion above, or `scale`,
+		* the original pop (see the compound variants). Full-screen dialogs ignore it.
+		*/
+		transition: {
+			reveal: {},
+			scale: {}
+		},
+		/** No enter or exit motion: the dialog, its parts and the scrim appear and go at once. */
+		instant: {
+			true: {
+				scrim: "[transition-property:none]!",
+				motion: "[transition-property:none]!",
+				panel: "[transition-property:none]!",
+				parts: "*:[transition-property:none]!"
+			},
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			fullScreen: "always",
+			bottomBar: true,
+			class: { actions: "flex h-[56px] shrink-0 flex-nowrap px-[24px] [--m3-dialog-actions-stack:0]" }
+		},
+		{
+			fullScreen: "compact",
+			bottomBar: true,
+			class: { actions: "max-medium:flex max-medium:h-[56px] max-medium:shrink-0 max-medium:flex-nowrap max-medium:px-[24px] max-medium:[--m3-dialog-actions-stack:0]" }
+		},
+		{
+			fullScreen: "always",
+			divider: true,
+			class: { header: "border-b border-outline-variant" }
+		},
+		{
+			fullScreen: "compact",
+			divider: true,
+			class: { header: "max-medium:border-b max-medium:border-outline-variant" }
+		},
+		{
+			fullScreen: "never",
+			dividers: true,
+			class: { content: "-mx-[24px] mb-[24px] border-y border-outline-variant px-[24px] py-[8px]" }
+		},
+		{
+			fullScreen: "compact",
+			dividers: true,
+			class: { content: ["medium:-mx-[24px] medium:mb-[24px] medium:border-y medium:border-outline-variant", "medium:px-[24px] medium:py-[8px]"] }
+		},
+		{
+			fullScreen: "never",
+			transition: "scale",
+			class: {
+				scrim: [
+					"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+					"data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+				],
+				motion: [
+					"[--m3-dialog-slide:0_0] [--m3-dialog-open-clip:none]",
+					"[--m3-dialog-enter-clip:none] [--m3-dialog-exit-clip:none]",
+					"origin-(--m3-dialog-scale-origin) scale-none starting:scale-90 data-exiting:scale-95",
+					"motion-reduce:data-exiting:scale-none",
+					"[transition-property:opacity,scale] motion-reduce:[transition-property:opacity]",
+					"[transition-duration:var(--md-sys-motion-spring-effects-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing),var(--md-sys-motion-spring-spatial-default-easing)]",
+					"data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]",
+					"data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]",
+					"data-exiting:[transition-delay:0s]"
+				]
+			}
+		},
+		{
+			fullScreen: "compact",
+			transition: "scale",
+			class: {
+				scrim: [
+					"medium:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+					"medium:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+					"medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"medium:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+				],
+				motion: [
+					"medium:[--m3-dialog-slide:0_0] medium:[--m3-dialog-open-clip:none]",
+					"medium:[--m3-dialog-enter-clip:none] medium:[--m3-dialog-exit-clip:none]",
+					"medium:origin-(--m3-dialog-scale-origin) medium:scale-none",
+					"medium:starting:scale-90 medium:data-exiting:scale-95",
+					"medium:motion-reduce:data-exiting:scale-none",
+					"medium:[transition-property:opacity,scale]",
+					"medium:motion-reduce:[transition-property:opacity]",
+					"medium:[transition-duration:var(--md-sys-motion-spring-effects-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]",
+					"medium:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing),var(--md-sys-motion-spring-spatial-default-easing)]",
+					"medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]",
+					"medium:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]",
+					"medium:data-exiting:[transition-delay:0s]"
+				]
+			}
+		},
+		{
+			fullScreen: "always",
+			origin: true,
+			class: {
+				motion: [
+					"[--m3-dialog-slide:0_0] [--m3-dialog-open-clip:inset(0_round_0)]",
+					"[--m3-dialog-enter-clip:var(--m3-dialog-origin)] [--m3-dialog-exit-clip:var(--m3-dialog-origin)]",
+					"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]",
+					"data-exiting:[transition-duration:var(--md-sys-motion-duration-short-2),var(--md-sys-motion-duration-medium-1),var(--md-sys-motion-duration-medium-1)]",
+					"data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear),var(--md-sys-motion-easing-emphasized-accelerate),var(--md-sys-motion-easing-emphasized-accelerate)]",
+					"data-exiting:[transition-delay:var(--md-sys-motion-duration-short-3),0s,0s]",
+					"motion-reduce:data-exiting:[transition-delay:0s]"
+				],
+				panel: [
+					"[transition-property:background-color] motion-reduce:[transition-property:none]",
+					"[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]",
+					"starting:bg-(--m3-dialog-origin-color) motion-safe:data-exiting:bg-(--m3-dialog-origin-color)",
+					"data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"*:[transition-property:opacity] *:starting:opacity-0 data-exiting:*:opacity-0",
+					"*:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]",
+					"*:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]"
+				]
+			}
+		},
+		{
+			fullScreen: "compact",
+			origin: true,
+			class: {
+				motion: [
+					"max-medium:[--m3-dialog-slide:0_0] max-medium:[--m3-dialog-open-clip:inset(0_round_0)]",
+					"max-medium:[--m3-dialog-enter-clip:var(--m3-dialog-origin)]",
+					"max-medium:[--m3-dialog-exit-clip:var(--m3-dialog-origin)]",
+					"max-medium:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]",
+					"max-medium:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]",
+					"max-medium:data-exiting:[transition-duration:var(--md-sys-motion-duration-short-2),var(--md-sys-motion-duration-medium-1),var(--md-sys-motion-duration-medium-1)]",
+					"max-medium:data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear),var(--md-sys-motion-easing-emphasized-accelerate),var(--md-sys-motion-easing-emphasized-accelerate)]",
+					"max-medium:data-exiting:[transition-delay:var(--md-sys-motion-duration-short-3),0s,0s]",
+					"max-medium:motion-reduce:data-exiting:[transition-duration:var(--md-sys-motion-duration-short-3)]",
+					"max-medium:motion-reduce:data-exiting:[transition-delay:0s]"
+				],
+				panel: [
+					"max-medium:[transition-property:background-color]",
+					"max-medium:motion-reduce:[transition-property:none]",
+					"max-medium:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]",
+					"max-medium:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]",
+					"max-medium:starting:bg-(--m3-dialog-origin-color)",
+					"max-medium:motion-safe:data-exiting:bg-(--m3-dialog-origin-color)",
+					"max-medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+					"max-medium:*:[transition-property:opacity] max-medium:*:starting:opacity-0",
+					"max-medium:data-exiting:*:opacity-0",
+					"max-medium:*:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]",
+					"max-medium:*:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]"
+				]
+			}
+		}
+	],
+	defaultVariants: {
+		dividers: false,
+		origin: false,
+		instant: false,
+		transition: "reveal",
+		hasIcon: false,
+		fullScreen: "never",
+		placement: "center",
+		bottomBar: false,
+		divider: false
+	}
+});
+//#endregion
+export { DIALOG_ROOT_STYLE, dialogStyles };
+
+//# sourceMappingURL=dialog-styles.js.map

package/dist/components/dialog/dialog-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-styles.js","names":[],"sources":["../../../src/components/dialog/dialog-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (AlertDialog.kt and DialogTokens): 280–560px wide (the\n * minimum capped by the window's 24px margins), 24px padding, 28px corners,\n * surface-container-high at elevation 3, a 24px secondary icon and the title 16px apart, the\n * title centred when there is an icon, 24px below the supporting text, 8px between actions,\n * and stacked actions with the confirming action on top. Optional dividers above and below\n * the content are 1px `outline-variant`. The scrim is `scrim` at 32% (M3).\n *\n * Motion (2026-10-14): Compose has no dialog motion of its own (the platform animates\n * windows), so the basic dialog follows the M3 dialog enter and exit as Material Web encodes\n * it, mapped onto the M3 Expressive springs (spatial for movement and size, effects for\n * opacity). Entering, the dialog slides 50px away from the window edge it sits against\n * (downward when centred), its container grows from that edge from 0 to its full size (a\n * clip on a library-owned wrapper, so text is never shown outside the container and the\n * spec's 0 start is kept), and it fades in on the fast effects spring while the scrim fades\n * in on the slow one; the headline, icon and supporting text fade in after 50ms and the\n * actions after 150ms. Leaving follows the reference's close timing exactly, on M3's\n * emphasized-accelerate easing and duration tokens: the parts fade out over 100ms, the\n * dialog slides back 50px and its container shrinks to 35% over 150ms (slow at first, so\n * it is still moving and shrinking until it is gone), the container fades out from 100ms to\n * 150ms, and the scrim fades out over 150ms. Reduced motion keeps only the\n * fades of the dialog and the scrim; `instant` turns all of it off.\n * The positioner keeps 24px from the window's edges on compact windows and the spec's 56px\n * on wider ones, and `placement` aligns the dialog in it.\n *\n * Full-screen dialogs follow the M3 dialog spec's full-screen type: the panel fills the\n * window on `surface-container-high` with no corners, elevation or padding; a 56px header\n * holds the `on-surface` close icon button, the `title-large` headline and the confirming\n * text button (with an optional `outline-variant` divider), and the content is padded 24px\n * at the top and sides. With a header action `DialogActions` are hidden; without one they\n * form a 56px bottom action bar. The panel slides up 48px and fades in on the slow springs\n * (the spec's speed for full-screen animations), or, with an `origin`, grows out of it (a\n * container transform). `fullScreen: 'compact'` applies all of this only below 600px (the M3\n * compact window class) and is a basic dialog otherwise.\n *\n * The basic dialog's container colour, corners and shadow, and the icon, title and supporting\n * text colours, come from the dialog's component tokens (`dialog-tokens.ts`,\n * `--md-comp-dialog-*`); the panel carries `data-tokens=\"md-comp-dialog\"`, and the parts read\n * one private variable each. A full-screen panel keeps its own `surface-container-high`. A\n * consumer class (`bg-surface-container`) still wins. Every class is written out in full.\n */\n\n/** The dialog root's placement, inline so it wins over consumer layout classes. */\nexport const DIALOG_ROOT_STYLE = { position: 'fixed', inset: 0 } as const;\n\n/** Variant definitions for {@link Dialog} and its parts. */\nexport const dialogStyles = tv({\n  slots: {\n    scrim: [\n      'fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100',\n      '[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]',\n      'starting:opacity-0',\n      'data-exiting:opacity-0',\n      'data-exiting:[transition-duration:var(--md-sys-motion-duration-short-3)]',\n      'data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear)]',\n    ],\n    // The dialog's outermost element, which takes the consumer's `className` and `style`. It\n    // covers the window through an inline `position: fixed; inset: 0` (`DIALOG_ROOT_STYLE`),\n    // which a consumer class can't move: a layout class such as `static` or `absolute top-24`\n    // never puts the dialog in the page's flow or out of the window.\n    root: 'z-(--md-sys-z-dialog)',\n    positioner: 'fixed inset-0 z-(--md-sys-z-dialog) flex p-[24px] medium:p-[56px]',\n    /*\n     * The library-owned wrapper that moves: it slides 50px (`--m3-dialog-slide`), its clip\n     * grows the container (`--m3-dialog-enter-clip` → `--m3-dialog-open-clip`, which rests\n     * 32px outside the panel so the shadow shows, its corners concentric with the panel's\n     * `--m3-dialog-corner`) and it fades. Leaving, the clip shrinks to 35%\n     * (`--m3-dialog-exit-clip`) and the fade waits 100ms for the parts to fade first. The\n     * exit uses the reference's curves rather than springs (2026-10-14): the slide and shrink\n     * run 150ms on emphasized-accelerate, which never overshoots and keeps moving until the\n     * fade (50ms, linear, after 100ms) has ended. A spring front-loads the motion: the\n     * expressive spatial one overshot past 50px and below 35%, and the critically damped\n     * effects one finished shrinking before the fade, leaving a still 35% box fading. The\n     * clip's sides open from the panel's edges to the shadow's 32px together with its corner\n     * radius, so the growing edge keeps the panel's corners on every frame.\n     */\n    motion: [\n      'flex max-h-full max-w-full',\n      '[--m3-dialog-corner:var(--md-comp-dialog-container-shape,var(--md-sys-shape-corner-extra-large))]',\n      '[--m3-dialog-open-clip:inset(-32px_round_calc(var(--m3-dialog-corner)_+_32px))]',\n      '[--m3-dialog-enter-clip:inset(0_0_100%_round_var(--m3-dialog-corner))]',\n      '[--m3-dialog-exit-clip:inset(0_0_65%_round_var(--m3-dialog-corner))]',\n      '[--m3-dialog-slide:0_-50px] [--m3-dialog-scale-origin:center]',\n      'translate-none opacity-100 [clip-path:var(--m3-dialog-open-clip)]',\n      'starting:[translate:var(--m3-dialog-slide)] starting:opacity-0',\n      'starting:[clip-path:var(--m3-dialog-enter-clip)]',\n      'data-exiting:[translate:var(--m3-dialog-slide)] data-exiting:opacity-0',\n      'data-exiting:[clip-path:var(--m3-dialog-exit-clip)]',\n      'motion-reduce:data-exiting:translate-none',\n      'motion-reduce:data-exiting:[clip-path:var(--m3-dialog-open-clip)]',\n      '[transition-property:opacity,translate,clip-path] motion-reduce:[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-spatial-default-easing)]',\n      'data-exiting:[transition-duration:var(--md-sys-motion-duration-short-1),var(--md-sys-motion-duration-short-3),var(--md-sys-motion-duration-short-3)]',\n      'data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear),var(--md-sys-motion-easing-emphasized-accelerate),var(--md-sys-motion-easing-emphasized-accelerate)]',\n      'data-exiting:[transition-delay:var(--md-sys-motion-duration-short-2),0s,0s]',\n      'motion-reduce:data-exiting:[transition-delay:0s]',\n      'motion-reduce:data-exiting:[transition-duration:var(--md-sys-motion-duration-short-3)]',\n    ],\n    /*\n     * Classes for the panel that stagger its parts (its children): every part fades in after\n     * 50ms on the default effects spring (the headline, icon and supporting text, and any\n     * custom child), and the actions (`data-slot=\"actions\"`) after 150ms on the fast one.\n     * Leaving, they all fade out at once on the fast spring. Basic dialogs only (see the\n     * `fullScreen` variants); reduced motion leaves the parts to the wrapper's fade.\n     */\n    parts: '',\n    panel: [\n      'flex max-h-full min-w-[min(280px,calc(100vw-48px))] max-w-[560px] flex-col p-[24px]',\n      'rounded-[var(--_md-comp-dialog-container-shape)] bg-[var(--_md-comp-dialog-container-color)]',\n      'text-on-surface shadow-[shadow:var(--_md-comp-dialog-container-elevation)]',\n      'outline-none',\n      // Forced colours drop the fill and shadow, so the panel draws its edge instead.\n      'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n    ],\n    icon: [\n      'mx-auto inline-flex pb-[16px] [&>svg]:size-[24px]',\n      'text-[color:var(--_md-comp-dialog-with-icon-icon-color)]',\n    ],\n    title: [\n      'pb-[16px] text-headline-small font-brand',\n      'text-[color:var(--_md-comp-dialog-headline-color)]',\n    ],\n    header: '',\n    headerButton: '',\n    close: '[--md-comp-icon-button-icon-color:var(--md-sys-color-on-surface)]',\n    content: [\n      'min-h-0 flex-1 overflow-y-auto pb-[24px] text-body-medium',\n      'text-[color:var(--_md-comp-dialog-supporting-text-color)]',\n      'focus-ring',\n    ],\n    // Stacked (`data-stacked`, set by `DialogActions` when they don't fit on one line), the\n    // buttons are rendered confirming action first and wrap forwards instead of in reverse:\n    // the same picture, sizes included, in focus order. The custom property tells it\n    // whether the layout lets them stack.\n    actions: [\n      'flex flex-wrap-reverse items-center justify-end gap-[8px] [--m3-dialog-actions-stack:1]',\n      'data-stacked:flex-wrap',\n    ],\n  },\n  variants: {\n    hasIcon: {\n      true: { title: 'text-center' },\n      false: { title: 'text-start' },\n    },\n    /*\n     * The dialog enters from the window edge it sits against (the spec's enter and exit\n     * pattern): it slides 50px away from that edge while its container grows away from it,\n     * and leaves the same way back. Centred or at the top it slides down and grows downward\n     * (the reference motion), at the bottom it slides up and grows upward, and at the start\n     * or end it moves and grows along the x axis, mirrored in right-to-left layouts.\n     */\n    placement: {\n      center: { positioner: 'items-center justify-center' },\n      top: {\n        positioner: 'items-start justify-center',\n        motion: '[--m3-dialog-scale-origin:top]',\n      },\n      bottom: {\n        positioner: 'items-end justify-center',\n        motion: [\n          '[--m3-dialog-enter-clip:inset(100%_0_0_round_var(--m3-dialog-corner))]',\n          '[--m3-dialog-exit-clip:inset(65%_0_0_round_var(--m3-dialog-corner))]',\n          '[--m3-dialog-slide:0_50px] [--m3-dialog-scale-origin:bottom]',\n        ],\n      },\n      start: {\n        positioner: 'items-center justify-start',\n        motion: [\n          '[--m3-dialog-enter-clip:inset(0_100%_0_0_round_var(--m3-dialog-corner))]',\n          '[--m3-dialog-exit-clip:inset(0_65%_0_0_round_var(--m3-dialog-corner))]',\n          '[--m3-dialog-slide:-50px_0] [--m3-dialog-scale-origin:left]',\n          'rtl:[--m3-dialog-enter-clip:inset(0_0_0_100%_round_var(--m3-dialog-corner))]',\n          'rtl:[--m3-dialog-exit-clip:inset(0_0_0_65%_round_var(--m3-dialog-corner))]',\n          'rtl:[--m3-dialog-slide:50px_0] rtl:[--m3-dialog-scale-origin:right]',\n        ],\n      },\n      end: {\n        positioner: 'items-center justify-end',\n        motion: [\n          '[--m3-dialog-enter-clip:inset(0_0_0_100%_round_var(--m3-dialog-corner))]',\n          '[--m3-dialog-exit-clip:inset(0_0_0_65%_round_var(--m3-dialog-corner))]',\n          '[--m3-dialog-slide:50px_0] [--m3-dialog-scale-origin:right]',\n          'rtl:[--m3-dialog-enter-clip:inset(0_100%_0_0_round_var(--m3-dialog-corner))]',\n          'rtl:[--m3-dialog-exit-clip:inset(0_65%_0_0_round_var(--m3-dialog-corner))]',\n          'rtl:[--m3-dialog-slide:-50px_0] rtl:[--m3-dialog-scale-origin:left]',\n        ],\n      },\n    },\n    fullScreen: {\n      never: {\n        headerButton: 'hidden',\n        parts: [\n          'motion-safe:*:starting:opacity-0 motion-safe:data-exiting:*:opacity-0',\n          '*:[transition-property:opacity]',\n          '*:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          '*:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n          '*:[transition-delay:var(--md-sys-motion-duration-short-1)]',\n          '*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          '*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n          '*:data-[slot=actions]:[transition-delay:var(--md-sys-motion-duration-short-3)]',\n          'data-exiting:*:[transition-duration:var(--md-sys-motion-duration-short-2)]',\n          'data-exiting:*:[transition-timing-function:var(--md-sys-motion-easing-linear)]',\n          'data-exiting:*:[transition-delay:0s] data-exiting:*:data-[slot=actions]:[transition-delay:0s]',\n          'data-exiting:*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-duration-short-2)]',\n          'data-exiting:*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-easing-linear)]',\n        ],\n      },\n      /*\n       * Full screen keeps its own motion: the dialog slides up 48px as it fades in on the slow\n       * springs (the spec's speed for full-screen motion) with no clip, and slides back down\n       * as it fades out on the fast ones, its parts fading with it.\n       */\n      always: {\n        positioner: 'p-0 medium:p-0',\n        motion: [\n          'size-full [--m3-dialog-slide:0_48px]',\n          '[--m3-dialog-open-clip:none] [--m3-dialog-enter-clip:none] [--m3-dialog-exit-clip:none]',\n          '[transition-duration:var(--md-sys-motion-spring-effects-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]',\n          'data-exiting:[transition-delay:0s]',\n          'data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          'data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n        ],\n        panel: [\n          'size-full max-h-none max-w-none rounded-none p-0 shadow-none',\n          'bg-surface-container-high',\n        ],\n        header: 'flex h-[56px] shrink-0 items-center gap-[4px] ps-[4px] pe-[12px]',\n        title: 'min-w-0 flex-1 truncate ps-[4px] pb-0 text-start text-title-large',\n        content: 'px-[24px] pt-[24px]',\n        actions: 'hidden',\n      },\n      compact: {\n        positioner: 'max-medium:p-0',\n        motion: [\n          'max-medium:size-full max-medium:[--m3-dialog-slide:0_48px]',\n          'max-medium:[--m3-dialog-open-clip:none] max-medium:[--m3-dialog-enter-clip:none]',\n          'max-medium:[--m3-dialog-exit-clip:none]',\n          'max-medium:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]',\n          'max-medium:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]',\n          'max-medium:data-exiting:[transition-delay:0s]',\n          'max-medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          'max-medium:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n        ],\n        parts: [\n          'medium:motion-safe:*:starting:opacity-0 medium:motion-safe:data-exiting:*:opacity-0',\n          'medium:*:[transition-property:opacity]',\n          'medium:*:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          'medium:*:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n          'medium:*:[transition-delay:var(--md-sys-motion-duration-short-1)]',\n          'medium:*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          'medium:*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n          'medium:*:data-[slot=actions]:[transition-delay:var(--md-sys-motion-duration-short-3)]',\n          'medium:data-exiting:*:[transition-duration:var(--md-sys-motion-duration-short-2)]',\n          'medium:data-exiting:*:[transition-timing-function:var(--md-sys-motion-easing-linear)]',\n          'medium:data-exiting:*:[transition-delay:0s]',\n          'medium:data-exiting:*:data-[slot=actions]:[transition-delay:0s]',\n          'medium:data-exiting:*:data-[slot=actions]:[transition-duration:var(--md-sys-motion-duration-short-2)]',\n          'medium:data-exiting:*:data-[slot=actions]:[transition-timing-function:var(--md-sys-motion-easing-linear)]',\n        ],\n        panel: [\n          'max-medium:size-full max-medium:max-h-none max-medium:max-w-none',\n          'max-medium:rounded-none max-medium:p-0 max-medium:shadow-none',\n          'max-medium:bg-surface-container-high',\n        ],\n        header: [\n          'max-medium:flex max-medium:h-[56px] max-medium:shrink-0 max-medium:items-center',\n          'max-medium:gap-[4px] max-medium:ps-[4px] max-medium:pe-[12px]',\n        ],\n        headerButton: 'medium:hidden',\n        title: [\n          'max-medium:min-w-0 max-medium:flex-1 max-medium:truncate max-medium:ps-[4px]',\n          'max-medium:pb-0 max-medium:text-start max-medium:text-title-large',\n        ],\n        content: 'max-medium:px-[24px] max-medium:pt-[24px]',\n        actions: 'max-medium:hidden',\n      },\n    },\n    /** Full screen without a header action: the actions form a 56px bottom bar. */\n    bottomBar: { true: {}, false: {} },\n    /** A divider under the full-screen header. */\n    divider: { true: {}, false: {} },\n    /** The basic dialog's optional dividers above and below `DialogContent`. */\n    dividers: { true: {}, false: {} },\n    /** A container transform from a trigger (`origin`) into the full-screen dialog. */\n    origin: { true: {}, false: {} },\n    /**\n     * The basic dialog's enter and exit: `reveal`, the M3 dialog motion above, or `scale`,\n     * the original pop (see the compound variants). Full-screen dialogs ignore it.\n     */\n    transition: { reveal: {}, scale: {} },\n    /** No enter or exit motion: the dialog, its parts and the scrim appear and go at once. */\n    instant: {\n      true: {\n        scrim: '[transition-property:none]!',\n        motion: '[transition-property:none]!',\n        panel: '[transition-property:none]!',\n        parts: '*:[transition-property:none]!',\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      fullScreen: 'always',\n      bottomBar: true,\n      class: {\n        actions: 'flex h-[56px] shrink-0 flex-nowrap px-[24px] [--m3-dialog-actions-stack:0]',\n      },\n    },\n    {\n      fullScreen: 'compact',\n      bottomBar: true,\n      class: {\n        actions:\n          'max-medium:flex max-medium:h-[56px] max-medium:shrink-0 max-medium:flex-nowrap max-medium:px-[24px] max-medium:[--m3-dialog-actions-stack:0]',\n      },\n    },\n    {\n      fullScreen: 'always',\n      divider: true,\n      class: { header: 'border-b border-outline-variant' },\n    },\n    {\n      fullScreen: 'compact',\n      divider: true,\n      class: { header: 'max-medium:border-b max-medium:border-outline-variant' },\n    },\n    /*\n     * Dividers run the panel's full width, 1px `outline-variant`, with 8px between them and\n     * the content; the body keeps 24px to the actions below the bottom one.\n     */\n    {\n      fullScreen: 'never',\n      dividers: true,\n      class: {\n        content: '-mx-[24px] mb-[24px] border-y border-outline-variant px-[24px] py-[8px]',\n      },\n    },\n    {\n      fullScreen: 'compact',\n      dividers: true,\n      class: {\n        content: [\n          'medium:-mx-[24px] medium:mb-[24px] medium:border-y medium:border-outline-variant',\n          'medium:px-[24px] medium:py-[8px]',\n        ],\n      },\n    },\n    /*\n     * `transition=\"scale\"`, the library's original pop (an extension beyond the M3 dialog\n     * motion): the scrim fades on the default effects spring, and the dialog fades in while it\n     * scales up from 90% on the default springs, then fades out while it scales to 95% on the\n     * fast ones. No clip, no slide, no staggered parts. It scales from the edge it sits\n     * against (`--m3-dialog-scale-origin`: the centre for `center`, the top, bottom, start or\n     * end edge otherwise). Reduced motion keeps only the fades. Basic dialogs only (from 600px\n     * for `compact`).\n     */\n    {\n      fullScreen: 'never',\n      transition: 'scale',\n      class: {\n        scrim: [\n          '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n          'data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          'data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n        ],\n        motion: [\n          '[--m3-dialog-slide:0_0] [--m3-dialog-open-clip:none]',\n          '[--m3-dialog-enter-clip:none] [--m3-dialog-exit-clip:none]',\n          'origin-(--m3-dialog-scale-origin) scale-none starting:scale-90 data-exiting:scale-95',\n          'motion-reduce:data-exiting:scale-none',\n          '[transition-property:opacity,scale] motion-reduce:[transition-property:opacity]',\n          '[transition-duration:var(--md-sys-motion-spring-effects-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing),var(--md-sys-motion-spring-spatial-default-easing)]',\n          'data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n          'data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n          'data-exiting:[transition-delay:0s]',\n        ],\n      },\n    },\n    {\n      fullScreen: 'compact',\n      transition: 'scale',\n      class: {\n        scrim: [\n          'medium:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          'medium:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n          'medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          'medium:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n        ],\n        motion: [\n          'medium:[--m3-dialog-slide:0_0] medium:[--m3-dialog-open-clip:none]',\n          'medium:[--m3-dialog-enter-clip:none] medium:[--m3-dialog-exit-clip:none]',\n          'medium:origin-(--m3-dialog-scale-origin) medium:scale-none',\n          'medium:starting:scale-90 medium:data-exiting:scale-95',\n          'medium:motion-reduce:data-exiting:scale-none',\n          'medium:[transition-property:opacity,scale]',\n          'medium:motion-reduce:[transition-property:opacity]',\n          'medium:[transition-duration:var(--md-sys-motion-spring-effects-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]',\n          'medium:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing),var(--md-sys-motion-spring-spatial-default-easing)]',\n          'medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n          'medium:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n          'medium:data-exiting:[transition-delay:0s]',\n        ],\n      },\n    },\n    /*\n     * Container transform (the spec: \"Use a container transform pattern to transition a FAB\n     * into a full-screen dialog\"): the clip starts on the origin's box and corners\n     * (`--m3-dialog-origin`, measured by the dialog) and opens to the window on the slow\n     * spatial spring, while the container colour moves from the origin's\n     * (`--m3-dialog-origin-color`) and the content fades in. Leaving collapses back into the\n     * origin on emphasized-accelerate over 250ms (2026-10-15), as the basic exit avoids\n     * springs: the fast spatial spring collapsed the clip past the origin to nothing and\n     * regrew it while still visible. The container stays opaque for the first 60% and fades\n     * over the last 100ms, linear, ending with the collapse (2026-10-17, after Material\n     * Components' container transform, whose return fades from 60% to 90%), so it is seen going\n     * back into the origin. Reduced motion keeps only the fades (the dialog's and its content's).\n     */\n    {\n      fullScreen: 'always',\n      origin: true,\n      class: {\n        motion: [\n          '[--m3-dialog-slide:0_0] [--m3-dialog-open-clip:inset(0_round_0)]',\n          '[--m3-dialog-enter-clip:var(--m3-dialog-origin)] [--m3-dialog-exit-clip:var(--m3-dialog-origin)]',\n          '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]',\n          'data-exiting:[transition-duration:var(--md-sys-motion-duration-short-2),var(--md-sys-motion-duration-medium-1),var(--md-sys-motion-duration-medium-1)]',\n          'data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear),var(--md-sys-motion-easing-emphasized-accelerate),var(--md-sys-motion-easing-emphasized-accelerate)]',\n          // Full screen's exit starts every transition at once; the fade waits here.\n          'data-exiting:[transition-delay:var(--md-sys-motion-duration-short-3),0s,0s]',\n          'motion-reduce:data-exiting:[transition-delay:0s]',\n        ],\n        panel: [\n          '[transition-property:background-color] motion-reduce:[transition-property:none]',\n          '[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]',\n          'starting:bg-(--m3-dialog-origin-color) motion-safe:data-exiting:bg-(--m3-dialog-origin-color)',\n          'data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          '*:[transition-property:opacity] *:starting:opacity-0 data-exiting:*:opacity-0',\n          '*:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]',\n          '*:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]',\n        ],\n      },\n    },\n    {\n      fullScreen: 'compact',\n      origin: true,\n      class: {\n        motion: [\n          'max-medium:[--m3-dialog-slide:0_0] max-medium:[--m3-dialog-open-clip:inset(0_round_0)]',\n          'max-medium:[--m3-dialog-enter-clip:var(--m3-dialog-origin)]',\n          'max-medium:[--m3-dialog-exit-clip:var(--m3-dialog-origin)]',\n          'max-medium:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-slow-duration),var(--md-sys-motion-spring-spatial-slow-duration)]',\n          'max-medium:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-slow-easing),var(--md-sys-motion-spring-spatial-slow-easing)]',\n          'max-medium:data-exiting:[transition-duration:var(--md-sys-motion-duration-short-2),var(--md-sys-motion-duration-medium-1),var(--md-sys-motion-duration-medium-1)]',\n          'max-medium:data-exiting:[transition-timing-function:var(--md-sys-motion-easing-linear),var(--md-sys-motion-easing-emphasized-accelerate),var(--md-sys-motion-easing-emphasized-accelerate)]',\n          'max-medium:data-exiting:[transition-delay:var(--md-sys-motion-duration-short-3),0s,0s]',\n          // The breakpoint outranks the base reduced-motion exit: restate it, so the fade\n          // keeps its duration and starts at once while the spatial springs are instant.\n          'max-medium:motion-reduce:data-exiting:[transition-duration:var(--md-sys-motion-duration-short-3)]',\n          'max-medium:motion-reduce:data-exiting:[transition-delay:0s]',\n        ],\n        panel: [\n          'max-medium:[transition-property:background-color]',\n          'max-medium:motion-reduce:[transition-property:none]',\n          'max-medium:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]',\n          'max-medium:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]',\n          'max-medium:starting:bg-(--m3-dialog-origin-color)',\n          'max-medium:motion-safe:data-exiting:bg-(--m3-dialog-origin-color)',\n          'max-medium:data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n          'max-medium:*:[transition-property:opacity] max-medium:*:starting:opacity-0',\n          'max-medium:data-exiting:*:opacity-0',\n          'max-medium:*:[transition-duration:var(--md-sys-motion-spring-effects-slow-duration)]',\n          'max-medium:*:[transition-timing-function:var(--md-sys-motion-spring-effects-slow-easing)]',\n        ],\n      },\n    },\n  ],\n  defaultVariants: {\n    dividers: false,\n    origin: false,\n    instant: false,\n    transition: 'reveal',\n    hasIcon: false,\n    fullScreen: 'never',\n    placement: 'center',\n    bottomBar: false,\n    divider: false,\n  },\n});\n\n/**\n * The variants of {@link dialogStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DialogStyleProps = VariantProps<typeof dialogStyles>;\n"],"mappings":";;;AA6CA,MAAa,oBAAoB;CAAE,UAAU;CAAS,OAAO;AAAE;;AAG/D,MAAa,eAAe,GAAG;CAC7B,OAAO;EACL,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAKA,MAAM;EACN,YAAY;EAeZ,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAQA,OAAO;EACP,OAAO;GACL;GACA;GACA;GACA;GAEA;EACF;EACA,MAAM,CACJ,qDACA,0DACF;EACA,OAAO,CACL,4CACA,oDACF;EACA,QAAQ;EACR,cAAc;EACd,OAAO;EACP,SAAS;GACP;GACA;GACA;EACF;EAKA,SAAS,CACP,2FACA,wBACF;CACF;CACA,UAAU;EACR,SAAS;GACP,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,aAAa;EAC/B;EAQA,WAAW;GACT,QAAQ,EAAE,YAAY,8BAA8B;GACpD,KAAK;IACH,YAAY;IACZ,QAAQ;GACV;GACA,QAAQ;IACN,YAAY;IACZ,QAAQ;KACN;KACA;KACA;IACF;GACF;GACA,OAAO;IACL,YAAY;IACZ,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;IACF;GACF;GACA,KAAK;IACH,YAAY;IACZ,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;IACF;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL,cAAc;IACd,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;GACF;GAMA,QAAQ;IACN,YAAY;IACZ,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;KACA;IACF;IACA,OAAO,CACL,gEACA,2BACF;IACA,QAAQ;IACR,OAAO;IACP,SAAS;IACT,SAAS;GACX;GACA,SAAS;IACP,YAAY;IACZ,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;IACA,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;IACA,OAAO;KACL;KACA;KACA;IACF;IACA,QAAQ,CACN,mFACA,+DACF;IACA,cAAc;IACd,OAAO,CACL,gFACA,mEACF;IACA,SAAS;IACT,SAAS;GACX;EACF;;EAEA,WAAW;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;;EAEjC,SAAS;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;;EAE/B,UAAU;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;;EAEhC,QAAQ;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;;;;;EAK9B,YAAY;GAAE,QAAQ,CAAC;GAAG,OAAO,CAAC;EAAE;;EAEpC,SAAS;GACP,MAAM;IACJ,OAAO;IACP,QAAQ;IACR,OAAO;IACP,OAAO;GACT;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GACE,YAAY;GACZ,WAAW;GACX,OAAO,EACL,SAAS,6EACX;EACF;EACA;GACE,YAAY;GACZ,WAAW;GACX,OAAO,EACL,SACE,+IACJ;EACF;EACA;GACE,YAAY;GACZ,SAAS;GACT,OAAO,EAAE,QAAQ,kCAAkC;EACrD;EACA;GACE,YAAY;GACZ,SAAS;GACT,OAAO,EAAE,QAAQ,wDAAwD;EAC3E;EAKA;GACE,YAAY;GACZ,UAAU;GACV,OAAO,EACL,SAAS,0EACX;EACF;EACA;GACE,YAAY;GACZ,UAAU;GACV,OAAO,EACL,SAAS,CACP,oFACA,kCACF,EACF;EACF;EAUA;GACE,YAAY;GACZ,YAAY;GACZ,OAAO;IACL,OAAO;KACL;KACA;KACA;KACA;IACF;IACA,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;GACF;EACF;EACA;GACE,YAAY;GACZ,YAAY;GACZ,OAAO;IACL,OAAO;KACL;KACA;KACA;KACA;IACF;IACA,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;GACF;EACF;EAcA;GACE,YAAY;GACZ,QAAQ;GACR,OAAO;IACL,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;KAEA;KACA;IACF;IACA,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;GACF;EACF;EACA;GACE,YAAY;GACZ,QAAQ;GACR,OAAO;IACL,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KAGA;KACA;IACF;IACA,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF;GACF;EACF;CACF;CACA,iBAAiB;EACf,UAAU;EACV,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,WAAW;EACX,WAAW;EACX,SAAS;CACX;AACF,CAAC"}

package/dist/components/dialog/dialog-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/dialog/dialog-tokens.d.ts
+/** The tokens of {@link Dialog}: `--md-comp-dialog-<part>`. */
+export declare const dialogTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "supporting-text-color" | "container-elevation" | "with-icon-icon-color" | "headline-color">;
+//#endregion
+//# sourceMappingURL=dialog-tokens.d.ts.map

package/dist/components/dialog/dialog-tokens.js

@@ -0,0 +1,57 @@
+import { color, corner, defineComponentTokens, elevation } from "../../tokens/component.js";
+//#region src/components/dialog/dialog-tokens.ts
+/** The tokens of {@link Dialog}: `--md-comp-dialog-<part>`. */
+const dialogTokenSet = defineComponentTokens({
+	name: "md-comp-dialog",
+	tokens: {
+		"container-color": {
+			value: color("surface-container-high"),
+			description: "The panel.",
+			compose: "DialogTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"container-shape": {
+			value: corner("extra-large"),
+			description: "The panel's corners.",
+			compose: "DialogTokens.ContainerShape",
+			paints: { property: "border-top-left-radius" }
+		},
+		"container-elevation": {
+			value: elevation(3),
+			description: "The panel's shadow.",
+			compose: "DialogTokens.ContainerElevation",
+			paints: { property: "box-shadow" }
+		},
+		"headline-color": {
+			value: color("on-surface"),
+			description: "The title (`DialogTitle`, or the full-screen header's).",
+			compose: "DialogTokens.HeadlineColor",
+			paints: {
+				property: "color",
+				slot: "title"
+			}
+		},
+		"supporting-text-color": {
+			value: color("on-surface-variant"),
+			description: "The supporting text (`DialogContent`).",
+			compose: "DialogTokens.SupportingTextColor",
+			paints: {
+				property: "color",
+				slot: "content"
+			}
+		},
+		"with-icon-icon-color": {
+			value: color("secondary"),
+			description: "The icon above the title (`icon`).",
+			compose: "DialogTokens.IconColor",
+			paints: {
+				property: "color",
+				slot: "icon"
+			}
+		}
+	}
+});
+//#endregion
+export { dialogTokenSet };
+
+//# sourceMappingURL=dialog-tokens.js.map

package/dist/components/dialog/dialog-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-tokens.js","names":[],"sources":["../../../src/components/dialog/dialog-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, elevation } from '../../tokens/component';\n\n/*\n * Dialog's component tokens, M3's `md.comp.dialog.*` names (checked against m3.material.io's\n * token tables, 2026-10-14), with Compose's DialogTokens defaults. The panel carries\n * `data-tokens=\"md-comp-dialog\"`, and `dialog-styles.ts` reads one private variable per part\n * (the icon, title and content inherit them). A full-screen dialog keeps its own container\n * (M3's separate full-screen set, not exposed): the window-filling `surface-container-high`\n * with no corners or shadow. The actions are text buttons with their own tokens, and the\n * dividers and the scrim stay classes.\n */\n\n/** The tokens of {@link Dialog}: `--md-comp-dialog-<part>`. */\nexport const dialogTokenSet = defineComponentTokens({\n  name: 'md-comp-dialog',\n  tokens: {\n    'container-color': {\n      value: color('surface-container-high'),\n      description: 'The panel.',\n      compose: 'DialogTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'container-shape': {\n      value: corner('extra-large'),\n      description: \"The panel's corners.\",\n      compose: 'DialogTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n    'container-elevation': {\n      value: elevation(3),\n      description: \"The panel's shadow.\",\n      compose: 'DialogTokens.ContainerElevation',\n      paints: { property: 'box-shadow' },\n    },\n    'headline-color': {\n      value: color('on-surface'),\n      description: \"The title (`DialogTitle`, or the full-screen header's).\",\n      compose: 'DialogTokens.HeadlineColor',\n      paints: { property: 'color', slot: 'title' },\n    },\n    'supporting-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The supporting text (`DialogContent`).',\n      compose: 'DialogTokens.SupportingTextColor',\n      paints: { property: 'color', slot: 'content' },\n    },\n    'with-icon-icon-color': {\n      value: color('secondary'),\n      description: 'The icon above the title (`icon`).',\n      compose: 'DialogTokens.IconColor',\n      paints: { property: 'color', slot: 'icon' },\n    },\n  },\n});\n"],"mappings":";;;AAaA,MAAa,iBAAiB,sBAAsB;CAClD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,wBAAwB;GACrC,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,mBAAmB;GACjB,OAAO,OAAO,aAAa;GAC3B,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,yBAAyB;EAC/C;EACA,uBAAuB;GACrB,OAAO,UAAU,CAAC;GAClB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,aAAa;EACnC;EACA,kBAAkB;GAChB,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAQ;EAC7C;EACA,yBAAyB;GACvB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAU;EAC/C;EACA,wBAAwB;GACtB,OAAO,MAAM,WAAW;GACxB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAO;EAC5C;CACF;AACF,CAAC"}

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,59 @@
+import { DividerInset, DividerOrientation } from "./divider-styles.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/divider/Divider.d.ts
+export interface DividerProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  /**
+   * A full-width horizontal line, or a vertical line the full height of a flex row.
+   * @default "horizontal"
+   */
+  orientation?: DividerOrientation;
+  /** Leave 16px at the start, or at both ends. @default "none" */
+  inset?: DividerInset;
+  /**
+   * M3 dividers are decorative, so by default the line is hidden from assistive tech
+   * (`role="none"`). Set `decorative={false}` where the line marks a real break between
+   * groups of content, to expose it as a `separator`. @default true
+   */
+  decorative?: boolean;
+}
+/**
+ * M3 divider: a 1px `outline-variant` line, horizontal (full width) or vertical (full
+ * height of a flex row), optionally inset. It's decorative (M3: "Dividers are decorative
+ * elements") unless `decorative={false}` makes it a `separator`.
+ *
+ * @example
+ * <Divider />
+ * <Divider orientation="vertical" inset="middle" />
+ */
+export declare function Divider({ orientation, inset, decorative, className, ...rest }: DividerProps): import("react").JSX.Element;
+export interface LabeledDividerClassNames {
+  /** The wrapper around the line and the text. */
+  root?: string;
+  /** The line. */
+  divider?: string;
+  /** The supporting text. */
+  label?: string;
+}
+export interface LabeledDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  /** The supporting text below the line, e.g. a section's name. */
+  children: ReactNode;
+  /** Leave 16px at the start, or at both ends, of the line and the text. @default "none" */
+  inset?: DividerInset;
+  /**
+   * The line is hidden from assistive tech, not the text; `decorative={false}` exposes it
+   * as a `separator`. @default true
+   */
+  decorative?: boolean;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: LabeledDividerClassNames;
+}
+/**
+ * M3 divider with supporting text: a horizontal divider with a short text 4px below it,
+ * 8px clear at the end and below, such as the name of the section that follows.
+ *
+ * @example
+ * <LabeledDivider inset="start">Earlier this week</LabeledDivider>
+ */
+export declare function LabeledDivider({ children, inset, decorative, classNames, className, ...rest }: LabeledDividerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/divider/Divider.js

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { dividerStyles, labeledDividerStyles } from "./divider-styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/divider/Divider.tsx
+/**
+* M3 divider: a 1px `outline-variant` line, horizontal (full width) or vertical (full
+* height of a flex row), optionally inset. It's decorative (M3: "Dividers are decorative
+* elements") unless `decorative={false}` makes it a `separator`.
+*
+* @example
+* <Divider />
+* <Divider orientation="vertical" inset="middle" />
+*/
+function Divider({ orientation = "horizontal", inset, decorative = true, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-tokens": mergeDataTokens("md-comp-divider", rest),
+		role: decorative ? "none" : "separator",
+		"aria-orientation": decorative || orientation === "horizontal" ? void 0 : "vertical",
+		className: dividerStyles({
+			orientation,
+			inset,
+			class: className
+		})
+	});
+}
+/**
+* M3 divider with supporting text: a horizontal divider with a short text 4px below it,
+* 8px clear at the end and below, such as the name of the section that follows.
+*
+* @example
+* <LabeledDivider inset="start">Earlier this week</LabeledDivider>
+*/
+function LabeledDivider({ children, inset, decorative = true, classNames, className, ...rest }) {
+	const styles = labeledDividerStyles({ inset });
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsx(Divider, {
+			inset,
+			decorative,
+			className: classNames?.divider
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.label({ class: classNames?.label }),
+			children
+		})]
+	});
+}
+//#endregion
+export { Divider, LabeledDivider };
+
+//# sourceMappingURL=Divider.js.map