@threadlabs/looma 0.16.5 → 0.17.1

package/vue/UiTooltip.vue

@@ -182,15 +182,15 @@ useComponentHost(controllerModule.default, {
 }
 
 .surface {
-  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-default)));
+  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
   position: relative;
   box-sizing: border-box;
   max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
   border: 1px solid var(--_tooltip-line);
-  border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-sm)));
+  border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
   background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   color: var(--_ui-tooltip-text, var(--ui-text-primary));
-  padding: var(--ui-space-1) var(--ui-space-2);
+  padding: var(--ui-space-2) var(--ui-space-3);
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
@@ -213,20 +213,20 @@ useComponentHost(controllerModule.default, {
   position: absolute;
   z-index: 1;
   inset-inline-start: var(--ui-space-3);
-  inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
-  inline-size: var(--_ui-tooltip-arrow-size, 0.5rem);
-  block-size: var(--_ui-tooltip-arrow-size, 0.5rem);
+  inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+  inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+  block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
   box-sizing: border-box;
   background: inherit;
   border: 0 solid var(--_tooltip-line);
   border-inline-end-width: 1px;
   border-block-end-width: 1px;
   border-end-end-radius: 1px;
-  transform: rotate(45deg);
+  transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface::after {
-  inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
   border-block-end-width: 0;
@@ -237,7 +237,7 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface::after {
-  inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+  inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface::after {
@@ -247,20 +247,20 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
-  inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+  inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
   inset-block-end: auto;
   border: 0 solid var(--_tooltip-line);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after {
   inset-inline-start: auto;
-  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   border-inline-end-width: 1px;
   border-block-end-width: 1px;
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
-  inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-inline-end: auto;
   border-inline-start-width: 1px;
   border-block-start-width: 1px;

package/vue/UiTopBar.vue

@@ -64,7 +64,7 @@ defineOptions({ inheritAttrs: false })
     env(safe-area-inset-right)
   );
   background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-  border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
+  border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-divider));
 }
 
 .leading,

package/vue/UiTreeItem.vue

@@ -254,7 +254,8 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
-  opacity: 0.55;
+  color: var(--ui-disabled-text);
+  background: var(--ui-disabled-surface);
 }
 
 [data-component~="ui-tree-item"][data-dragging] .row {

package/vue/chunks/UiAvatarGroup.js

@@ -54,6 +54,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-c8469808"]]);
+}), [["__scopeId", "data-v-4f555172"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -24,6 +24,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-bea7b3f9"]]);
+}), [["__scopeId", "data-v-38a29166"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiBreadcrumbItem.js

@@ -45,6 +45,6 @@ var UiBreadcrumbItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			}), [createElementVNode("span", _hoisted_2, [createVNode(UiIcon_default, { name: "chevron-right" })]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8ffebd0c"]]);
+}), [["__scopeId", "data-v-1b6e5330"]]);
 //#endregion
 export { UiBreadcrumbItem_default as t };

package/vue/chunks/UiButton.js

@@ -1,7 +1,7 @@
 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 UiSpinner_default } from "./UiSpinner.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-button/ui-button.js";
 //#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -13,13 +13,21 @@ var _hoisted_1 = [
 	"tabindex",
 	"data-ui-button-state"
 ];
-var _hoisted_2 = [
+var _hoisted_2 = {
+	key: 0,
+	class: "spinner-wrap"
+};
+var _hoisted_3 = [
 	"type",
 	"disabled",
 	"aria-disabled",
 	"aria-busy",
 	"data-ui-button-state"
 ];
+var _hoisted_4 = {
+	key: 0,
+	class: "spinner-wrap"
+};
 //#endregion
 //#region .build/vue/UiButton.vue
 var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -33,6 +41,10 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			default: false
 		},
 		href: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
 		pending: {
 			type: Boolean,
 			default: false
@@ -58,6 +70,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			props.size && `size size=${props.size}`,
 			props.variant && `variant variant=${props.variant}`,
 			props.tone && `tone tone=${props.tone}`,
+			props.loading && "loading",
 			props.pending && "pending"
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
@@ -82,32 +95,28 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				href: attribute({
 					true: null,
 					false: __props.href
-				}[`${__props.disabled || __props.pending}`]),
+				}[`${__props.disabled || __props.loading || __props.pending}`]),
 				target: __props.target,
 				rel: __props.rel,
 				"aria-disabled": typeof {
 					true: "true",
 					false: null
-				}[`${__props.disabled || __props.pending}`] === "boolean" ? String({
+				}[`${__props.disabled || __props.loading || __props.pending}`] === "boolean" ? String({
 					true: "true",
 					false: null
-				}[`${__props.disabled || __props.pending}`]) : attribute({
+				}[`${__props.disabled || __props.loading || __props.pending}`]) : attribute({
 					true: "true",
 					false: null
-				}[`${__props.disabled || __props.pending}`]),
-				"aria-busy": __props.pending,
+				}[`${__props.disabled || __props.loading || __props.pending}`]),
+				"aria-busy": __props.loading || __props.pending,
 				tabindex: attribute({
 					true: "0",
 					false: null
-				}[`${__props.pending && !__props.disabled}`]),
+				}[`${(__props.loading || __props.pending) && !__props.disabled}`]),
 				"data-ui-button-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [__props.pending ? (openBlock(), createBlock(UiSpinner_default, {
