@sparklingopinions/sparkling-ui 0.7.0 → 0.8.0

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

@@ -1,43 +1,52 @@
 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";
+import { Fragment as i, TransitionGroup as a, computed as o, createBlock as s, createElementBlock as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, reactive as m, renderList as h, unref as g, withCtx as _ } from "vue";
+import { ToastProvider as v, ToastRoot as y, ToastViewport as b } from "reka-ui";
 //#region src/components/Toast/Toaster.vue?vue&type=script&setup=true&lang.ts
-var v = /*@__PURE__*/ l({
+var x = /*@__PURE__*/ u({
 	__name: "Toaster",
 	props: {
+		position: { default: "bottom-center" },
 		label: { default: "Notifications ({hotkey})" },
 		closeLabel: { default: "Close" },
 		preview: { default: void 0 }
 	},
 	emits: ["close"],
-	setup(l, { emit: v }) {
-		let y = v, b = d(/* @__PURE__ */ new Set());
-		function x(t, n) {
+	setup(u, { emit: x }) {
+		let S = u, C = x, w = m(/* @__PURE__ */ new Set()), T = (e) => `calc(var(--sui-toaster-margin) + var(--sui-toaster-inset-${e}))`, E = o(() => {
+			let [e, t] = S.position.split("-");
+			return {
+				[e]: `calc(var(--sui-toaster-margin) + var(--sui-toaster-inset-${e}) + env(safe-area-inset-${e}))`,
+				left: t === "right" ? "auto" : T("left"),
+				right: t === "left" ? "auto" : T("right"),
+				width: `min(var(--sui-toaster-width), 100vw - ${T("left")} - ${T("right")})`
+			};
+		}), D = o(() => S.position.startsWith("top"));
+		function O(t, n) {
 			n.onClick(), e(t, "action");
 		}
-		function S(e, t) {
-			t.onClick(), y("close", e, "action");
+		function k(e, t) {
+			t.onClick(), C("close", e, "action");
 		}
-		return (d, v) => l.preview ? (u(), o(a, {
+		return (o, m) => u.preview ? (p(), s(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: m(() => [(u(!0), s(i, null, f(l.preview, (e, n) => (u(), o(r, {
+			default: _(() => [(p(!0), c(i, null, h(u.preview, (e, n) => (p(), s(r, {
 				key: e.id ?? n,
-				actions: p(t)(e),
+				actions: g(t)(e),
 				closable: e.closable,
-				"close-label": l.closeLabel,
+				"close-label": u.closeLabel,
 				detail: e.detail,
 				life: e.life,
 				severity: e.severity,
 				summary: e.summary,
-				onAction: (t) => S(e.id ?? n, t),
-				onClose: (t) => y("close", e.id ?? n, "close"),
-				onExpire: (t) => y("close", e.id ?? n, "timeout")
+				onAction: (t) => k(e.id ?? n, t),
+				onClose: (t) => C("close", e.id ?? n, "close"),
+				onExpire: (t) => C("close", e.id ?? n, "timeout")
 			}, null, 8, [
 				"actions",
 				"closable",
@@ -51,35 +60,36 @@ var v = /*@__PURE__*/ l({
 				"onExpire"
 			]))), 128))]),
 			_: 1
-		})) : (u(), o(p(h), {
+		})) : (p(), s(g(v), {
 			key: 1,
 			"swipe-threshold": Infinity
 		}, {
-			default: m(() => [(u(!0), s(i, null, f(p(n), (t) => (u(), o(p(g), {
+			default: _(() => [(p(!0), c(i, null, h(g(n), (t) => (p(), s(g(y), {
 				key: t.id,
 				"as-child": "",
 				duration: t.life || Infinity,
 				open: t.open,
 				type: t.severity === "error" ? "foreground" : "background",
-				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")
+				onEscapeKeyDown: (n) => g(e)(t.id, "close"),
+				onPause: (e) => w.add(t.id),
+				onResume: (e) => w.delete(t.id),
+				"onUpdate:open": (n) => !n && g(e)(t.id, "timeout")
 			}, {
-				default: m(() => [c(r, {
+				default: _(() => [l(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",
+					class: d(["pointer-events-auto data-[state=closed]:overflow-hidden data-[state=closed]:animate-sui-toast-out motion-reduce:data-[state=closed]:animate-sui-toast-fade", D.value ? "data-[state=open]:animate-sui-toast-in-top motion-reduce:data-[state=open]:animate-sui-fade-in" : "data-[state=open]:animate-sui-toast-in motion-reduce:data-[state=open]:animate-sui-fade-in"]),
 					closable: t.closable,
-					"close-label": l.closeLabel,
+					"close-label": u.closeLabel,
 					detail: t.detail,
 					life: t.life,
-					paused: b.has(t.id),
+					paused: w.has(t.id),
 					severity: t.severity,
 					summary: t.summary,
-					onAction: (e) => x(t.id, e),
-					onClose: (n) => p(e)(t.id, "close")
+					onAction: (e) => O(t.id, e),
+					onClose: (n) => g(e)(t.id, "close")
 				}, null, 8, [
 					"actions",
+					"class",
 					"closable",
 					"close-label",
 					"detail",
@@ -99,17 +109,24 @@ var v = /*@__PURE__*/ l({
 				"onPause",
 				"onResume",
 				"onUpdate:open"
-			]))), 128)), c(p(_), {
+			]))), 128)), l(g(b), {
 				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",
+				class: d(["pointer-events-none fixed z-[1200] mx-auto flex rounded-md outline-hidden", D.value ? "flex-col-reverse" : "flex-col"]),
+				"data-sui-position": u.position,
 				"data-sui-toasts": "",
-				label: l.label
-			}, null, 8, ["label"])]),
+				label: u.label,
+				style: f(E.value)
+			}, null, 8, [
+				"class",
+				"data-sui-position",
+				"label",
+				"style"
+			])]),
 			_: 1
 		}, 8, ["swipe-threshold"]));
 	}
 });
 //#endregion
-export { v as default };
+export { x 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":["_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"}
+{"version":3,"file":"Toaster.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_TransitionGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ToastMessage","_unref","_createVNode","_normalizeClass","_normalizeStyle","ToastMessage_default","Toaster_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","paused","reactive","side","edge","placement","computed","vertical","horizontal","fromTop","runLive","action","removeToast","id","runPreview","openBlock","createBlock","TransitionGroup","withCtx","createElementBlock","Fragment","renderList","item","index","unref","toastActions","$event","ToastProvider","toasts","ToastRoot","open","createVNode","normalizeClass","ToastViewport","normalizeStyle"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, 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 type ToasterPosition = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right'\n\nexport interface ToasterProps {\n  /** Where live toasts sit. Move them clear of the app's own chrome with the `--sui-toaster-inset-*` tokens. */\n  position?: ToasterPosition\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\nconst props = withDefaults(defineProps<ToasterProps>(), {\n  position: 'bottom-center',\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\n// The region sits `--sui-toaster-margin` in from the viewport's edges plus the app's insets, and the safe area\n// beyond them; centred, it centres in what's left between the side insets.\nconst side = (edge: 'left' | 'right') => `calc(var(--sui-toaster-margin) + var(--sui-toaster-inset-${edge}))`\nconst placement = computed(() => {\n  const [vertical, horizontal] = props.position.split('-') as ['top' | 'bottom', 'left' | 'center' | 'right']\n  return {\n    [vertical]: `calc(var(--sui-toaster-margin) + var(--sui-toaster-inset-${vertical}) + env(safe-area-inset-${vertical}))`,\n    left: horizontal === 'right' ? 'auto' : side('left'),\n    right: horizontal === 'left' ? 'auto' : side('right'),\n    width: `min(var(--sui-toaster-width), 100vw - ${side('left')} - ${side('right')})`\n  }\n})\nconst fromTop = computed(() => props.position.startsWith('top'))\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]:overflow-hidden data-[state=closed]:animate-sui-toast-out motion-reduce:data-[state=closed]:animate-sui-toast-fade\"\n        :class=\"\n          fromTop\n            ? 'data-[state=open]:animate-sui-toast-in-top motion-reduce:data-[state=open]:animate-sui-fade-in'\n            : 'data-[state=open]:animate-sui-toast-in motion-reduce:data-[state=open]:animate-sui-fade-in'\n        \"\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. From the top, the newest is\n         nearest the edge, as it is at the bottom. -->\n    <ToastViewport\n      as=\"div\"\n      class=\"pointer-events-none fixed z-[1200] mx-auto flex rounded-md outline-hidden\"\n      :class=\"fromTop ? 'flex-col-reverse' : 'flex-col'\"\n      :data-sui-position=\"position\"\n      data-sui-toasts\n      :label=\"label\"\n      :style=\"placement\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EA2CA,IAAMe,IAAQC,GAORC,IAAOH,GAOPI,IAASC,kBAAS,IAAI,IAAY,CAAC,GAInCC,KAAQ,MAA2B,4DAA4DC,EAAK,KACpGC,IAAYC,QAAe;GAC/B,IAAM,CAACC,GAAUC,KAAcV,EAAM,SAAS,MAAM,GAAG;GACvD,OAAO;KACJS,IAAW,4DAA4DA,EAAS,0BAA0BA,EAAS;IACpH,MAAMC,MAAe,UAAU,SAASL,EAAK,MAAM;IACnD,OAAOK,MAAe,SAAS,SAASL,EAAK,OAAO;IACpD,OAAO,yCAAyCA,EAAK,MAAM,EAAE,KAAKA,EAAK,OAAO,EAAE;GAClF;EACF,CAAC,GACKM,IAAUH,QAAeR,EAAM,SAAS,WAAW,KAAK,CAAC;EAE/D,SAASY,EAAQ,GAAY,GAAqB;GAEhD,AADAC,EAAO,QAAQ,GACfC,EAAYC,GAAI,QAAQ;EAC1B;EAEA,SAASC,EAAW,GAAqB,GAAqB;GAE5D,AADAH,EAAO,QAAQ,GACfX,EAAK,SAASa,GAAI,QAAQ;EAC5B;E,iBAMUd,EAAA,WADRhB,EAAA,GAAAC,EAqBkBC,GAAA;;GAnBhB,OAAM;GACN,sBAAmB;GACnB,sBAAmB;GACnB,KAAI;;GAGF,SAAAC,QAAgC,EADlCH,EAAA,EAAA,GAAAI,EAaEC,GAAA,MAAAC,EAZwBU,EAAA,UAAhB,GAAM,OADhBhB,EAAA,GAAAC,EAaEM,GAAA;IAXC,KAAKgC,EAAK,MAAMC;IAChB,SAAShC,EAAAkC,CAAA,CAAY,CAACH,CAAI;IAC1B,UAAUA,EAAK;IACf,eAAavB,EAAA;IACb,QAAQuB,EAAK;IACb,MAAMA,EAAK;IACX,UAAUA,EAAK;IACf,SAASA,EAAK;IACd,WAAM,MAAER,EAAWQ,EAAK,MAAMC,GAAOG,CAAM;IAC3C,UAAK,MAAE1B,EAAI,SAAUsB,EAAK,MAAMC,GAAK,OAAA;IACrC,WAAM,MAAEvB,EAAI,SAAUsB,EAAK,MAAMC,GAAK,SAAA;;;;;;;;;;;;;;E,OAG3CxC,EAAA,GAAAC,EA2CgBO,EAAAoC,CAAA,GAAA;;GA3CO,mBAAiB;;GAEpC,SAAAzC,QAAsB,EADxBH,EAAA,EAAA,GAAAI,EA8BYC,GAAA,MAAAC,EA7BKE,EAAAqC,CAAA,IAAR,OADT7C,EAAA,GAAAC,EA8BYO,EAAAsC,CAAA,GAAA;IA5BT,KAAKP,EAAK;IACX,YAAA;IACC,UAAUA,EAAK,QAAQ;IACvB,MAAMA,EAAK;IACX,MAAMA,EAAK,aAAQ,UAAA,eAAA;IACnB,kBAAe,MAAE/B,EAAAqB,CAAA,CAAW,CAACU,EAAK,IAAE,OAAA;IACpC,UAAK,MAAErB,EAAO,IAAIqB,EAAK,EAAE;IACzB,WAAM,MAAErB,EAAO,OAAOqB,EAAK,EAAE;IAC7B,kBAAc,MAAI,CAAMQ,KAAQvC,EAAAqB,CAAA,CAAW,CAACU,EAAK,IAAE,SAAA;;IAEpD,SAAApC,QAiBE,CAjBFM,EAiBEF,GAAA;KAhBC,SAASgC,EAAK;KACf,OAAK7B,EAAA,CAAC,8JACagB,EAAA,Q;KAKlB,UAAUa,EAAK;KACf,eAAavB,EAAA;KACb,QAAQuB,EAAK;KACb,MAAMA,EAAK;KACX,QAAQrB,EAAO,IAAIqB,EAAK,EAAE;KAC1B,UAAUA,EAAK;KACf,SAASA,EAAK;KACd,WAAM,MAAEZ,EAAQY,EAAK,IAAII,CAAM;KAC/B,UAAK,MAAEnC,EAAAqB,CAAA,CAAW,CAACU,EAAK,IAAE,OAAA;;;;;;;;;;;;;;;;;;;;;;;G,aAK/B9B,EAQED,EAAA0C,CAAA,GAAA;IAPA,IAAG;IACH,OAAKxC,EAAA,CAAC,6EACEgB,EAAA,QAAO,qBAAA,UAAA,CAAA;IACd,qBAAmBV,EAAA;IACpB,mBAAA;IACC,OAAOA,EAAA;IACP,OAAKL,EAAEW,EAAA,KAAS"}

package/dist/components/Toolbar/Toolbar.js

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

package/dist/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":["_sfc_main","Toolbar_vue_vue_type_script_setup_true_lang_default","Toolbar_default"],"sources":["../../../src/components/Toolbar/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUpdated, ref, useTemplateRef } from 'vue'\n\nexport interface ToolbarProps {\n  /** Its accessible name, e.g. \"Text formatting\". */\n  label: string\n  orientation?: 'horizontal' | 'vertical'\n  /** The arrow keys wrap from the last control to the first. */\n  loop?: boolean\n}\n\nconst props = withDefaults(defineProps<ToolbarProps>(), { orientation: 'horizontal', loop: true })\n\nconst root = useTemplateRef<HTMLElement>('root')\n// The control Tab lands on: the last one focused, else the first.\nconst current = ref<HTMLElement | null>(null)\n\nconst controls = () => [...(root.value?.querySelectorAll<HTMLElement>('button, a[href], input, [role=\"button\"]') ?? [])]\nconst items = () => controls().filter((el) => !el.matches(':disabled, [aria-disabled=\"true\"]'))\n\n// The controls are the app's: the toolbar only sets their tabindex, so one of them is in the Tab order.\nfunction rove() {\n  const all = items()\n  const active = current.value && all.includes(current.value) ? current.value : all[0]\n  for (const el of controls()) el.tabIndex = el === active ? 0 : -1\n}\n\nonMounted(rove)\nonUpdated(rove)\n\nfunction onFocusin(event: FocusEvent) {\n  const target = items().find((el) => el === event.target)\n  if (!target) return\n  current.value = target\n  rove()\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const [back, next] = props.orientation === 'vertical' ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight']\n  if (![back, next, 'Home', 'End'].includes(event.key) || event.altKey || event.metaKey || event.ctrlKey) return\n  // A field inside keeps its arrow keys.\n  if ((event.target as HTMLElement).matches('input, textarea')) return\n  const all = items()\n  const i = all.indexOf(event.target as HTMLElement)\n  if (i < 0) return\n  const last = all.length - 1\n  let to = event.key === 'Home' ? 0 : event.key === 'End' ? last : i + (event.key === next ? 1 : -1)\n  if (to < 0) to = props.loop ? last : 0\n  if (to > last) to = props.loop ? 0 : last\n  event.preventDefault()\n  all[to]?.focus()\n}\n</script>\n\n<!-- A row of controls, such as format toggles, that Tab enters once and the arrow keys move through. -->\n<template>\n  <div\n    ref=\"root\"\n    :aria-label=\"label\"\n    :aria-orientation=\"orientation\"\n    class=\"flex gap-0.5\"\n    :class=\"orientation === 'vertical' ? 'flex-col items-stretch' : 'items-center'\"\n    role=\"toolbar\"\n    @focusin=\"onFocusin\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,23 @@
+export interface ToolbarProps {
+    /** Its accessible name, e.g. "Text formatting". */
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+    /** The arrow keys wrap from the last control to the first. */
+    loop?: boolean;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & Readonly<{}>, {
+    loop: boolean;
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Toolbar/Toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { createElementBlock as e, defineComponent as t, normalizeClass as n, onMounted as r, onUpdated as i, openBlock as a, ref as o, renderSlot as s, useTemplateRef as c } from "vue";
+//#region src/components/Toolbar/Toolbar.vue?vue&type=script&setup=true&lang.ts
+var l = ["aria-label", "aria-orientation"], u = /*@__PURE__*/ t({
+	__name: "Toolbar",
+	props: {
+		label: {},
+		orientation: { default: "horizontal" },
+		loop: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(t) {
+		let u = t, d = c("root"), f = o(null), p = () => [...d.value?.querySelectorAll("button, a[href], input, [role=\"button\"]") ?? []], m = () => p().filter((e) => !e.matches(":disabled, [aria-disabled=\"true\"]"));
+		function h() {
+			let e = m(), t = f.value && e.includes(f.value) ? f.value : e[0];
+			for (let e of p()) e.tabIndex = e === t ? 0 : -1;
+		}
+		r(h), i(h);
+		function g(e) {
+			let t = m().find((t) => t === e.target);
+			t && (f.value = t, h());
+		}
+		function _(e) {
+			let [t, n] = u.orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+			if (![
+				t,
+				n,
+				"Home",
+				"End"
+			].includes(e.key) || e.altKey || e.metaKey || e.ctrlKey || e.target.matches("input, textarea")) return;
+			let r = m(), i = r.indexOf(e.target);
+			if (i < 0) return;
+			let a = r.length - 1, o = e.key === "Home" ? 0 : e.key === "End" ? a : i + (e.key === n ? 1 : -1);
+			o < 0 && (o = u.loop ? a : 0), o > a && (o = u.loop ? 0 : a), e.preventDefault(), r[o]?.focus();
+		}
+		return (r, i) => (a(), e("div", {
+			ref_key: "root",
+			ref: d,
+			"aria-label": t.label,
+			"aria-orientation": t.orientation,
+			class: n(["flex gap-0.5", t.orientation === "vertical" ? "flex-col items-stretch" : "items-center"]),
+			role: "toolbar",
+			onFocusin: g,
+			onKeydown: _
+		}, [s(r.$slots, "default")], 42, l));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=Toolbar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_hoisted_1","Toolbar_vue_vue_type_script_setup_true_lang_default","props","__props","root","useTemplateRef","current","ref","controls","items","el","rove","all","active","onMounted","onUpdated","onFocusin","target","event","onKeydown","back","next","last","to","openBlock","createElementBlock","normalizeClass","renderSlot","_ctx"],"sources":["../../../src/components/Toolbar/Toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUpdated, ref, useTemplateRef } from 'vue'\n\nexport interface ToolbarProps {\n  /** Its accessible name, e.g. \"Text formatting\". */\n  label: string\n  orientation?: 'horizontal' | 'vertical'\n  /** The arrow keys wrap from the last control to the first. */\n  loop?: boolean\n}\n\nconst props = withDefaults(defineProps<ToolbarProps>(), { orientation: 'horizontal', loop: true })\n\nconst root = useTemplateRef<HTMLElement>('root')\n// The control Tab lands on: the last one focused, else the first.\nconst current = ref<HTMLElement | null>(null)\n\nconst controls = () => [...(root.value?.querySelectorAll<HTMLElement>('button, a[href], input, [role=\"button\"]') ?? [])]\nconst items = () => controls().filter((el) => !el.matches(':disabled, [aria-disabled=\"true\"]'))\n\n// The controls are the app's: the toolbar only sets their tabindex, so one of them is in the Tab order.\nfunction rove() {\n  const all = items()\n  const active = current.value && all.includes(current.value) ? current.value : all[0]\n  for (const el of controls()) el.tabIndex = el === active ? 0 : -1\n}\n\nonMounted(rove)\nonUpdated(rove)\n\nfunction onFocusin(event: FocusEvent) {\n  const target = items().find((el) => el === event.target)\n  if (!target) return\n  current.value = target\n  rove()\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const [back, next] = props.orientation === 'vertical' ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight']\n  if (![back, next, 'Home', 'End'].includes(event.key) || event.altKey || event.metaKey || event.ctrlKey) return\n  // A field inside keeps its arrow keys.\n  if ((event.target as HTMLElement).matches('input, textarea')) return\n  const all = items()\n  const i = all.indexOf(event.target as HTMLElement)\n  if (i < 0) return\n  const last = all.length - 1\n  let to = event.key === 'Home' ? 0 : event.key === 'End' ? last : i + (event.key === next ? 1 : -1)\n  if (to < 0) to = props.loop ? last : 0\n  if (to > last) to = props.loop ? 0 : last\n  event.preventDefault()\n  all[to]?.focus()\n}\n</script>\n\n<!-- A row of controls, such as format toggles, that Tab enters once and the arrow keys move through. -->\n<template>\n  <div\n    ref=\"root\"\n    :aria-label=\"label\"\n    :aria-orientation=\"orientation\"\n    class=\"flex gap-0.5\"\n    :class=\"orientation === 'vertical' ? 'flex-col items-stretch' : 'items-center'\"\n    role=\"toolbar\"\n    @focusin=\"onFocusin\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAWA,IAAMM,IAAQC,GAERC,IAAOC,EAA4B,MAAM,GAEzCC,IAAUC,EAAwB,IAAI,GAEtCC,UAAiB,CAAC,GAAIJ,EAAK,OAAO,iBAA8B,2CAAyC,KAAK,CAAC,CAAE,GACjHK,UAAcD,EAAS,CAAC,CAAC,QAAQ,MAAO,CAACE,EAAG,QAAQ,qCAAmC,CAAC;EAG9F,SAASC,IAAO;GACd,IAAMC,IAAMH,EAAM,GACZI,IAASP,EAAQ,SAASM,EAAI,SAASN,EAAQ,KAAK,IAAIA,EAAQ,QAAQM,EAAI;GAClF,KAAK,IAAMF,KAAMF,EAAS,GAAG,EAAG,WAAWE,MAAOG,IAAS,IAAI;EACjE;EAGA,AADAC,EAAUH,CAAI,GACdI,EAAUJ,CAAI;EAEd,SAASK,EAAU,GAAmB;GACpC,IAAMC,IAASR,EAAM,CAAC,CAAC,MAAM,MAAOC,MAAOQ,EAAM,MAAM;GACvD,AAAKD,MACL,EAAQ,QAAQA,GAChBN,EAAK;EACP;EAEA,SAASQ,EAAU,GAAsB;GACvC,IAAM,CAACC,GAAMC,KAAQnB,EAAM,gBAAgB,aAAa,CAAC,WAAW,WAAW,IAAI,CAAC,aAAa,YAAY;GAG7G,IAFI,CAAC;IAACkB;IAAMC;IAAM;IAAQ;GAAK,CAAC,CAAC,SAASH,EAAM,GAAG,KAAKA,EAAM,UAAUA,EAAM,WAAWA,EAAM,WAE1FA,EAAM,OAAuB,QAAQ,iBAAiB,GAAG;GAC9D,IAAMN,IAAMH,EAAM,GACZ,IAAIG,EAAI,QAAQM,EAAM,MAAqB;GACjD,IAAI,IAAI,GAAG;GACX,IAAMI,IAAOV,EAAI,SAAS,GACtBW,IAAKL,EAAM,QAAQ,SAAS,IAAIA,EAAM,QAAQ,QAAQI,IAAO,KAAKJ,EAAM,QAAQG,IAAO,IAAI;GAI/F,AAHIE,IAAK,MAAG,IAAKrB,EAAM,OAAOoB,IAAO,IACjCC,IAAKD,MAAM,IAAKpB,EAAM,OAAO,IAAIoB,IACrCJ,EAAM,eAAe,GACrBN,EAAIW,EAAG,EAAE,MAAM;EACjB;E,kBAKE3B,EAAA,GAAAC,EAWM,OAAA;GAVA,SAAA;GAAJ,KAAIO;GACH,cAAYD,EAAA;GACZ,oBAAkBA,EAAA;GACnB,OAAKL,EAAA,CAAC,gBACEK,EAAA,gBAAW,aAAA,2BAAA,cAAA,CAAA;GACnB,MAAK;GACK;GACA;E,IAEVJ,EAAQ6B,EAAA,QAAA,SAAA,C"}

package/dist/components/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toolbar } from './Toolbar.vue';
+export type { ToolbarProps } from './Toolbar.vue';

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

@@ -1 +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":""}
+{"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\n// Reka's item attributes come first, so a disabled item's own win over its `aria-disabled`.\ndefineOptions({ inheritAttrs: false })\n\ndefineProps<{ item: DropdownMenuAction; reasonId?: string }>()\n</script>\n\n<!-- One menu item as drawn: an icon, the label and a shortcut; disabled, dimmed, with its reason underneath. It's the\n     menu item itself (its Reka item renders as-child). A disabled item isn't Reka's `disabled`, which arrow keys skip:\n     the WAI-ARIA menu pattern keeps it reachable, and the menu's `select` ignores it. -->\n<template>\n  <div\n    v-bind=\"$attrs\"\n    :aria-describedby=\"item.disabled && item.disabledReason ? reasonId : undefined\"\n    :aria-disabled=\"item.disabled ? 'true' : undefined\"\n    class=\"flex items-center gap-2.5 px-2.5 py-1.5\"\n    :class=\"[\n      item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink',\n      item.disabled ? 'cursor-default' : 'cursor-pointer'\n    ]\"\n  >\n    <Icon\n      v-if=\"item.icon\"\n      class=\"h-4 w-4 shrink-0\"\n      :class=\"item.disabled && 'opacity-50'\"\n      :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n      :name=\"item.icon\"\n    />\n    <span class=\"flex min-w-0 flex-1 flex-col\">\n      <span class=\"text-13\" :class=\"item.disabled && 'opacity-50'\">{{ item.label }}</span>\n      <span v-if=\"item.disabled && item.disabledReason\" :id=\"reasonId\" class=\"text-xs text-sui-ink-muted\">{{\n        item.disabledReason\n      }}</span>\n    </span>\n    <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\" :class=\"item.disabled && 'opacity-50'\">{{\n      item.shortcut\n    }}</span>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,7 @@
 import type { DropdownMenuAction } from './menu';
 type __VLS_Props = {
     item: DropdownMenuAction;
+    reasonId?: string;
 };
 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;

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

@@ -1,26 +1,42 @@
 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";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, openBlock as c, toDisplayString as l } 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({
+var u = ["aria-describedby", "aria-disabled"], d = { class: "flex min-w-0 flex-1 flex-col" }, f = ["id"], p = /*@__PURE__*/ a({
+	inheritAttrs: !1,
 	__name: "MenuItemContent",
-	props: { item: {} },
+	props: {
+		item: {},
+		reasonId: {}
+	},
 	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, {
+		return (p, m) => (c(), r("div", o(p.$attrs, {
+			"aria-describedby": a.item.disabled && a.item.disabledReason ? a.reasonId : void 0,
+			"aria-disabled": a.item.disabled ? "true" : void 0,
+			class: ["flex items-center gap-2.5 px-2.5 py-1.5", [a.item.variant === "danger" ? "text-sui-danger" : "text-sui-ink", a.item.disabled ? "cursor-default" : "cursor-pointer"]]
+		}), [
+			a.item.icon ? (c(), t(e, {
 				key: 0,
-				class: "h-4 w-4 shrink-0",
+				class: s(["h-4 w-4 shrink-0", a.item.disabled && "opacity-50"]),
 				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));
+			}, null, 8, [
+				"class",
+				"color",
+				"name"
+			])) : n("", !0),
+			i("span", d, [i("span", { class: s(["text-13", a.item.disabled && "opacity-50"]) }, l(a.item.label), 3), a.item.disabled && a.item.disabledReason ? (c(), r("span", {
+				key: 0,
+				id: a.reasonId,
+				class: "text-xs text-sui-ink-muted"
+			}, l(a.item.disabledReason), 9, f)) : n("", !0)]),
+			a.item.shortcut ? (c(), r("span", {
+				key: 1,
+				class: s(["text-11 text-sui-ink-muted", a.item.disabled && "opacity-50"])
+			}, l(a.item.shortcut), 3)) : n("", !0)
+		], 16, u));
 	}
 });
 //#endregion
-export { d as default };
+export { p 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

@@ -1 +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"}
+{"version":3,"file":"MenuItemContent.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_createBlock","Icon","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","Icon_default","_hoisted_1","_hoisted_2","_hoisted_3","MenuItemContent_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","mergeProps","_ctx","__props","createBlock","normalizeClass","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\n// Reka's item attributes come first, so a disabled item's own win over its `aria-disabled`.\ndefineOptions({ inheritAttrs: false })\n\ndefineProps<{ item: DropdownMenuAction; reasonId?: string }>()\n</script>\n\n<!-- One menu item as drawn: an icon, the label and a shortcut; disabled, dimmed, with its reason underneath. It's the\n     menu item itself (its Reka item renders as-child). A disabled item isn't Reka's `disabled`, which arrow keys skip:\n     the WAI-ARIA menu pattern keeps it reachable, and the menu's `select` ignores it. -->\n<template>\n  <div\n    v-bind=\"$attrs\"\n    :aria-describedby=\"item.disabled && item.disabledReason ? reasonId : undefined\"\n    :aria-disabled=\"item.disabled ? 'true' : undefined\"\n    class=\"flex items-center gap-2.5 px-2.5 py-1.5\"\n    :class=\"[\n      item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink',\n      item.disabled ? 'cursor-default' : 'cursor-pointer'\n    ]\"\n  >\n    <Icon\n      v-if=\"item.icon\"\n      class=\"h-4 w-4 shrink-0\"\n      :class=\"item.disabled && 'opacity-50'\"\n      :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n      :name=\"item.icon\"\n    />\n    <span class=\"flex min-w-0 flex-1 flex-col\">\n      <span class=\"text-13\" :class=\"item.disabled && 'opacity-50'\">{{ item.label }}</span>\n      <span v-if=\"item.disabled && item.disabledReason\" :id=\"reasonId\" class=\"text-xs text-sui-ink-muted\">{{\n        item.disabledReason\n      }}</span>\n    </span>\n    <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\" :class=\"item.disabled && 'opacity-50'\">{{\n      item.shortcut\n    }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;E,kBAcEC,EAAA,GAAAC,EA0BM,OA1BNC,EACUH,EAyBJ,QAzBU;GACb,oBAAkBmB,EAAA,KAAK,YAAYA,EAAA,KAAK,iBAAiBA,EAAA,WAAW,KAAA;GACpE,iBAAeA,EAAA,KAAK,WAAQ,SAAY,KAAA;GACzC,OAAK,CAAC,2CAAyC,CAC/BA,EAAA,KAAK,YAAO,WAAA,oBAAA,gBAA0DA,EAAA,KAAK,WAAQ,mBAAA,gB;;GAM3FA,EAAA,KAAK,QADblB,EAAA,GAAAG,EAMEC,GAAA;;IAJA,OAAKC,EAAA,CAAC,oBACEa,EAAA,KAAK,YAAQ,YAAA,CAAA;IACpB,OAAOA,EAAA,KAAK,YAAO,WAAA,WAAA;IACnB,MAAMA,EAAA,KAAK;;;;;;GAEdX,EAKO,QALPI,GAKO,CAJLJ,EAAoF,QAAA,EAA9E,OAAKF,EAAA,CAAC,WAAkBa,EAAA,KAAK,YAAQ,YAAA,CAAA,EAAqB,GAAAV,EAAAU,EAAA,KAAK,KAAK,GAAA,CAAA,GAC9DA,EAAA,KAAK,YAAYA,EAAA,KAAK,kBAAlClB,EAAA,GAAAC,EAES,QAAA;;IAF0C,IAAIiB,EAAA;IAAU,OAAM;GACrE,GAAAV,EAAAU,EAAA,KAAK,cAAc,GAAA,GAAAN,CAAA,K;GAGXM,EAAA,KAAK,YAAjBlB,EAAA,GAAAC,EAES,QAAA;;IAFkB,OAAKI,EAAA,CAAC,8BAAqCa,EAAA,KAAK,YAAQ,YAAA,CAAA;GACjF,GAAAV,EAAAU,EAAA,KAAK,QAAQ,GAAA,CAAA,K"}

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

@@ -12,6 +12,10 @@ export interface DropdownMenuAction {
         acceptLabel?: string;
     };
     confirmed?: boolean;
+    /** Dimmed and inert, but still reached with the arrow keys and announced as unavailable. */
+    disabled?: boolean;
+    /** Why it's disabled, shown under its label. */
+    disabledReason?: string;
     [key: string]: unknown;
 }
 export type DropdownMenuEntry = DropdownMenuAction | {
@@ -43,4 +47,4 @@ export declare function useMenuSelect(props: Required<Omit<MenuConfirmLabels, 'i
     id?: string;
 }, emit: (item: DropdownMenuAction & {
     id?: string;
-}) => void): (item: DropdownMenuAction) => Promise<void>;
+}) => void): (item: DropdownMenuAction, event?: Event) => Promise<void>;

package/dist/components/internal/menu.js

@@ -10,21 +10,24 @@ var t = {
 }, 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;
+	return async function(e, i) {
+		if (e.disabled) i?.preventDefault();
+		else {
+			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
+			});
 		}
-		n({
-			id: t.id,
-			...e
-		});
 	};
 }
 //#endregion

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

@@ -1 +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"}
+{"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  /** Dimmed and inert, but still reached with the arrow keys and announced as unavailable. */\n  disabled?: boolean\n  /** Why it's disabled, shown under its label. */\n  disabledReason?: string\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, event?: Event) {\n    if (item.disabled) {\n      // Keeps the menu open.\n      event?.preventDefault()\n      return\n    }\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":";;AAgCA,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,GAAe;EACpE,IAAIC,EAAK,UAEP,GAAO,eAAe;OAGxB;OAAIA,EAAK,WAAWA,EAAK,WAAW;IAClC,IAAMC,IAAcD,EAAK,YAAY,YAAYA,EAAK,WAAW;IAQjE,IAAI,CAAC,MAPmBF,EAAQ;KAC9B,OAAOE,EAAK,SAAS,SAASE,EAAM;KACpC,SAASF,EAAK,SAAS,WAAWE,EAAM;KACxC,aAAaA,EAAM;KACnB,cAAcF,EAAK,SAAS,gBAAgBA,EAAK,WAAW,WAAWE,EAAM,cAAcA,EAAM;KACjG,gBAAgBD,IAAc,WAAW;IAC3C,CAAC,GACe;GAClB;GACA,EAAK;IAAE,IAAIC,EAAM;IAAI,GAAGF;GAAK,CAAC;EAD9B;CAEF;AACF"}

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export * from './components/Table';
 export * from './components/Tag';
 export * from './components/Textarea';
 export * from './components/Toast';
+export * from './components/Toolbar';
 export * from './components/Tooltip';
 export * from './components/TypingIndicator';
 export { hueFor, type Hue } from './utils/hues';

package/dist/index.js

@@ -31,19 +31,21 @@ import N from "./components/ImageUpload/ImageUpload.js";
 import P from "./components/Kbd/Kbd.js";
 import F from "./components/Pagination/Pagination.js";
 import I from "./components/Popover/Popover.js";
-import L from "./components/Spinner/Spinner.js";
-import R from "./components/Tag/Tag.js";
-import z from "./components/Select/Select.js";
-import B from "./components/Textarea/Textarea.js";
-import V from "./components/PropertyList/Editable.js";
-import H from "./components/PropertyList/PropertyList.js";
-import U from "./components/PropertyRow/Collapsible.js";
-import W from "./components/PropertyRow/PropertyRow.js";
-import G from "./components/Radio/Radio.js";
-import K from "./components/Table/Table.js";
-import { toast as q } from "./composables/toast.js";
-import J from "./components/Toast/Toaster.js";
-import Y from "./components/TypingIndicator/TypingIndicator.js";
-import { initColorMode as X, useColorMode as Z, useForceLightMode as Q } from "./composables/useColorMode.js";
-import { Banner as $, BulkActions as ee, CalendarMonth as te, Chip as ne, ConfirmDialog as re, Field as ie, FilterFieldPicker as ae, FormErrors as oe, ImageInput as se, InlineField as ce, InlineForm as le, LedgerMore as ue, LedgerRow as de, List as fe, Modal as pe, OptionsMenu as me, Pill as he, SortControl as ge, TextInput as _e, TypingDots as ve } from "./aliases.js";
-export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, $ as Banner, p as Board, ee as BulkActions, e as Button, m as Calendar, te as CalendarMonth, h as Checkbox, ne as Chip, U as Collapsible, re as ConfirmDialog, g as ContextMenu, _ as DataList, y as Dialog, b as DropdownMenu, V as Editable, x as EmptyState, S as ErrorSummary, ie as Field, k as FilterChip, ae as FilterFieldPicker, A as FilterMenu, oe as FormErrors, M as FormField, r as Icon, se as ImageInput, N as ImageUpload, ce as InlineField, le as InlineForm, C as Input, P as Kbd, ue as LedgerMore, de as LedgerRow, fe as List, pe as Modal, me as OptionsMenu, F as Pagination, he as Pill, I as Popover, H as PropertyList, W as PropertyRow, G as Radio, w as SegmentedControl, z as Select, f as Skeleton, ge as SortControl, j as SortMenu, L as Spinner, K as Table, R as Tag, _e as TextInput, B as Textarea, J as Toaster, i as Tooltip, ve as TypingDots, Y as TypingIndicator, T as datePresets, E as describeFilter, D as filterOperators, l as hueFor, t as iconNames, X as initColorMode, v as saveHint, n as setIconResolver, O as sortDirections, q as toast, Z as useColorMode, s as useConfirm, Q as useForceLightMode };
+import L from "./components/Popover/PopoverDialog.js";
+import R from "./components/Spinner/Spinner.js";
+import z from "./components/Tag/Tag.js";
+import B from "./components/Select/Select.js";
+import V from "./components/Textarea/Textarea.js";
+import H from "./components/PropertyList/Editable.js";
+import U from "./components/PropertyList/PropertyList.js";
+import W from "./components/PropertyRow/Collapsible.js";
+import G from "./components/PropertyRow/PropertyRow.js";
+import K from "./components/Radio/Radio.js";
+import q from "./components/Table/Table.js";
+import { toast as J } from "./composables/toast.js";
+import Y from "./components/Toast/Toaster.js";
+import X from "./components/Toolbar/Toolbar.js";
+import Z from "./components/TypingIndicator/TypingIndicator.js";
+import { initColorMode as Q, useColorMode as $, useForceLightMode as ee } from "./composables/useColorMode.js";
+import { Banner as te, BulkActions as ne, CalendarMonth as re, Chip as ie, ConfirmDialog as ae, Field as oe, FilterFieldPicker as se, FormErrors as ce, ImageInput as le, InlineField as ue, InlineForm as de, LedgerMore as fe, LedgerRow as pe, List as me, Modal as he, OptionsMenu as ge, Pill as _e, SortControl as ve, TextInput as ye, TypingDots as be } from "./aliases.js";
+export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, te as Banner, p as Board, ne as BulkActions, e as Button, m as Calendar, re as CalendarMonth, h as Checkbox, ie as Chip, W as Collapsible, ae as ConfirmDialog, g as ContextMenu, _ as DataList, y as Dialog, b as DropdownMenu, H as Editable, x as EmptyState, S as ErrorSummary, oe as Field, k as FilterChip, se as FilterFieldPicker, A as FilterMenu, ce as FormErrors, M as FormField, r as Icon, le as ImageInput, N as ImageUpload, ue as InlineField, de as InlineForm, C as Input, P as Kbd, fe as LedgerMore, pe as LedgerRow, me as List, he as Modal, ge as OptionsMenu, F as Pagination, _e as Pill, I as Popover, L as PopoverDialog, U as PropertyList, G as PropertyRow, K as Radio, w as SegmentedControl, B as Select, f as Skeleton, ve as SortControl, j as SortMenu, R as Spinner, q as Table, z as Tag, ye as TextInput, V as Textarea, Y as Toaster, X as Toolbar, i as Tooltip, be as TypingDots, Z as TypingIndicator, T as datePresets, E as describeFilter, D as filterOperators, l as hueFor, t as iconNames, Q as initColorMode, v as saveHint, n as setIconResolver, O as sortDirections, J as toast, $ as useColorMode, s as useConfirm, ee as useForceLightMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparklingopinions/sparkling-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A product-agnostic Vue 3 component library, themed by semantic tokens",
   "type": "module",
   "license": "MIT",

package/src/styles/tailwind.css

@@ -298,6 +298,19 @@
   --sui-radius-sheet: 1.25rem;
   /* Table rows and headers at one height, e.g. 44px; unset (initial), each Table's size decides. */
   --sui-table-row: initial;
+  /* The header row's own height, e.g. 36px over 44px rows; unset, it follows the rows. */
+  --sui-table-header: initial;
+  /* DataList rows and group headers at set heights, e.g. 44px and 40px; unset, 40px and 36px. */
+  --sui-list-row: initial;
+  --sui-list-header: initial;
+  /* Live toasts: their width, their gap to the viewport's edges, and insets an app sets to keep them clear of its own
+     chrome (a sidebar, a tab bar), per route or breakpoint. The safe area is added on top. */
+  --sui-toaster-width: 24rem;
+  --sui-toaster-margin: 1.25rem;
+  --sui-toaster-inset-top: 0px;
+  --sui-toaster-inset-right: 0px;
+  --sui-toaster-inset-bottom: 0px;
+  --sui-toaster-inset-left: 0px;
   --sui-shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --sui-focus-width: 2px;
   --sui-focus-offset: 2px;
@@ -364,9 +377,11 @@
   --animate-sui-sheet-in: sui-sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
   --animate-sui-sheet-out: sui-sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
   --animate-sui-toast-in: sui-toast-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-sui-toast-in-top: sui-toast-in-top 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --animate-sui-toast-out:
     sui-toast-collapse 450ms cubic-bezier(0, 1, 0, 1) forwards,
     sui-toast-fade 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  --animate-sui-toast-fade: sui-toast-fade 200ms linear forwards;
   /* Its duration is the toast's life, set inline. */
   --animate-sui-toast-timer: sui-toast-timer linear forwards;
 
@@ -457,6 +472,13 @@
     }
   }
 
+  @keyframes sui-toast-in-top {
+    from {
+      opacity: 0;
+      transform: translateY(-50%);
+    }
+  }
+
   @keyframes sui-toast-collapse {
     from {
       max-height: 1000px;