@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

package/dist/components/Dialog/Dialog.vue_vue_type_script_setup_true_lang.js

@@ -3,22 +3,39 @@ import t from "../Icon/Icon.js";
 import n from "../Tooltip/Tooltip.js";
 import r from "../internal/CloseIcon.js";
 import { focusFirst as i } from "./focus.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, normalizeClass as m, normalizeStyle as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useModel as b, useSlots as x, withCtx as S, withKeys as C, withModifiers as w } from "vue";
+import { useSheetDrag as a } from "./useSheetDrag.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as ee, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as te, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useModel as ne, useSlots as re, useTemplateRef as ie, watch as S, withCtx as C, withKeys as w, withModifiers as ae } from "vue";
 import { DialogContent as T, DialogOverlay as E, DialogPortal as D, DialogRoot as O, DialogTitle as k } from "reka-ui";
 //#region src/components/Dialog/Dialog.vue?vue&type=script&setup=true&lang.ts
-var A = { class: "flex items-center justify-between gap-3" }, j = {
+var A = {
 	key: 0,
-	class: "mt-0.5 flex flex-col items-center gap-1.5 pr-1.5"
+	class: "flex min-h-11 items-center justify-between gap-3 pt-2 pr-4 pb-1 pl-5"
+}, j = {
+	class: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-5 text-sm leading-5 text-sui-ink-emphasis",
+	"data-modal-body": ""
 }, M = {
+	key: 1,
+	class: "flex shrink-0 flex-col gap-2.5 border-t border-sui-line-subtle bg-sui-surface px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+	"data-modal-footer": ""
+}, N = {
+	key: 0,
+	class: "flex min-w-0 items-center justify-center gap-2"
+}, P = {
+	key: 0,
+	class: "min-w-0 truncate text-xs text-sui-ink-muted"
+}, F = { class: "flex items-center justify-between gap-3" }, I = {
+	key: 0,
+	class: "mt-0.5 flex flex-col items-center gap-1.5 pr-1.5"
+}, L = {
 	key: 1,
 	class: "flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink",
 	"data-modal-header": ""
-}, N = {
+}, R = {
 	key: 0,
 	class: "min-w-0 truncate text-xs text-sui-ink-muted"
-}, P = /*@__PURE__*/ f({
+}, z = /*@__PURE__*/ p({
 	__name: "Dialog",
-	props: /*@__PURE__*/ p({
+	props: /*@__PURE__*/ m({
 		title: { default: void 0 },
 		closable: {
 			type: Boolean,
@@ -36,7 +53,9 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 			default: void 0
 		},
 		hint: { default: void 0 },
-		headerless: { type: Boolean }
+		headerless: { type: Boolean },
+		presentation: { default: "dialog" },
+		sheetBelow: { default: 640 }
 	}, {
 		open: {
 			type: Boolean,
@@ -44,129 +63,212 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ p(["confirm", "cancel"], ["update:open"]),
-	setup(f, { emit: p }) {
-		let P = f, F = p, I = b(f, "open"), L = x(), R = a(() => !!L.footer || !!P.confirmLabel), z = a(() => !!P.band || !!L.hero), B = {
+	emits: /*@__PURE__*/ m(["confirm", "cancel"], ["update:open"]),
+	setup(p, { emit: m }) {
+		let z = p, B = m, V = ne(p, "open"), H = re(), U = o(() => !!H.footer || !!z.confirmLabel), W = o(() => !!z.band || !!H.hero), oe = {
 			sm: "max-w-[27rem]",
 			md: "max-w-lg",
 			record: "max-w-130",
 			lg: "max-w-2xl",
 			xl: "max-w-3xl"
-		}, V = a(() => B[P.size ?? (z.value ? "record" : "md")]), H = a(() => typeof P.band == "string" ? P.band : "rgb(var(--sui-accent-wash))"), U = {
+		}, se = o(() => oe[z.size ?? (W.value ? "record" : "md")]), ce = o(() => typeof z.band == "string" ? z.band : "rgb(var(--sui-accent-wash))"), G = v(!1), K, q = () => G.value = !!K?.matches;
+		S(() => [z.presentation, z.sheetBelow], ([e, t]) => {
+			K?.removeEventListener("change", q), K = e === "auto" && typeof window < "u" ? window.matchMedia(`(max-width: ${t - .02}px)`) : void 0, K?.addEventListener("change", q), q();
+		}, { immediate: !0 }), te(() => K?.removeEventListener("change", q));
+		let J = o(() => z.presentation === "sheet" || z.presentation === "auto" && G.value), Y = ie("panel"), X = a(o(() => Y.value?.$el), () => Q());
+		S(V, (e) => e && X.reset());
+		let Z = {
 			primary: "on-accent",
 			danger: "on-danger",
 			contrast: "on-contrast"
 		};
-		function W() {
-			F("cancel"), I.value = !1;
+		function Q() {
+			B("cancel"), V.value = !1;
+		}
+		function le(e) {
+			J.value ? B("cancel") : e.preventDefault();
 		}
-		function G(e) {
-			(e.metaKey || e.ctrlKey) && (e.preventDefault(), P.confirmLabel && !P.confirmDisabled && F("confirm"));
+		function $(e) {
+			(e.metaKey || e.ctrlKey) && (e.preventDefault(), z.confirmLabel && !z.confirmDisabled && B("confirm"));
 		}
-		return (a, p) => (g(), o(y(O), {
-			open: I.value,
-			"onUpdate:open": p[3] ||= (e) => I.value = e
+		return (a, o) => (_(), s(x(O), {
+			open: V.value,
+			"onUpdate:open": o[5] ||= (e) => V.value = e
 		}, {
-			default: S(() => [d(y(D), null, {
-				default: S(() => [d(y(E), { class: "fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in" }, {
-					default: S(() => [d(y(T), {
+			default: C(() => [f(x(D), null, {
+				default: C(() => [f(x(E), { class: h(["fixed inset-0 z-[1100] flex justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in", J.value ? "items-end" : "items-center"]) }, {
+					default: C(() => [J.value ? (_(), s(x(T), {
+						key: 0,
+						ref_key: "panel",
+						ref: Y,
+						"aria-describedby": void 0,
+						class: h(["relative flex max-h-[calc(100dvh-1.5rem)] w-full flex-col rounded-t-(--sui-radius-sheet) bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-sheet-out data-[state=open]:animate-sui-sheet-in motion-reduce:animate-none motion-reduce:transition-none", !x(X).dragging.value && "transition-transform duration-[250ms] ease-[cubic-bezier(0.32,0.72,0,1)]"]),
+						style: g(x(X).style.value),
+						onEscapeKeyDown: o[1] ||= (e) => B("cancel"),
+						onInteractOutside: le,
+						onKeydown: w($, ["enter"]),
+						onOpenAutoFocus: x(i)
+					}, {
+						default: C(() => [
+							p.closable ? c("", !0) : (_(), l("button", {
+								key: 0,
+								class: "pointer-events-none absolute top-2 right-3 h-7 rounded-md bg-sui-sunken px-2.5 text-13 font-medium text-sui-ink opacity-0 outline-hidden focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:sui-ring",
+								type: "button",
+								onClick: Q
+							}, b(p.closeLabel), 1)),
+							u("div", ee({
+								class: "shrink-0 cursor-grab touch-none pt-2",
+								"data-modal-header": ""
+							}, x(X).handlers), [o[6] ||= u("span", {
+								"aria-hidden": "true",
+								class: "mx-auto block h-1 w-9 rounded-full bg-sui-mark-faint"
+							}, null, -1), p.headerless ? (_(), s(x(k), {
+								key: 1,
+								class: "sr-only"
+							}, {
+								default: C(() => [d(b(p.title), 1)]),
+								_: 1
+							})) : (_(), l("div", A, [f(x(k), { class: "min-w-0 truncate text-base font-semibold text-sui-ink" }, {
+								default: C(() => [y(a.$slots, "title", {}, () => [d(b(p.title), 1)])]),
+								_: 3
+							}), p.closable ? (_(), s(n, {
+								key: 0,
+								text: p.closeLabel
+							}, {
+								default: C(() => [f(e, {
+									"aria-label": p.closeLabel,
+									class: "shrink-0",
+									"icon-only": "",
+									size: "sm",
+									variant: "ghost",
+									onClick: Q
+								}, {
+									default: C(() => [f(r, { class: "fill-sui-ink-subtle stroke-sui-ink-subtle" })]),
+									_: 1
+								}, 8, ["aria-label"])]),
+								_: 1
+							}, 8, ["text"])) : c("", !0)]))], 16),
+							u("div", j, [y(a.$slots, "default")]),
+							U.value ? (_(), l("div", M, [y(a.$slots, "footer", {}, () => [a.$slots["footer-start"] || p.hint ? (_(), l("div", N, [y(a.$slots, "footer-start"), p.hint ? (_(), l("span", P, b(p.hint), 1)) : c("", !0)])) : c("", !0), f(e, {
+								class: "w-full",
+								disabled: p.confirmDisabled,
+								size: "lg",
+								type: "button",
+								variant: p.confirmVariant,
+								onClick: o[0] ||= (e) => B("confirm")
+							}, {
+								default: C(() => [p.confirmIcon ? (_(), s(t, {
+									key: 0,
+									color: Z[p.confirmVariant],
+									name: p.confirmIcon
+								}, null, 8, ["color", "name"])) : c("", !0), d(" " + b(p.confirmLabel), 1)]),
+								_: 1
+							}, 8, ["disabled", "variant"])])])) : c("", !0)
+						]),
+						_: 3
+					}, 8, [
+						"class",
+						"style",
+						"onOpenAutoFocus"
+					])) : (_(), s(x(T), {
+						key: 1,
 						"aria-describedby": void 0,
-						class: m(["flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in", [V.value, z.value ? "rounded-2xl" : "rounded-xl"]]),
-						onEscapeKeyDown: p[1] ||= (e) => F("cancel"),
-						onInteractOutside: p[2] ||= w(() => {}, ["prevent"]),
-						onKeydown: C(G, ["enter"]),
-						onOpenAutoFocus: y(i)
+						class: h(["flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in", [se.value, W.value ? "rounded-2xl" : "rounded-xl"]]),
+						onEscapeKeyDown: o[3] ||= (e) => B("cancel"),
+						onInteractOutside: o[4] ||= ae(() => {}, ["prevent"]),
+						onKeydown: w($, ["enter"]),
+						onOpenAutoFocus: x(i)
 					}, {
-						default: S(() => [
-							z.value ? (g(), c("div", {
+						default: C(() => [
+							W.value ? (_(), l("div", {
 								key: 0,
 								class: "shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200",
 								"data-modal-header": "",
-								style: h({ backgroundColor: H.value })
-							}, [l("div", A, [d(y(k), { class: "text-13 leading-5 font-medium text-sui-ink-body" }, {
-								default: S(() => [u(v(f.title), 1)]),
+								style: g({ backgroundColor: ce.value })
+							}, [u("div", F, [f(x(k), { class: "text-13 leading-5 font-medium text-sui-ink-body" }, {
+								default: C(() => [d(b(p.title), 1)]),
 								_: 1
-							}), f.closable ? (g(), o(n, {
+							}), p.closable ? (_(), s(n, {
 								key: 0,
-								text: f.closeLabel
+								text: p.closeLabel
 							}, {
-								default: S(() => [d(e, {
-									"aria-label": f.closeLabel,
+								default: C(() => [f(e, {
+									"aria-label": p.closeLabel,
 									class: "shrink-0",
 									"icon-only": "",
 									size: "sm",
 									variant: "ghost",
-									onClick: W
+									onClick: Q
 								}, {
-									default: S(() => [d(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
+									default: C(() => [f(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
-							}, 8, ["text"])) : s("", !0)]), a.$slots.hero ? (g(), c("div", j, [_(a.$slots, "hero")])) : s("", !0)], 4)) : f.headerless ? (g(), o(y(k), {
+							}, 8, ["text"])) : c("", !0)]), a.$slots.hero ? (_(), l("div", I, [y(a.$slots, "hero")])) : c("", !0)], 4)) : p.headerless ? (_(), s(x(k), {
 								key: 2,
 								class: "sr-only"
 							}, {
-								default: S(() => [u(v(f.title), 1)]),
+								default: C(() => [d(b(p.title), 1)]),
 								_: 1
-							})) : (g(), c("div", M, [d(y(k), { class: "min-w-0 truncate text-base font-semibold text-sui-ink" }, {
-								default: S(() => [_(a.$slots, "title", {}, () => [u(v(f.title), 1)])]),
+							})) : (_(), l("div", L, [f(x(k), { class: "min-w-0 truncate text-base font-semibold text-sui-ink" }, {
+								default: C(() => [y(a.$slots, "title", {}, () => [d(b(p.title), 1)])]),
 								_: 3
-							}), f.closable ? (g(), o(n, {
+							}), p.closable ? (_(), s(n, {
 								key: 0,
-								text: f.closeLabel
+								text: p.closeLabel
 							}, {
-								default: S(() => [d(e, {
-									"aria-label": f.closeLabel,
+								default: C(() => [f(e, {
+									"aria-label": p.closeLabel,
 									class: "shrink-0",
 									"icon-only": "",
 									size: "sm",
 									variant: "ghost",
-									onClick: W
+									onClick: Q
 								}, {
-									default: S(() => [d(r, { class: "fill-sui-ink-subtle stroke-sui-ink-subtle" })]),
+									default: C(() => [f(r, { class: "fill-sui-ink-subtle stroke-sui-ink-subtle" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
-							}, 8, ["text"])) : s("", !0)])),
-							l("div", {
-								class: m(["overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis", [z.value ? "px-5 pt-0.5 pb-4" : "p-5", !R.value && (z.value ? "rounded-b-2xl" : "rounded-b-xl")]]),
+							}, 8, ["text"])) : c("", !0)])),
+							u("div", {
+								class: h(["overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis", [W.value ? "px-5 pt-0.5 pb-4" : "p-5", !U.value && (W.value ? "rounded-b-2xl" : "rounded-b-xl")]]),
 								"data-modal-body": ""
-							}, [_(a.$slots, "default")], 2),
-							R.value ? (g(), c("div", {
+							}, [y(a.$slots, "default")], 2),
+							U.value ? (_(), l("div", {
 								key: 3,
-								class: m(["flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink", z.value ? "gap-2 rounded-b-2xl py-3 pr-4 pl-5" : "gap-3 rounded-b-xl px-5 py-4"]),
+								class: h(["flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink", W.value ? "gap-2 rounded-b-2xl py-3 pr-4 pl-5" : "gap-3 rounded-b-xl px-5 py-4"]),
 								"data-modal-footer": ""
-							}, [_(a.$slots, "footer", {}, () => [
-								_(a.$slots, "footer-start"),
-								f.hint ? (g(), c("span", N, v(f.hint), 1)) : s("", !0),
-								p[4] ||= l("span", { class: "flex-1" }, null, -1),
-								d(e, {
+							}, [y(a.$slots, "footer", {}, () => [
+								y(a.$slots, "footer-start"),
+								p.hint ? (_(), l("span", R, b(p.hint), 1)) : c("", !0),
+								o[7] ||= u("span", { class: "flex-1" }, null, -1),
+								f(e, {
 									type: "button",
 									variant: "ghost",
-									onClick: W
+									onClick: Q
 								}, {
-									default: S(() => [u(v(f.cancelLabel), 1)]),
+									default: C(() => [d(b(p.cancelLabel), 1)]),
 									_: 1
 								}),
-								d(e, {
-									disabled: f.confirmDisabled,
+								f(e, {
+									disabled: p.confirmDisabled,
 									type: "button",
-									variant: f.confirmVariant,
-									onClick: p[0] ||= (e) => F("confirm")
+									variant: p.confirmVariant,
+									onClick: o[2] ||= (e) => B("confirm")
 								}, {
-									default: S(() => [f.confirmIcon ? (g(), o(t, {
+									default: C(() => [p.confirmIcon ? (_(), s(t, {
 										key: 0,
-										color: U[f.confirmVariant],
-										name: f.confirmIcon
-									}, null, 8, ["color", "name"])) : s("", !0), u(" " + v(f.confirmLabel), 1)]),
+										color: Z[p.confirmVariant],
+										name: p.confirmIcon
+									}, null, 8, ["color", "name"])) : c("", !0), d(" " + b(p.confirmLabel), 1)]),
 									_: 1
 								}, 8, ["disabled", "variant"])
-							])], 2)) : s("", !0)
+							])], 2)) : c("", !0)
 						]),
 						_: 3
-					}, 8, ["class", "onOpenAutoFocus"])]),
+					}, 8, ["class", "onOpenAutoFocus"]))]),
 					_: 3
-				})]),
+				}, 8, ["class"])]),
 				_: 3
 			})]),
 			_: 3
@@ -174,6 +276,6 @@ var A = { class: "flex items-center justify-between gap-3" }, j = {
 	}
 });
 //#endregion
-export { P as default };
+export { z as default };
 
 //# sourceMappingURL=Dialog.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeClass","_withModifiers","_withKeys","_createElementBlock","_normalizeStyle","_createElementVNode","_createTextVNode","_toDisplayString","Tooltip","Button","CloseIcon","_createCommentVNode","_renderSlot","Icon","Button_default","Icon_default","Tooltip_default","CloseIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasFooter","computed","banded","sizes","width","bandColour","iconColours","cancel","confirmFromKeyboard","event","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","DialogContent","normalizeClass","withModifiers","withKeys","focusFirst","createElementBlock","normalizeStyle","createElementVNode","DialogTitle","createTextVNode","toDisplayString","createCommentVNode","_ctx","renderSlot"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n      >\n        <DialogContent\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n              <slot name=\"title\">{{ title }}</slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAMiC,IAAQC,GAaRC,IAAOH,GAEPI,IAAOnC,EAAoBiC,GAAC,MAA0B,GAEtDI,IAAQC,EAAS,GACjBC,IAAYC,QAAe,CAAC,CAACH,EAAM,UAAU,CAAC,CAACL,EAAM,YAAY,GACjES,IAASD,QAAe,CAAC,CAACR,EAAM,QAAQ,CAAC,CAACK,EAAM,IAAI,GAEpDK,IAAQ;GACZ,IAAI;GACJ,IAAI;GACJ,QAAQ;GACR,IAAI;GACJ,IAAI;EACN,GACMC,IAAQH,QAAeE,EAAMV,EAAM,SAASS,EAAO,QAAQ,WAAW,MAAM,GAC5EG,IAAaJ,QAAgB,OAAOR,EAAM,QAAS,WAAWA,EAAM,OAAO,6BAA8B,GAEzGa,IAAc;GAAE,SAAS;GAAa,QAAQ;GAAa,UAAU;EAAc;EAEzF,SAASC,IAAS;GAEhB,AADAZ,EAAK,QAAQ,GACb,EAAK,QAAQ;EACf;EAEA,SAASa,EAAoB,GAAsB;GACjD,CAAKC,EAAM,WAAYA,EAAM,aAC7BA,EAAM,eAAe,GACjBhB,EAAM,gBAAgB,CAACA,EAAM,mBAAiBE,EAAK,SAAS;EAClE;E,kBAKEjC,EAAA,GAAAC,EA4EaC,EAAAiD,CAAA,GAAA;GA5EO,MAAMjB,EAAA;GAAA,iBAAA,AAAAkB,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC5B,SAAAlD,QA0Ee,CA1EfC,EA0EeF,EAAAsD,CAAA,GAAA,MAAA;IAzEb,SAAArD,QAwEgB,CAxEhBC,EAwEgBF,EAAAuD,CAAA,GAAA,EAvEd,OAAM,+KAA8K,GAAA;KAEpL,SAAAtD,QAoEgB,CApEhBC,EAoEgBF,EAAAwD,CAAA,GAAA;MAnEb,oBAAkB,KAAA;MACnB,OAAKrD,EAAA,CAAC,gKAA8J,CAC3JqC,EAAA,OAAOF,EAAA,QAAM,gBAAA,YAAA,CAAA,CAAA;MACrB,iBAAe,AAAAY,EAAA,QAAA,MAAEnB,EAAI,QAAA;MACrB,mBAAgB,AAAAmB,EAAA,OAAA9C,QAAjB,CAAA,GAAyB,CAAA,SAAA,CAAA;MACxB,WAAOC,EAAQuC,GAAmB,CAAA,OAAA,CAAA;MAClC,iBAAiB5C,EAAA4D,CAAA;;MAElB,SAAA3D,QAiBM;OAhBEqC,EAAA,SADRxC,EAAA,GAAAQ,EAiBM,OAAA;;QAfJ,OAAM;QACN,qBAAA;QACC,OAAKC,EAAA,EAAA,iBAAqBkC,EAAA,MAAU,CAAA;O,IAErCjC,EAOM,OAPNa,GAOM,CANJnB,EAA8FF,EAAAgE,CAAA,GAAA,EAAjF,OAAM,kDAAiD,GAAA;QAAC,SAAA/D,QAAW,CAARQ,EAAAC,EAAAoB,EAAA,KAAK,GAAA,CAAA,C;;O,IAC9DA,EAAA,YAAfhC,EAAA,GAAAC,EAIUY,GAAA;;QAJgB,MAAMmB,EAAA;;QAC9B,SAAA7B,QAES,CAFTC,EAESU,GAAA;SAFA,cAAYkB,EAAA;SAAY,OAAM;SAAW,aAAA;SAAU,MAAK;SAAK,SAAQ;SAAS,SAAOa;;SAC5F,SAAA1C,QAA6D,CAA7DC,EAA6DW,GAAA,EAAlD,OAAM,0CAAyC,CAAA,C;;;;O,gCAIrDjB,EAAAA,OAAO,QAAlBE,EAAA,GAAAQ,EAEM,OAFNgB,GAEM,CADJP,EAAoBqD,EAAA,QAAA,MAAA,C,wBAIVtC,EAAA,cAadhC,EAAA,GAAAC,EAA6DC,EAAAgE,CAAA,GAAA;;QAAzC,OAAM;;QAAU,SAAA/D,QAAW,CAARQ,EAAAC,EAAAoB,EAAA,KAAK,GAAA,CAAA,C;;O,OAd5ChC,EAAA,GAAAQ,EAaM,OAbNiB,GAaM,CARJrB,EAEcF,EAAAgE,CAAA,GAAA,EAFD,OAAM,wDAAuD,GAAA;QACxE,SAAA/D,QAAqC,CAArCc,EAAqCqD,EAAA,QAAA,SAAA,CAAA,SAAA,CAAf3D,EAAAC,EAAAoB,EAAA,KAAK,GAAA,CAAA,C;;O,IAEdA,EAAA,YAAfhC,EAAA,GAAAC,EAIUY,GAAA;;QAJgB,MAAMmB,EAAA;;QAC9B,SAAA7B,QAES,CAFTC,EAESU,GAAA;SAFA,cAAYkB,EAAA;SAAY,OAAM;SAAW,aAAA;SAAU,MAAK;SAAK,SAAQ;SAAS,SAAOa;;SAC5F,SAAA1C,QAA+D,CAA/DC,EAA+DW,GAAA,EAApD,OAAM,4CAA2C,CAAA,C;;;;;OAMlEL,EAMM,OAAA;QALJ,OAAKL,EAAA,CAAC,gEAA8D,CAC3DmC,EAAA,QAAM,qBAAA,OAAA,CAAgCF,EAAA,UAAcE,EAAA,QAAM,kBAAA,eAAA,CAAA,CAAA;QACnE,mBAAA;O,IAEAvB,EAAQqD,EAAA,QAAA,SAAA,C;OAIFhC,EAAA,SADRtC,EAAA,GAAAQ,EAgBM,OAAA;;QAdJ,OAAKH,EAAA,CAAC,yFACEmC,EAAA,QAAM,uCAAA,8BAAA,CAAA;QACd,qBAAA;O,IAEAvB,EASOqD,EAAA,QAAA,UAAA,CAAA,SAAA;QARLrD,EAA4BqD,EAAA,QAAA,cAAA;QAChBtC,EAAA,QAAZhC,EAAA,GAAAQ,EAAuF,QAAvFkB,GAAuFd,EAAdoB,EAAA,IAAI,GAAA,CAAA,K;QAC7E,AAAAoB,EAAA,OAAA1C,EAAuB,QAAA,EAAjB,OAAM,SAAQ,GAAA,MAAA,EAAA;QACpBN,EAAgFU,GAAA;SAAxE,MAAK;SAAS,SAAQ;SAAS,SAAO+B;;SAAQ,SAAA1C,QAAiB,CAAdQ,EAAAC,EAAAoB,EAAA,WAAW,GAAA,CAAA,C;;;QACpE5B,EAGSU,GAAA;SAHA,UAAUkB,EAAA;SAAiB,MAAK;SAAU,SAASA,EAAA;SAAiB,SAAK,AAAAoB,EAAA,QAAA,MAAEnB,EAAI,SAAA;;SACtF,SAAA9B,QAAoF,CAAxE6B,EAAA,eAAZhC,EAAA,GAAAC,EAAoFiB,GAAA;;UAA1D,OAAO0B,EAAYZ,EAAA;UAAkB,MAAMA,EAAA;S,6CAAerB,EAAA,MACpFC,EAAGoB,EAAA,YAAY,GAAA,CAAA,C"}
+{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeClass","_normalizeStyle","_withKeys","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode","_mergeProps","_renderSlot","_createTextVNode","Tooltip","Button","CloseIcon","Icon","_withModifiers","Button_default","Icon_default","Tooltip_default","CloseIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasFooter","computed","banded","sizes","width","bandColour","narrow","ref","query","onQuery","watch","presentation","below","onBeforeUnmount","sheet","panel","useTemplateRef","drag","useSheetDrag","cancel","isOpen","iconColours","onOutside","event","confirmFromKeyboard","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","normalizeClass","DialogContent","normalizeStyle","withKeys","focusFirst","createCommentVNode","createElementBlock","toDisplayString","createElementVNode","mergeProps","DialogTitle","createTextVNode","renderSlot","_ctx","withModifiers"],"sources":["../../../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, useSlots, useTemplateRef, watch } from 'vue'\n\nimport { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport { focusFirst } from './focus'\nimport { useSheetDrag } from './useSheetDrag'\n\nexport interface DialogProps {\n  title?: string\n  /** The close button in the header. */\n  closable?: boolean\n  closeLabel?: string\n  cancelLabel?: string\n  /** Shows the standard footer's confirm button, which emits `confirm`, as ⌘ or Ctrl Enter does. */\n  confirmLabel?: string\n  confirmIcon?: string\n  confirmVariant?: 'primary' | 'danger' | 'contrast'\n  confirmDisabled?: boolean\n  /** sm 432px, md 512px, record 520px (the default with a band), lg 672px, xl 768px. */\n  size?: 'sm' | 'md' | 'record' | 'lg' | 'xl'\n  /** A record form's tinted header band: a CSS colour such as `rgb(var(--sui-hue-blue-soft))`, or `true` for the accent\n   *  wash. The `hero` slot sits centred in it. */\n  band?: string | boolean\n  /** Muted text at the footer's start, e.g. `saveHint()`. */\n  hint?: string\n  /** The body draws its own header, edge to edge. */\n  headerless?: boolean\n  /** sheet: a bottom sheet with a grab handle, drag to dismiss and a full-width confirm. auto: a sheet on a viewport\n   *  narrower than `sheetBelow`, a dialog otherwise. A sheet draws no Cancel and no band: dragging it down, the\n   *  scrim and Escape cancel. */\n  presentation?: 'dialog' | 'sheet' | 'auto'\n  /** The width in px below which `auto` is a sheet. */\n  sheetBelow?: number\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  closable: true,\n  closeLabel: 'Close',\n  cancelLabel: 'Cancel',\n  confirmLabel: undefined,\n  confirmIcon: undefined,\n  confirmVariant: 'primary',\n  size: undefined,\n  band: undefined,\n  hint: undefined,\n  presentation: 'dialog',\n  sheetBelow: 640\n})\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = useSlots()\nconst hasFooter = computed(() => !!slots.footer || !!props.confirmLabel)\nconst banded = computed(() => !!props.band || !!slots.hero)\n\nconst sizes = {\n  sm: 'max-w-[27rem]',\n  md: 'max-w-lg',\n  record: 'max-w-130',\n  lg: 'max-w-2xl',\n  xl: 'max-w-3xl'\n}\nconst width = computed(() => sizes[props.size ?? (banded.value ? 'record' : 'md')])\nconst bandColour = computed(() => (typeof props.band === 'string' ? props.band : 'rgb(var(--sui-accent-wash))'))\n\nconst narrow = ref(false)\nlet query: MediaQueryList | undefined\nconst onQuery = () => (narrow.value = !!query?.matches)\nwatch(\n  () => [props.presentation, props.sheetBelow] as const,\n  ([presentation, below]) => {\n    query?.removeEventListener('change', onQuery)\n    query =\n      presentation === 'auto' && typeof window !== 'undefined'\n        ? window.matchMedia(`(max-width: ${below - 0.02}px)`)\n        : undefined\n    query?.addEventListener('change', onQuery)\n    onQuery()\n  },\n  { immediate: true }\n)\nonBeforeUnmount(() => query?.removeEventListener('change', onQuery))\n\nconst sheet = computed(() => props.presentation === 'sheet' || (props.presentation === 'auto' && narrow.value))\nconst panel = useTemplateRef<InstanceType<typeof DialogContent>>('panel')\nconst drag = useSheetDrag(\n  computed(() => panel.value?.$el as HTMLElement | undefined),\n  () => cancel()\n)\nwatch(open, (isOpen) => isOpen && drag.reset())\n\nconst iconColours = { primary: 'on-accent', danger: 'on-danger', contrast: 'on-contrast' } as const\n\nfunction cancel() {\n  emit('cancel')\n  open.value = false\n}\n\n// A sheet closes on a tap on the scrim; a dialog only from its buttons and Escape.\nfunction onOutside(event: Event) {\n  if (sheet.value) emit('cancel')\n  else event.preventDefault()\n}\n\nfunction confirmFromKeyboard(event: KeyboardEvent) {\n  if (!event.metaKey && !event.ctrlKey) return\n  event.preventDefault()\n  if (props.confirmLabel && !props.confirmDisabled) emit('confirm')\n}\n</script>\n\n<!-- The one dialog: a header, body and canvas footer; or, with a `band` or `hero`, a record form under a tinted band; or\n     a bottom sheet. -->\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay\n        class=\"fixed inset-0 z-[1100] flex justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n        :class=\"sheet ? 'items-end' : 'items-center'\"\n      >\n        <DialogContent\n          v-if=\"sheet\"\n          ref=\"panel\"\n          :aria-describedby=\"undefined\"\n          class=\"relative flex max-h-[calc(100dvh-1.5rem)] w-full flex-col rounded-t-(--sui-radius-sheet) bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-sheet-out data-[state=open]:animate-sui-sheet-in motion-reduce:animate-none motion-reduce:transition-none\"\n          :class=\"!drag.dragging.value && 'transition-transform duration-[250ms] ease-[cubic-bezier(0.32,0.72,0,1)]'\"\n          :style=\"drag.style.value\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside=\"onOutside\"\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <!-- Without a close button, keyboard and screen-reader users still get one: it shows when focused. -->\n          <button\n            v-if=\"!closable\"\n            class=\"pointer-events-none absolute top-2 right-3 h-7 rounded-md bg-sui-sunken px-2.5 text-13 font-medium text-sui-ink opacity-0 outline-hidden focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:sui-ring\"\n            type=\"button\"\n            @click=\"cancel\"\n          >\n            {{ closeLabel }}\n          </button>\n          <div class=\"shrink-0 cursor-grab touch-none pt-2\" data-modal-header v-bind=\"drag.handlers\">\n            <span aria-hidden=\"true\" class=\"mx-auto block h-1 w-9 rounded-full bg-sui-mark-faint\" />\n            <div v-if=\"!headerless\" class=\"flex min-h-11 items-center justify-between gap-3 pt-2 pr-4 pb-1 pl-5\">\n              <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n                <slot name=\"title\">{{ title }}</slot>\n              </DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n          </div>\n\n          <div\n            class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-5 text-sm leading-5 text-sui-ink-emphasis\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 flex-col gap-2.5 border-t border-sui-line-subtle bg-sui-surface px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <div v-if=\"$slots['footer-start'] || hint\" class=\"flex min-w-0 items-center justify-center gap-2\">\n                <slot name=\"footer-start\" />\n                <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              </div>\n              <Button\n                class=\"w-full\"\n                :disabled=\"confirmDisabled\"\n                size=\"lg\"\n                type=\"button\"\n                :variant=\"confirmVariant\"\n                @click=\"emit('confirm')\"\n              >\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n        <DialogContent\n          v-else\n          :aria-describedby=\"undefined\"\n          class=\"flex max-h-[90vh] w-full flex-col bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n          :class=\"[width, banded ? 'rounded-2xl' : 'rounded-xl']\"\n          @escape-key-down=\"emit('cancel')\"\n          @interact-outside.prevent\n          @keydown.enter=\"confirmFromKeyboard\"\n          @open-auto-focus=\"focusFirst\"\n        >\n          <div\n            v-if=\"banded\"\n            class=\"shrink-0 rounded-t-2xl pt-3.5 pr-3.5 pb-4.5 pl-5 transition-colors duration-200\"\n            data-modal-header\n            :style=\"{ backgroundColor: bandColour }\"\n          >\n            <div class=\"flex items-center justify-between gap-3\">\n              <DialogTitle class=\"text-13 leading-5 font-medium text-sui-ink-body\">{{ title }}</DialogTitle>\n              <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n                <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                  <CloseIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n                </Button>\n              </Tooltip>\n            </div>\n            <div v-if=\"$slots.hero\" class=\"mt-0.5 flex flex-col items-center gap-1.5 pr-1.5\">\n              <slot name=\"hero\" />\n            </div>\n          </div>\n          <div\n            v-else-if=\"!headerless\"\n            class=\"flex shrink-0 items-center justify-between gap-3 rounded-t-xl border-b border-sui-line-subtle bg-sui-surface px-5 py-4 text-sui-ink\"\n            data-modal-header\n          >\n            <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n              <slot name=\"title\">{{ title }}</slot>\n            </DialogTitle>\n            <Tooltip v-if=\"closable\" :text=\"closeLabel\">\n              <Button :aria-label=\"closeLabel\" class=\"shrink-0\" icon-only size=\"sm\" variant=\"ghost\" @click=\"cancel\">\n                <CloseIcon class=\"fill-sui-ink-subtle stroke-sui-ink-subtle\" />\n              </Button>\n            </Tooltip>\n          </div>\n          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto bg-sui-surface text-sm text-sui-ink-emphasis\"\n            :class=\"[banded ? 'px-5 pt-0.5 pb-4' : 'p-5', !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center border-t border-sui-line-subtle bg-sui-canvas text-sui-ink\"\n            :class=\"banded ? 'gap-2 rounded-b-2xl py-3 pr-4 pl-5' : 'gap-3 rounded-b-xl px-5 py-4'\"\n            data-modal-footer\n          >\n            <slot name=\"footer\">\n              <slot name=\"footer-start\" />\n              <span v-if=\"hint\" class=\"min-w-0 truncate text-xs text-sui-ink-muted\">{{ hint }}</span>\n              <span class=\"flex-1\" />\n              <Button type=\"button\" variant=\"ghost\" @click=\"cancel\">{{ cancelLabel }}</Button>\n              <Button :disabled=\"confirmDisabled\" type=\"button\" :variant=\"confirmVariant\" @click=\"emit('confirm')\">\n                <Icon v-if=\"confirmIcon\" :color=\"iconColours[confirmVariant]\" :name=\"confirmIcon\" />\n                {{ confirmLabel }}\n              </Button>\n            </slot>\n          </div>\n        </DialogContent>\n      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/Dialog/useSheetDrag.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'vue';
+/** Dragging a bottom sheet down: it follows the pointer, and past a third of its height, or a flick faster than
+ *  0.6 px/ms, it dismisses; otherwise it springs back. */
+export declare function useSheetDrag(panel: Ref<HTMLElement | null | undefined>, dismiss: () => void): {
+    dragging: import("vue").ComputedRef<boolean>;
+    style: import("vue").ComputedRef<{
+        transform: string;
+    } | undefined>;
+    handlers: {
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onPointerup: (event: PointerEvent) => void;
+        onPointercancel: () => void;
+    };
+    reset: () => void;
+};

package/dist/components/Dialog/useSheetDrag.js

@@ -0,0 +1,37 @@
+import { computed as e, ref as t } from "vue";
+//#region src/components/Dialog/useSheetDrag.ts
+function n(n, r) {
+	let i = t(0), a = t(null);
+	function o(e) {
+		e.button !== 0 || e.target.closest("button, a, input") || (a.value = {
+			y: e.clientY,
+			t: Date.now()
+		}, e.currentTarget.setPointerCapture?.(e.pointerId));
+	}
+	function s(e) {
+		a.value && (i.value = Math.max(0, e.clientY - a.value.y));
+	}
+	function c(e) {
+		if (!a.value) return;
+		let t = Math.max(0, e.clientY - a.value.y), o = t / Math.max(1, Date.now() - a.value.t);
+		a.value = null, t > (n.value?.offsetHeight ?? 1) / 3 || o > .6 ? r() : i.value = 0;
+	}
+	function l() {
+		a.value = null, i.value = 0;
+	}
+	return {
+		dragging: e(() => a.value !== null),
+		style: e(() => i.value ? { transform: `translateY(${i.value}px)` } : void 0),
+		handlers: {
+			onPointerdown: o,
+			onPointermove: s,
+			onPointerup: c,
+			onPointercancel: l
+		},
+		reset: l
+	};
+}
+//#endregion
+export { n as useSheetDrag };
+
+//# sourceMappingURL=useSheetDrag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetDrag.js","names":["useSheetDrag","offset","ref","start","down","event","move","up","dy","speed","panel","dismiss","cancel","computed"],"sources":["../../../src/components/Dialog/useSheetDrag.ts"],"sourcesContent":["import { type Ref, computed, ref } from 'vue'\n\n/** Dragging a bottom sheet down: it follows the pointer, and past a third of its height, or a flick faster than\n *  0.6 px/ms, it dismisses; otherwise it springs back. */\nexport function useSheetDrag(panel: Ref<HTMLElement | null | undefined>, dismiss: () => void) {\n  const offset = ref(0)\n  const start = ref<{ y: number; t: number } | null>(null)\n\n  function down(event: PointerEvent) {\n    // The close button inside the grab area still clicks.\n    if (event.button !== 0 || (event.target as Element).closest('button, a, input')) return\n    start.value = { y: event.clientY, t: Date.now() }\n    ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)\n  }\n\n  function move(event: PointerEvent) {\n    if (start.value) offset.value = Math.max(0, event.clientY - start.value.y)\n  }\n\n  function up(event: PointerEvent) {\n    if (!start.value) return\n    const dy = Math.max(0, event.clientY - start.value.y)\n    const speed = dy / Math.max(1, Date.now() - start.value.t)\n    start.value = null\n    if (dy > (panel.value?.offsetHeight ?? 1) / 3 || speed > 0.6) dismiss()\n    else offset.value = 0\n  }\n\n  function cancel() {\n    start.value = null\n    offset.value = 0\n  }\n\n  return {\n    dragging: computed(() => start.value !== null),\n    style: computed(() => (offset.value ? { transform: `translateY(${offset.value}px)` } : undefined)),\n    handlers: { onPointerdown: down, onPointermove: move, onPointerup: up, onPointercancel: cancel },\n    reset: cancel\n  }\n}\n"],"mappings":";;AAIA,SAAgBA,EAAa,GAA4C,GAAqB;CAC5F,IAAMC,IAASC,EAAI,CAAC,GACdC,IAAQD,EAAqC,IAAI;CAEvD,SAASE,EAAK,GAAqB;EAEjC,AAAIC,EAAM,WAAW,KAAMA,EAAM,OAAmB,QAAQ,kBAAkB,MAC9E,EAAM,QAAQ;GAAE,GAAGA,EAAM;GAAS,GAAG,KAAK,IAAI;EAAE,GAC/CA,EAAO,cAA8B,oBAAoBA,EAAM,SAAS;CAC3E;CAEA,SAASC,EAAK,GAAqB;EACjC,AAAIH,EAAM,UAAO,EAAO,QAAQ,KAAK,IAAI,GAAGE,EAAM,UAAUF,EAAM,MAAM,CAAC;CAC3E;CAEA,SAASI,EAAG,GAAqB;EAC/B,IAAI,CAACJ,EAAM,OAAO;EAClB,IAAMK,IAAK,KAAK,IAAI,GAAGH,EAAM,UAAUF,EAAM,MAAM,CAAC,GAC9CM,IAAQD,IAAK,KAAK,IAAI,GAAG,KAAK,IAAI,IAAIL,EAAM,MAAM,CAAC;EAEzD,AADA,EAAM,QAAQ,MACVK,KAAME,EAAM,OAAO,gBAAgB,KAAK,KAAKD,IAAQ,KAAKE,EAAQ,IACjE,EAAO,QAAQ;CACtB;CAEA,SAASC,IAAS;EAEhB,AADA,EAAM,QAAQ,MACd,EAAO,QAAQ;CACjB;CAEA,OAAO;EACL,UAAUC,QAAeV,EAAM,UAAU,IAAI;EAC7C,OAAOU,QAAgBZ,EAAO,QAAQ,EAAE,WAAW,cAAcA,EAAO,MAAM,KAAK,IAAI,KAAA,CAAU;EACjG,UAAU;GAAE,eAAeG;GAAM,eAAeE;GAAM,aAAaC;GAAI,iBAAiBK;EAAO;EAC/F,OAAOA;CACT;AACF"}

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":["_sfc_main","DropdownMenu_vue_vue_type_script_setup_true_lang_default","DropdownMenu_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DropdownMenu.js","names":["_sfc_main","DropdownMenu_vue_vue_type_script_setup_true_lang_default","DropdownMenu_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport type { DropdownMenuAction, DropdownMenuEntry }\n\nexport interface DropdownMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          :class=\"[menuContentClass, 'min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]']\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n            <DropdownMenuItem v-else :class=\"menuItemClass\" @select=\"select(item)\">\n              <MenuItemContent :item=\"item\" />\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/DropdownMenu/DropdownMenu.vue.d.ts

@@ -1,25 +1,6 @@
-export interface DropdownMenuAction {
-    type: 'action';
-    label: string;
-    action?: string;
-    icon?: string;
-    variant?: 'danger';
-    shortcut?: string;
-    /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */
-    confirm?: {
-        message: string;
-        title?: string;
-        acceptLabel?: string;
-    };
-    confirmed?: boolean;
-    [key: string]: unknown;
-}
-export type DropdownMenuEntry = DropdownMenuAction | {
-    type: 'separator';
-};
-export interface DropdownMenuProps {
-    /** Passed back with every clicked item, e.g. the record the menu acts on. */
-    id?: string;
+import { type DropdownMenuAction, type DropdownMenuEntry, type MenuConfirmLabels } from '../internal/menu';
+export type { DropdownMenuAction, DropdownMenuEntry };
+export interface DropdownMenuProps extends MenuConfirmLabels {
     items?: DropdownMenuEntry[];
     buttonIcon?: string;
     /** A label beside the icon; without one the button is icon-only, named by the tooltip. */
@@ -28,11 +9,6 @@ export interface DropdownMenuProps {
     tooltip?: string | null;
     /** Lines the menu up with the trigger's start or end edge. */
     align?: 'start' | 'end';
-    confirmTitle?: string;
-    confirmMessage?: string;
-    confirmLabel?: string;
-    deleteLabel?: string;
-    cancelLabel?: string;
 }
 declare var __VLS_21: {
     open: boolean;
@@ -57,13 +33,13 @@ declare const __VLS_base: import("vue").DefineComponent<DropdownMenuProps, {}, {
     confirmLabel: string;
     cancelLabel: string;
     id: string;
+    confirmTitle: string;
+    confirmMessage: string;
+    deleteLabel: string;
     items: DropdownMenuEntry[];
     buttonIcon: string;
     buttonLabel: string;
     tooltip: string | null;
-    confirmTitle: string;
-    confirmMessage: string;
-    deleteLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;