@sparklingopinions/sparkling-ui 0.5.0 → 0.6.0

package/dist/components/Toast/ToastMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessage.js","names":["_sfc_main","ToastMessage_vue_vue_type_script_setup_true_lang_default","ToastMessage_default"],"sources":["../../../src/components/Toast/ToastMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToastSeverity } from '../../composables/toast'\n\nexport interface ToastMessageProps {\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n  closeLabel?: string\n}\n\nwithDefaults(defineProps<ToastMessageProps>(), {\n  detail: undefined,\n  severity: 'info',\n  closable: true,\n  closeLabel: 'Close'\n})\n\ndefineEmits<{ close: [] }>()\n\n// Info has no dot; the others lead with one of their colour.\nconst dots: Record<ToastSeverity, string> = { info: '', success: 'bg-sui-success-mid', error: 'bg-sui-danger-solid' }\n</script>\n\n<!-- One toast as drawn: the Toaster shows these, live or as a preview. -->\n<template>\n  <div\n    class=\"mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-inverse py-2.5 pr-2.5 pl-3 text-sui-on-inverse shadow-md backdrop-blur-[10px]\"\n  >\n    <span v-if=\"dots[severity]\" class=\"h-2 w-2 shrink-0 rounded-full\" :class=\"dots[severity]\" />\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 text-sm leading-5\">\n      <span class=\"font-medium\">{{ summary }}</span>\n      <span v-if=\"detail\" class=\"text-13 text-sui-on-inverse/80\">{{ detail }}</span>\n    </div>\n    <button\n      v-if=\"closable\"\n      :aria-label=\"closeLabel\"\n      class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-transparent transition duration-200 hover:bg-sui-on-inverse/[0.16] focus-visible:sui-ring-inverse\"\n      type=\"button\"\n      @click=\"$emit('close')\"\n    >\n      <svg aria-hidden=\"true\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 14 14\">\n        <path\n          d=\"M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ToastMessage.js","names":["_sfc_main","ToastMessage_vue_vue_type_script_setup_true_lang_default","ToastMessage_default"],"sources":["../../../src/components/Toast/ToastMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToastAction, ToastSeverity } from '../../composables/toast'\nimport Button from '../Button/Button.vue'\n\nexport interface ToastMessageProps {\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n  closeLabel?: string\n  /** At most two, after the message. */\n  actions?: ToastAction[]\n  /** With actions, a bar at the bottom counts this many ms down. */\n  life?: number\n  /** Holds the countdown bar, in step with the toast's timer. */\n  paused?: boolean\n}\n\nwithDefaults(defineProps<ToastMessageProps>(), {\n  detail: undefined,\n  severity: 'info',\n  closable: true,\n  closeLabel: 'Close',\n  actions: () => [],\n  life: 0\n})\n\ndefineEmits<{ close: []; action: [action: ToastAction]; expire: [] }>()\n\n// Info has no dot; the others lead with one of their colour.\nconst dots: Record<ToastSeverity, string> = {\n  info: '',\n  success: 'bg-sui-success-mid',\n  warning: 'bg-sui-warning-mid',\n  error: 'bg-sui-danger-solid'\n}\n</script>\n\n<!-- One toast as drawn: the Toaster shows these, live or as a preview. -->\n<template>\n  <div\n    class=\"group/toast relative mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-inverse pr-2.5 pl-3 text-sui-on-inverse shadow-md backdrop-blur-[10px]\"\n    :class=\"actions.length ? 'overflow-hidden py-1.5' : 'py-2.5'\"\n  >\n    <span v-if=\"dots[severity]\" class=\"h-2 w-2 shrink-0 rounded-full\" :class=\"dots[severity]\" />\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 text-sm leading-5\">\n      <span class=\"font-medium\" :class=\"actions.length ? 'truncate' : ''\">{{ summary }}</span>\n      <span v-if=\"detail\" class=\"text-13 text-sui-on-inverse/80\" :class=\"actions.length ? 'truncate' : ''\">{{\n        detail\n      }}</span>\n    </div>\n    <div v-if=\"actions.length\" class=\"-mr-0.5 flex shrink-0 items-center gap-0.5 [&>button]:px-2\">\n      <Button\n        v-for=\"action in actions\"\n        :key=\"action.label\"\n        size=\"sm\"\n        type=\"button\"\n        variant=\"ghost-inverse\"\n        @click=\"$emit('action', action)\"\n      >\n        {{ action.label }}\n      </Button>\n    </div>\n    <span v-if=\"closable && actions.length\" aria-hidden=\"true\" class=\"h-4 w-px shrink-0 bg-sui-on-inverse/20\" />\n    <button\n      v-if=\"closable\"\n      :aria-label=\"closeLabel\"\n      class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-transparent transition duration-200 hover:bg-sui-on-inverse/[0.16] focus-visible:sui-ring-inverse\"\n      type=\"button\"\n      @click=\"$emit('close')\"\n    >\n      <svg aria-hidden=\"true\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 14 14\">\n        <path\n          d=\"M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </button>\n    <span\n      v-if=\"actions.length && life > 0\"\n      aria-hidden=\"true\"\n      class=\"absolute inset-x-0 bottom-0 h-0.5 origin-left animate-sui-toast-timer bg-sui-on-inverse/[0.32] group-focus-within/toast:[animation-play-state:paused] group-hover/toast:[animation-play-state:paused]\"\n      :class=\"paused && '[animation-play-state:paused]'\"\n      data-sui-toast-timer\n      :style=\"{ animationDuration: `${life}ms` }\"\n      @animationend=\"$emit('expire')\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Toast/ToastMessage.vue.d.ts

@@ -1,19 +1,31 @@
-import type { ToastSeverity } from '../../composables/toast';
+import type { ToastAction, ToastSeverity } from '../../composables/toast';
 export interface ToastMessageProps {
     summary: string;
     detail?: string;
     severity?: ToastSeverity;
     closable?: boolean;
     closeLabel?: string;
+    /** At most two, after the message. */
+    actions?: ToastAction[];
+    /** With actions, a bar at the bottom counts this many ms down. */
+    life?: number;
+    /** Holds the countdown bar, in step with the toast's timer. */
+    paused?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<ToastMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    action: (action: ToastAction) => any;
+    expire: () => any;
 }, string, import("vue").PublicProps, Readonly<ToastMessageProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    onAction?: ((action: ToastAction) => any) | undefined;
+    onExpire?: (() => any) | undefined;
 }>, {
+    actions: ToastAction[];
     detail: string;
     closable: boolean;
     closeLabel: string;
+    life: number;
     severity: ToastSeverity;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/Toast/ToastMessage.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,14 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, toDisplayString as o } from "vue";
+import e from "../Button/Button.js";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, toDisplayString as f, withCtx as p } from "vue";
 //#region src/components/Toast/ToastMessage.vue?vue&type=script&setup=true&lang.ts
