@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

package/dist/components/Tag/Tag.vue_vue_type_script_setup_true_lang.js

@@ -1,22 +1,38 @@
 import e from "../internal/CloseSmallIcon.js";
-import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, useModel as f } from "vue";
 //#region src/components/Tag/Tag.vue?vue&type=script&setup=true&lang.ts
-var d = {
-	key: 1,
+var p = ["aria-pressed", "disabled"], m = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "-ml-0.5 size-3 shrink-0 fill-none stroke-current",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"stroke-width": "1.75",
+	viewBox: "0 0 16 16"
+}, h = {
+	key: 2,
 	class: "inline-flex items-center gap-1.5 rounded-md bg-sui-sunken px-2 py-0.5 text-xs font-medium text-sui-ink-body"
-}, f = { class: "truncate" }, p = ["aria-label"], m = /*@__PURE__*/ o({
+}, g = { class: "truncate" }, _ = ["aria-label"], v = /*@__PURE__*/ o({
 	__name: "Tag",
-	props: {
+	props: /*@__PURE__*/ s({
 		name: { default: void 0 },
 		variant: { default: "soft" },
 		color: { default: void 0 },
 		muted: { type: Boolean },
 		removable: { type: Boolean },
-		removeLabel: { default: "Remove tag" }
-	},
-	emits: ["remove"],
+		removeLabel: { default: "Remove tag" },
+		pressable: { type: Boolean },
+		disabled: { type: Boolean }
+	}, {
+		pressed: {
+			type: Boolean,
+			default: !1
+		},
+		pressedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["remove"], ["update:pressed"]),
 	setup(o) {
-		let m = {
+		let s = f(o, "pressed"), v = {
 			blue: "bg-sui-hue-blue-ink",
 			green: "bg-sui-hue-green-ink",
 			orange: "bg-sui-hue-orange-ink",
@@ -27,26 +43,33 @@ var d = {
 			amber: "bg-sui-hue-amber-ink",
 			gray: "bg-sui-ink"
 		};
-		return (h, g) => o.variant === "outline" ? (c(), n("span", {
+		return (f, y) => o.pressable ? (l(), n("button", {
 			key: 0,
-			class: s(["inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap", o.muted ? "border-sui-line-subtle text-sui-ink-muted" : "border-sui-line bg-sui-sunken font-medium text-sui-ink"])
-		}, [l(h.$slots, "default", {}, () => [i(u(o.name), 1)])], 2)) : (c(), n("div", d, [
-			o.color ? (c(), n("span", {
+			"aria-pressed": s.value,
+			class: c(["inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-3 text-13 leading-none font-medium whitespace-nowrap transition-colors duration-150 outline-hidden focus-visible:sui-ring disabled:cursor-default disabled:opacity-50", s.value ? "border-sui-accent-line bg-sui-accent-wash text-sui-accent enabled:hover:border-sui-accent-bright enabled:hover:bg-sui-accent-soft enabled:active:border-sui-accent-solid enabled:active:bg-sui-accent-soft" : "border-sui-line bg-sui-surface text-sui-ink-body enabled:hover:border-sui-line-strong enabled:hover:bg-sui-canvas enabled:hover:text-sui-ink enabled:active:bg-sui-sunken"]),
+			disabled: o.disabled,
+			type: "button",
+			onClick: y[0] ||= (e) => s.value = !s.value
+		}, [s.value ? (l(), n("svg", m, [...y[2] ||= [r("path", { d: "M3.5 8.25l3 3 6-6.5" }, null, -1)]])) : t("", !0), u(f.$slots, "default", {}, () => [i(d(o.name), 1)])], 10, p)) : o.variant === "outline" ? (l(), n("span", {
+			key: 1,
+			class: c(["inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap", o.muted ? "border-sui-line-subtle text-sui-ink-muted" : "border-sui-line bg-sui-sunken font-medium text-sui-ink"])
+		}, [u(f.$slots, "default", {}, () => [i(d(o.name), 1)])], 2)) : (l(), n("div", h, [
+			o.color ? (l(), n("span", {
 				key: 0,
-				class: s(["h-1.5 w-1.5 shrink-0 rounded-full", m[o.color]])
+				class: c(["h-1.5 w-1.5 shrink-0 rounded-full", v[o.color]])
 			}, null, 2)) : t("", !0),
-			r("span", f, [l(h.$slots, "default", {}, () => [i(u(o.name), 1)])]),
-			o.removable ? (c(), n("button", {
+			r("span", g, [u(f.$slots, "default", {}, () => [i(d(o.name), 1)])]),
+			o.removable ? (l(), n("button", {
 				key: 1,
 				"aria-label": o.removeLabel,
 				class: "-mr-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-sui-line focus-visible:sui-ring",
 				type: "button",
-				onClick: g[0] ||= (e) => h.$emit("remove")
-			}, [a(e, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })], 8, p)) : t("", !0)
+				onClick: y[1] ||= (e) => f.$emit("remove")
+			}, [a(e, { class: "fill-sui-ink-muted stroke-sui-ink-muted" })], 8, _)) : t("", !0)
 		]));
 	}
 });
 //#endregion
-export { m as default };
+export { v as default };
 
 //# sourceMappingURL=Tag.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_createVNode","CloseSmallIcon","CloseSmallIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","Tag_vue_vue_type_script_setup_true_lang_default","dots","__props","openBlock","createElementBlock","normalizeClass","renderSlot","_ctx","createTextVNode","toDisplayString","createCommentVNode","createElementVNode","_cache","createVNode"],"sources":["../../../src/components/Tag/Tag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Hue } from '../../utils/hues'\nimport CloseSmallIcon from '../internal/CloseSmallIcon.vue'\n\nexport interface TagProps {\n  /** The text; or use the default slot. */\n  name?: string\n  /** soft: a label people create, with an optional hue dot, removable. outline: a value from a fixed set (a stage, a status). */\n  variant?: 'soft' | 'outline'\n  /** soft only: a dot of the tag's own hue, on a neutral chip. */\n  color?: Hue\n  /** outline only: the quieter, superseded side, e.g. the \"from\" of a stage change. */\n  muted?: boolean\n  /** soft only. */\n  removable?: boolean\n  /** The remove button's accessible name. */\n  removeLabel?: string\n}\n\nwithDefaults(defineProps<TagProps>(), {\n  name: undefined,\n  variant: 'soft',\n  color: undefined,\n  removeLabel: 'Remove tag'\n})\n\ndefineEmits<{ remove: [] }>()\n\nconst dots: Record<Hue, string> = {\n  blue: 'bg-sui-hue-blue-ink',\n  green: 'bg-sui-hue-green-ink',\n  orange: 'bg-sui-hue-orange-ink',\n  pink: 'bg-sui-hue-pink-ink',\n  purple: 'bg-sui-hue-purple-ink',\n  slate: 'bg-sui-hue-slate-ink',\n  red: 'bg-sui-hue-red-ink',\n  amber: 'bg-sui-hue-amber-ink',\n  gray: 'bg-sui-ink'\n}\n</script>\n\n<!-- A label: soft for the ones people create, outline for a value from a fixed set. -->\n<template>\n  <span\n    v-if=\"variant === 'outline'\"\n    class=\"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap\"\n    :class=\"\n      muted ? 'border-sui-line-subtle text-sui-ink-muted' : 'border-sui-line bg-sui-sunken font-medium text-sui-ink'\n    \"\n  >\n    <slot>{{ name }}</slot>\n  </span>\n  <div\n    v-else\n    class=\"inline-flex items-center gap-1.5 rounded-md bg-sui-sunken px-2 py-0.5 text-xs font-medium text-sui-ink-body\"\n  >\n    <span v-if=\"color\" class=\"h-1.5 w-1.5 shrink-0 rounded-full\" :class=\"dots[color]\" />\n    <span class=\"truncate\"\n      ><slot>{{ name }}</slot></span\n    >\n    <button\n      v-if=\"removable\"\n      :aria-label=\"removeLabel\"\n      class=\"-mr-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-sui-line focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n    >\n      <CloseSmallIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA4BA,IAAMgB,IAA4B;GAChC,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;EACR;E,iBAMUC,EAAA,YAAO,aADfhB,EAAA,GAAAC,EAQO,QAAA;;GANL,OAAKC,EAAA,CAAC,0FACSc,EAAA,QAAK,8CAAA,wD;E,IAIpBb,EAAuBkB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdjB,EAAAC,EAAAW,EAAA,IAAI,GAAA,CAAA,C,YAEfhB,EAAA,GAAAC,EAiBM,OAjBNU,GAiBM;GAbQK,EAAA,SAAZhB,EAAA,GAAAC,EAAoF,QAAA;;IAAjE,OAAKC,EAAA,CAAC,qCAA4Ca,EAAKC,EAAA,MAAK,CAAA;;GAC/ET,EAEC,QAFDK,GAEC,CADET,EAAuBkB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdjB,EAAAC,EAAAW,EAAA,IAAI,GAAA,CAAA,C;GAGRA,EAAA,aADRhB,EAAA,GAAAC,EAQS,UAAA;;IANN,cAAYe,EAAA;IACb,OAAM;IACN,MAAK;IACJ,SAAK,AAAAU,EAAA,QAAA,MAAE3B,EAAAA,MAAK,QAAA;G,IAEbS,EAAkEC,GAAA,EAAlD,OAAM,0CAAyC,CAAA,C"}
+{"version":3,"file":"Tag.vue_vue_type_script_setup_true_lang.js","names":["$emit","_useModel","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","_createVNode","CloseSmallIcon","CloseSmallIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","Tag_vue_vue_type_script_setup_true_lang_default","\"pressed\"","\"pressedModifiers\"","pressed","useModel","__props","dots","openBlock","createElementBlock","normalizeClass","_cache","createElementVNode","createCommentVNode","renderSlot","_ctx","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/Tag/Tag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Hue } from '../../utils/hues'\nimport CloseSmallIcon from '../internal/CloseSmallIcon.vue'\n\nexport interface TagProps {\n  /** The text; or use the default slot. */\n  name?: string\n  /** soft: a label people create, with an optional hue dot, removable. outline: a value from a fixed set (a stage, a status). */\n  variant?: 'soft' | 'outline'\n  /** soft only: a dot of the tag's own hue, on a neutral chip. */\n  color?: Hue\n  /** outline only: the quieter, superseded side, e.g. the \"from\" of a stage change. */\n  muted?: boolean\n  /** soft only. */\n  removable?: boolean\n  /** The remove button's accessible name. */\n  removeLabel?: string\n  /** A toggle button for quick choices, bound to `v-model:pressed`. Group several in a `role=\"group\"` with a label. */\n  pressable?: boolean\n  /** pressable only. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<TagProps>(), {\n  name: undefined,\n  variant: 'soft',\n  color: undefined,\n  removeLabel: 'Remove tag'\n})\n\ndefineEmits<{ remove: [] }>()\n\nconst pressed = defineModel<boolean>('pressed', { default: false })\n\nconst dots: Record<Hue, string> = {\n  blue: 'bg-sui-hue-blue-ink',\n  green: 'bg-sui-hue-green-ink',\n  orange: 'bg-sui-hue-orange-ink',\n  pink: 'bg-sui-hue-pink-ink',\n  purple: 'bg-sui-hue-purple-ink',\n  slate: 'bg-sui-hue-slate-ink',\n  red: 'bg-sui-hue-red-ink',\n  amber: 'bg-sui-hue-amber-ink',\n  gray: 'bg-sui-ink'\n}\n</script>\n\n<!-- A label: soft for the ones people create, outline for a value from a fixed set; or, pressable, a toggle chip. -->\n<template>\n  <button\n    v-if=\"pressable\"\n    :aria-pressed=\"pressed\"\n    class=\"inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-3 text-13 leading-none font-medium whitespace-nowrap transition-colors duration-150 outline-hidden focus-visible:sui-ring disabled:cursor-default disabled:opacity-50\"\n    :class=\"\n      pressed\n        ? 'border-sui-accent-line bg-sui-accent-wash text-sui-accent enabled:hover:border-sui-accent-bright enabled:hover:bg-sui-accent-soft enabled:active:border-sui-accent-solid enabled:active:bg-sui-accent-soft'\n        : 'border-sui-line bg-sui-surface text-sui-ink-body enabled:hover:border-sui-line-strong enabled:hover:bg-sui-canvas enabled:hover:text-sui-ink enabled:active:bg-sui-sunken'\n    \"\n    :disabled=\"disabled\"\n    type=\"button\"\n    @click=\"pressed = !pressed\"\n  >\n    <svg\n      v-if=\"pressed\"\n      aria-hidden=\"true\"\n      class=\"-ml-0.5 size-3 shrink-0 fill-none stroke-current\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"1.75\"\n      viewBox=\"0 0 16 16\"\n    >\n      <path d=\"M3.5 8.25l3 3 6-6.5\" />\n    </svg>\n    <slot>{{ name }}</slot>\n  </button>\n  <span\n    v-else-if=\"variant === 'outline'\"\n    class=\"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs whitespace-nowrap\"\n    :class=\"\n      muted ? 'border-sui-line-subtle text-sui-ink-muted' : 'border-sui-line bg-sui-sunken font-medium text-sui-ink'\n    \"\n  >\n    <slot>{{ name }}</slot>\n  </span>\n  <div\n    v-else\n    class=\"inline-flex items-center gap-1.5 rounded-md bg-sui-sunken px-2 py-0.5 text-xs font-medium text-sui-ink-body\"\n  >\n    <span v-if=\"color\" class=\"h-1.5 w-1.5 shrink-0 rounded-full\" :class=\"dots[color]\" />\n    <span class=\"truncate\"\n      ><slot>{{ name }}</slot></span\n    >\n    <button\n      v-if=\"removable\"\n      :aria-label=\"removeLabel\"\n      class=\"-mr-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-sui-line focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n    >\n      <CloseSmallIcon class=\"fill-sui-ink-muted stroke-sui-ink-muted\" />\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAMqB,IAAUpB,EAAoBsB,GAAC,SAA6B,GAE5DC,IAA4B;GAChC,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;EACR;E,iBAMUD,EAAA,aADRrB,EAAA,GAAAC,EAyBS,UAAA;;GAvBN,gBAAckB,EAAA;GACf,OAAKjB,EAAA,CAAC,kPACSiB,EAAA,Q;GAKd,UAAUE,EAAA;GACX,MAAK;GACJ,SAAK,AAAAK,EAAA,QAAA,MAAE,EAAA,QAAO,CAAIP,EAAA;E,IAGXA,EAAA,SADRnB,EAAA,GAAAC,EAUM,OAVNW,GAUM,CAAA,GAAA,AAAAc,EAAA,OAAA,CADJvB,EAAgC,QAAA,EAA1B,GAAE,sBAAqB,GAAA,MAAA,EAAA,C,kBAE/BE,EAAuByB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdxB,EAAAC,EAAAc,EAAA,IAAI,GAAA,CAAA,C,eAGFA,EAAA,YAAO,aADpBrB,EAAA,GAAAC,EAQO,QAAA;;GANL,OAAKC,EAAA,CAAC,0FACSmB,EAAA,QAAK,8CAAA,wD;E,IAIpBhB,EAAuByB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdxB,EAAAC,EAAAc,EAAA,IAAI,GAAA,CAAA,C,YAEfrB,EAAA,GAAAC,EAiBM,OAjBNY,GAiBM;GAbQQ,EAAA,SAAZrB,EAAA,GAAAC,EAAoF,QAAA;;IAAjE,OAAKC,EAAA,CAAC,qCAA4CoB,EAAKD,EAAA,MAAK,CAAA;;GAC/ElB,EAEC,QAFDW,GAEC,CADET,EAAuByB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdxB,EAAAC,EAAAc,EAAA,IAAI,GAAA,CAAA,C;GAGRA,EAAA,aADRrB,EAAA,GAAAC,EAQS,UAAA;;IANN,cAAYoB,EAAA;IACb,OAAM;IACN,MAAK;IACJ,SAAK,AAAAK,EAAA,QAAA,MAAE5B,EAAAA,MAAK,QAAA;G,IAEbU,EAAkEC,GAAA,EAAlD,OAAM,0CAAyC,CAAA,C"}

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"}