@threadlabs/looma 0.14.7 → 0.15.0

package/vue/chunks/UiDialog.js

@@ -1,9 +1,9 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-dialog/ui-dialog.js";
 //#region .build/vue/UiDialog.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["aria-label", "data-ui-dialog-state"];
 var _hoisted_2 = {
 	key: 0,
 	class: "title"
@@ -21,22 +21,28 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	inheritAttrs: false,
 	__name: "UiDialog",
 	props: {
-		dismissible: {
+		alert: {
 			type: Boolean,
 			default: false
 		},
+		closedby: { default: "closerequest" },
 		for: { default: "" },
 		label: {},
-		modal: {
+		modeless: {
 			type: Boolean,
 			default: false
 		},
 		open: {
 			type: Boolean,
 			default: false
-		}
+		},
+		size: { default: "md" }
 	},
-	emits: ["update:open", "close"],
+	emits: [
+		"update:open",
+		"open",
+		"close"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -44,13 +50,23 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const closeElement = useTemplateRef("close");
 		const internalOpen = ref(false);
 		const accessibleLabel = ref("Dialog");
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`, props.alert && "alert"].filter(Boolean).join(" "));
+		const isOpenDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"open",
+			"reason",
+			"trigger"
+		].includes(key));
 		const isCloseDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"open",
 			"reason",
 			"trigger"
 		].includes(key));
 		const dispatch = createDispatch(root, emit, {
-			checks: { close: isCloseDetail },
+			checks: {
+				open: isOpenDetail,
+				close: isCloseDetail
+			},
 			modeled: ["open"]
 		});
 		useComponentHost(controllerModule.default, {
@@ -66,6 +82,7 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("dialog", mergeProps({ "data-component": "ui-dialog" }, _ctx.$attrs, {
 				"aria-label": accessibleLabel.value,
+				"data-ui-dialog-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [
@@ -75,6 +92,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-616b4560"]]);
+}), [["__scopeId", "data-v-8d67e1e0"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiDisclosure.js

@@ -1,16 +1,18 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
+import { computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-disclosure/ui-disclosure.js";
 //#region .build/vue/UiDisclosure.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-disclosure-state"];
-var _hoisted_2 = [
+var _hoisted_2 = ["role", "aria-level"];
+var _hoisted_3 = [
 	"aria-controls",
 	"aria-expanded",
 	"disabled"
 ];
-var _hoisted_3 = ["id", "inert"];
-var _hoisted_4 = { class: "panel-inner" };
+var _hoisted_4 = { class: "summary" };
+var _hoisted_5 = ["id"];
+var _hoisted_6 = { class: "panel-inner" };
 //#endregion
 //#region .build/vue/UiDisclosure.vue
 var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -22,6 +24,8 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: false
 		},
+		headingLevel: { default: 0 },
+		name: { default: "" },
 		open: {
 			type: Boolean,
 			default: false
@@ -38,8 +42,11 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const emit = __emit;
 		const root = ref(null);
 		const triggerElement = useTemplateRef("trigger");
+		const panelElement = useTemplateRef("panel");
 		const internalOpen = ref(false);
 		const contentId = ref("");
+		const headingRole = ref(null);
+		const headingAriaLevel = ref(null);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.density && `density density=${props.density}`, internalOpen.value && "internalOpen"].filter(Boolean).join(" "));
 		const isOpenDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -58,34 +65,51 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			root,
 			dispatch,
 			props,
-			refs: { trigger: triggerElement },
+			refs: {
+				trigger: triggerElement,
+				panel: panelElement
+			},
 			state: {
 				internalOpen,
-				contentId
+				contentId,
+				headingRole,
+				headingAriaLevel
 			}
 		});
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-disclosure" }, _ctx.$attrs, {
 				"data-ui-disclosure-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("button", {
+			}), [createElementVNode("div", {
+				class: "heading",
+				role: attribute(headingRole.value),
+				"aria-level": typeof headingAriaLevel.value === "boolean" ? String(headingAriaLevel.value) : attribute(headingAriaLevel.value)
+			}, [createElementVNode("button", {
 				class: "trigger",
 				type: "button",
 				"aria-controls": contentId.value,
 				"aria-expanded": internalOpen.value,
 				disabled: __props.disabled,
 				ref: "trigger"
-			}, [createElementVNode("span", null, toDisplayString(__props.summary), 1), _cache[0] || (_cache[0] = createElementVNode("span", {
+			}, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "summary", {}, () => [createTextVNode(toDisplayString(__props.summary), 1)], true)]), _cache[0] || (_cache[0] = createElementVNode("span", {
 				class: "chevron",
 				"aria-hidden": "true"
-			}, null, -1))], 8, _hoisted_2), createElementVNode("div", {
+			}, null, -1))], 8, _hoisted_3)], 8, _hoisted_2), createElementVNode("div", {
 				class: "panel",
 				id: contentId.value,
-				inert: !internalOpen.value
-			}, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_3)], 16, _hoisted_1);
+				ref: "panel"
+			}, [createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_5)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-07294756"]]);
+}), [["__scopeId", "data-v-a496a6e7"]]);
 //#endregion
 export { UiDisclosure_default as t };

package/vue/chunks/UiEditable.js

@@ -15,12 +15,22 @@ var _hoisted_5 = {
 var _hoisted_6 = [
 	".value",
 	"aria-label",
+	"placeholder",
+	"required",
 	"disabled"
 ];
 var _hoisted_7 = {
 	key: 0,
 	class: "actions"
 };
+var _hoisted_8 = {
+	class: "save",
+	type: "button"
+};
+var _hoisted_9 = {
+	class: "cancel",
+	type: "button"
+};
 //#endregion
 //#region .build/vue/UiEditable.vue
 var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -31,6 +41,7 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		cancelLabel: { default: "Cancel" },
 		disabled: {
 			type: Boolean,
 			default: false
@@ -41,6 +52,13 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		},
 		hint: { default: "" },
 		label: { default: "Edit value" },
+		maxLength: { default: 0 },
+		placeholder: { default: "" },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		saveLabel: { default: "Save" },
 		value: { default: "" }
 	},
 	emits: [
@@ -109,17 +127,13 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				type: "text",
 				".value": draft.value,
 				"aria-label": __props.label,
+				placeholder: __props.placeholder,
+				required: __props.required,
 				disabled: __props.disabled || !internalEdit.value,
 				ref: "input"
-			}, null, 40, _hoisted_6)]), __props.actions ? (openBlock(), createElementBlock("div", _hoisted_7, [..._cache[0] || (_cache[0] = [createElementVNode("button", {
-				class: "save",
-				type: "button"
-			}, "Save", -1), createElementVNode("button", {
-				class: "cancel",
-				type: "button"
-			}, "Cancel", -1)])])) : createCommentVNode("v-if", true)], 16, _hoisted_1);
+			}, null, 40, _hoisted_6)]), __props.actions ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("button", _hoisted_8, toDisplayString(__props.saveLabel), 1), createElementVNode("button", _hoisted_9, toDisplayString(__props.cancelLabel), 1)])) : createCommentVNode("v-if", true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-73a44500"]]);
+}), [["__scopeId", "data-v-39853d49"]]);
 //#endregion
 export { UiEditable_default as t };

package/vue/chunks/UiEditorInsertTableGrid.js

@@ -9,15 +9,11 @@ var _hoisted_3 = [
 	"data-row",
 	"data-col",
 	"aria-label",
-	"aria-pressed"
+	"aria-pressed",
+	"tabindex"
 ];
 var _hoisted_4 = { class: "header" };
 var _hoisted_5 = [".checked"];
-var _hoisted_6 = {
-	type: "button",
-	class: "insert",
-	ref: "insert"
-};
 //#endregion
 //#region .build/vue/UiEditorInsertTableGrid.vue
 var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -40,8 +36,8 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
+		const gridElement = useTemplateRef("grid");
 		const headerElement = useTemplateRef("header");
-		const insertElement = useTemplateRef("insert");
 		const cells = ref([]);
 		const rows = ref(8);
 		const cols = ref(8);
@@ -58,8 +54,8 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			dispatch,
 			props,
 			refs: {
-				header: headerElement,
-				insert: insertElement
+				grid: gridElement,
+				header: headerElement
 			},
 			state: {
 				cells,
@@ -83,7 +79,8 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 					style: normalizeStyle({
 						"--_rows": rows.value,
 						"--_cols": cols.value
-					})
+					}),
+					ref: "grid"
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(cells.value, (cell) => {
 					return openBlock(), createElementBlock("button", {
 						key: cell.key,
@@ -92,18 +89,18 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 						"data-row": cell.row,
 						"data-col": cell.col,
 						"aria-label": cell.label,
-						"aria-pressed": cell.selected
+						"aria-pressed": cell.selected,
+						tabindex: cell.tabIndex
 					}, null, 10, _hoisted_3);
 				}), 128))], 4),
 				createElementVNode("label", _hoisted_4, [createElementVNode("input", {
 					type: "checkbox",
 					".checked": withHeaderRow.value,
 					ref: "header"
-				}, null, 40, _hoisted_5), _cache[0] || (_cache[0] = createTextVNode(" Header row", -1))]),
-				createElementVNode("button", _hoisted_6, "Insert table", 512)
+				}, null, 40, _hoisted_5), _cache[0] || (_cache[0] = createTextVNode(" Header row", -1))])
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-efb1c451"]]);
+}), [["__scopeId", "data-v-2dd6031b"]]);
 //#endregion
 export { UiEditorInsertTableGrid_default as t };

package/vue/chunks/UiEditorMentionMenu.js

@@ -1,34 +1,40 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString } from "vue";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-editor-mention-menu/ui-editor-mention-menu.js";
 //#region .build/vue/UiEditorMentionMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-busy", "hidden"];
-var _hoisted_2 = {
+var _hoisted_2 = { class: "header" };
+var _hoisted_3 = {
 	key: 0,
 	class: "loading",
 	role: "status"
 };
-var _hoisted_3 = {
+var _hoisted_4 = {
 	key: 1,
 	class: "list",
 	role: "presentation"
 };
-var _hoisted_4 = [
+var _hoisted_5 = [
 	"id",
 	"aria-selected",
-	"data-index"
+	"data-index",
+	"data-value"
 ];
-var _hoisted_5 = {
+var _hoisted_6 = {
 	class: "avatar",
 	"aria-hidden": "true"
 };
-var _hoisted_6 = { class: "body" };
-var _hoisted_7 = { class: "label" };
-var _hoisted_8 = {
+var _hoisted_7 = { class: "body" };
+var _hoisted_8 = { class: "label" };
+var _hoisted_9 = {
 	key: 0,
 	class: "detail"
 };
+var _hoisted_10 = {
+	class: "empty",
+	ref: "empty"
+};
 //#endregion
 //#region .build/vue/UiEditorMentionMenu.vue
 var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -37,10 +43,12 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 	props: {
 		anchorRect: {},
 		items: {},
+		label: { default: "Mentions" },
 		loading: {
 			type: Boolean,
 			default: false
 		},
+		loadingLabel: { default: "Searching…" },
 		open: {
 			type: Boolean,
 			default: false
@@ -53,12 +61,13 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
+		const emptyElement = useTemplateRef("empty");
 		const visible = ref(false);
 		const rows = ref([]);
 		const searching = ref(false);
 		const active = ref(0);
 		const prefix = ref("ui-editor-mention-menu");
-		const isHighlightDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["index"]) && Object.keys(detail).every((key) => ["index"].includes(key));
+		const isHighlightDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["index"]) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["index", "value"].includes(key));
 		const dispatch = createDispatch(root, emit, { checks: {
 			highlight: isHighlightDetail,
 			select: isHighlightDetail
@@ -67,6 +76,7 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			root,
 			dispatch,
 			props,
+			refs: { empty: emptyElement },
 			state: {
 				visible,
 				rows,
@@ -78,29 +88,30 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-editor-mention-menu",
-				role: "listbox",
-				"aria-label": "Mention a person"
+				role: "listbox"
 			}, _ctx.$attrs, {
 				"aria-busy": __props.loading,
 				hidden: !visible.value,
 				ref_key: "root",
 				ref: root
 			}), [
-				_cache[0] || (_cache[0] = createElementVNode("div", { class: "header" }, [createElementVNode("span", null, "People"), createElementVNode("span", { class: "hint" }, "Type after @ to search")], -1)),
-				searching.value ? (openBlock(), createElementBlock("div", _hoisted_2, "Searching…")) : createCommentVNode("v-if", true),
-				!searching.value ? (openBlock(), createElementBlock("ul", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, index) => {
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "header", {}, void 0, true)]),
+				searching.value ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.loadingLabel), 1)) : createCommentVNode("v-if", true),
+				!searching.value ? (openBlock(), createElementBlock("ul", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, index) => {
 					return openBlock(), createElementBlock("li", {
 						key: index,
 						class: normalizeClass(["item", { active: index === active.value }]),
 						role: "option",
 						id: `${prefix.value}-option-${index}`,
 						"aria-selected": index === active.value,
-						"data-index": index
-					}, [createElementVNode("span", _hoisted_5, toDisplayString(row.initials), 1), createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(row.label), 1), row.detail ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(row.detail), 1)) : createCommentVNode("v-if", true)])], 10, _hoisted_4);
-				}), 128))])) : createCommentVNode("v-if", true)
+						"data-index": index,
+						"data-value": row.id
+					}, [createElementVNode("span", _hoisted_6, toDisplayString(row.initials), 1), createElementVNode("span", _hoisted_7, [createElementVNode("span", _hoisted_8, toDisplayString(row.label), 1), row.detail ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(row.detail), 1)) : createCommentVNode("v-if", true)])], 10, _hoisted_5);
+				}), 128)), renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_10, [renderSlot(_ctx.$slots, "empty", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-b290e588"]]);
+}), [["__scopeId", "data-v-a5ae5970"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorMentionMenuItem.js

@@ -0,0 +1,36 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString } from "vue";
+//#region .build/vue/UiEditorMentionMenuItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-value"];
+var _hoisted_2 = {
+	class: "avatar",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "body" };
+var _hoisted_4 = { class: "label" };
+var _hoisted_5 = {
+	key: 0,
+	class: "detail"
+};
+//#endregion
+//#region .build/vue/UiEditorMentionMenuItem.vue
+var UiEditorMentionMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorMentionMenuItem",
+	props: {
+		detail: { default: "" },
+		initials: { default: "" },
+		value: { default: "" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", mergeProps({
+				"data-component": "ui-editor-mention-menu-item",
+				role: "option",
+				tabindex: "-1"
+			}, _ctx.$attrs, { "data-value": __props.value }), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "start", {}, () => [createTextVNode(toDisplayString(__props.initials), 1)], true)]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), __props.detail ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.detail), 1)) : createCommentVNode("v-if", true)])], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-91fa2023"]]);
+//#endregion
+export { UiEditorMentionMenuItem_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -1,30 +1,32 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString } from "vue";
+import { Fragment, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-editor-slash-menu/ui-editor-slash-menu.js";
 //#region .build/vue/UiEditorSlashMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["hidden"];
-var _hoisted_2 = {
-	class: "header",
-	"aria-hidden": "true"
-};
+var _hoisted_2 = { class: "header" };
 var _hoisted_3 = {
-	key: 0,
-	class: "header-query"
-};
-var _hoisted_4 = {
 	class: "list",
 	role: "presentation"
 };
-var _hoisted_5 = ["aria-selected", "data-index"];
-var _hoisted_6 = {
+var _hoisted_4 = [
+	"aria-selected",
+	"data-index",
+	"data-value"
+];
+var _hoisted_5 = {
 	class: "icon",
 	"aria-hidden": "true"
 };
-var _hoisted_7 = { class: "body" };
-var _hoisted_8 = { class: "title" };
-var _hoisted_9 = { class: "description" };
+var _hoisted_6 = { class: "body" };
+var _hoisted_7 = { class: "title" };
+var _hoisted_8 = { class: "description" };
+var _hoisted_9 = {
+	class: "empty",
+	ref: "empty"
+};
+var _hoisted_10 = { class: "footer" };
 //#endregion
 //#region .build/vue/UiEditorSlashMenu.vue
 var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -33,6 +35,7 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 	props: {
 		anchorRect: {},
 		items: {},
+		label: { default: "Insert block" },
 		open: {
 			type: Boolean,
 			default: false
@@ -45,9 +48,11 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
+		const emptyElement = useTemplateRef("empty");
 		const visible = ref(false);
 		const active = ref(0);
-		const isHighlightDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["index"]) && Object.keys(detail).every((key) => ["index"].includes(key));
+		const rows = ref([]);
+		const isHighlightDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["index"]) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["index", "value"].includes(key));
 		const dispatch = createDispatch(root, emit, { checks: {
 			highlight: isHighlightDetail,
 			select: isHighlightDetail
@@ -56,45 +61,38 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			root,
 			dispatch,
 			props,
+			refs: { empty: emptyElement },
 			state: {
 				visible,
-				active
+				active,
+				rows
 			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-editor-slash-menu",
-				role: "listbox",
-				"aria-label": "Insert block"
+				role: "listbox"
 			}, _ctx.$attrs, {
 				hidden: !visible.value,
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("div", _hoisted_2, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "header-label" }, "Insert", -1)), __props.query ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.query), 1)) : createCommentVNode("v-if", true)]),
-				createElementVNode("ul", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "header", {}, void 0, true)]),
+				createElementVNode("ul", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (item, index) => {
 					return openBlock(), createElementBlock("li", {
 						key: index,
 						class: normalizeClass(["item", { active: index === active.value }]),
 						role: "option",
 						"aria-selected": index === active.value,
-						"data-index": index
-					}, [createElementVNode("span", _hoisted_6, [createVNode(UiIcon_default, { name: item.icon }, null, 8, ["name"])]), createElementVNode("span", _hoisted_7, [createElementVNode("span", _hoisted_8, toDisplayString(item.title), 1), createElementVNode("span", _hoisted_9, toDisplayString(item.description), 1)])], 10, _hoisted_5);
-				}), 128))]),
-				_cache[1] || (_cache[1] = createElementVNode("div", {
-					class: "footer",
-					"aria-hidden": "true"
-				}, [
-					createElementVNode("kbd", null, "↑↓"),
-					createTextVNode(" navigate · "),
-					createElementVNode("kbd", null, "↵"),
-					createTextVNode(" insert · "),
-					createElementVNode("kbd", null, "Esc"),
-					createTextVNode(" close ")
-				], -1))
+						"data-index": index,
+						"data-value": item.value
+					}, [createElementVNode("span", _hoisted_5, [createVNode(UiIcon_default, { name: item.icon }, null, 8, ["name"])]), createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(item.title), 1), createElementVNode("span", _hoisted_8, toDisplayString(item.description), 1)])], 10, _hoisted_4);
+				}), 128)), renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				createElementVNode("div", _hoisted_9, [renderSlot(_ctx.$slots, "empty", {}, void 0, true)], 512),
+				createElementVNode("div", _hoisted_10, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2399c2e3"]]);
+}), [["__scopeId", "data-v-3f70d2bc"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorSlashMenuGroup.js

@@ -0,0 +1,26 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString } from "vue";
+//#region .build/vue/UiEditorSlashMenuGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "heading" };
+var _hoisted_3 = { role: "presentation" };
+//#endregion
+//#region .build/vue/UiEditorSlashMenuGroup.vue
+var UiEditorSlashMenuGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorSlashMenuGroup",
+	props: { label: { default: "" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", mergeProps({
+				"data-component": "ui-editor-slash-menu-group",
+				role: "presentation"
+			}, _ctx.$attrs), [createElementVNode("div", {
+				role: "group",
+				"aria-label": __props.label
+			}, [createElementVNode("div", _hoisted_2, toDisplayString(__props.label), 1), createElementVNode("ul", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_1)], 16);
+		};
+	}
+}), [["__scopeId", "data-v-7603f4ce"]]);
+//#endregion
+export { UiEditorSlashMenuGroup_default as t };