-				key: 0,
-				size: "sm",
-				class: "pending-spinner"
-			})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
+			}), [__props.loading || __props.pending ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
 				key: 1,
 				"data-component": "ui-button"
 			}, _ctx.$attrs, {
@@ -116,24 +125,20 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"aria-disabled": typeof {
 					true: "true",
 					false: null
-				}[`${__props.pending}`] === "boolean" ? String({
+				}[`${__props.loading || __props.pending}`] === "boolean" ? String({
 					true: "true",
 					false: null
-				}[`${__props.pending}`]) : attribute({
+				}[`${__props.loading || __props.pending}`]) : attribute({
 					true: "true",
 					false: null
-				}[`${__props.pending}`]),
-				"aria-busy": __props.pending,
+				}[`${__props.loading || __props.pending}`]),
+				"aria-busy": __props.loading || __props.pending,
 				"data-ui-button-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [__props.pending ? (openBlock(), createBlock(UiSpinner_default, {
-				key: 0,
-				size: "sm",
-				class: "pending-spinner"
-			})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2));
+			}), [__props.loading || __props.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
 		};
 	}
-}), [["__scopeId", "data-v-2d967790"]]);
+}), [["__scopeId", "data-v-84ef27e9"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -103,6 +103,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-99de7df0"]]);
+}), [["__scopeId", "data-v-b69d848b"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiCard.js

@@ -40,6 +40,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-card-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_4));
 		};
 	}
-}), [["__scopeId", "data-v-e61f21fd"]]);
+}), [["__scopeId", "data-v-d798147a"]]);
 //#endregion
 export { UiCard_default as t };

package/vue/chunks/UiCheckbox.js

