@threadlabs/looma 0.14.8 → 0.15.0

package/vue/chunks/UiCheckbox.js

@@ -8,6 +8,7 @@ var _hoisted_2 = [
 	".checked",
 	".indeterminate",
 	"disabled",
+	"aria-invalid",
 	"required",
 	"name",
 	"value"
@@ -37,6 +38,10 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
 		name: { default: "" },
 		required: {
 			type: Boolean,
@@ -58,7 +63,11 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.disabled && "disabled", props.size && `size size=${props.size}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.invalid && "invalid",
+			props.disabled && "disabled",
+			props.size && `size size=${props.size}`
+		].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -88,6 +97,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				".checked": internalChecked.value,
 				".indeterminate": __props.indeterminate,
 				disabled: __props.disabled,
+				"aria-invalid": __props.invalid,
 				required: __props.required,
 				name: __props.name,
 				value: __props.value,
@@ -95,6 +105,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-bfcc98e1"]]);
+}), [["__scopeId", "data-v-5e151d99"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -78,14 +78,18 @@ var _hoisted_24 = {
 	key: 1,
 	class: "message"
 };
-var _hoisted_25 = ["id", "hidden"];
-var _hoisted_26 = {
+var _hoisted_25 = {
+	key: 2,
+	class: "message"
+};
+var _hoisted_26 = ["id", "hidden"];
+var _hoisted_27 = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
 };
-var _hoisted_27 = {
+var _hoisted_28 = {
 	class: "authored-options",
 	hidden: "",
 	"aria-hidden": "true",
@@ -119,14 +123,26 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		},
 		filter: { default: "label" },
 		help: { default: "" },
+		invalid: {
+			type: Boolean,
+			default: false
+		},
 		items: {},
 		label: { default: "" },
 		labelVisibility: { default: "visible" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
 		multiple: {
 			type: Boolean,
 			default: false
 		},
 		name: { default: "" },
+		openOnFocus: {
+			type: Boolean,
+			default: false
+		},
 		placeholder: { default: "" },
 		query: {},
 		readonly: {
@@ -173,7 +189,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const expanded = ref(false);
 		const rows = ref([]);
 		const active = ref(-1);
-		const loading = ref(false);
 		const helpOpen = ref(false);
 		const lookupError = ref("");
 		const validation = ref({
@@ -195,6 +210,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			props.size && `size size=${props.size}`,
 			validationStatus.value && "validationStatus",
 			`validationStatus=${encodeURIComponent(validationStatus.value)}`,
+			props.invalid && "invalid",
 			props.multiple && "multiple"
 		].filter(Boolean).join(" "));
 		const isQueryChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && typeof detail["display"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -313,7 +329,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				expanded,
 				rows,
 				active,
-				loading,
 				helpOpen,
 				lookupError,
 				validation,
@@ -370,8 +385,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						id: `${uid.value}-input`,
 						"aria-controls": `${uid.value}-listbox`,
 						"aria-expanded": expanded.value,
-						"aria-invalid": validationStatus.value === "error",
-						"aria-busy": validationStatus.value === "pending",
+						"aria-invalid": __props.invalid || validationStatus.value === "error",
+						"aria-busy": __props.loading || validationStatus.value === "pending",
 						".value": display.value,
 						placeholder: __props.placeholder,
 						disabled: __props.disabled,
@@ -470,7 +485,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					role: "listbox",
 					id: `${uid.value}-listbox`,
 					"aria-label": `${__props.label} suggestions`,
-					"aria-busy": loading.value,
+					"aria-busy": __props.loading,
 					ref: "listbox"
 				}, [
 					(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group) => {
@@ -513,7 +528,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						id: `${uid.value}-option-${createIndex.value}`,
 						"data-index": createIndex.value
 					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_23)) : createCommentVNode("v-if", true),
-					message.value ? (openBlock(), createElementBlock("div", _hoisted_24, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true)
+					message.value ? (openBlock(), createElementBlock("div", _hoisted_24, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true),
+					!__props.loading && !rows.value[0] && !creatable.value && !lookupError.value ? (openBlock(), createElementBlock("div", _hoisted_25, [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = createTextVNode("No suggestions.", -1))], true)])) : createCommentVNode("v-if", true)
 				], 8, _hoisted_13), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_12),
 				createElementVNode("div", {
 					class: "message",
@@ -521,12 +537,12 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					hidden: !validation.value.issues.length
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(validation.value.issues, (issue, index) => {
 					return openBlock(), createElementBlock("div", { key: index }, toDisplayString(issue.message), 1);
-				}), 128))], 8, _hoisted_25),
-				createElementVNode("div", _hoisted_26, toDisplayString(statusText.value), 1),
-				createElementVNode("div", _hoisted_27, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
+				}), 128))], 8, _hoisted_26),
+				createElementVNode("div", _hoisted_27, toDisplayString(statusText.value), 1),
+				createElementVNode("div", _hoisted_28, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-10aa8368"]]);
+}), [["__scopeId", "data-v-069ed42d"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiContextMenu.js

@@ -38,7 +38,11 @@ var UiContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			"reason",
 			"trigger"
 		].includes(key));
-		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["value", "trigger"].includes(key));
+		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && (detail["checked"] === void 0 || typeof detail["checked"] === "boolean") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"value",
+			"checked",
+			"trigger"
+		].includes(key));
 		const dispatch = createDispatch(root, emit, {
 			checks: {
 				open: isOpenDetail,
@@ -61,6 +65,6 @@ var UiContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-3d09af05"]]);
+}), [["__scopeId", "data-v-2e00c9d8"]]);
 //#endregion
 export { UiContextMenu_default as t };

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