@sparklingopinions/sparkling-ui 0.14.0 → 0.16.0

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

@@ -2,40 +2,46 @@ import e from "../Button/Button.js";
 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 { 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";
+import i from "../Kbd/Kbd.js";
+import a from "./ContextSeparator.js";
+import { focusFirst as o, modifierKey as s } from "./focus.js";
+import { useSheetDrag as c } from "./useSheetDrag.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeModels as v, mergeProps as ee, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, openBlock as S, ref as te, renderSlot as C, toDisplayString as w, unref as T, useModel as ne, useSlots as re, useTemplateRef as ie, watch as E, withCtx as D, withKeys as O, withModifiers as ae } from "vue";
+import { DialogContent as k, DialogOverlay as A, DialogPortal as oe, DialogRoot as j, DialogTitle as M } from "reka-ui";
 //#region src/components/Dialog/Dialog.vue?vue&type=script&setup=true&lang.ts
-var A = {
+var se = {
 	key: 0,
 	class: "flex min-h-11 items-center justify-between gap-3 pt-2 pr-4 pb-1 pl-5"
-}, j = {
+}, ce = { class: "flex min-w-0 items-center gap-1" }, le = {
 	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 = {
+}, ue = {
 	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))]",
+	class: "flex shrink-0 flex-col gap-2.5 border-t border-sui-fill-line bg-sui-raised px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
 	"data-modal-footer": ""
-}, N = {
+}, de = {
 	key: 0,
 	class: "flex min-w-0 items-center justify-center gap-2"
-}, P = {
+}, fe = {
 	key: 0,
 	class: "min-w-0 truncate text-xs text-sui-ink-muted"
-}, F = { class: "flex items-center justify-between gap-3" }, I = {
+}, pe = { class: "flex items-center justify-between gap-3" }, me = {
 	key: 0,
 	class: "mt-0.5 flex flex-col items-center gap-1.5 pr-1.5"
-}, L = {
+}, N = {
 	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",
+	class: "flex shrink-0 items-center justify-between gap-3 pt-3 pr-3 pl-4 text-sui-ink",
 	"data-modal-header": ""
-}, R = {
+}, P = { class: "flex min-h-7 min-w-0 items-center gap-1" }, F = {
 	key: 0,
 	class: "min-w-0 truncate text-xs text-sui-ink-muted"
-}, z = /*@__PURE__*/ p({
+}, I = {
+	key: 1,
+	"aria-hidden": "true",
+	class: "flex shrink-0 items-center gap-1"
+}, L = /*@__PURE__*/ _({
 	__name: "Dialog",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ v({
 		title: { default: void 0 },
 		closable: {
 			type: Boolean,
@@ -63,207 +69,212 @@ var A = {
 		},
 		openModifiers: {}
 	}),
-	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 = {
+	emits: /*@__PURE__*/ v(["confirm", "cancel"], ["update:open"]),
+	setup(_, { emit: v }) {
+		let L = _, R = v, z = ne(_, "open"), B = re(), V = u(() => !!B.context), H = s(), U = u(() => !!B.footer || !!L.confirmLabel), W = u(() => !!L.band || !!B.hero), he = {
 			sm: "max-w-[27rem]",
 			md: "max-w-lg",
 			record: "max-w-130",
 			lg: "max-w-2xl",
 			xl: "max-w-3xl"
-		}, 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]) => {
+		}, ge = u(() => he[L.size ?? (W.value ? "record" : "md")]), _e = u(() => typeof L.band == "string" ? L.band : "rgb(var(--sui-accent-wash))"), G = te(!1), K, q = () => G.value = !!K?.matches;
+		E(() => [L.presentation, L.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());
+		}, { immediate: !0 }), x(() => K?.removeEventListener("change", q));
+		let J = u(() => L.presentation === "sheet" || L.presentation === "auto" && G.value), Y = ie("panel"), X = c(u(() => Y.value?.$el), () => Q());
+		E(z, (e) => e && X.reset());
 		let Z = {
 			primary: "on-accent",
 			danger: "on-danger",
 			contrast: "on-contrast"
 		};
 		function Q() {
-			B("cancel"), V.value = !1;
+			R("cancel"), z.value = !1;
 		}
-		function le(e) {
-			J.value ? B("cancel") : e.preventDefault();
+		function ve(e) {
+			J.value ? R("cancel") : e.preventDefault();
 		}
 		function $(e) {
-			(e.metaKey || e.ctrlKey) && (e.preventDefault(), z.confirmLabel && !z.confirmDisabled && B("confirm"));
+			(e.metaKey || e.ctrlKey) && (e.preventDefault(), L.confirmLabel && !L.confirmDisabled && R("confirm"));
 		}
-		return (a, o) => (_(), s(x(O), {
-			open: V.value,
-			"onUpdate:open": o[5] ||= (e) => V.value = e
+		return (s, c) => (S(), d(T(j), {
+			open: z.value,
+			"onUpdate:open": c[5] ||= (e) => z.value = e
 		}, {
-			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), {
+			default: D(() => [g(T(oe), null, {
+				default: D(() => [g(T(A), { class: y(["fixed inset-0 z-[1100] flex justify-center data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in", J.value ? "items-end bg-sui-scrim/40 backdrop-blur-[4px]" : "items-start bg-[rgb(var(--sui-scrim)/var(--sui-scrim-alpha))] px-4 pt-(--sui-dialog-offset) pb-4"]) }, {
+					default: D(() => [J.value ? (S(), d(T(k), {
 						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)
+						class: y(["relative flex max-h-[calc(100dvh-1.5rem)] w-full flex-col rounded-t-(--sui-radius-sheet) border border-b-0 border-sui-edge bg-sui-raised shadow-(--sui-shadow-floating) outline-hidden data-[state=closed]:animate-sui-sheet-out data-[state=open]:animate-sui-sheet-in motion-reduce:animate-none motion-reduce:transition-none", !T(X).dragging.value && "transition-transform duration-[250ms] ease-[cubic-bezier(0.32,0.72,0,1)]"]),
+						style: b(T(X).style.value),
+						onEscapeKeyDown: c[1] ||= (e) => R("cancel"),
+						onInteractOutside: ve,
+						onKeydown: O($, ["enter"]),
+						onOpenAutoFocus: T(o)
 					}, {
-						default: C(() => [
-							p.closable ? c("", !0) : (_(), l("button", {
+						default: D(() => [
+							_.closable ? f("", !0) : (S(), p("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",
+								class: "pointer-events-none absolute top-2 right-3 h-7 rounded-md bg-sui-fill 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({
+							}, w(_.closeLabel), 1)),
+							m("div", ee({
 								class: "shrink-0 cursor-grab touch-none pt-2",
 								"data-modal-header": ""
-							}, x(X).handlers), [o[6] ||= u("span", {
+							}, T(X).handlers), [c[6] ||= m("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), {
+							}, null, -1), _.headerless ? (S(), d(T(M), {
 								key: 1,
 								class: "sr-only"
 							}, {
-								default: C(() => [d(b(p.title), 1)]),
+								default: D(() => [h(w(_.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)])]),
+							})) : (S(), p("div", se, [m("div", ce, [V.value ? (S(), p(l, { key: 0 }, [C(s.$slots, "context"), g(a)], 64)) : f("", !0), g(T(M), { class: "min-w-0 truncate text-base font-semibold text-sui-ink" }, {
+								default: D(() => [C(s.$slots, "title", {}, () => [h(w(_.title), 1)])]),
 								_: 3
-							}), p.closable ? (_(), s(n, {
+							})]), _.closable ? (S(), d(n, {
 								key: 0,
-								text: p.closeLabel
+								text: _.closeLabel
 							}, {
-								default: C(() => [f(e, {
-									"aria-label": p.closeLabel,
+								default: D(() => [g(e, {
+									"aria-label": _.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" })]),
+									default: D(() => [g(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, {
+							}, 8, ["text"])) : f("", !0)]))], 16),
+							m("div", le, [C(s.$slots, "default")]),
+							U.value ? (S(), p("div", ue, [C(s.$slots, "footer", {}, () => [s.$slots["footer-start"] || _.hint ? (S(), p("div", de, [C(s.$slots, "footer-start"), _.hint ? (S(), p("span", fe, w(_.hint), 1)) : f("", !0)])) : f("", !0), g(e, {
 								class: "w-full",
-								disabled: p.confirmDisabled,
+								disabled: _.confirmDisabled,
 								size: "lg",
 								type: "button",
-								variant: p.confirmVariant,
-								onClick: o[0] ||= (e) => B("confirm")
+								variant: _.confirmVariant,
+								onClick: c[0] ||= (e) => R("confirm")
 							}, {
-								default: C(() => [p.confirmIcon ? (_(), s(t, {
+								default: D(() => [_.confirmIcon ? (S(), d(t, {
 									key: 0,
-									color: Z[p.confirmVariant],
-									name: p.confirmIcon
-								}, null, 8, ["color", "name"])) : c("", !0), d(" " + b(p.confirmLabel), 1)]),
+									color: Z[_.confirmVariant],
+									name: _.confirmIcon
+								}, null, 8, ["color", "name"])) : f("", !0), h(" " + w(_.confirmLabel), 1)]),
 								_: 1
-							}, 8, ["disabled", "variant"])])])) : c("", !0)
+							}, 8, ["disabled", "variant"])])])) : f("", !0)
 						]),
 						_: 3
 					}, 8, [
 						"class",
 						"style",
 						"onOpenAutoFocus"
-					])) : (_(), s(x(T), {
+					])) : (S(), d(T(k), {
 						key: 1,
 						"aria-describedby": void 0,
-						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)
+						class: y(["flex max-h-[calc(100dvh-var(--sui-dialog-offset)-1rem)] w-full flex-col border border-sui-edge bg-sui-raised shadow-(--sui-shadow-floating) outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in", [ge.value, W.value ? "rounded-2xl" : "rounded-xl"]]),
+						onEscapeKeyDown: c[3] ||= (e) => R("cancel"),
+						onInteractOutside: c[4] ||= ae(() => {}, ["prevent"]),
+						onKeydown: O($, ["enter"]),
+						onOpenAutoFocus: T(o)
 					}, {
-						default: C(() => [
-							W.value ? (_(), l("div", {
+						default: D(() => [
+							W.value ? (S(), p("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: 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)]),
+								style: b({ backgroundColor: _e.value })
+							}, [m("div", pe, [g(T(M), { class: "text-13 leading-5 font-medium text-sui-ink-body" }, {
+								default: D(() => [h(w(_.title), 1)]),
 								_: 1
-							}), p.closable ? (_(), s(n, {
+							}), _.closable ? (S(), d(n, {
 								key: 0,
-								text: p.closeLabel
+								text: _.closeLabel
 							}, {
-								default: C(() => [f(e, {
-									"aria-label": p.closeLabel,
+								default: D(() => [g(e, {
+									"aria-label": _.closeLabel,
 									class: "shrink-0",
 									"icon-only": "",
 									size: "sm",
 									variant: "ghost",
 									onClick: Q
 								}, {
-									default: C(() => [f(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
+									default: D(() => [g(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
-							}, 8, ["text"])) : c("", !0)]), a.$slots.hero ? (_(), l("div", I, [y(a.$slots, "hero")])) : c("", !0)], 4)) : p.headerless ? (_(), s(x(k), {
+							}, 8, ["text"])) : f("", !0)]), s.$slots.hero ? (S(), p("div", me, [C(s.$slots, "hero")])) : f("", !0)], 4)) : _.headerless ? (S(), d(T(M), {
 								key: 2,
 								class: "sr-only"
 							}, {
-								default: C(() => [d(b(p.title), 1)]),
+								default: D(() => [h(w(_.title), 1)]),
 								_: 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)])]),
+							})) : (S(), p("div", N, [m("div", P, [V.value ? (S(), p(l, { key: 0 }, [C(s.$slots, "context"), g(a)], 64)) : f("", !0), g(T(M), { class: y(["min-w-0 truncate text-sm font-semibold text-sui-ink", V.value ? "" : "pl-1"]) }, {
+								default: D(() => [C(s.$slots, "title", {}, () => [h(w(_.title), 1)])]),
 								_: 3
-							}), p.closable ? (_(), s(n, {
+							}, 8, ["class"])]), _.closable ? (S(), d(n, {
 								key: 0,
-								text: p.closeLabel
+								text: _.closeLabel
 							}, {
-								default: C(() => [f(e, {
-									"aria-label": p.closeLabel,
+								default: D(() => [g(e, {
+									"aria-label": _.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" })]),
+									default: D(() => [g(r, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })]),
 									_: 1
 								}, 8, ["aria-label"])]),
 								_: 1
-							}, 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")]]),
+							}, 8, ["text"])) : f("", !0)])),
+							m("div", {
+								class: y(["overflow-y-auto text-sm text-sui-ink-emphasis", [W.value ? "px-5 pt-0.5 pb-4" : _.headerless ? "p-5" : "px-5 pt-3.5 pb-5", !U.value && (W.value ? "rounded-b-2xl" : "rounded-b-xl")]]),
 								"data-modal-body": ""
-							}, [y(a.$slots, "default")], 2),
-							U.value ? (_(), l("div", {
+							}, [C(s.$slots, "default")], 2),
+							U.value ? (S(), p("div", {
 								key: 3,
-								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"]),
+								class: y(["flex shrink-0 items-center gap-2.5 text-sui-ink", W.value ? "rounded-b-2xl py-3 pr-4 pl-5" : "rounded-b-xl px-4 pt-1 pb-4 pl-5"]),
 								"data-modal-footer": ""
-							}, [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: Q
-								}, {
-									default: C(() => [d(b(p.cancelLabel), 1)]),
+							}, [C(s.$slots, "footer", {}, () => [
+								C(s.$slots, "footer-start"),
+								_.hint ? (S(), p("span", F, w(_.hint), 1)) : f("", !0),
+								c[8] ||= m("span", { class: "flex-1" }, null, -1),
+								_.confirmLabel ? (S(), p("span", I, [g(i, null, {
+									default: D(() => [h(w(T(H)), 1)]),
+									_: 1
+								}), g(i, null, {
+									default: D(() => [...c[7] ||= [h("↵", -1)]]),
 									_: 1
-								}),
-								f(e, {
-									disabled: p.confirmDisabled,
+								})])) : f("", !0),
+								_.confirmLabel ? (S(), d(e, {
+									key: 2,
+									"aria-keyshortcuts": T(H) === "⌘" ? "Meta+Enter" : "Control+Enter",
+									disabled: _.confirmDisabled,
 									type: "button",
-									variant: p.confirmVariant,
-									onClick: o[2] ||= (e) => B("confirm")
+									variant: _.confirmVariant,
+									onClick: c[2] ||= (e) => R("confirm")
 								}, {
-									default: C(() => [p.confirmIcon ? (_(), s(t, {
+									default: D(() => [_.confirmIcon ? (S(), d(t, {
 										key: 0,
-										color: Z[p.confirmVariant],
-										name: p.confirmIcon
-									}, null, 8, ["color", "name"])) : c("", !0), d(" " + b(p.confirmLabel), 1)]),
+										color: Z[_.confirmVariant],
+										name: _.confirmIcon
+									}, null, 8, ["color", "name"])) : f("", !0), h(" " + w(_.confirmLabel), 1)]),
 									_: 1
-								}, 8, ["disabled", "variant"])
-							])], 2)) : c("", !0)
+								}, 8, [
+									"aria-keyshortcuts",
+									"disabled",
+									"variant"
+								])) : f("", !0)
+							])], 2)) : f("", !0)
 						]),
 						_: 3
 					}, 8, ["class", "onOpenAutoFocus"]))]),
@@ -276,6 +287,6 @@ var A = {
 	}
 });
 //#endregion
-export { z as default };
+export { L 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","_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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"}
+{"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","_Fragment","_renderSlot","ContextSeparator","_createTextVNode","Tooltip","Button","CloseIcon","Icon","_withModifiers","Kbd","Button_default","Icon_default","Tooltip_default","CloseIcon_default","Kbd_default","ContextSeparator_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","Dialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","emit","open","useModel","slots","useSlots","hasContext","computed","modKey","modifierKey","hasFooter","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","Fragment","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 Kbd from '../Kbd/Kbd.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport CloseIcon from '../internal/CloseIcon.vue'\nimport ContextSeparator from './ContextSeparator.vue'\nimport { focusFirst, modifierKey } 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  /** @deprecated A dialog has no Cancel button: Escape and the close button cancel. Kept so existing calls compile. */\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. The ⌘ or Ctrl Enter shortcut is drawn by the dialog next to its confirm. */\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 hasContext = computed(() => !!slots.context)\nconst modKey = modifierKey()\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: one raised piece with a title (after an optional `context`, such as where the thing lands), a body\n     and a footer; or, with a `band` or `hero`, a record form under a tinted band; or 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 data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n        :class=\"\n          sheet\n            ? 'items-end bg-sui-scrim/40 backdrop-blur-[4px]'\n            : 'items-start bg-[rgb(var(--sui-scrim)/var(--sui-scrim-alpha))] px-4 pt-(--sui-dialog-offset) pb-4'\n        \"\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) border border-b-0 border-sui-edge bg-sui-raised shadow-(--sui-shadow-floating) 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-fill 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              <div class=\"flex min-w-0 items-center gap-1\">\n                <template v-if=\"hasContext\">\n                  <slot name=\"context\" />\n                  <ContextSeparator />\n                </template>\n                <DialogTitle class=\"min-w-0 truncate text-base font-semibold text-sui-ink\">\n                  <slot name=\"title\">{{ title }}</slot>\n                </DialogTitle>\n              </div>\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-fill-line bg-sui-raised 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-[calc(100dvh-var(--sui-dialog-offset)-1rem)] w-full flex-col border border-sui-edge bg-sui-raised shadow-(--sui-shadow-floating) 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 pt-3 pr-3 pl-4 text-sui-ink\"\n            data-modal-header\n          >\n            <div class=\"flex min-h-7 min-w-0 items-center gap-1\">\n              <template v-if=\"hasContext\">\n                <slot name=\"context\" />\n                <ContextSeparator />\n              </template>\n              <DialogTitle\n                class=\"min-w-0 truncate text-sm font-semibold text-sui-ink\"\n                :class=\"hasContext ? '' : 'pl-1'\"\n              >\n                <slot name=\"title\">{{ title }}</slot>\n              </DialogTitle>\n            </div>\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          <DialogTitle v-else class=\"sr-only\">{{ title }}</DialogTitle>\n\n          <div\n            class=\"overflow-y-auto text-sm text-sui-ink-emphasis\"\n            :class=\"[\n              banded ? 'px-5 pt-0.5 pb-4' : headerless ? 'p-5' : 'px-5 pt-3.5 pb-5',\n              !hasFooter && (banded ? 'rounded-b-2xl' : 'rounded-b-xl')\n            ]\"\n            data-modal-body\n          >\n            <slot />\n          </div>\n\n          <div\n            v-if=\"hasFooter\"\n            class=\"flex shrink-0 items-center gap-2.5 text-sui-ink\"\n            :class=\"banded ? 'rounded-b-2xl py-3 pr-4 pl-5' : 'rounded-b-xl px-4 pt-1 pb-4 pl-5'\"\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              <span v-if=\"confirmLabel\" aria-hidden=\"true\" class=\"flex shrink-0 items-center gap-1\">\n                <Kbd>{{ modKey }}</Kbd\n                ><Kbd>↵</Kbd>\n              </span>\n              <Button\n                v-if=\"confirmLabel\"\n                :aria-keyshortcuts=\"modKey === '⌘' ? 'Meta+Enter' : 'Control+Enter'\"\n                :disabled=\"confirmDisabled\"\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      </DialogOverlay>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":"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"}

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

@@ -1,5 +1,7 @@
 /** Focus goes to an [autofocus] field (footer first, then header, then body) or else the dialog. */
 export declare function focusFirst(event: Event): void;
+/** The confirm shortcut's modifier as a key cap: ⌘ on Apple devices, Ctrl elsewhere. */
+export declare const modifierKey: () => "⌘" | "Ctrl";
 /** The platform's save shortcut, for a Dialog's `hint`: "⌘ Enter to save" on Apple devices, "Ctrl Enter to save"
  *  elsewhere. `{key}` in the template is replaced. */
 export declare const saveHint: (template?: string) => string;

package/dist/components/Dialog/focus.js

@@ -8,8 +8,8 @@ function e(e) {
 		"[data-modal-body]"
 	].map((e) => t.querySelector(`${e} [autofocus]`)).find(Boolean) ?? t).focus();
 }
-var t = () => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform), n = (e = "{key} Enter to save") => e.replace("{key}", t() ? "⌘" : "Ctrl");
+var t = () => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform), n = () => t() ? "⌘" : "Ctrl", r = (e = "{key} Enter to save") => e.replace("{key}", t() ? "⌘" : "Ctrl");
 //#endregion
-export { e as focusFirst, n as saveHint };
+export { e as focusFirst, n as modifierKey, r as saveHint };
 
 //# sourceMappingURL=focus.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"focus.js","names":["focusFirst","dialog","event","part","isApple","saveHint","template"],"sources":["../../../src/components/Dialog/focus.ts"],"sourcesContent":["/** Focus goes to an [autofocus] field (footer first, then header, then body) or else the dialog. */\nexport function focusFirst(event: Event) {\n  event.preventDefault()\n  const dialog = event.target as HTMLElement\n  const target = ['[data-modal-footer]', '[data-modal-header]', '[data-modal-body]']\n    .map((part) => dialog.querySelector<HTMLElement>(`${part} [autofocus]`))\n    .find(Boolean)\n  ;(target ?? dialog).focus()\n}\n\nconst isApple = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)\n\n/** The platform's save shortcut, for a Dialog's `hint`: \"⌘ Enter to save\" on Apple devices, \"Ctrl Enter to save\"\n *  elsewhere. `{key}` in the template is replaced. */\nexport const saveHint = (template = '{key} Enter to save') => template.replace('{key}', isApple() ? '⌘' : 'Ctrl')\n"],"mappings":";AACA,SAAgBA,EAAW,GAAc;CACvC,EAAM,eAAe;CACrB,IAAMC,IAASC,EAAM;CAIpB,CAHc;EAAC;EAAuB;EAAuB;CAAmB,CAAC,CAC/E,KAAK,MAASD,EAAO,cAA2B,GAAGE,EAAK,aAAa,CAAC,CAAC,CACvE,KAAK,OACN,KAAUF,EAAA,CAAQ,MAAM;AAC5B;AAEA,IAAMG,UAAgB,OAAO,YAAc,OAAe,kBAAkB,KAAK,UAAU,QAAQ,GAItFC,KAAY,IAAW,0BAA0BC,EAAS,QAAQ,SAASF,EAAQ,IAAI,MAAM,MAAM"}
+{"version":3,"file":"focus.js","names":["focusFirst","dialog","event","part","isApple","modifierKey","saveHint","template"],"sources":["../../../src/components/Dialog/focus.ts"],"sourcesContent":["/** Focus goes to an [autofocus] field (footer first, then header, then body) or else the dialog. */\nexport function focusFirst(event: Event) {\n  event.preventDefault()\n  const dialog = event.target as HTMLElement\n  const target = ['[data-modal-footer]', '[data-modal-header]', '[data-modal-body]']\n    .map((part) => dialog.querySelector<HTMLElement>(`${part} [autofocus]`))\n    .find(Boolean)\n  ;(target ?? dialog).focus()\n}\n\nconst isApple = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)\n\n/** The confirm shortcut's modifier as a key cap: ⌘ on Apple devices, Ctrl elsewhere. */\nexport const modifierKey = () => (isApple() ? '⌘' : 'Ctrl')\n\n/** The platform's save shortcut, for a Dialog's `hint`: \"⌘ Enter to save\" on Apple devices, \"Ctrl Enter to save\"\n *  elsewhere. `{key}` in the template is replaced. */\nexport const saveHint = (template = '{key} Enter to save') => template.replace('{key}', isApple() ? '⌘' : 'Ctrl')\n"],"mappings":";AACA,SAAgBA,EAAW,GAAc;CACvC,EAAM,eAAe;CACrB,IAAMC,IAASC,EAAM;CAIpB,CAHc;EAAC;EAAuB;EAAuB;CAAmB,CAAC,CAC/E,KAAK,MAASD,EAAO,cAA2B,GAAGE,EAAK,aAAa,CAAC,CAAC,CACvE,KAAK,OACN,KAAUF,EAAA,CAAQ,MAAM;AAC5B;AAEA,IAAMG,UAAgB,OAAO,YAAc,OAAe,kBAAkB,KAAK,UAAU,QAAQ,GAGtFC,UAAqBD,EAAQ,IAAI,MAAM,QAIvCE,KAAY,IAAW,0BAA0BC,EAAS,QAAQ,SAASH,EAAQ,IAAI,MAAM,MAAM"}

package/dist/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","names":["_sfc_main","EmptyState_vue_vue_type_script_setup_true_lang_default","EmptyState_default"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a\n   *  heading), a small secondary action. No description. */\n  size?: 'md' | 'sm'\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2,\n  size: 'md'\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div v-if=\"size === 'sm'\" class=\"flex flex-col items-center justify-center gap-2 px-4 py-5 text-center\">\n    <Icon v-if=\"icon\" class=\"size-4\" color=\"ink-muted\" :name=\"icon\" />\n    <p class=\"m-0 max-w-full text-13 leading-5 text-sui-ink-muted\">{{ title }}</p>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-1\" size=\"sm\" variant=\"secondary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n  <div v-else class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-sunken ring-sui-line-subtle'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EmptyState.js","names":["_sfc_main","EmptyState_vue_vue_type_script_setup_true_lang_default","EmptyState_default"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a\n   *  heading), a small secondary action. No description. */\n  size?: 'md' | 'sm'\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2,\n  size: 'md'\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div v-if=\"size === 'sm'\" class=\"flex flex-col items-center justify-center gap-2 px-4 py-5 text-center\">\n    <Icon v-if=\"icon\" class=\"size-4\" color=\"ink-muted\" :name=\"icon\" />\n    <p class=\"m-0 max-w-full text-13 leading-5 text-sui-ink-muted\">{{ title }}</p>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-1\" size=\"sm\" variant=\"secondary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n  <div v-else class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-fill ring-sui-fill-line'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/EmptyState/EmptyState.vue_vue_type_script_setup_true_lang.js

@@ -47,7 +47,7 @@ var h = {
 			c.icon ? (u(), i("div", {
 				key: 0,
 				"aria-hidden": "true",
-				class: l(["mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset", c.tone === "accent" ? "bg-sui-accent-wash ring-sui-accent-line" : "bg-sui-sunken ring-sui-line-subtle"])
+				class: l(["mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset", c.tone === "accent" ? "bg-sui-accent-wash ring-sui-accent-line" : "bg-sui-fill ring-sui-fill-line"])
 			}, [s(t, {
 				class: "size-6",
 				color: c.tone === "accent" ? "accent" : "ink-muted",

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_createBlock","Icon","_createCommentVNode","_createElementVNode","_toDisplayString","_renderSlot","Button","_withCtx","_createTextVNode","_normalizeClass","_createVNode","_resolveDynamicComponent","Button_default","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EmptyState_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","createBlock","createCommentVNode","createElementVNode","toDisplayString","renderSlot","_ctx","_cache","withCtx","createTextVNode","normalizeClass","createVNode","resolveDynamicComponent"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a\n   *  heading), a small secondary action. No description. */\n  size?: 'md' | 'sm'\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2,\n  size: 'md'\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div v-if=\"size === 'sm'\" class=\"flex flex-col items-center justify-center gap-2 px-4 py-5 text-center\">\n    <Icon v-if=\"icon\" class=\"size-4\" color=\"ink-muted\" :name=\"icon\" />\n    <p class=\"m-0 max-w-full text-13 leading-5 text-sui-ink-muted\">{{ title }}</p>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-1\" size=\"sm\" variant=\"secondary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n  <div v-else class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-sunken ring-sui-line-subtle'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;E,iBAoCasB,EAAA,SAAI,QAAfrB,EAAA,GAAAC,EASM,OATNe,GASM;GARQK,EAAA,QAAZrB,EAAA,GAAAE,EAAkEC,GAAA;;IAAhD,OAAM;IAAS,OAAM;IAAa,MAAMkB,EAAA;;GAC1DhB,EAA8E,KAA9EY,GAA8EX,EAAZe,EAAA,KAAK,GAAA,CAAA;GACvEd,EAKOsB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSR,EAAA,eAAdrB,EAAA,GAAAE,EAGSM,GAAA;;IAHkB,OAAM;IAAO,MAAK;IAAK,SAAQ;IAAa,SAAK,AAAAsB,EAAA,QAAA,MAAE/B,EAAAA,MAAK,QAAA;;IACjF,SAAAU,QAA6C,CAAjCY,EAAA,cAAZrB,EAAA,GAAAE,EAA6CC,GAAA;;KAApB,MAAMkB,EAAA;I,oCAAcX,EAAA,MAC7CJ,EAAGe,EAAA,WAAW,GAAA,CAAA,C;;;E,OAIpBrB,EAAA,GAAAC,EAmBM,OAnBNiB,GAmBM;GAjBIG,EAAA,QADRrB,EAAA,GAAAC,EAOM,OAAA;;IALJ,eAAY;IACZ,OAAKU,EAAA,CAAC,8EACEU,EAAA,SAAI,WAAA,4CAAA,oCAAA,CAAA;G,IAEZT,EAAwFT,GAAA;IAAlF,OAAM;IAAU,OAAOkB,EAAA,SAAI,WAAA,WAAA;IAAyC,MAAMA,EAAA;;IAElFrB,EAAA,GAAAE,EAAmHW,EAAA,IAA/FQ,EAAA,cAAY,GAAA,EAAI,OAAM,kDAAiD,GAAA;IAAC,SAAAZ,QAAW,CAARC,EAAAJ,EAAAe,EAAA,KAAK,GAAA,CAAA,C;;;GACpGhB,EAEM,OAFNc,GAEM,CADJZ,EAAiDsB,EAAA,QAAA,eAAA,CAAA,SAAA,CAArBnB,EAAAJ,EAAAe,EAAA,WAAW,GAAA,CAAA,C;GAEzCd,EAKOsB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSR,EAAA,eAAdrB,EAAA,GAAAE,EAGSM,GAAA;;IAHkB,OAAM;IAAO,SAAQ;IAAW,SAAK,AAAAsB,EAAA,QAAA,MAAE/B,EAAAA,MAAK,QAAA;;IACrE,SAAAU,QAA6C,CAAjCY,EAAA,cAAZrB,EAAA,GAAAE,EAA6CC,GAAA;;KAApB,MAAMkB,EAAA;I,oCAAcX,EAAA,MAC7CJ,EAAGe,EAAA,WAAW,GAAA,CAAA,C"}
+{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_createBlock","Icon","_createCommentVNode","_createElementVNode","_toDisplayString","_renderSlot","Button","_withCtx","_createTextVNode","_normalizeClass","_createVNode","_resolveDynamicComponent","Button_default","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EmptyState_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","createBlock","createCommentVNode","createElementVNode","toDisplayString","renderSlot","_ctx","_cache","withCtx","createTextVNode","normalizeClass","createVNode","resolveDynamicComponent"],"sources":["../../../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\n\nexport interface EmptyStateProps {\n  title: string\n  /** Plain text; for anything richer, use the `description` slot. */\n  description?: string\n  /** What the list holds, as an icon name (users, inbox, search for no matches), in a tile above the title. Decorative. */\n  icon?: string\n  /** `accent` for a list waiting to be filled; `neutral` for no matches or a filtered view. */\n  tone?: 'accent' | 'neutral'\n  /** Shows a primary button with this label, which emits `action`. Or put your own in the `action` slot. */\n  actionLabel?: string\n  actionIcon?: string\n  /** The title's heading level, to fit the page's outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a\n   *  heading), a small secondary action. No description. */\n  size?: 'md' | 'sm'\n}\n\nwithDefaults(defineProps<EmptyStateProps>(), {\n  description: undefined,\n  icon: undefined,\n  tone: 'accent',\n  actionLabel: undefined,\n  actionIcon: 'plus',\n  headingLevel: 2,\n  size: 'md'\n})\n\ndefineEmits<{ action: [] }>()\n</script>\n\n<template>\n  <div v-if=\"size === 'sm'\" class=\"flex flex-col items-center justify-center gap-2 px-4 py-5 text-center\">\n    <Icon v-if=\"icon\" class=\"size-4\" color=\"ink-muted\" :name=\"icon\" />\n    <p class=\"m-0 max-w-full text-13 leading-5 text-sui-ink-muted\">{{ title }}</p>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-1\" size=\"sm\" variant=\"secondary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n  <div v-else class=\"flex flex-col items-center justify-center px-6 py-16 text-center\">\n    <div\n      v-if=\"icon\"\n      aria-hidden=\"true\"\n      class=\"mb-4 flex size-12 items-center justify-center rounded-xl ring-1 ring-inset\"\n      :class=\"tone === 'accent' ? 'bg-sui-accent-wash ring-sui-accent-line' : 'bg-sui-fill ring-sui-fill-line'\"\n    >\n      <Icon class=\"size-6\" :color=\"tone === 'accent' ? 'accent' : 'ink-muted'\" :name=\"icon\" />\n    </div>\n    <component :is=\"`h${headingLevel}`\" class=\"m-0 mb-1.5 text-base font-semibold text-sui-ink\">{{ title }}</component>\n    <div class=\"max-w-xs text-sm leading-relaxed text-sui-ink-muted\">\n      <slot name=\"description\">{{ description }}</slot>\n    </div>\n    <slot name=\"action\">\n      <Button v-if=\"actionLabel\" class=\"mt-4\" variant=\"primary\" @click=\"$emit('action')\">\n        <Icon v-if=\"actionIcon\" :name=\"actionIcon\" />\n        {{ actionLabel }}\n      </Button>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;E,iBAoCasB,EAAA,SAAI,QAAfrB,EAAA,GAAAC,EASM,OATNe,GASM;GARQK,EAAA,QAAZrB,EAAA,GAAAE,EAAkEC,GAAA;;IAAhD,OAAM;IAAS,OAAM;IAAa,MAAMkB,EAAA;;GAC1DhB,EAA8E,KAA9EY,GAA8EX,EAAZe,EAAA,KAAK,GAAA,CAAA;GACvEd,EAKOsB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSR,EAAA,eAAdrB,EAAA,GAAAE,EAGSM,GAAA;;IAHkB,OAAM;IAAO,MAAK;IAAK,SAAQ;IAAa,SAAK,AAAAsB,EAAA,QAAA,MAAE/B,EAAAA,MAAK,QAAA;;IACjF,SAAAU,QAA6C,CAAjCY,EAAA,cAAZrB,EAAA,GAAAE,EAA6CC,GAAA;;KAApB,MAAMkB,EAAA;I,oCAAcX,EAAA,MAC7CJ,EAAGe,EAAA,WAAW,GAAA,CAAA,C;;;E,OAIpBrB,EAAA,GAAAC,EAmBM,OAnBNiB,GAmBM;GAjBIG,EAAA,QADRrB,EAAA,GAAAC,EAOM,OAAA;;IALJ,eAAY;IACZ,OAAKU,EAAA,CAAC,8EACEU,EAAA,SAAI,WAAA,4CAAA,gCAAA,CAAA;G,IAEZT,EAAwFT,GAAA;IAAlF,OAAM;IAAU,OAAOkB,EAAA,SAAI,WAAA,WAAA;IAAyC,MAAMA,EAAA;;IAElFrB,EAAA,GAAAE,EAAmHW,EAAA,IAA/FQ,EAAA,cAAY,GAAA,EAAI,OAAM,kDAAiD,GAAA;IAAC,SAAAZ,QAAW,CAARC,EAAAJ,EAAAe,EAAA,KAAK,GAAA,CAAA,C;;;GACpGhB,EAEM,OAFNc,GAEM,CADJZ,EAAiDsB,EAAA,QAAA,eAAA,CAAA,SAAA,CAArBnB,EAAAJ,EAAAe,EAAA,WAAW,GAAA,CAAA,C;GAEzCd,EAKOsB,EAAA,QAAA,UAAA,CAAA,SAAA,CAJSR,EAAA,eAAdrB,EAAA,GAAAE,EAGSM,GAAA;;IAHkB,OAAM;IAAO,SAAQ;IAAW,SAAK,AAAAsB,EAAA,QAAA,MAAE/B,EAAAA,MAAK,QAAA;;IACrE,SAAAU,QAA6C,CAAjCY,EAAA,cAAZrB,EAAA,GAAAE,EAA6CC,GAAA;;KAApB,MAAMkB,EAAA;I,oCAAcX,EAAA,MAC7CJ,EAAGe,EAAA,WAAW,GAAA,CAAA,C"}