@@ -105,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-5e151d99"]]);
+}), [["__scopeId", "data-v-62f133c7"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -12,12 +12,13 @@ var _hoisted_4 = {
 	class: "field",
 	ref: "field"
 };
-var _hoisted_5 = [
+var _hoisted_5 = { class: "entry" };
+var _hoisted_6 = [
 	"data-index",
 	"disabled",
 	"aria-label"
 ];
-var _hoisted_6 = [
+var _hoisted_7 = [
 	"id",
 	"aria-controls",
 	"aria-expanded",
@@ -29,31 +30,31 @@ var _hoisted_6 = [
 	"readonly",
 	"required"
 ];
-var _hoisted_7 = [
+var _hoisted_8 = [
 	"name",
 	"value",
 	"disabled"
 ];
-var _hoisted_8 = [
+var _hoisted_9 = [
 	"name",
 	"value",
 	"disabled"
 ];
-var _hoisted_9 = ["disabled"];
-var _hoisted_10 = ["aria-controls", "disabled"];
-var _hoisted_11 = ["id", "disabled"];
-var _hoisted_12 = ["hidden"];
-var _hoisted_13 = [
+var _hoisted_10 = ["disabled"];
+var _hoisted_11 = ["aria-controls", "disabled"];
+var _hoisted_12 = ["id", "disabled"];
+var _hoisted_13 = ["hidden"];
+var _hoisted_14 = [
 	"id",
 	"aria-label",
 	"aria-busy"
 ];
-var _hoisted_14 = ["role", "aria-label"];
-var _hoisted_15 = {
+var _hoisted_15 = ["role", "aria-label"];
+var _hoisted_16 = {
 	key: 0,
 	class: "group"
 };
-var _hoisted_16 = [
+var _hoisted_17 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
@@ -61,35 +62,35 @@ var _hoisted_16 = [
 	"aria-labelledby",
 	"aria-describedby"
 ];
-var _hoisted_17 = {
+var _hoisted_18 = {
 	key: 0,
 	class: "detail"
 };
-var _hoisted_18 = { class: "line" };
-var _hoisted_19 = ["id"];
+var _hoisted_19 = { class: "line" };
 var _hoisted_20 = ["id"];
 var _hoisted_21 = ["id"];
-var _hoisted_22 = {
+var _hoisted_22 = ["id"];
+var _hoisted_23 = {
 	key: 1,
 	class: "primary"
 };
-var _hoisted_23 = ["id", "data-index"];
-var _hoisted_24 = {
+var _hoisted_24 = ["id", "data-index"];
+var _hoisted_25 = {
 	key: 1,
 	class: "message"
 };
-var _hoisted_25 = {
+var _hoisted_26 = {
 	key: 2,
 	class: "message"
 };
-var _hoisted_26 = ["id", "hidden"];
-var _hoisted_27 = {
+var _hoisted_27 = ["id", "hidden"];
+var _hoisted_28 = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
 };
-var _hoisted_28 = {
+var _hoisted_29 = {
 	class: "authored-options",
 	hidden: "",
 	"aria-hidden": "true",
@@ -383,59 +384,61 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					class: normalizeClass({ "sr-only": __props.labelVisibility === "sr-only" })
 				}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" *")], 64)) : createCommentVNode("v-if", true)], 10, _hoisted_2),
 				createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [
-					renderSlot(_ctx.$slots, "start", {}, void 0, true),
-					__props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(internalItems.value, (item, index) => {
-						return openBlock(), createElementBlock("button", {
-							key: item.id,
-							class: "item",
-							type: "button",
-							tabindex: "-1",
-							"data-index": index,
-							disabled: __props.disabled || __props.readonly || item.disabled,
-							"aria-label": `${item.label}, press Delete or Backspace to remove`
-						}, [renderSlot(_ctx.$slots, `item-${item.id}`, {}, () => [createVNode(UiBadge_default, null, {
-							default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
-							_: 2
-						}, 1024)], true)], 8, _hoisted_5);
-					}), 128)) : createCommentVNode("v-if", true),
-					createElementVNode("input", {
-						role: "combobox",
-						"aria-autocomplete": "list",
-						autocomplete: "off",
-						id: `${uid.value}-input`,
-						"aria-controls": `${uid.value}-listbox`,
-						"aria-expanded": expanded.value,
-						"aria-invalid": __props.invalid || validationStatus.value === "error",
-						"aria-busy": __props.loading || validationStatus.value === "pending",
-						".value": display.value,
-						placeholder: __props.placeholder,
-						disabled: __props.disabled,
-						readonly: __props.readonly,
-						required: __props.required && !(__props.multiple && internalItems.value[0]),
-						ref: "input"
-					}, null, 40, _hoisted_6),
+					createElementVNode("div", _hoisted_5, [
+						renderSlot(_ctx.$slots, "start", {}, void 0, true),
+						__props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(internalItems.value, (item, index) => {
+							return openBlock(), createElementBlock("button", {
+								key: item.id,
+								class: "item",
+								type: "button",
+								tabindex: "-1",
+								"data-index": index,
+								disabled: __props.disabled || __props.readonly || item.disabled,
+								"aria-label": `${item.label}, press Delete or Backspace to remove`
+							}, [renderSlot(_ctx.$slots, `item-${item.id}`, {}, () => [createVNode(UiBadge_default, null, {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+								_: 2
+							}, 1024)], true)], 8, _hoisted_6);
+						}), 128)) : createCommentVNode("v-if", true),
+						createElementVNode("input", {
+							role: "combobox",
+							"aria-autocomplete": "list",
+							autocomplete: "off",
+							id: `${uid.value}-input`,
+							"aria-controls": `${uid.value}-listbox`,
+							"aria-expanded": expanded.value,
+							"aria-invalid": __props.invalid || validationStatus.value === "error",
+							"aria-busy": __props.loading || validationStatus.value === "pending",
+							".value": display.value,
+							placeholder: __props.placeholder,
+							disabled: __props.disabled,
+							readonly: __props.readonly,
+							required: __props.required && !(__props.multiple && internalItems.value[0]),
+							ref: "input"
+						}, null, 40, _hoisted_7)
+					]),
 					__props.name && !__props.multiple ? (openBlock(), createElementBlock("input", {
-						key: 1,
+						key: 0,
 						type: "hidden",
 						name: __props.name,
 						value: submitted.value,
 						disabled: __props.disabled
-					}, null, 8, _hoisted_7)) : createCommentVNode("v-if", true),
-					__props.name && __props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(internalItems.value, (item) => {
+					}, null, 8, _hoisted_8)) : createCommentVNode("v-if", true),
+					__props.name && __props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(internalItems.value, (item) => {
 						return openBlock(), createElementBlock("input", {
 							key: item.id,
 							type: "hidden",
 							name: __props.name,
 							value: item.value,
 							disabled: __props.disabled
-						}, null, 8, _hoisted_8);
+						}, null, 8, _hoisted_9);
 					}), 128)) : createCommentVNode("v-if", true),
 					__props.clearable ? (openBlock(), createElementBlock("button", {
-						key: 3,
+						key: 2,
 						type: "button",
 						"data-combobox-action": "clear",
 						"aria-label": "Clear",
-						disabled: __props.disabled || __props.readonly
+						disabled: __props.disabled || __props.readonly || !raw.value && (__props.multiple || selected.value === null)
 					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
@@ -444,9 +447,9 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						stroke: "currentColor",
 						"stroke-width": "2",
 						"stroke-linecap": "round"
-					}, [createElementVNode("path", { d: "M7 7l10 10M17 7 7 17" })], -1)])], 8, _hoisted_9)) : createCommentVNode("v-if", true),
+					}, [createElementVNode("path", { d: "M7 7l10 10M17 7 7 17" })], -1)])], 8, _hoisted_10)) : createCommentVNode("v-if", true),
 					__props.disclosure ? (openBlock(), createElementBlock("button", {
-						key: 4,
+						key: 3,
 						type: "button",
 						"data-combobox-action": "disclosure",
 						tabindex: "-1",
@@ -462,7 +465,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"stroke-width": "2.25",
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round"
-					}, [createElementVNode("path", { d: "m6 9 6 6 6-6" })], -1)])], 8, _hoisted_10)) : createCommentVNode("v-if", true)
+					}, [createElementVNode("path", { d: "m6 9 6 6 6-6" })], -1)])], 8, _hoisted_11)) : createCommentVNode("v-if", true)
 				], 512), __props.help ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					class: "help",