-var s = { class: "mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-inverse py-2.5 pr-2.5 pl-3 text-sui-on-inverse shadow-md backdrop-blur-[10px]" }, c = { class: "flex min-w-0 flex-1 flex-col gap-0.5 text-sm leading-5" }, l = { class: "font-medium" }, u = {
-	key: 0,
-	class: "text-13 text-sui-on-inverse/80"
-}, d = ["aria-label"], f = /*@__PURE__*/ r({
+var m = { class: "flex min-w-0 flex-1 flex-col gap-0.5 text-sm leading-5" }, h = {
+	key: 1,
+	class: "-mr-0.5 flex shrink-0 items-center gap-0.5 [&>button]:px-2"
+}, g = {
+	key: 2,
+	"aria-hidden": "true",
+	class: "h-4 w-px shrink-0 bg-sui-on-inverse/20"
+}, _ = ["aria-label"], v = /*@__PURE__*/ s({
 	__name: "ToastMessage",
 	props: {
 		summary: {},
@@ -13,40 +18,70 @@ var s = { class: "mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-invers
 			type: Boolean,
 			default: !0
 		},
-		closeLabel: { default: "Close" }
+		closeLabel: { default: "Close" },
+		actions: { default: () => [] },
+		life: { default: 0 },
+		paused: { type: Boolean }
 	},
-	emits: ["close"],
-	setup(r) {
-		let f = {
+	emits: [
+		"close",
+		"action",
+		"expire"
+	],
+	setup(s) {
+		let v = {
 			info: "",
 			success: "bg-sui-success-mid",
+			warning: "bg-sui-warning-mid",
 			error: "bg-sui-danger-solid"
 		};
-		return (p, m) => (a(), t("div", s, [
-			f[r.severity] ? (a(), t("span", {
+		return (y, b) => (u(), i("div", { class: c(["group/toast relative mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-inverse pr-2.5 pl-3 text-sui-on-inverse shadow-md backdrop-blur-[10px]", s.actions.length ? "overflow-hidden py-1.5" : "py-2.5"]) }, [
+			v[s.severity] ? (u(), i("span", {
 				key: 0,
-				class: i(["h-2 w-2 shrink-0 rounded-full", f[r.severity]])
-			}, null, 2)) : e("", !0),
-			n("div", c, [n("span", l, o(r.summary), 1), r.detail ? (a(), t("span", u, o(r.detail), 1)) : e("", !0)]),
-			r.closable ? (a(), t("button", {
-				key: 1,
-				"aria-label": r.closeLabel,
+				class: c(["h-2 w-2 shrink-0 rounded-full", v[s.severity]])
+			}, null, 2)) : r("", !0),
+			a("div", m, [a("span", { class: c(["font-medium", s.actions.length ? "truncate" : ""]) }, f(s.summary), 3), s.detail ? (u(), i("span", {
+				key: 0,
+				class: c(["text-13 text-sui-on-inverse/80", s.actions.length ? "truncate" : ""])
+			}, f(s.detail), 3)) : r("", !0)]),
+			s.actions.length ? (u(), i("div", h, [(u(!0), i(t, null, d(s.actions, (t) => (u(), n(e, {
+				key: t.label,
+				size: "sm",
+				type: "button",
+				variant: "ghost-inverse",
+				onClick: (e) => y.$emit("action", t)
+			}, {
+				default: p(() => [o(f(t.label), 1)]),
+				_: 2
+			}, 1032, ["onClick"]))), 128))])) : r("", !0),
+			s.closable && s.actions.length ? (u(), i("span", g)) : r("", !0),
+			s.closable ? (u(), i("button", {
+				key: 3,
+				"aria-label": s.closeLabel,
 				class: "flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-transparent transition duration-200 hover:bg-sui-on-inverse/[0.16] focus-visible:sui-ring-inverse",
 				type: "button",
-				onClick: m[0] ||= (e) => p.$emit("close")
-			}, [...m[1] ||= [n("svg", {
+				onClick: b[0] ||= (e) => y.$emit("close")
+			}, [...b[2] ||= [a("svg", {
 				"aria-hidden": "true",
 				class: "h-3 w-3",
 				fill: "none",
 				viewBox: "0 0 14 14"
-			}, [n("path", {
+			}, [a("path", {
 				d: "M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z",
 				fill: "currentColor"
-			})], -1)]], 8, d)) : e("", !0)
-		]));
+			})], -1)]], 8, _)) : r("", !0),
+			s.actions.length && s.life > 0 ? (u(), i("span", {
+				key: 4,
+				"aria-hidden": "true",
+				class: c(["absolute inset-x-0 bottom-0 h-0.5 origin-left animate-sui-toast-timer bg-sui-on-inverse/[0.32] group-focus-within/toast:[animation-play-state:paused] group-hover/toast:[animation-play-state:paused]", s.paused && "[animation-play-state:paused]"]),
+				"data-sui-toast-timer": "",
+				style: l({ animationDuration: `${s.life}ms` }),
+				onAnimationend: b[1] ||= (e) => y.$emit("expire")
+			}, null, 38)) : r("", !0)
+		], 2));
 	}
 });
 //#endregion
-export { f as default };
+export { v as default };
 
 //# sourceMappingURL=ToastMessage.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Toast/ToastMessage.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessage.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","ToastMessage_vue_vue_type_script_setup_true_lang_default","dots","openBlock","createElementBlock","__props","normalizeClass","createCommentVNode","createElementVNode","toDisplayString","_cache","_ctx"],"sources":["../../../src/components/Toast/ToastMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToastSeverity } from '../../composables/toast'\n\nexport interface ToastMessageProps {\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n  closeLabel?: string\n}\n\nwithDefaults(defineProps<ToastMessageProps>(), {\n  detail: undefined,\n  severity: 'info',\n  closable: true,\n  closeLabel: 'Close'\n})\n\ndefineEmits<{ close: [] }>()\n\n// Info has no dot; the others lead with one of their colour.\nconst dots: Record<ToastSeverity, string> = { info: '', success: 'bg-sui-success-mid', error: 'bg-sui-danger-solid' }\n</script>\n\n<!-- One toast as drawn: the Toaster shows these, live or as a preview. -->\n<template>\n  <div\n    class=\"mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-inverse py-2.5 pr-2.5 pl-3 text-sui-on-inverse shadow-md backdrop-blur-[10px]\"\n  >\n    <span v-if=\"dots[severity]\" class=\"h-2 w-2 shrink-0 rounded-full\" :class=\"dots[severity]\" />\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 text-sm leading-5\">\n      <span class=\"font-medium\">{{ summary }}</span>\n      <span v-if=\"detail\" class=\"text-13 text-sui-on-inverse/80\">{{ detail }}</span>\n    </div>\n    <button\n      v-if=\"closable\"\n      :aria-label=\"closeLabel\"\n      class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-transparent transition duration-200 hover:bg-sui-on-inverse/[0.16] focus-visible:sui-ring-inverse\"\n      type=\"button\"\n      @click=\"$emit('close')\"\n    >\n      <svg aria-hidden=\"true\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 14 14\">\n        <path\n          d=\"M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAqBA,IAAMa,IAAsC;GAAE,MAAM;GAAI,SAAS;GAAsB,OAAO;EAAsB;E,kBAKlHZ,EAAA,GAAAC,EAsBM,OAtBNK,GAsBM;GAnBQM,EAAKG,EAAA,aAAjBf,EAAA,GAAAC,EAA4F,QAAA;;IAAhE,OAAKC,EAAA,CAAC,iCAAwCU,EAAKG,EAAA,SAAQ,CAAA;;GACvFX,EAGM,OAHNG,GAGM,CAFJH,EAA8C,QAA9CI,GAA8CH,EAAjBU,EAAA,OAAO,GAAA,CAAA,GACxBA,EAAA,UAAZf,EAAA,GAAAC,EAA8E,QAA9EQ,GAA8EJ,EAAhBU,EAAA,MAAM,GAAA,CAAA,K;GAG9DA,EAAA,YADRf,EAAA,GAAAC,EAaS,UAAA;;IAXN,cAAYc,EAAA;IACb,OAAM;IACN,MAAK;IACJ,SAAK,AAAAK,EAAA,QAAA,MAAErB,EAAAA,MAAK,OAAA;G,iBAEbK,EAKM,OAAA;IALD,eAAY;IAAO,OAAM;IAAU,MAAK;IAAO,SAAQ;G,IAC1DA,EAGE,QAAA;IAFA,GAAE;IACF,MAAK"}
+{"version":3,"file":"ToastMessage.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","_Fragment","_renderList","_createBlock","Button","_withCtx","_createTextVNode","_normalizeStyle","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ToastMessage_vue_vue_type_script_setup_true_lang_default","dots","openBlock","createElementBlock","normalizeClass","__props","createCommentVNode","createElementVNode","toDisplayString","Fragment","renderList","createBlock","action","_ctx","withCtx","createTextVNode","_cache","normalizeStyle"],"sources":["../../../src/components/Toast/ToastMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToastAction, ToastSeverity } from '../../composables/toast'\nimport Button from '../Button/Button.vue'\n\nexport interface ToastMessageProps {\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n  closeLabel?: string\n  /** At most two, after the message. */\n  actions?: ToastAction[]\n  /** With actions, a bar at the bottom counts this many ms down. */\n  life?: number\n  /** Holds the countdown bar, in step with the toast's timer. */\n  paused?: boolean\n}\n\nwithDefaults(defineProps<ToastMessageProps>(), {\n  detail: undefined,\n  severity: 'info',\n  closable: true,\n  closeLabel: 'Close',\n  actions: () => [],\n  life: 0\n})\n\ndefineEmits<{ close: []; action: [action: ToastAction]; expire: [] }>()\n\n// Info has no dot; the others lead with one of their colour.\nconst dots: Record<ToastSeverity, string> = {\n  info: '',\n  success: 'bg-sui-success-mid',\n  warning: 'bg-sui-warning-mid',\n  error: 'bg-sui-danger-solid'\n}\n</script>\n\n<!-- One toast as drawn: the Toaster shows these, live or as a preview. -->\n<template>\n  <div\n    class=\"group/toast relative mb-2 flex w-full items-center gap-2.5 rounded-lg bg-sui-inverse pr-2.5 pl-3 text-sui-on-inverse shadow-md backdrop-blur-[10px]\"\n    :class=\"actions.length ? 'overflow-hidden py-1.5' : 'py-2.5'\"\n  >\n    <span v-if=\"dots[severity]\" class=\"h-2 w-2 shrink-0 rounded-full\" :class=\"dots[severity]\" />\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 text-sm leading-5\">\n      <span class=\"font-medium\" :class=\"actions.length ? 'truncate' : ''\">{{ summary }}</span>\n      <span v-if=\"detail\" class=\"text-13 text-sui-on-inverse/80\" :class=\"actions.length ? 'truncate' : ''\">{{\n        detail\n      }}</span>\n    </div>\n    <div v-if=\"actions.length\" class=\"-mr-0.5 flex shrink-0 items-center gap-0.5 [&>button]:px-2\">\n      <Button\n        v-for=\"action in actions\"\n        :key=\"action.label\"\n        size=\"sm\"\n        type=\"button\"\n        variant=\"ghost-inverse\"\n        @click=\"$emit('action', action)\"\n      >\n        {{ action.label }}\n      </Button>\n    </div>\n    <span v-if=\"closable && actions.length\" aria-hidden=\"true\" class=\"h-4 w-px shrink-0 bg-sui-on-inverse/20\" />\n    <button\n      v-if=\"closable\"\n      :aria-label=\"closeLabel\"\n      class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-transparent transition duration-200 hover:bg-sui-on-inverse/[0.16] focus-visible:sui-ring-inverse\"\n      type=\"button\"\n      @click=\"$emit('close')\"\n    >\n      <svg aria-hidden=\"true\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 14 14\">\n        <path\n          d=\"M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </button>\n    <span\n      v-if=\"actions.length && life > 0\"\n      aria-hidden=\"true\"\n      class=\"absolute inset-x-0 bottom-0 h-0.5 origin-left animate-sui-toast-timer bg-sui-on-inverse/[0.32] group-focus-within/toast:[animation-play-state:paused] group-hover/toast:[animation-play-state:paused]\"\n      :class=\"paused && '[animation-play-state:paused]'\"\n      data-sui-toast-timer\n      :style=\"{ animationDuration: `${life}ms` }\"\n      @animationend=\"$emit('expire')\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,IAAMoB,IAAsC;GAC1C,MAAM;GACN,SAAS;GACT,SAAS;GACT,OAAO;EACT;E,kBAKEnB,EAAA,GAAAC,EA+CM,OAAA,EA9CJ,OAAKC,EAAA,CAAC,uJACEqB,EAAA,QAAQ,SAAM,2BAAA,QAAA,CAAA,E;GAEVJ,EAAKI,EAAA,aAAjBvB,EAAA,GAAAC,EAA4F,QAAA;;IAAhE,OAAKC,EAAA,CAAC,iCAAwCiB,EAAKI,EAAA,SAAQ,CAAA;;GACvFnB,EAKM,OALNU,GAKM,CAJJV,EAAwF,QAAA,EAAlF,OAAKF,EAAA,CAAC,eAAsBqB,EAAA,QAAQ,SAAM,aAAA,EAAA,CAAA,EAAuB,GAAAlB,EAAAkB,EAAA,OAAO,GAAA,CAAA,GAClEA,EAAA,UAAZvB,EAAA,GAAAC,EAES,QAAA;;IAFW,OAAKC,EAAA,CAAC,kCAAyCqB,EAAA,QAAQ,SAAM,aAAA,EAAA,CAAA;GAC/E,GAAAlB,EAAAkB,EAAA,MAAM,GAAA,CAAA,K;GAGCA,EAAA,QAAQ,UAAnBvB,EAAA,GAAAC,EAWM,OAXNc,GAWM,EAVJf,EAAA,EAAA,GAAAC,EASSK,GAAA,MAAAC,EARUgB,EAAA,UAAV,OADTvB,EAAA,GAAAQ,EASSC,GAAA;IAPN,KAAKqB,EAAO;IACb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,UAAK,MAAE/B,EAAAA,MAAK,UAAW+B,CAAM;;IAE9B,SAAApB,QAAkB,CAAfC,EAAAN,EAAAyB,EAAO,KAAK,GAAA,CAAA,C;;;GAGPP,EAAA,YAAYA,EAAA,QAAQ,UAAhCvB,EAAA,GAAAC,EAA4G,QAA5Ge,CAA4G,K;GAEpGO,EAAA,YADRvB,EAAA,GAAAC,EAaS,UAAA;;IAXN,cAAYsB,EAAA;IACb,OAAM;IACN,MAAK;IACJ,SAAK,AAAAW,EAAA,QAAA,MAAEnC,EAAAA,MAAK,OAAA;G,iBAEbK,EAKM,OAAA;IALD,eAAY;IAAO,OAAM;IAAU,MAAK;IAAO,SAAQ;G,IAC1DA,EAGE,QAAA;IAFA,GAAE;IACF,MAAK;;GAKHmB,EAAA,QAAQ,UAAUA,EAAA,OAAI,KAD9BvB,EAAA,GAAAC,EAQE,QAAA;;IANA,eAAY;IACZ,OAAKC,EAAA,CAAC,yMACEqB,EAAA,UAAM,+BAAA,CAAA;IACd,wBAAA;IACC,OAAKX,EAAA,EAAA,mBAAA,GAA0BW,EAAA,KAAI,IAAA,CAAA;IACnC,gBAAY,AAAAW,EAAA,QAAA,MAAEnC,EAAAA,MAAK,QAAA"}

package/dist/components/Toast/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","names":["_sfc_main","Toaster_vue_vue_type_script_setup_true_lang_default","Toaster_default"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport { type ToastSeverity, removeToast, toasts } from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n  /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */\n  id?: string | number\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n}\n\nexport interface ToasterProps {\n  /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n  label?: string\n  closeLabel?: string\n  /**\n   * Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is\n   * yours: add and remove items, and handle `close`.\n   */\n  preview?: ToastPreview[]\n}\n\nwithDefaults(defineProps<ToasterProps>(), {\n  label: 'Notifications ({hotkey})',\n  closeLabel: 'Close',\n  preview: undefined\n})\n\ndefineEmits<{\n  /** A preview toast's close button, with its `id` (or index). */\n  close: [id: string | number]\n}>()\n</script>\n\n<!-- Mount once near the app root; `toast.info(...)` and friends show here. Swiping is off. -->\n<template>\n  <TransitionGroup\n    v-if=\"preview\"\n    class=\"flex w-full max-w-96 flex-col\"\n    enter-active-class=\"animate-sui-toast-in\"\n    leave-active-class=\"animate-sui-toast-out overflow-hidden\"\n    tag=\"div\"\n  >\n    <ToastMessage\n      v-for=\"(item, index) in preview\"\n      :key=\"item.id ?? index\"\n      :closable=\"item.closable\"\n      :close-label=\"closeLabel\"\n      :detail=\"item.detail\"\n      :severity=\"item.severity\"\n      :summary=\"item.summary\"\n      @close=\"$emit('close', item.id ?? index)\"\n    />\n  </TransitionGroup>\n  <ToastProvider v-else :swipe-threshold=\"Number.POSITIVE_INFINITY\">\n    <ToastRoot\n      v-for=\"item in toasts\"\n      :key=\"item.id\"\n      as-child\n      :duration=\"item.life || Number.POSITIVE_INFINITY\"\n      :open=\"item.open\"\n      :type=\"item.severity === 'error' ? 'foreground' : 'background'\"\n      @update:open=\"(open) => !open && removeToast(item.id)\"\n    >\n      <ToastMessage\n        class=\"pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in\"\n        :closable=\"item.closable\"\n        :close-label=\"closeLabel\"\n        :detail=\"item.detail\"\n        :severity=\"item.severity\"\n        :summary=\"item.summary\"\n        @close=\"removeToast(item.id)\"\n      />\n    </ToastRoot>\n    <!-- A div, not Reka's default ol: the toasts are divs, so a page can draw one alone. -->\n    <ToastViewport\n      as=\"div\"\n      class=\"pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden\"\n      data-sui-toasts\n      :label=\"label\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Toaster.js","names":["_sfc_main","Toaster_vue_vue_type_script_setup_true_lang_default","Toaster_default"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { reactive } from 'vue'\n\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport {\n  type ToastAction,\n  type ToastDismissReason,\n  type ToastSeverity,\n  removeToast,\n  toastActions,\n  toasts\n} from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n  /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */\n  id?: string | number\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n  action?: ToastAction\n  actions?: ToastAction[]\n  /** With actions, the countdown bar's length in ms; it emits `close` with `timeout` when it runs out. */\n  life?: number\n}\n\nexport interface ToasterProps {\n  /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n  label?: string\n  closeLabel?: string\n  /**\n   * Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is\n   * yours: add and remove items, and handle `close`.\n   */\n  preview?: ToastPreview[]\n}\n\nwithDefaults(defineProps<ToasterProps>(), {\n  label: 'Notifications ({hotkey})',\n  closeLabel: 'Close',\n  preview: undefined\n})\n\nconst emit = defineEmits<{\n  /** A preview toast left, with its `id` (or index): its close button, one of its actions, or its countdown. */\n  close: [id: string | number, reason: ToastDismissReason]\n}>()\n\n// Reka pauses every toast's timer while the region is hovered or focused, or the window is in the background; the\n// countdown bars follow it.\nconst paused = reactive(new Set<number>())\n\nfunction runLive(id: number, action: ToastAction) {\n  action.onClick()\n  removeToast(id, 'action')\n}\n\nfunction runPreview(id: string | number, action: ToastAction) {\n  action.onClick()\n  emit('close', id, 'action')\n}\n</script>\n\n<!-- Mount once near the app root; `toast.info(...)` and friends show here. Swiping is off. -->\n<template>\n  <TransitionGroup\n    v-if=\"preview\"\n    class=\"flex w-full max-w-96 flex-col\"\n    enter-active-class=\"animate-sui-toast-in\"\n    leave-active-class=\"animate-sui-toast-out overflow-hidden\"\n    tag=\"div\"\n  >\n    <ToastMessage\n      v-for=\"(item, index) in preview\"\n      :key=\"item.id ?? index\"\n      :actions=\"toastActions(item)\"\n      :closable=\"item.closable\"\n      :close-label=\"closeLabel\"\n      :detail=\"item.detail\"\n      :life=\"item.life\"\n      :severity=\"item.severity\"\n      :summary=\"item.summary\"\n      @action=\"runPreview(item.id ?? index, $event)\"\n      @close=\"emit('close', item.id ?? index, 'close')\"\n      @expire=\"emit('close', item.id ?? index, 'timeout')\"\n    />\n  </TransitionGroup>\n  <ToastProvider v-else :swipe-threshold=\"Number.POSITIVE_INFINITY\">\n    <ToastRoot\n      v-for=\"item in toasts\"\n      :key=\"item.id\"\n      as-child\n      :duration=\"item.life || Number.POSITIVE_INFINITY\"\n      :open=\"item.open\"\n      :type=\"item.severity === 'error' ? 'foreground' : 'background'\"\n      @escape-key-down=\"removeToast(item.id, 'close')\"\n      @pause=\"paused.add(item.id)\"\n      @resume=\"paused.delete(item.id)\"\n      @update:open=\"(open) => !open && removeToast(item.id, 'timeout')\"\n    >\n      <ToastMessage\n        :actions=\"item.actions\"\n        class=\"pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in\"\n        :closable=\"item.closable\"\n        :close-label=\"closeLabel\"\n        :detail=\"item.detail\"\n        :life=\"item.life\"\n        :paused=\"paused.has(item.id)\"\n        :severity=\"item.severity\"\n        :summary=\"item.summary\"\n        @action=\"runLive(item.id, $event)\"\n        @close=\"removeToast(item.id, 'close')\"\n      />\n    </ToastRoot>\n    <!-- A div, not Reka's default ol: the toasts are divs, so a page can draw one alone. -->\n    <ToastViewport\n      as=\"div\"\n      class=\"pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden\"\n      data-sui-toasts\n      :label=\"label\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":""}

package/dist/components/Toast/Toaster.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ToastSeverity } from '../../composables/toast';
+import { type ToastAction, type ToastDismissReason, type ToastSeverity } from '../../composables/toast';
 export interface ToastPreview {
     /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */
     id?: string | number;
@@ -6,6 +6,10 @@ export interface ToastPreview {
     detail?: string;
     severity?: ToastSeverity;
     closable?: boolean;
+    action?: ToastAction;
+    actions?: ToastAction[];
+    /** With actions, the countdown bar's length in ms; it emits `close` with `timeout` when it runs out. */
+    life?: number;
 }
 export interface ToasterProps {
     /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */
@@ -18,9 +22,9 @@ export interface ToasterProps {
     preview?: ToastPreview[];
 }
 declare const __VLS_export: import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (id: string | number) => any;
+    close: (id: string | number, reason: ToastDismissReason) => any;
 }, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{
-    onClose?: ((id: string | number) => any) | undefined;
+    onClose?: ((id: string | number, reason: ToastDismissReason) => any) | undefined;
 }>, {
     label: string;
     closeLabel: string;

package/dist/components/Toast/Toaster.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
-import { removeToast as e, toasts as t } from "../../composables/toast.js";
-import n from "./ToastMessage.js";
-import { Fragment as r, TransitionGroup as i, createBlock as a, createElementBlock as o, createVNode as s, defineComponent as c, openBlock as l, renderList as u, unref as d, withCtx as f } from "vue";
-import { ToastProvider as p, ToastRoot as m, ToastViewport as h } from "reka-ui";
+import { removeToast as e, toastActions as t, toasts as n } from "../../composables/toast.js";
+import r from "./ToastMessage.js";
+import { Fragment as i, TransitionGroup as a, createBlock as o, createElementBlock as s, createVNode as c, defineComponent as l, openBlock as u, reactive as d, renderList as f, unref as p, withCtx as m } from "vue";
+import { ToastProvider as h, ToastRoot as g, ToastViewport as _ } from "reka-ui";
 //#region src/components/Toast/Toaster.vue?vue&type=script&setup=true&lang.ts
-var g = /*@__PURE__*/ c({
+var v = /*@__PURE__*/ l({
 	__name: "Toaster",
 	props: {
 		label: { default: "Notifications ({hotkey})" },
@@ -11,57 +11,83 @@ var g = /*@__PURE__*/ c({
 		preview: { default: void 0 }
 	},
 	emits: ["close"],
-	setup(c) {
-		return (g, _) => c.preview ? (l(), a(i, {
+	setup(l, { emit: v }) {
+		let y = v, b = d(/* @__PURE__ */ new Set());
+		function x(t, n) {
+			n.onClick(), e(t, "action");
+		}
+		function S(e, t) {
+			t.onClick(), y("close", e, "action");
+		}
+		return (d, v) => l.preview ? (u(), o(a, {
 			key: 0,
 			class: "flex w-full max-w-96 flex-col",
 			"enter-active-class": "animate-sui-toast-in",
 			"leave-active-class": "animate-sui-toast-out overflow-hidden",
 			tag: "div"
 		}, {
-			default: f(() => [(l(!0), o(r, null, u(c.preview, (e, t) => (l(), a(n, {
-				key: e.id ?? t,
+			default: m(() => [(u(!0), s(i, null, f(l.preview, (e, n) => (u(), o(r, {
+				key: e.id ?? n,
+				actions: p(t)(e),
 				closable: e.closable,
-				"close-label": c.closeLabel,
+				"close-label": l.closeLabel,
 				detail: e.detail,
+				life: e.life,
 				severity: e.severity,
 				summary: e.summary,
-				onClose: (n) => g.$emit("close", e.id ?? t)
+				onAction: (t) => S(e.id ?? n, t),
+				onClose: (t) => y("close", e.id ?? n, "close"),
+				onExpire: (t) => y("close", e.id ?? n, "timeout")
 			}, null, 8, [
+				"actions",
 				"closable",
 				"close-label",
 				"detail",
+				"life",
 				"severity",
 				"summary",
-				"onClose"
+				"onAction",
+				"onClose",
+				"onExpire"
 			]))), 128))]),
 			_: 1
-		})) : (l(), a(d(p), {
+		})) : (u(), o(p(h), {
 			key: 1,
 			"swipe-threshold": Infinity
 		}, {
-			default: f(() => [(l(!0), o(r, null, u(d(t), (t) => (l(), a(d(m), {
+			default: m(() => [(u(!0), s(i, null, f(p(n), (t) => (u(), o(p(g), {
 				key: t.id,
 				"as-child": "",
 				duration: t.life || Infinity,
 				open: t.open,
 				type: t.severity === "error" ? "foreground" : "background",
-				"onUpdate:open": (n) => !n && d(e)(t.id)
+				onEscapeKeyDown: (n) => p(e)(t.id, "close"),
+				onPause: (e) => b.add(t.id),
+				onResume: (e) => b.delete(t.id),
+				"onUpdate:open": (n) => !n && p(e)(t.id, "timeout")
 			}, {
-				default: f(() => [s(n, {
+				default: m(() => [c(r, {
+					actions: t.actions,
 					class: "pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in",
 					closable: t.closable,
-					"close-label": c.closeLabel,
+					"close-label": l.closeLabel,
 					detail: t.detail,
+					life: t.life,
+					paused: b.has(t.id),
 					severity: t.severity,
 					summary: t.summary,
-					onClose: (n) => d(e)(t.id)
+					onAction: (e) => x(t.id, e),
+					onClose: (n) => p(e)(t.id, "close")
 				}, null, 8, [
+					"actions",
 					"closable",
 					"close-label",
 					"detail",
+					"life",
+					"paused",
 					"severity",
 					"summary",
+					"onAction",
 					"onClose"
 				])]),
 				_: 2
@@ -69,18 +95,21 @@ var g = /*@__PURE__*/ c({
 				"duration",
 				"open",
 				"type",
+				"onEscapeKeyDown",
+				"onPause",
+				"onResume",
 				"onUpdate:open"
-			]))), 128)), s(d(h), {
+			]))), 128)), c(p(_), {
 				as: "div",
 				class: "pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden",
 				"data-sui-toasts": "",
-				label: c.label
+				label: l.label
 			}, null, 8, ["label"])]),
 			_: 1
 		}, 8, ["swipe-threshold"]));
 	}
 });
 //#endregion
-export { g as default };
+export { v as default };
 
 //# sourceMappingURL=Toaster.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Toast/Toaster.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","_TransitionGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ToastMessage","_unref","_createVNode","ToastMessage_default","Toaster_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createBlock","TransitionGroup","withCtx","createElementBlock","Fragment","renderList","item","index","_ctx","unref","ToastProvider","toasts","ToastRoot","open","removeToast","createVNode","ToastViewport"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport { type ToastSeverity, removeToast, toasts } from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n  /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */\n  id?: string | number\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n}\n\nexport interface ToasterProps {\n  /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n  label?: string\n  closeLabel?: string\n  /**\n   * Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is\n   * yours: add and remove items, and handle `close`.\n   */\n  preview?: ToastPreview[]\n}\n\nwithDefaults(defineProps<ToasterProps>(), {\n  label: 'Notifications ({hotkey})',\n  closeLabel: 'Close',\n  preview: undefined\n})\n\ndefineEmits<{\n  /** A preview toast's close button, with its `id` (or index). */\n  close: [id: string | number]\n}>()\n</script>\n\n<!-- Mount once near the app root; `toast.info(...)` and friends show here. Swiping is off. -->\n<template>\n  <TransitionGroup\n    v-if=\"preview\"\n    class=\"flex w-full max-w-96 flex-col\"\n    enter-active-class=\"animate-sui-toast-in\"\n    leave-active-class=\"animate-sui-toast-out overflow-hidden\"\n    tag=\"div\"\n  >\n    <ToastMessage\n      v-for=\"(item, index) in preview\"\n      :key=\"item.id ?? index\"\n      :closable=\"item.closable\"\n      :close-label=\"closeLabel\"\n      :detail=\"item.detail\"\n      :severity=\"item.severity\"\n      :summary=\"item.summary\"\n      @close=\"$emit('close', item.id ?? index)\"\n    />\n  </TransitionGroup>\n  <ToastProvider v-else :swipe-threshold=\"Number.POSITIVE_INFINITY\">\n    <ToastRoot\n      v-for=\"item in toasts\"\n      :key=\"item.id\"\n      as-child\n      :duration=\"item.life || Number.POSITIVE_INFINITY\"\n      :open=\"item.open\"\n      :type=\"item.severity === 'error' ? 'foreground' : 'background'\"\n      @update:open=\"(open) => !open && removeToast(item.id)\"\n    >\n      <ToastMessage\n        class=\"pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in\"\n        :closable=\"item.closable\"\n        :close-label=\"closeLabel\"\n        :detail=\"item.detail\"\n        :severity=\"item.severity\"\n        :summary=\"item.summary\"\n        @close=\"removeToast(item.id)\"\n      />\n    </ToastRoot>\n    <!-- A div, not Reka's default ol: the toasts are divs, so a page can draw one alone. -->\n    <ToastViewport\n      as=\"div\"\n      class=\"pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden\"\n      data-sui-toasts\n      :label=\"label\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;E,iBAyCUa,EAAA,WADRZ,EAAA,GAAAC,EAiBkBC,GAAA;;GAfhB,OAAM;GACN,sBAAmB;GACnB,sBAAmB;GACnB,KAAI;;GAGF,SAAAC,QAAgC,EADlCH,EAAA,EAAA,GAAAI,EASEC,GAAA,MAAAC,EARwBM,EAAA,UAAhB,GAAM,OADhBZ,EAAA,GAAAC,EASEM,GAAA;IAPC,KAAKa,EAAK,MAAMC;IAChB,UAAUD,EAAK;IACf,eAAaR,EAAA;IACb,QAAQQ,EAAK;IACb,UAAUA,EAAK;IACf,SAASA,EAAK;IACd,UAAK,MAAErB,EAAAA,MAAK,SAAUqB,EAAK,MAAMC,CAAK;;;;;;;;;;E,OAG3CrB,EAAA,GAAAC,EA2BgBO,EAAAgB,CAAA,GAAA;;GA3BO,mBAAiB;;GAEpC,SAAArB,QAAsB,EADxBH,EAAA,EAAA,GAAAI,EAkBYC,GAAA,MAAAC,EAjBKE,EAAAiB,CAAA,IAAR,OADTzB,EAAA,GAAAC,EAkBYO,EAAAkB,CAAA,GAAA;IAhBT,KAAKN,EAAK;IACX,YAAA;IACC,UAAUA,EAAK,QAAQ;IACvB,MAAMA,EAAK;IACX,MAAMA,EAAK,aAAQ,UAAA,eAAA;IACnB,kBAAc,MAAI,CAAMO,KAAQnB,EAAAoB,CAAA,CAAW,CAACR,EAAK,EAAE;;IAEpD,SAAAjB,QAQE,CARFM,EAQEF,GAAA;KAPA,OAAM;KACL,UAAUa,EAAK;KACf,eAAaR,EAAA;KACb,QAAQQ,EAAK;KACb,UAAUA,EAAK;KACf,SAASA,EAAK;KACd,UAAK,MAAEZ,EAAAoB,CAAA,CAAW,CAACR,EAAK,EAAE;;;;;;;;;;;;;;;G,aAI/BX,EAKED,EAAAsB,CAAA,GAAA;IAJA,IAAG;IACH,OAAM;IACN,mBAAA;IACC,OAAOlB,EAAA"}
+{"version":3,"file":"Toaster.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_TransitionGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ToastMessage","_unref","_createVNode","ToastMessage_default","Toaster_vue_vue_type_script_setup_true_lang_default","__emit","emit","paused","reactive","runLive","action","removeToast","id","runPreview","__props","openBlock","createBlock","TransitionGroup","withCtx","createElementBlock","Fragment","renderList","item","index","unref","toastActions","$event","ToastProvider","toasts","ToastRoot","open","createVNode","ToastViewport"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { reactive } from 'vue'\n\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport {\n  type ToastAction,\n  type ToastDismissReason,\n  type ToastSeverity,\n  removeToast,\n  toastActions,\n  toasts\n} from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n  /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */\n  id?: string | number\n  summary: string\n  detail?: string\n  severity?: ToastSeverity\n  closable?: boolean\n  action?: ToastAction\n  actions?: ToastAction[]\n  /** With actions, the countdown bar's length in ms; it emits `close` with `timeout` when it runs out. */\n  life?: number\n}\n\nexport interface ToasterProps {\n  /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n  label?: string\n  closeLabel?: string\n  /**\n   * Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is\n   * yours: add and remove items, and handle `close`.\n   */\n  preview?: ToastPreview[]\n}\n\nwithDefaults(defineProps<ToasterProps>(), {\n  label: 'Notifications ({hotkey})',\n  closeLabel: 'Close',\n  preview: undefined\n})\n\nconst emit = defineEmits<{\n  /** A preview toast left, with its `id` (or index): its close button, one of its actions, or its countdown. */\n  close: [id: string | number, reason: ToastDismissReason]\n}>()\n\n// Reka pauses every toast's timer while the region is hovered or focused, or the window is in the background; the\n// countdown bars follow it.\nconst paused = reactive(new Set<number>())\n\nfunction runLive(id: number, action: ToastAction) {\n  action.onClick()\n  removeToast(id, 'action')\n}\n\nfunction runPreview(id: string | number, action: ToastAction) {\n  action.onClick()\n  emit('close', id, 'action')\n}\n</script>\n\n<!-- Mount once near the app root; `toast.info(...)` and friends show here. Swiping is off. -->\n<template>\n  <TransitionGroup\n    v-if=\"preview\"\n    class=\"flex w-full max-w-96 flex-col\"\n    enter-active-class=\"animate-sui-toast-in\"\n    leave-active-class=\"animate-sui-toast-out overflow-hidden\"\n    tag=\"div\"\n  >\n    <ToastMessage\n      v-for=\"(item, index) in preview\"\n      :key=\"item.id ?? index\"\n      :actions=\"toastActions(item)\"\n      :closable=\"item.closable\"\n      :close-label=\"closeLabel\"\n      :detail=\"item.detail\"\n      :life=\"item.life\"\n      :severity=\"item.severity\"\n      :summary=\"item.summary\"\n      @action=\"runPreview(item.id ?? index, $event)\"\n      @close=\"emit('close', item.id ?? index, 'close')\"\n      @expire=\"emit('close', item.id ?? index, 'timeout')\"\n    />\n  </TransitionGroup>\n  <ToastProvider v-else :swipe-threshold=\"Number.POSITIVE_INFINITY\">\n    <ToastRoot\n      v-for=\"item in toasts\"\n      :key=\"item.id\"\n      as-child\n      :duration=\"item.life || Number.POSITIVE_INFINITY\"\n      :open=\"item.open\"\n      :type=\"item.severity === 'error' ? 'foreground' : 'background'\"\n      @escape-key-down=\"removeToast(item.id, 'close')\"\n      @pause=\"paused.add(item.id)\"\n      @resume=\"paused.delete(item.id)\"\n      @update:open=\"(open) => !open && removeToast(item.id, 'timeout')\"\n    >\n      <ToastMessage\n        :actions=\"item.actions\"\n        class=\"pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in\"\n        :closable=\"item.closable\"\n        :close-label=\"closeLabel\"\n        :detail=\"item.detail\"\n        :life=\"item.life\"\n        :paused=\"paused.has(item.id)\"\n        :severity=\"item.severity\"\n        :summary=\"item.summary\"\n        @action=\"runLive(item.id, $event)\"\n        @close=\"removeToast(item.id, 'close')\"\n      />\n    </ToastRoot>\n    <!-- A div, not Reka's default ol: the toasts are divs, so a page can draw one alone. -->\n    <ToastViewport\n      as=\"div\"\n      class=\"pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden\"\n      data-sui-toasts\n      :label=\"label\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EA6CA,IAAMa,IAAOD,GAOPE,IAASC,kBAAS,IAAI,IAAY,CAAC;EAEzC,SAASC,EAAQ,GAAY,GAAqB;GAEhD,AADAC,EAAO,QAAQ,GACfC,EAAYC,GAAI,QAAQ;EAC1B;EAEA,SAASC,EAAW,GAAqB,GAAqB;GAE5D,AADAH,EAAO,QAAQ,GACfJ,EAAK,SAASM,GAAI,QAAQ;EAC5B;E,iBAMUE,EAAA,WADRrB,EAAA,GAAAC,EAqBkBC,GAAA;;GAnBhB,OAAM;GACN,sBAAmB;GACnB,sBAAmB;GACnB,KAAI;;GAGF,SAAAC,QAAgC,EADlCH,EAAA,EAAA,GAAAI,EAaEC,GAAA,MAAAC,EAZwBe,EAAA,UAAhB,GAAM,OADhBrB,EAAA,GAAAC,EAaEM,GAAA;IAXC,KAAKsB,EAAK,MAAMC;IAChB,SAAStB,EAAAwB,CAAA,CAAY,CAACH,CAAI;IAC1B,UAAUA,EAAK;IACf,eAAaR,EAAA;IACb,QAAQQ,EAAK;IACb,MAAMA,EAAK;IACX,UAAUA,EAAK;IACf,SAASA,EAAK;IACd,WAAM,MAAET,EAAWS,EAAK,MAAMC,GAAOG,CAAM;IAC3C,UAAK,MAAEpB,EAAI,SAAUgB,EAAK,MAAMC,GAAK,OAAA;IACrC,WAAM,MAAEjB,EAAI,SAAUgB,EAAK,MAAMC,GAAK,SAAA;;;;;;;;;;;;;;E,OAG3C9B,EAAA,GAAAC,EAkCgBO,EAAA0B,CAAA,GAAA;;GAlCO,mBAAiB;;GAEpC,SAAA/B,QAAsB,EADxBH,EAAA,EAAA,GAAAI,EAyBYC,GAAA,MAAAC,EAxBKE,EAAA2B,CAAA,IAAR,OADTnC,EAAA,GAAAC,EAyBYO,EAAA4B,CAAA,GAAA;IAvBT,KAAKP,EAAK;IACX,YAAA;IACC,UAAUA,EAAK,QAAQ;IACvB,MAAMA,EAAK;IACX,MAAMA,EAAK,aAAQ,UAAA,eAAA;IACnB,kBAAe,MAAErB,EAAAU,CAAA,CAAW,CAACW,EAAK,IAAE,OAAA;IACpC,UAAK,MAAEf,EAAO,IAAIe,EAAK,EAAE;IACzB,WAAM,MAAEf,EAAO,OAAOe,EAAK,EAAE;IAC7B,kBAAc,MAAI,CAAMQ,KAAQ7B,EAAAU,CAAA,CAAW,CAACW,EAAK,IAAE,SAAA;;IAEpD,SAAA1B,QAYE,CAZFM,EAYEF,GAAA;KAXC,SAASsB,EAAK;KACf,OAAM;KACL,UAAUA,EAAK;KACf,eAAaR,EAAA;KACb,QAAQQ,EAAK;KACb,MAAMA,EAAK;KACX,QAAQf,EAAO,IAAIe,EAAK,EAAE;KAC1B,UAAUA,EAAK;KACf,SAASA,EAAK;KACd,WAAM,MAAEb,EAAQa,EAAK,IAAII,CAAM;KAC/B,UAAK,MAAEzB,EAAAU,CAAA,CAAW,CAACW,EAAK,IAAE,OAAA;;;;;;;;;;;;;;;;;;;;;;G,aAI/BpB,EAKED,EAAA+B,CAAA,GAAA;IAJA,IAAG;IACH,OAAM;IACN,mBAAA;IACC,OAAOlB,EAAA"}

package/dist/components/internal/MenuItemContent.js

@@ -0,0 +1,7 @@
+import e from "./MenuItemContent.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/internal/MenuItemContent.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=MenuItemContent.js.map

package/dist/components/internal/MenuItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemContent.js","names":["_sfc_main","MenuItemContent_vue_vue_type_script_setup_true_lang_default","MenuItemContent_default"],"sources":["../../../src/components/internal/MenuItemContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Icon from '../Icon/Icon.vue'\nimport type { DropdownMenuAction } from './menu'\n\ndefineProps<{ item: DropdownMenuAction }>()\n</script>\n\n<!-- One menu item as drawn: an icon, the label and a shortcut. -->\n<template>\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</template>\n"],"mappings":""}

package/dist/components/internal/MenuItemContent.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownMenuAction } from './menu';
+type __VLS_Props = {
+    item: DropdownMenuAction;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/internal/MenuItemContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,26 @@
+import e from "../Icon/Icon.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, toDisplayString as c } from "vue";
+//#region src/components/internal/MenuItemContent.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "flex-1 text-13" }, u = {
+	key: 1,
+	class: "text-11 text-sui-ink-muted"
+}, d = /*@__PURE__*/ a({
+	__name: "MenuItemContent",
+	props: { item: {} },
+	setup(a) {
+		return (d, f) => (s(), r("div", { class: o(["flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5", a.item.variant === "danger" ? "text-sui-danger" : "text-sui-ink"]) }, [
+			a.item.icon ? (s(), t(e, {
+				key: 0,
+				class: "h-4 w-4 shrink-0",
+				color: a.item.variant === "danger" ? "danger" : "ink-muted",
+				name: a.item.icon
+			}, null, 8, ["color", "name"])) : n("", !0),
+			i("span", l, c(a.item.label), 1),
+			a.item.shortcut ? (s(), r("span", u, c(a.item.shortcut), 1)) : n("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=MenuItemContent.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/internal/MenuItemContent.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemContent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","Icon","_createCommentVNode","_createElementVNode","_toDisplayString","Icon_default","_hoisted_1","_hoisted_2","MenuItemContent_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","normalizeClass","__props","createBlock","createCommentVNode","createElementVNode","toDisplayString"],"sources":["../../../src/components/internal/MenuItemContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Icon from '../Icon/Icon.vue'\nimport type { DropdownMenuAction } from './menu'\n\ndefineProps<{ item: DropdownMenuAction }>()\n</script>\n\n<!-- One menu item as drawn: an icon, the label and a shortcut. -->\n<template>\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</template>\n"],"mappings":";;;;;;;;;;E,kBASEA,EAAA,GAAAC,EAYM,OAAA,EAXJ,OAAKC,EAAA,CAAC,0DACEa,EAAA,KAAK,YAAO,WAAA,oBAAA,cAAA,CAAA,E;GAGZA,EAAA,KAAK,QADbf,EAAA,GAAAG,EAKEC,GAAA;;IAHA,OAAM;IACL,OAAOW,EAAA,KAAK,YAAO,WAAA,WAAA;IACnB,MAAMA,EAAA,KAAK;;GAEdT,EAAoD,QAApDG,GAAoDF,EAApBQ,EAAA,KAAK,KAAK,GAAA,CAAA;GAC9BA,EAAA,KAAK,YAAjBf,EAAA,GAAAC,EAAwF,QAAxFS,GAAwFH,EAAvBQ,EAAA,KAAK,QAAQ,GAAA,CAAA,K"}

package/dist/components/internal/menu.d.ts

@@ -0,0 +1,46 @@
+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';
+};
+/** The confirm step's wording, shared by DropdownMenu and ContextMenu. */
+export interface MenuConfirmLabels {
+    /** Passed back with every clicked item, e.g. the record the menu acts on. */
+    id?: string;
+    confirmTitle?: string;
+    confirmMessage?: string;
+    confirmLabel?: string;
+    deleteLabel?: string;
+    cancelLabel?: string;
+}
+export declare const menuConfirmDefaults: {
+    id: undefined;
+    confirmTitle: string;
+    confirmMessage: string;
+    confirmLabel: string;
+    deleteLabel: string;
+    cancelLabel: string;
+};
+export declare const menuContentClass = "z-[1100] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in";
+export declare const menuItemClass = "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";
+export declare const menuSeparatorClass = "my-1 border-t border-sui-line-subtle";
+/** Runs an item: asks first when it says so, then emits it with the menu's `id`. */
+export declare function useMenuSelect(props: Required<Omit<MenuConfirmLabels, 'id'>> & {
+    id?: string;
+}, emit: (item: DropdownMenuAction & {
+    id?: string;
+}) => void): (item: DropdownMenuAction) => Promise<void>;

package/dist/components/internal/menu.js

@@ -0,0 +1,33 @@
+import { useConfirm as e } from "../../composables/useConfirm.js";
+//#region src/components/internal/menu.ts
+var t = {
+	id: void 0,
+	confirmTitle: "Are you sure?",
+	confirmMessage: "This can't be undone.",
+	confirmLabel: "Confirm",
+	deleteLabel: "Delete",
+	cancelLabel: "Cancel"
+}, n = "z-[1100] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in", r = "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", i = "my-1 border-t border-sui-line-subtle";
+function a(t, n) {
+	let r = e();
+	return async function(e) {
+		if (e.confirm || e.confirmed) {
+			let n = e.variant === "danger" || e.action === "delete";
+			if (!await r({
+				title: e.confirm?.title ?? t.confirmTitle,
+				message: e.confirm?.message ?? t.confirmMessage,
+				cancelLabel: t.cancelLabel,
+				confirmLabel: e.confirm?.acceptLabel ?? (e.action === "delete" ? t.deleteLabel : t.confirmLabel),
+				confirmVariant: n ? "danger" : "primary"
+			})) return;
+		}
+		n({
+			id: t.id,
+			...e
+		});
+	};
+}
+//#endregion
+export { t as menuConfirmDefaults, n as menuContentClass, r as menuItemClass, i as menuSeparatorClass, a as useMenuSelect };
+
+//# sourceMappingURL=menu.js.map

package/dist/components/internal/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":["menuConfirmDefaults","menuContentClass","menuItemClass","menuSeparatorClass","useMenuSelect","confirm","useConfirm","item","destructive","props"],"sources":["../../../src/components/internal/menu.ts"],"sourcesContent":["import { useConfirm } from '../../composables/useConfirm'\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\n/** The confirm step's wording, shared by DropdownMenu and ContextMenu. */\nexport interface MenuConfirmLabels {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nexport const menuConfirmDefaults = {\n  id: undefined,\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n}\n\nexport const menuContentClass =\n  'z-[1100] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in'\nexport const menuItemClass =\n  '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'\nexport const menuSeparatorClass = 'my-1 border-t border-sui-line-subtle'\n\n/** Runs an item: asks first when it says so, then emits it with the menu's `id`. */\nexport function useMenuSelect(\n  props: Required<Omit<MenuConfirmLabels, 'id'>> & { id?: string },\n  emit: (item: DropdownMenuAction & { id?: string }) => void\n) {\n  const confirm = useConfirm()\n\n  return async 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({ id: props.id, ...item })\n  }\n}\n"],"mappings":";;AA4BA,IAAaA,IAAsB;CACjC,IAAI,KAAA;CACJ,cAAc;CACd,gBAAgB;CAChB,cAAc;CACd,aAAa;CACb,aAAa;AACf,GAEaC,IACX,uIACWC,IACX,0KACWC,IAAqB;AAGlC,SAAgBC,EACd,GACA,GACA;CACA,IAAMC,IAAUC,EAAW;CAE3B,OAAO,eAAsB,GAA0B;EACrD,IAAIC,EAAK,WAAWA,EAAK,WAAW;GAClC,IAAMC,IAAcD,EAAK,YAAY,YAAYA,EAAK,WAAW;GAQjE,IAAI,CAAC,MAPmBF,EAAQ;IAC9B,OAAOE,EAAK,SAAS,SAASE,EAAM;IACpC,SAASF,EAAK,SAAS,WAAWE,EAAM;IACxC,aAAaA,EAAM;IACnB,cAAcF,EAAK,SAAS,gBAAgBA,EAAK,WAAW,WAAWE,EAAM,cAAcA,EAAM;IACjG,gBAAgBD,IAAc,WAAW;GAC3C,CAAC,GACe;EAClB;EACA,EAAK;GAAE,IAAIC,EAAM;GAAI,GAAGF;EAAK,CAAC;CAChC;AACF"}

package/dist/composables/toast.d.ts

@@ -1,23 +1,38 @@
-export type ToastSeverity = 'info' | 'success' | 'error';
+export type ToastSeverity = 'info' | 'success' | 'warning' | 'error';
+/** A button on the toast: pressing it runs `onClick`, then closes the toast. */
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+/** Why a toast left: one of its actions, its close button (or Escape), or its timer running out. */
+export type ToastDismissReason = 'action' | 'close' | 'timeout';
 export interface ToastOptions {
     /** A second line under the message. */
     detail?: string;
-    /** How long it stays, in ms; 0 keeps it until closed. */
+    /** How long it stays, in ms; 0 keeps it until closed. 3000 by default, 6000 with an action. */
     life?: number;
     closable?: boolean;
+    action?: ToastAction;
+    /** One or two; any more are ignored. */
+    actions?: ToastAction[];
+    onDismiss?: (reason: ToastDismissReason) => void;
 }
-export interface ToastItem extends ToastOptions {
+export interface ToastItem extends Omit<ToastOptions, 'action'> {
     id: number;
     severity: ToastSeverity;
     summary: string;
+    actions: ToastAction[];
     open: boolean;
 }
+/** A toast's actions, from `action` or `actions`, at most two. */
+export declare function toastActions(options: Pick<ToastOptions, 'action' | 'actions'>): ToastAction[];
 export declare const toasts: import("vue").ShallowReactive<ToastItem[]>;
-/** Removes a toast once its closing animation has had time to play. */
-export declare function removeToast(id: number): void;
+/** Closes a toast, then removes it once its closing animation has had time to play. */
+export declare function removeToast(id: number, reason?: ToastDismissReason): void;
 /** Shows a message in the app's <Toaster />: `toast.info('Saved')`. */
 export declare const toast: {
     info: (summary: string, options?: ToastOptions) => void;
     success: (summary: string, options?: ToastOptions) => void;
+    warning: (summary: string, options?: ToastOptions) => void;
     error: (summary: string, options?: ToastOptions) => void;
 };