@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

package/dist/components/DropdownMenu/DropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,110 +1,90 @@
 import e from "../Button/Button.js";
 import t from "../Icon/Icon.js";
 import n from "../Tooltip/Tooltip.js";
-import { useConfirm as r } from "../../composables/useConfirm.js";
-import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v, withModifiers as y } from "vue";
-import { DropdownMenuContent as b, DropdownMenuItem as x, DropdownMenuPortal as S, DropdownMenuRoot as C, DropdownMenuSeparator as w, DropdownMenuTrigger as T } from "reka-ui";
+import r from "../internal/MenuItemContent.js";
+import { menuConfirmDefaults as i, menuContentClass as a, menuItemClass as o, menuSeparatorClass as s, useMenuSelect as c } from "../internal/menu.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, mergeDefaults as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, withCtx as C, withModifiers as w } from "vue";
+import { DropdownMenuContent as T, DropdownMenuItem as E, DropdownMenuPortal as D, DropdownMenuRoot as O, DropdownMenuSeparator as k, DropdownMenuTrigger as A } from "reka-ui";
 //#region src/components/DropdownMenu/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
-var E = { key: 0 }, D = { class: "flex-1 text-13" }, O = {
-	key: 1,
-	class: "text-11 text-sui-ink-muted"
-}, k = /*@__PURE__*/ u({
+var j = { key: 0 }, M = /*@__PURE__*/ m({
 	__name: "DropdownMenu",
-	props: {
-		id: { default: void 0 },
-		items: { default: () => [] },
-		buttonIcon: { default: "more-vertical" },
-		buttonLabel: { default: void 0 },
-		tooltip: { default: "More actions" },
-		align: { default: "start" },
-		confirmTitle: { default: "Are you sure?" },
-		confirmMessage: { default: "This can't be undone." },
-		confirmLabel: { default: "Confirm" },
-		deleteLabel: { default: "Delete" },
-		cancelLabel: { default: "Cancel" }
-	},
+	props: /*@__PURE__*/ h({
+		items: {},
+		buttonIcon: {},
+		buttonLabel: {},
+		tooltip: {},
+		align: {},
+		id: {},
+		confirmTitle: {},
+		confirmMessage: {},
+		confirmLabel: {},
+		deleteLabel: {},
+		cancelLabel: {}
+	}, {
+		...i,
+		items: () => [],
+		buttonIcon: "more-vertical",
+		buttonLabel: void 0,
+		tooltip: "More actions",
+		align: "start"
+	}),
 	emits: [
 		"click-item",
 		"show",
 		"hide"
 	],
-	setup(u, { emit: k }) {
-		let A = u, j = k, M = p(!1), N = r();
-		async function P(e) {
-			if (e.confirm || e.confirmed) {
-				let t = e.variant === "danger" || e.action === "delete";
-				if (!await N({
-					title: e.confirm?.title ?? A.confirmTitle,
-					message: e.confirm?.message ?? A.confirmMessage,
-					cancelLabel: A.cancelLabel,
-					confirmLabel: e.confirm?.acceptLabel ?? (e.action === "delete" ? A.deleteLabel : A.confirmLabel),
-					confirmVariant: t ? "danger" : "primary"
-				})) return;
-			}
-			j("click-item", {
-				id: A.id,
-				...e
-			});
-		}
+	setup(i, { emit: m }) {
+		let h = i, M = m, N = v(!1), P = c(h, (e) => M("click-item", e));
 		function F(e) {
-			M.value = e, j(e ? "show" : "hide");
+			N.value = e, M(e ? "show" : "hide");
 		}
-		return (r, p) => (f(), s("div", null, [l(_(C), {
+		return (c, m) => (_(), f("div", null, [p(S(O), {
 			modal: !1,
-			open: M.value,
+			open: N.value,
 			"onUpdate:open": F
 		}, {
-			default: v(() => [l(_(T), { "as-child": "" }, {
-				default: v(() => [l(n, {
-					disabled: !u.tooltip || M.value,
-					text: u.tooltip ?? void 0
+			default: C(() => [p(S(A), { "as-child": "" }, {
+				default: C(() => [p(n, {
+					disabled: !i.tooltip || N.value,
+					text: i.tooltip ?? void 0
 				}, {
-					default: v(() => [h(r.$slots, "trigger", { open: M.value }, () => [l(e, {
-						"aria-label": u.buttonLabel ? void 0 : u.tooltip ?? void 0,
-						"icon-only": !u.buttonLabel,
+					default: C(() => [b(c.$slots, "trigger", { open: N.value }, () => [p(e, {
+						"aria-label": i.buttonLabel ? void 0 : i.tooltip ?? void 0,
+						"icon-only": !i.buttonLabel,
 						size: "sm",
 						type: "button",
 						variant: "ghost",
-						onClick: p[0] ||= y(() => {}, ["stop"])
+						onClick: m[0] ||= w(() => {}, ["stop"])
 					}, {
-						default: v(() => [u.buttonLabel ? (f(), s("span", E, g(u.buttonLabel), 1)) : o("", !0), u.buttonIcon ? (f(), a(t, {
+						default: C(() => [i.buttonLabel ? (_(), f("span", j, x(i.buttonLabel), 1)) : d("", !0), i.buttonIcon ? (_(), u(t, {
 							key: 1,
 							color: "ink-subtle",
-							name: u.buttonIcon
-						}, null, 8, ["name"])) : o("", !0)]),
+							name: i.buttonIcon
+						}, null, 8, ["name"])) : d("", !0)]),
 						_: 1
 					}, 8, ["aria-label", "icon-only"])])]),
 					_: 3
 				}, 8, ["disabled", "text"])]),
 				_: 3
-			}), l(_(S), null, {
-				default: v(() => [l(_(b), {
-					align: u.align,
-					class: "z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in",
+			}), p(S(D), null, {
+				default: C(() => [p(S(T), {
+					align: i.align,
+					class: g([S(a), "min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]"]),
 					side: "bottom"
 				}, {
-					default: v(() => [(f(!0), s(i, null, m(u.items, (e, n) => (f(), s(i, { key: n }, [e.type === "separator" ? (f(), a(_(w), {
+					default: C(() => [(_(!0), f(l, null, y(i.items, (e, t) => (_(), f(l, { key: t }, [e.type === "separator" ? (_(), u(S(k), {
 						key: 0,
-						class: "my-1 border-t border-sui-line-subtle"
-					})) : (f(), a(_(x), {
+						class: g(S(s))
+					}, null, 8, ["class"])) : (_(), u(S(E), {
 						key: 1,
-						class: "relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken",
-						onSelect: (t) => P(e)
+						class: g(S(o)),
+						onSelect: (t) => S(P)(e)
 					}, {
-						default: v(() => [c("div", { class: d(["flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5", e.variant === "danger" ? "text-sui-danger" : "text-sui-ink"]) }, [
-							e.icon ? (f(), a(t, {
-								key: 0,
-								class: "h-4 w-4 shrink-0",
-								color: e.variant === "danger" ? "danger" : "ink-muted",
-								name: e.icon
-							}, null, 8, ["color", "name"])) : o("", !0),
-							c("span", D, g(e.label), 1),
-							e.shortcut ? (f(), s("span", O, g(e.shortcut), 1)) : o("", !0)
-						], 2)]),
+						default: C(() => [p(r, { item: e }, null, 8, ["item"])]),
 						_: 2
-					}, 1032, ["onSelect"]))], 64))), 128))]),
+					}, 1032, ["class", "onSelect"]))], 64))), 128))]),
 					_: 1
-				}, 8, ["align"])]),
+				}, 8, ["align", "class"])]),
 				_: 1
 			})]),
 			_: 3
@@ -112,6 +92,6 @@ var E = { key: 0 }, D = { class: "flex-1 text-13" }, O = {
 	}
 });
 //#endregion
-export { k as default };
+export { M as default };
 
 //# sourceMappingURL=DropdownMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","Tooltip","_renderSlot","Button","_withModifiers","_toDisplayString","_createCommentVNode","_createBlock","Icon","_Fragment","_renderList","_createElementVNode","_normalizeClass","Button_default","Icon_default","Tooltip_default","_hoisted_1","_hoisted_2","_hoisted_3","DropdownMenu_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","open","ref","confirm","useConfirm","select","item","destructive","onOpenChange","value","openBlock","createElementBlock","createVNode","unref","DropdownMenuRoot","withCtx","DropdownMenuTrigger","renderSlot","_ctx","_cache","withModifiers","toDisplayString","createCommentVNode","createBlock","DropdownMenuPortal","DropdownMenuContent","Fragment","renderList","index","DropdownMenuSeparator","DropdownMenuItem","createElementVNode","normalizeClass"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport { useConfirm } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\nexport interface DropdownMenuProps {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  id: undefined,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start',\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst confirm = useConfirm()\n\nasync function select(item: DropdownMenuAction) {\n  if (item.confirm || item.confirmed) {\n    const destructive = item.variant === 'danger' || item.action === 'delete'\n    const confirmed = await confirm({\n      title: item.confirm?.title ?? props.confirmTitle,\n      message: item.confirm?.message ?? props.confirmMessage,\n      cancelLabel: props.cancelLabel,\n      confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n      confirmVariant: destructive ? 'danger' : 'primary'\n    })\n    if (!confirmed) return\n  }\n  emit('click-item', { id: props.id, ...item })\n}\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          class=\"z-[1100] min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" class=\"my-1 border-t border-sui-line-subtle\" />\n            <DropdownMenuItem\n              v-else\n              class=\"relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken\"\n              @select=\"select(item)\"\n            >\n              <div\n                class=\"flex cursor-pointer items-center gap-2.5 px-2.5 py-1.5\"\n                :class=\"item.variant === 'danger' ? 'text-sui-danger' : 'text-sui-ink'\"\n              >\n                <Icon\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4 shrink-0\"\n                  :color=\"item.variant === 'danger' ? 'danger' : 'ink-muted'\"\n                  :name=\"item.icon\"\n                />\n                <span class=\"flex-1 text-13\">{{ item.label }}</span>\n                <span v-if=\"item.shortcut\" class=\"text-11 text-sui-ink-muted\">{{ item.shortcut }}</span>\n              </div>\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,IAAMyB,IAAQC,GAcRC,IAAOH,GAEPI,IAAOC,EAAI,EAAK,GAChBC,IAAUC,EAAW;EAE3B,eAAeC,EAAO,GAA0B;GAC9C,IAAIC,EAAK,WAAWA,EAAK,WAAW;IAClC,IAAMC,IAAcD,EAAK,YAAY,YAAYA,EAAK,WAAW;IAQjE,IAAI,CAAC,MAPmBH,EAAQ;KAC9B,OAAOG,EAAK,SAAS,SAASR,EAAM;KACpC,SAASQ,EAAK,SAAS,WAAWR,EAAM;KACxC,aAAaA,EAAM;KACnB,cAAcQ,EAAK,SAAS,gBAAgBA,EAAK,WAAW,WAAWR,EAAM,cAAcA,EAAM;KACjG,gBAAgBS,IAAc,WAAW;IAC3C,CAAC,GACe;GAClB;GACA,EAAK,cAAc;IAAE,IAAIT,EAAM;IAAI,GAAGQ;GAAK,CAAC;EAC9C;EAEA,SAASE,EAAa,GAAgB;GAEpC,AADA,EAAK,QAAQC,GACFT,EAAPS,IAAY,SACN,MAAM;EAClB;E,kBAIEpC,EAAA,GAAAC,EAoDM,OAAA,MAAA,CAlDJC,EAiDmBC,EAAAsC,CAAA,GAAA;GAjDA,OAAO;GAAQ,MAAMb,EAAA;GAAO,iBAAaO;;GAE1D,SAAA/B,QAgBsB,CAhBtBF,EAgBsBC,EAAAwC,CAAA,GAAA,EAhBD,YAAA,GAAQ,GAAA;IAC3B,SAAAvC,QAcU,CAdVF,EAcUG,GAAA;KAdA,UAAQ,CAAGqB,EAAA,WAAWE,EAAA;KAAO,MAAMF,EAAA,WAAW,KAAA;;KACtD,SAAAtB,QAYO,CAZPE,EAYOuC,EAAA,QAAA,WAAA,EAZe,MAAMjB,EAAA,MAAI,SAYzB,CAXL1B,EAUSK,GAAA;MATN,cAAYmB,EAAA,cAAc,KAAA,IAAaA,EAAA,WAAW,KAAA;MAClD,aAAS,CAAGA,EAAA;MACb,MAAK;MACL,MAAK;MACL,SAAQ;MACP,SAAK,AAAAoB,EAAA,OAAAtC,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;MAEX,SAAAJ,QAAiD,CAArCsB,EAAA,eAAZ1B,EAAA,GAAAC,EAAiD,QAAAmB,GAAAX,EAArBiB,EAAA,WAAW,GAAA,CAAA,K,WAC3BA,EAAA,cAAZ1B,EAAA,GAAAW,EAAgEC,GAAA;;OAAxC,OAAM;OAAc,MAAMc,EAAA;;;;;;;G,IAK1DxB,EA6BqBC,EAAAgD,CAAA,GAAA,MAAA;IA5BnB,SAAA/C,QA2BsB,CA3BtBF,EA2BsBC,EAAAiD,CAAA,GAAA;KA1BnB,OAAO1B,EAAA;KACR,OAAM;KACN,MAAK;;KAEK,SAAAtB,QAA8B,EAAxCJ,EAAA,EAAA,GAAAC,EAqBWY,GAAA,MAAAC,EArBuBY,EAAA,QAAhB,GAAM,OAAuB1B,EAAA,GAAAC,EAAAY,GAAA,EAAA,KAAA0C,EAAK,GAAA,CACrBtB,EAAK,SAAI,eAAtCjC,EAAA,GAAAW,EAAuGR,EAAAqD,CAAA,GAAA;;MAA/C,OAAM;K,OAC9DxD,EAAA,GAAAW,EAkBmBR,EAAAsD,CAAA,GAAA;;MAhBjB,OAAM;MACL,WAAM,MAAEzB,EAAOC,CAAI;;MAEpB,SAAA7B,QAYM,CAZNW,EAYM,OAAA,EAXJ,OAAKC,EAAA,CAAC,0DACEiB,EAAK,YAAO,WAAA,oBAAA,cAAA,CAAA,E;OAGZA,EAAK,QADbjC,EAAA,GAAAW,EAKEC,GAAA;;QAHA,OAAM;QACL,OAAOqB,EAAK,YAAO,WAAA,WAAA;QACnB,MAAMA,EAAK;;OAEdlB,EAAoD,QAApDM,GAAoDZ,EAApBwB,EAAK,KAAK,GAAA,CAAA;OAC9BA,EAAK,YAAjBjC,EAAA,GAAAC,EAAwF,QAAxFqB,GAAwFb,EAAvBwB,EAAK,QAAQ,GAAA,CAAA,K"}
+{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","Tooltip","_renderSlot","Button","_withModifiers","_toDisplayString","_createCommentVNode","_createBlock","Icon","_normalizeClass","_Fragment","_renderList","MenuItemContent","Button_default","Icon_default","Tooltip_default","MenuItemContent_default","_hoisted_1","DropdownMenu_vue_vue_type_script_setup_true_lang_default","menuConfirmDefaults","__emit","props","__props","emit","open","ref","select","useMenuSelect","item","onOpenChange","value","openBlock","createElementBlock","createVNode","unref","DropdownMenuRoot","withCtx","DropdownMenuTrigger","renderSlot","_ctx","_cache","withModifiers","toDisplayString","createCommentVNode","createBlock","DropdownMenuPortal","DropdownMenuContent","normalizeClass","menuContentClass","Fragment","renderList","index","DropdownMenuSeparator","menuSeparatorClass","DropdownMenuItem","menuItemClass"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport type { DropdownMenuAction, DropdownMenuEntry }\n\nexport interface DropdownMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          :class=\"[menuContentClass, 'min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]']\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n            <DropdownMenuItem v-else :class=\"menuItemClass\" @select=\"select(item)\">\n              <MenuItemContent :item=\"item\" />\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAMyB,IAAQC,GASRC,IAAOH,GAEPI,IAAOC,EAAI,EAAK,GAChBC,IAASC,EAAcN,IAAQ,MAASE,EAAK,cAAcK,CAAI,CAAC;EAEtE,SAASC,EAAa,GAAgB;GAEpC,AADA,EAAK,QAAQC,GACFP,EAAPO,IAAY,SACN,MAAM;EAClB;E,kBAIElC,EAAA,GAAAC,EAoCM,OAAA,MAAA,CAlCJC,EAiCmBC,EAAAoC,CAAA,GAAA;GAjCA,OAAO;GAAQ,MAAMX,EAAA;GAAO,iBAAaK;;GAE1D,SAAA7B,QAgBsB,CAhBtBF,EAgBsBC,EAAAsC,CAAA,GAAA,EAhBD,YAAA,GAAQ,GAAA;IAC3B,SAAArC,QAcU,CAdVF,EAcUG,GAAA;KAdA,UAAQ,CAAGqB,EAAA,WAAWE,EAAA;KAAO,MAAMF,EAAA,WAAW,KAAA;;KACtD,SAAAtB,QAYO,CAZPE,EAYOqC,EAAA,QAAA,WAAA,EAZe,MAAMf,EAAA,MAAI,SAYzB,CAXL1B,EAUSK,GAAA;MATN,cAAYmB,EAAA,cAAc,KAAA,IAAaA,EAAA,WAAW,KAAA;MAClD,aAAS,CAAGA,EAAA;MACb,MAAK;MACL,MAAK;MACL,SAAQ;MACP,SAAK,AAAAkB,EAAA,OAAApC,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;MAEX,SAAAJ,QAAiD,CAArCsB,EAAA,eAAZ1B,EAAA,GAAAC,EAAiD,QAAAoB,GAAAZ,EAArBiB,EAAA,WAAW,GAAA,CAAA,K,WAC3BA,EAAA,cAAZ1B,EAAA,GAAAW,EAAgEC,GAAA;;OAAxC,OAAM;OAAc,MAAMc,EAAA;;;;;;;G,IAK1DxB,EAaqBC,EAAA8C,CAAA,GAAA,MAAA;IAZnB,SAAA7C,QAWsB,CAXtBF,EAWsBC,EAAA+C,CAAA,GAAA;KAVnB,OAAOxB,EAAA;KACP,OAAKb,EAAA,CAAGV,EAAAiD,CAAA,GAAgB,4DAAA,CAAA;KACzB,MAAK;;KAEK,SAAAhD,QAA8B,EAAxCJ,EAAA,EAAA,GAAAC,EAKWa,GAAA,MAAAC,EALuBW,EAAA,QAAhB,GAAM,OAAuB1B,EAAA,GAAAC,EAAAa,GAAA,EAAA,KAAAyC,EAAK,GAAA,CACrBvB,EAAK,SAAI,eAAtChC,EAAA,GAAAW,EAAsFR,EAAAqD,CAAA,GAAA;;MAA7B,OAAK3C,EAAEV,EAAAsD,CAAA,CAAkB;K,2BAClFzD,EAAA,GAAAW,EAEmBR,EAAAuD,CAAA,GAAA;;MAFO,OAAK7C,EAAEV,EAAAwD,CAAA,CAAa;MAAG,WAAM,MAAExD,EAAA2B,CAAA,CAAM,CAACE,CAAI;;MAClE,SAAA5B,QAAgC,CAAhCF,EAAgCc,GAAA,EAAR,QAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C"}

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

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

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

@@ -11,18 +11,24 @@ export interface EmptyStateProps {
     actionIcon?: string;
     /** The title's heading level, to fit the page's outline. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** sm, for an empty card in settings or a tray: an optional 16px icon, the title as one muted line of text (not a
+     *  heading), a small secondary action. No description. */
+    size?: 'md' | 'sm';
 }
-declare var __VLS_12: {}, __VLS_14: {};
+declare var __VLS_6: {}, __VLS_32: {}, __VLS_34: {};
 type __VLS_Slots = {} & {
-    description?: (props: typeof __VLS_12) => any;
+    action?: (props: typeof __VLS_6) => any;
 } & {
-    action?: (props: typeof __VLS_14) => any;
+    description?: (props: typeof __VLS_32) => any;
+} & {
+    action?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<EmptyStateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: () => any;
 }, string, import("vue").PublicProps, Readonly<EmptyStateProps> & Readonly<{
     onAction?: (() => any) | undefined;
 }>, {
+    size: "sm" | "md";
     icon: string;
     tone: "accent" | "neutral";
     headingLevel: 1 | 2 | 3 | 4 | 5 | 6;

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

@@ -2,7 +2,13 @@ import e from "../Button/Button.js";
 import t from "../Icon/Icon.js";
 import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
 //#region src/components/EmptyState/EmptyState.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-center" }, g = { class: "max-w-xs text-sm leading-relaxed text-sui-ink-muted" }, _ = /*@__PURE__*/ c({
+var h = {
+	key: 0,
+	class: "flex flex-col items-center justify-center gap-2 px-4 py-5 text-center"
+}, g = { class: "m-0 max-w-full text-13 leading-5 text-sui-ink-muted" }, _ = {
+	key: 1,
+	class: "flex flex-col items-center justify-center px-6 py-16 text-center"
+}, v = { class: "max-w-xs text-sm leading-relaxed text-sui-ink-muted" }, y = /*@__PURE__*/ c({
 	__name: "EmptyState",
 	props: {
 		title: {},
@@ -11,11 +17,33 @@ var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-cent
 		tone: { default: "accent" },
 		actionLabel: { default: void 0 },
 		actionIcon: { default: "plus" },
-		headingLevel: { default: 2 }
+		headingLevel: { default: 2 },
+		size: { default: "md" }
 	},
 	emits: ["action"],
 	setup(c) {
-		return (_, v) => (u(), i("div", h, [
+		return (y, b) => c.size === "sm" ? (u(), i("div", h, [
+			c.icon ? (u(), n(t, {
+				key: 0,
+				class: "size-4",
+				color: "ink-muted",
+				name: c.icon
+			}, null, 8, ["name"])) : r("", !0),
+			a("p", g, p(c.title), 1),
+			d(y.$slots, "action", {}, () => [c.actionLabel ? (u(), n(e, {
+				key: 0,
+				class: "mt-1",
+				size: "sm",
+				variant: "secondary",
+				onClick: b[0] ||= (e) => y.$emit("action")
+			}, {
+				default: m(() => [c.actionIcon ? (u(), n(t, {
+					key: 0,
+					name: c.actionIcon
+				}, null, 8, ["name"])) : r("", !0), o(" " + p(c.actionLabel), 1)]),
+				_: 1
+			})) : r("", !0)])
+		])) : (u(), i("div", _, [
 			c.icon ? (u(), i("div", {
 				key: 0,
 				"aria-hidden": "true",
@@ -29,12 +57,12 @@ var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-cent
 				default: m(() => [o(p(c.title), 1)]),
 				_: 1
 			})),
-			a("div", g, [d(_.$slots, "description", {}, () => [o(p(c.description), 1)])]),
-			d(_.$slots, "action", {}, () => [c.actionLabel ? (u(), n(e, {
+			a("div", v, [d(y.$slots, "description", {}, () => [o(p(c.description), 1)])]),
+			d(y.$slots, "action", {}, () => [c.actionLabel ? (u(), n(e, {
 				key: 0,
 				class: "mt-4",
 				variant: "primary",
-				onClick: v[0] ||= (e) => _.$emit("action")
+				onClick: b[1] ||= (e) => y.$emit("action")
 			}, {
 				default: m(() => [c.actionIcon ? (u(), n(t, {
 					key: 0,
@@ -46,6 +74,6 @@ var h = { class: "flex flex-col items-center justify-center px-6 py-16 text-cent
 	}
 });
 //#endregion
-export { _ as default };
+export { y as default };
 
 //# sourceMappingURL=EmptyState.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/Filters/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","names":["_sfc_main","FilterChip_vue_vue_type_script_setup_true_lang_default","FilterChip_default"],"sources":["../../../src/components/Filters/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  RadioGroupItem,\n  RadioGroupRoot\n} from 'reka-ui'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Input from '../Input/Input.vue'\nimport SegmentedControl from '../SegmentedControl/SegmentedControl.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport { datePresets as defaultDatePresets, describeFilter, filterOperators } from './defaults'\nimport type { FilterFieldType, FilterOperator, FilterOption, FilterValue } from './types'\n\nexport interface FilterChipProps {\n  /** A filter, read as a sentence; `add` is the quiet \"+ Filter\" that starts one (FilterMenu includes it). */\n  kind?: 'filter' | 'add'\n  field?: string\n  /** Picks the editor: a checklist for enum, person and company, an input for text and number, presets for date, Yes / No for boolean. */\n  type?: FilterFieldType\n  /** An app icon for the field, instead of the type's glyph. */\n  icon?: string\n  /** The operators offered; English ones by type by default. */\n  operators?: FilterOperator[]\n  /** The choices for enum, person and company. */\n  options?: FilterOption[]\n  /** The live result count in the panel's footer, e.g. \"120 people\". */\n  status?: string\n  /** The plural noun once more than two values are picked: \"3 stages\". */\n  valueLabel?: string\n  datePresets?: string[]\n  /** Adds a Remove action to the panel (`@remove`). */\n  onRemove?: () => void\n  removeLabel?: string\n  addLabel?: string\n  operatorLabel?: string\n  searchPlaceholder?: string\n  valuePlaceholder?: string\n  doneLabel?: string\n  closeLabel?: string\n  yesLabel?: string\n  noLabel?: string\n}\n\n// Attributes and listeners go to the chip itself; the root is a renderless popover.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilterChipProps>(), {\n  kind: 'filter',\n  field: undefined,\n  type: 'enum',\n  icon: undefined,\n  operators: undefined,\n  options: () => [],\n  status: undefined,\n  valueLabel: 'values',\n  datePresets: () => defaultDatePresets,\n  onRemove: undefined,\n  removeLabel: 'Remove',\n  addLabel: 'Filter',\n  operatorLabel: 'Operator',\n  searchPlaceholder: 'Search…',\n  valuePlaceholder: 'Type a value',\n  doneLabel: 'Done',\n  closeLabel: 'Close',\n  yesLabel: 'Yes',\n  noLabel: 'No'\n})\n\nconst op = defineModel<string>('op')\nconst value = defineModel<FilterValue>({ default: null })\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** Your own editor, in place of the type's. */\n  default?: () => unknown\n}>()\n\nconst attrs = useAttrs()\n\nconst ops = computed(() => props.operators ?? filterOperators[props.type])\nconst current = computed(() => ops.value.find((o) => o.value === op.value))\nconst needsValue = computed(() => !current.value?.noValue)\nconst text = computed(() =>\n  needsValue.value\n    ? describeFilter(value.value, props.options, {\n        valueLabel: props.valueLabel,\n        yesLabel: props.yesLabel,\n        noLabel: props.noLabel\n      })\n    : ''\n)\nconst isChecklist = computed(() => ['enum', 'person', 'company'].includes(props.type))\n\nconst query = ref('')\nconst listed = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst picked = computed(() => (Array.isArray(value.value) ? value.value : []))\n\nfunction toggle(choice: string | number) {\n  value.value = picked.value.includes(choice) ? picked.value.filter((v) => v !== choice) : [...picked.value, choice]\n}\n\nfunction remove() {\n  open.value = false\n  props.onRemove?.()\n}\n\nconst chip =\n  'inline-flex h-7.5 items-center gap-1.5 rounded-lg border text-13 whitespace-nowrap outline-hidden transition-[border-color,box-shadow] duration-150 focus-visible:sui-ring'\nconst row =\n  'flex min-h-8 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset'\nconst rowOn = 'bg-sui-accent-wash font-semibold text-sui-accent'\nconst rowOff = 'text-sui-ink hover:bg-sui-sunken'\nconst hueDots: Record<string, 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}\n</script>\n\n<!-- A view's filter as a sentence chip (\"Stage is any of Lead, Customer\"), whose panel changes it as you go. -->\n<template>\n  <button\n    v-if=\"kind === 'add'\"\n    v-bind=\"attrs\"\n    class=\"border-dashed border-sui-line-strong px-2 font-medium text-sui-ink-muted hover:border-sui-ink-muted hover:text-sui-ink-body\"\n    :class=\"chip\"\n    type=\"button\"\n  >\n    <FilterGlyph name=\"plus\" />\n    {{ addLabel }}\n  </button>\n  <PopoverRoot v-else v-model:open=\"open\">\n    <PopoverTrigger\n      v-bind=\"attrs\"\n      class=\"border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-sui-accent hover:border-sui-accent-bright data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n      :class=\"chip\"\n    >\n      <Icon v-if=\"icon\" class=\"size-3.5 opacity-80\" color=\"accent\" :name=\"icon\" />\n      <FilterGlyph v-else class=\"opacity-80\" :name=\"type\" />\n      <!-- Real spaces between the words, so the chip's name reads as a sentence. -->\n      <span\n        ><span class=\"font-medium\">{{ field }}</span\n        ><template v-if=\"current\">{{ ' ' }}{{ current.label }}</template\n        ><template v-if=\"text\"\n          >{{ ' ' }}<span class=\"font-semibold\">{{ text }}</span></template\n        ></span\n      >\n      <svg\n        aria-hidden=\"true\"\n        class=\"size-3.5 shrink-0 fill-none stroke-current opacity-70\"\n        stroke-linecap=\"round\"\n        stroke-width=\"2.2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M6 9l6 6 6-6\" />\n      </svg>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :side-offset=\"8\"\n      >\n        <FilterFrame :close-label=\"closeLabel\" :enter-label=\"doneLabel\" :status=\"status\" @enter=\"open = false\">\n          <div class=\"flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted\">\n            <Icon v-if=\"icon\" color=\"ink-muted\" :name=\"icon\" />\n            <FilterGlyph v-else class=\"size-4\" :name=\"type\" />\n            <span class=\"text-sm font-semibold text-sui-ink\">{{ field }}</span>\n            <DropdownMenuRoot v-if=\"ops.length > 1\">\n              <DropdownMenuTrigger\n                :aria-label=\"`${operatorLabel}: ${current?.label ?? ''}`\"\n                class=\"inline-flex h-7 items-center gap-0.5 rounded-md pr-1 pl-1.5 text-13.5 font-medium text-sui-accent outline-hidden transition-colors duration-150 hover:bg-sui-accent-wash focus-visible:sui-ring-inset data-[state=open]:bg-sui-accent-wash\"\n              >\n                {{ current?.label }}\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"size-3.5 fill-none stroke-current\"\n                  stroke-linecap=\"round\"\n                  stroke-width=\"2.2\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path d=\"M6 9l6 6 6-6\" />\n                </svg>\n              </DropdownMenuTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuContent\n                  align=\"start\"\n                  class=\"z-[1100] w-44 rounded-lg border border-sui-line bg-sui-surface p-1 shadow-lg data-[state=open]:animate-sui-menu-in\"\n                  :side-offset=\"4\"\n                >\n                  <DropdownMenuRadioGroup v-model=\"op\">\n                    <DropdownMenuRadioItem\n                      v-for=\"operator in ops\"\n                      :key=\"operator.value\"\n                      class=\"flex h-8 cursor-pointer items-center justify-between rounded-md px-2.5 text-13.5 text-sui-ink-body outline-hidden select-none data-highlighted:bg-sui-sunken data-[state=checked]:font-semibold data-[state=checked]:text-sui-ink\"\n                      :value=\"operator.value\"\n                    >\n                      {{ operator.label }}\n                      <CheckIcon v-if=\"operator.value === op\" />\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuContent>\n              </DropdownMenuPortal>\n            </DropdownMenuRoot>\n            <span v-else class=\"text-13.5 text-sui-ink-muted\">{{ current?.label }}</span>\n            <button\n              v-if=\"onRemove\"\n              class=\"ml-auto inline-flex h-7 items-center gap-1.5 rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-danger-soft hover:text-sui-danger focus-visible:sui-ring-inset\"\n              type=\"button\"\n              @click=\"remove\"\n            >\n              <FilterGlyph name=\"trash\" />\n              {{ removeLabel }}\n            </button>\n          </div>\n\n          <slot v-if=\"$slots.default\" />\n          <template v-else-if=\"needsValue\">\n            <template v-if=\"isChecklist\">\n              <div\n                v-if=\"options.length > 6\"\n                class=\"mx-2 mb-1 flex h-9 items-center gap-2 rounded-lg border border-sui-line-subtle px-2.5 text-sui-ink-muted\"\n              >\n                <FilterGlyph class=\"size-4\" name=\"search\" />\n                <!-- focus: classes too: an app's forms plugin rings focused text fields, and outranks plain utilities. -->\n                <input\n                  v-model=\"query\"\n                  :aria-label=\"searchPlaceholder\"\n                  autofocus\n                  class=\"h-full min-w-0 flex-1 border-none bg-transparent p-0 text-sm text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n                  :placeholder=\"searchPlaceholder\"\n                />\n              </div>\n              <div class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\">\n                <label\n                  v-for=\"option in listed\"\n                  :key=\"option.value\"\n                  :class=\"[row, picked.includes(option.value) ? rowOn : rowOff]\"\n                >\n                  <Checkbox :model-value=\"picked.includes(option.value)\" @update:model-value=\"toggle(option.value)\" />\n                  <span v-if=\"option.color\" class=\"size-1.5 shrink-0 rounded-full\" :class=\"hueDots[option.color]\" />\n                  <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n                  <span v-if=\"option.count != null\" class=\"text-xs font-normal text-sui-ink-muted tabular-nums\">{{\n                    option.count\n                  }}</span>\n                </label>\n              </div>\n            </template>\n            <div v-else-if=\"type === 'text' || type === 'number'\" class=\"px-2 pt-1 pb-2\">\n              <Input\n                :aria-label=\"field\"\n                autofocus\n                :model-value=\"value == null ? '' : String(value)\"\n                :placeholder=\"valuePlaceholder\"\n                :type=\"type === 'number' ? 'number' : 'text'\"\n                @update:model-value=\"value = $event ?? null\"\n              />\n            </div>\n            <RadioGroupRoot\n              v-else-if=\"type === 'date'\"\n              :aria-label=\"field\"\n              class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\"\n              :model-value=\"typeof value === 'string' ? value : undefined\"\n              @update:model-value=\"value = String($event)\"\n            >\n              <RadioGroupItem\n                v-for=\"preset in datePresets\"\n                :key=\"preset\"\n                :class=\"[row, preset === value ? rowOn : rowOff]\"\n                :value=\"preset\"\n              >\n                <FilterGlyph\n                  class=\"size-4\"\n                  :class=\"preset === value ? 'text-sui-accent' : 'text-sui-ink-muted'\"\n                  name=\"date\"\n                />\n                <span class=\"min-w-0 flex-1 truncate\">{{ preset }}</span>\n                <CheckIcon v-if=\"preset === value\" />\n              </RadioGroupItem>\n            </RadioGroupRoot>\n            <div v-else-if=\"type === 'boolean'\" class=\"px-2.5 pt-1 pb-2.5\">\n              <SegmentedControl\n                :aria-label=\"field\"\n                :model-value=\"value ? 'yes' : 'no'\"\n                :options=\"[\n                  { value: 'yes', label: yesLabel },\n                  { value: 'no', label: noLabel }\n                ]\"\n                @update:model-value=\"value = $event === 'yes'\"\n              />\n            </div>\n          </template>\n        </FilterFrame>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"FilterChip.js","names":["_sfc_main","FilterChip_vue_vue_type_script_setup_true_lang_default","FilterChip_default"],"sources":["../../../src/components/Filters/FilterChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  RadioGroupItem,\n  RadioGroupRoot\n} from 'reka-ui'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Input from '../Input/Input.vue'\nimport SegmentedControl from '../SegmentedControl/SegmentedControl.vue'\nimport CheckIcon from '../internal/CheckIcon.vue'\nimport FilterFrame from './FilterFrame.vue'\nimport FilterGlyph from './FilterGlyph.vue'\nimport { datePresets as defaultDatePresets, describeFilter, filterOperators } from './defaults'\nimport type { FilterFieldType, FilterOperator, FilterOption, FilterSummary, FilterValue } from './types'\n\nexport interface FilterChipProps {\n  /** A filter, read as a sentence; `add` is the quiet \"+ Filter\" that starts one (FilterMenu includes it). */\n  kind?: 'filter' | 'add'\n  field?: string\n  /** Picks the editor: a checklist for enum, person and company, an input for text and number, presets for date, Yes / No for boolean. */\n  type?: FilterFieldType\n  /** An app icon for the field, instead of the type's glyph. */\n  icon?: string\n  /** The operators offered; English ones by type by default. */\n  operators?: FilterOperator[]\n  /** The choices for enum, person and company. */\n  options?: FilterOption[]\n  /** Your own wording for the chip, in place of field, operator and value: \"Not archived\", \"Created in the last 7 days\". */\n  summary?: FilterSummary\n  /** The live result count in the panel's footer, e.g. \"120 people\". */\n  status?: string\n  /** The plural noun once more than two values are picked: \"3 stages\". */\n  valueLabel?: string\n  datePresets?: string[]\n  /** Adds a Remove action to the panel (`@remove`). */\n  onRemove?: () => void\n  removeLabel?: string\n  addLabel?: string\n  operatorLabel?: string\n  searchPlaceholder?: string\n  valuePlaceholder?: string\n  doneLabel?: string\n  closeLabel?: string\n  yesLabel?: string\n  noLabel?: string\n}\n\n// Attributes and listeners go to the chip itself; the root is a renderless popover.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilterChipProps>(), {\n  kind: 'filter',\n  field: undefined,\n  type: 'enum',\n  icon: undefined,\n  operators: undefined,\n  options: () => [],\n  summary: undefined,\n  status: undefined,\n  valueLabel: 'values',\n  datePresets: () => defaultDatePresets,\n  onRemove: undefined,\n  removeLabel: 'Remove',\n  addLabel: 'Filter',\n  operatorLabel: 'Operator',\n  searchPlaceholder: 'Search…',\n  valuePlaceholder: 'Type a value',\n  doneLabel: 'Done',\n  closeLabel: 'Close',\n  yesLabel: 'Yes',\n  noLabel: 'No'\n})\n\nconst op = defineModel<string>('op')\nconst value = defineModel<FilterValue>({ default: null })\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** Your own editor, in place of the type's. */\n  default?: () => unknown\n}>()\n\nconst attrs = useAttrs()\n\nconst ops = computed(() => props.operators ?? filterOperators[props.type])\nconst current = computed(() => ops.value.find((o) => o.value === op.value))\nconst needsValue = computed(() => !current.value?.noValue)\nconst text = computed(() =>\n  needsValue.value\n    ? describeFilter(value.value, props.options, {\n        valueLabel: props.valueLabel,\n        yesLabel: props.yesLabel,\n        noLabel: props.noLabel\n      })\n    : ''\n)\nconst words = computed(() => ({\n  field: props.summary?.field ?? props.field,\n  op: props.summary ? props.summary.op : current.value?.label,\n  value: props.summary ? props.summary.value : text.value\n}))\nconst isChecklist = computed(() => ['enum', 'person', 'company'].includes(props.type))\n\nconst query = ref('')\nconst listed = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst picked = computed(() => (Array.isArray(value.value) ? value.value : []))\n\nfunction toggle(choice: string | number) {\n  value.value = picked.value.includes(choice) ? picked.value.filter((v) => v !== choice) : [...picked.value, choice]\n}\n\nfunction remove() {\n  open.value = false\n  props.onRemove?.()\n}\n\nconst chip =\n  'inline-flex h-7.5 items-center gap-1.5 rounded-lg border text-13 whitespace-nowrap outline-hidden transition-[border-color,box-shadow] duration-150 focus-visible:sui-ring'\nconst row =\n  'flex min-h-8 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1 text-left text-13.5 outline-hidden transition-colors duration-100 focus-visible:sui-ring-inset'\nconst rowOn = 'bg-sui-accent-wash font-semibold text-sui-accent'\nconst rowOff = 'text-sui-ink hover:bg-sui-sunken'\nconst hueDots: Record<string, 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}\n</script>\n\n<!-- A view's filter as a sentence chip (\"Stage is any of Lead, Customer\"), whose panel changes it as you go. -->\n<template>\n  <button\n    v-if=\"kind === 'add'\"\n    v-bind=\"attrs\"\n    class=\"border-dashed border-sui-line-strong px-2 font-medium text-sui-ink-muted hover:border-sui-ink-muted hover:text-sui-ink-body\"\n    :class=\"chip\"\n    type=\"button\"\n  >\n    <FilterGlyph name=\"plus\" />\n    {{ addLabel }}\n  </button>\n  <PopoverRoot v-else v-model:open=\"open\">\n    <PopoverTrigger\n      v-bind=\"attrs\"\n      class=\"border-sui-accent-line bg-sui-accent-wash pr-1.5 pl-2 text-sui-accent hover:border-sui-accent-bright data-[state=open]:border-sui-accent-solid data-[state=open]:shadow-[0_0_0_3px_rgb(var(--sui-focus-ring))]\"\n      :class=\"chip\"\n    >\n      <Icon v-if=\"icon\" class=\"size-3.5 opacity-80\" color=\"accent\" :name=\"icon\" />\n      <FilterGlyph v-else class=\"opacity-80\" :name=\"type\" />\n      <!-- Real spaces between the words, so the chip's name reads as a sentence. -->\n      <span\n        ><span class=\"font-medium\">{{ words.field }}</span\n        ><template v-if=\"words.op\">{{ ' ' }}{{ words.op }}</template\n        ><template v-if=\"words.value\"\n          >{{ ' ' }}<span class=\"font-semibold\">{{ words.value }}</span></template\n        ></span\n      >\n      <svg\n        aria-hidden=\"true\"\n        class=\"size-3.5 shrink-0 fill-none stroke-current opacity-70\"\n        stroke-linecap=\"round\"\n        stroke-width=\"2.2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M6 9l6 6 6-6\" />\n      </svg>\n    </PopoverTrigger>\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        class=\"z-[1100] w-85 max-w-[calc(100vw-2rem)] origin-(--reka-popover-content-transform-origin) rounded-xl border border-sui-line bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-overlay-in\"\n        :side-offset=\"8\"\n      >\n        <FilterFrame :close-label=\"closeLabel\" :enter-label=\"doneLabel\" :status=\"status\" @enter=\"open = false\">\n          <div class=\"flex h-11 items-center gap-1.5 pr-1.5 pl-3.5 text-sui-ink-muted\">\n            <Icon v-if=\"icon\" color=\"ink-muted\" :name=\"icon\" />\n            <FilterGlyph v-else class=\"size-4\" :name=\"type\" />\n            <span class=\"text-sm font-semibold text-sui-ink\">{{ field }}</span>\n            <DropdownMenuRoot v-if=\"ops.length > 1\">\n              <DropdownMenuTrigger\n                :aria-label=\"`${operatorLabel}: ${current?.label ?? ''}`\"\n                class=\"inline-flex h-7 items-center gap-0.5 rounded-md pr-1 pl-1.5 text-13.5 font-medium text-sui-accent outline-hidden transition-colors duration-150 hover:bg-sui-accent-wash focus-visible:sui-ring-inset data-[state=open]:bg-sui-accent-wash\"\n              >\n                {{ current?.label }}\n                <svg\n                  aria-hidden=\"true\"\n                  class=\"size-3.5 fill-none stroke-current\"\n                  stroke-linecap=\"round\"\n                  stroke-width=\"2.2\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path d=\"M6 9l6 6 6-6\" />\n                </svg>\n              </DropdownMenuTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuContent\n                  align=\"start\"\n                  class=\"z-[1100] w-44 rounded-lg border border-sui-line bg-sui-surface p-1 shadow-lg data-[state=open]:animate-sui-menu-in\"\n                  :side-offset=\"4\"\n                >\n                  <DropdownMenuRadioGroup v-model=\"op\">\n                    <DropdownMenuRadioItem\n                      v-for=\"operator in ops\"\n                      :key=\"operator.value\"\n                      class=\"flex h-8 cursor-pointer items-center justify-between rounded-md px-2.5 text-13.5 text-sui-ink-body outline-hidden select-none data-highlighted:bg-sui-sunken data-[state=checked]:font-semibold data-[state=checked]:text-sui-ink\"\n                      :value=\"operator.value\"\n                    >\n                      {{ operator.label }}\n                      <CheckIcon v-if=\"operator.value === op\" />\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuContent>\n              </DropdownMenuPortal>\n            </DropdownMenuRoot>\n            <span v-else class=\"text-13.5 text-sui-ink-muted\">{{ current?.label }}</span>\n            <button\n              v-if=\"onRemove\"\n              class=\"ml-auto inline-flex h-7 items-center gap-1.5 rounded-lg px-2 text-12.5 font-medium text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-danger-soft hover:text-sui-danger focus-visible:sui-ring-inset\"\n              type=\"button\"\n              @click=\"remove\"\n            >\n              <FilterGlyph name=\"trash\" />\n              {{ removeLabel }}\n            </button>\n          </div>\n\n          <slot v-if=\"$slots.default\" />\n          <template v-else-if=\"needsValue\">\n            <template v-if=\"isChecklist\">\n              <div\n                v-if=\"options.length > 6\"\n                class=\"mx-2 mb-1 flex h-9 items-center gap-2 rounded-lg border border-sui-line-subtle px-2.5 text-sui-ink-muted\"\n              >\n                <FilterGlyph class=\"size-4\" name=\"search\" />\n                <!-- focus: classes too: an app's forms plugin rings focused text fields, and outranks plain utilities. -->\n                <input\n                  v-model=\"query\"\n                  :aria-label=\"searchPlaceholder\"\n                  autofocus\n                  class=\"h-full min-w-0 flex-1 border-none bg-transparent p-0 text-sm text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden\"\n                  :placeholder=\"searchPlaceholder\"\n                />\n              </div>\n              <div class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\">\n                <label\n                  v-for=\"option in listed\"\n                  :key=\"option.value\"\n                  :class=\"[row, picked.includes(option.value) ? rowOn : rowOff]\"\n                >\n                  <Checkbox :model-value=\"picked.includes(option.value)\" @update:model-value=\"toggle(option.value)\" />\n                  <span v-if=\"option.color\" class=\"size-1.5 shrink-0 rounded-full\" :class=\"hueDots[option.color]\" />\n                  <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n                  <span v-if=\"option.count != null\" class=\"text-xs font-normal text-sui-ink-muted tabular-nums\">{{\n                    option.count\n                  }}</span>\n                </label>\n              </div>\n            </template>\n            <div v-else-if=\"type === 'text' || type === 'number'\" class=\"px-2 pt-1 pb-2\">\n              <Input\n                :aria-label=\"field\"\n                autofocus\n                :model-value=\"value == null ? '' : String(value)\"\n                :placeholder=\"valuePlaceholder\"\n                :type=\"type === 'number' ? 'number' : 'text'\"\n                @update:model-value=\"value = $event ?? null\"\n              />\n            </div>\n            <RadioGroupRoot\n              v-else-if=\"type === 'date'\"\n              :aria-label=\"field\"\n              class=\"max-h-64 overflow-auto px-1.5 pt-1 pb-1.5\"\n              :model-value=\"typeof value === 'string' ? value : undefined\"\n              @update:model-value=\"value = String($event)\"\n            >\n              <RadioGroupItem\n                v-for=\"preset in datePresets\"\n                :key=\"preset\"\n                :class=\"[row, preset === value ? rowOn : rowOff]\"\n                :value=\"preset\"\n              >\n                <FilterGlyph\n                  class=\"size-4\"\n                  :class=\"preset === value ? 'text-sui-accent' : 'text-sui-ink-muted'\"\n                  name=\"date\"\n                />\n                <span class=\"min-w-0 flex-1 truncate\">{{ preset }}</span>\n                <CheckIcon v-if=\"preset === value\" />\n              </RadioGroupItem>\n            </RadioGroupRoot>\n            <div v-else-if=\"type === 'boolean'\" class=\"px-2.5 pt-1 pb-2.5\">\n              <SegmentedControl\n                :aria-label=\"field\"\n                :model-value=\"value === null ? '' : value ? 'yes' : 'no'\"\n                :options=\"[\n                  { value: 'yes', label: yesLabel },\n                  { value: 'no', label: noLabel }\n                ]\"\n                @update:model-value=\"value = $event === 'yes'\"\n              />\n            </div>\n          </template>\n        </FilterFrame>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/components/Filters/FilterChip.vue.d.ts

@@ -1,4 +1,4 @@
-import type { FilterFieldType, FilterOperator, FilterOption, FilterValue } from './types';
+import type { FilterFieldType, FilterOperator, FilterOption, FilterSummary, FilterValue } from './types';
 export interface FilterChipProps {
     /** A filter, read as a sentence; `add` is the quiet "+ Filter" that starts one (FilterMenu includes it). */
     kind?: 'filter' | 'add';
@@ -11,6 +11,8 @@ export interface FilterChipProps {
     operators?: FilterOperator[];
     /** The choices for enum, person and company. */
     options?: FilterOption[];
+    /** Your own wording for the chip, in place of field, operator and value: "Not archived", "Created in the last 7 days". */
+    summary?: FilterSummary;
     /** The live result count in the panel's footer, e.g. "120 people". */
     status?: string;
     /** The plural noun once more than two values are picked: "3 stages". */
@@ -49,6 +51,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:op"?: ((value: string | undefined) => any) | undefined;
 }>, {
     type: FilterFieldType;
+    summary: FilterSummary;
     icon: string;
     closeLabel: string;
     status: string;