@@ -487,7 +490,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					}),
 					createElementVNode("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3" }),
 					createElementVNode("path", { d: "M12 17h.01" })
-				], -1)])], 8, _hoisted_11)) : createCommentVNode("v-if", true)]),
+				], -1)])], 8, _hoisted_12)) : createCommentVNode("v-if", true)]),
 				__props.help ? (openBlock(), createBlock(UiTooltip_default, {
 					key: 0,
 					trigger: "click",
@@ -513,7 +516,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 							key: group.name,
 							role: group.role,
 							"aria-label": group.label ?? void 0
-						}, [group.name ? (openBlock(), createElementBlock("div", _hoisted_15, toDisplayString(group.name), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.rows, (row) => {
+						}, [group.name ? (openBlock(), createElementBlock("div", _hoisted_16, toDisplayString(group.name), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.rows, (row) => {
 							return openBlock(), createElementBlock("div", {
 								key: row.id,
 								class: normalizeClass(["option", { active: row.index === active.value }]),
@@ -524,22 +527,22 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 								"data-index": row.index,
 								"aria-labelledby": row.labelledBy ?? void 0,
 								"aria-describedby": row.detail ?? void 0
-							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [row.detail ? (openBlock(), createElementBlock("span", _hoisted_17, [createElementVNode("span", _hoisted_18, [createElementVNode("span", {
+							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [row.detail ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("span", _hoisted_19, [createElementVNode("span", {
 								class: "primary",
 								id: `${uid.value}-option-${row.index}-label`
-							}, toDisplayString(row.label), 9, _hoisted_19), row.tag ? (openBlock(), createBlock(UiBadge_default, {
+							}, toDisplayString(row.label), 9, _hoisted_20), row.tag ? (openBlock(), createBlock(UiBadge_default, {
 								key: 0,
 								tone: row.tag?.tone,
 								style: normalizeStyle({ "--ui-badge-color": row.tag?.color })
 							}, {
-								default: withCtx(() => [createElementVNode("span", { id: `${uid.value}-option-${row.index}-tag` }, toDisplayString(row.tag?.label), 9, _hoisted_20)]),
+								default: withCtx(() => [createElementVNode("span", { id: `${uid.value}-option-${row.index}-tag` }, toDisplayString(row.tag?.label), 9, _hoisted_21)]),
 								_: 2
 							}, 1032, ["tone", "style"])) : createCommentVNode("v-if", true)]), row.description ? (openBlock(), createElementBlock("span", {
 								key: 0,
 								class: "description",
 								id: `${uid.value}-option-${row.index}-description`
-							}, toDisplayString(row.description), 9, _hoisted_21)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !row.detail ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(row.label), 1)) : createCommentVNode("v-if", true)], true)], 10, _hoisted_16);
-						}), 128))], 8, _hoisted_14);
+							}, toDisplayString(row.description), 9, _hoisted_22)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !row.detail ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(row.label), 1)) : createCommentVNode("v-if", true)], true)], 10, _hoisted_17);
+						}), 128))], 8, _hoisted_15);
 					}), 128)),
 					creatable.value ? (openBlock(), createElementBlock("div", {
 						key: 0,
@@ -548,22 +551,22 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"aria-selected": "false",
 						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),
-					!__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),
+					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_24)) : createCommentVNode("v-if", true),
+					message.value ? (openBlock(), createElementBlock("div", _hoisted_25, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true),
+					!__props.loading && !rows.value[0] && !creatable.value && !lookupError.value ? (openBlock(), createElementBlock("div", _hoisted_26, [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = createTextVNode("No suggestions.", -1))], true)])) : createCommentVNode("v-if", true)
+				], 8, _hoisted_14), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_13),
 				createElementVNode("div", {
 					class: "message",
 					id: `${uid.value}-validation`,
 					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_26),
-				createElementVNode("div", _hoisted_27, toDisplayString(statusText.value), 1),
-				createElementVNode("div", _hoisted_28, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
+				}), 128))], 8, _hoisted_27),
+				createElementVNode("div", _hoisted_28, toDisplayString(statusText.value), 1),
+				createElementVNode("div", _hoisted_29, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-af2537d5"]]);
+}), [["__scopeId", "data-v-87a4808b"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiContextMenu.js

@@ -65,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-2e00c9d8"]]);
+}), [["__scopeId", "data-v-dccd300f"]]);
 //#endregion
 export { UiContextMenu_default as t };

package/vue/chunks/UiDescriptionItem.js

@@ -11,6 +11,6 @@ var UiDescriptionItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-description-item" }, _ctx.$attrs), [createElementVNode("dt", null, toDisplayString(__props.term), 1), createElementVNode("dd", null, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16);
 		};
 	}
-}), [["__scopeId", "data-v-6e5b491d"]]);
+}), [["__scopeId", "data-v-314f8d3a"]]);
 //#endregion
 export { UiDescriptionItem_default as t };

package/vue/chunks/UiDescriptionList.js

@@ -24,6 +24,6 @@ var UiDescriptionList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			return openBlock(), createElementBlock("dl", mergeProps({ "data-component": "ui-description-list" }, _ctx.$attrs, { "data-ui-description-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-640c2332"]]);
+}), [["__scopeId", "data-v-99b2855c"]]);
 //#endregion
 export { UiDescriptionList_default as t };

package/vue/chunks/UiDialog.js

@@ -1,6 +1,7 @@
 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, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
+import { t as UiScrollArea_default } from "./UiScrollArea.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef, withCtx } 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", "data-ui-dialog-state"];
@@ -14,7 +15,6 @@ var _hoisted_3 = {
 	"aria-label": "Close",
 	ref: "close"
 };
-var _hoisted_4 = { class: "body" };
 //#endregion
 //#region .build/vue/UiDialog.vue
 var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -91,11 +91,14 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				ref: root
 			}), [
 				createElementVNode("header", null, [__props.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("v-if", true), createElementVNode("button", _hoisted_3, null, 512)]),
-				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				createVNode(UiScrollArea_default, { class: "body" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					_: 3
+				}),
 				createElementVNode("footer", null, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ef5a672e"]]);
+}), [["__scopeId", "data-v-eb581d80"]]);
 //#endregion
 export { UiDialog_default as t };