@threadlabs/looma 0.17.4 → 0.18.1

package/vue/UiMenuItem.vue

@@ -185,6 +185,9 @@ function attribute(value: unknown): any {
 }
 
 .label {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
   flex: 1;
   min-inline-size: 0;
 }

package/vue/UiSelect.vue

@@ -142,7 +142,7 @@ useComponentHost(controllerModule.default, {
   background-size: 1.125rem 1.125rem;
 }
 
-[data-component~="ui-select"]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"]:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-select-border-hover,
     var(--ui-control-border-hover, var(--ui-text-secondary))

package/vue/UiSpinner.vue

@@ -45,16 +45,21 @@ function attribute(value: unknown): any {
     :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
     ? String(({ true: label, false: null })[`${label !== ''}`])
     : attribute(({ true: label, false: null })[`${label !== ''}`])"
+    :aria-live="typeof (({ true: 'polite', false: null })[`${label !== ''}`]) === 'boolean'
+    ? String(({ true: 'polite', false: null })[`${label !== ''}`])
+    : attribute(({ true: 'polite', false: null })[`${label !== ''}`])"
     :aria-hidden="typeof (({ true: null, false: 'true' })[`${label !== ''}`]) === 'boolean'
     ? String(({ true: null, false: 'true' })[`${label !== ''}`])
     : attribute(({ true: null, false: 'true' })[`${label !== ''}`])"
     :data-ui-spinner-state="hostState || undefined"
-  ></span>
+  ><svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
+      <circle class="track" cx="25" cy="25" r="20"></circle>
+      <circle class="arc" cx="25" cy="25" r="20"></circle>
+    </svg></span>
 </template>
 
 <style scoped>
-/* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
-       and the label (or the text beside it) still says what is happening. */
+/* A rounded SVG arc grows and recedes over a quiet full-circle track. */
 [data-component~="ui-spinner"] {
   display: inline-flex;
   flex: none;
@@ -63,34 +68,62 @@ function attribute(value: unknown): any {
   box-sizing: border-box;
   inline-size: 1em;
   block-size: 1em;
-  border: 2px solid transparent;
-  border-block-start-color: currentColor;
-  border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
-  border-radius: 50%;
   color: currentColor;
   font-size: var(--ui-font-size-lg);
   line-height: 1;
-  animation: ui-spinner-chase 1s linear infinite;
 }
 
 [data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"] {
   font-size: var(--ui-font-size-md);
 }
 
-@keyframes ui-spinner-chase {
+svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  animation: ui-spinner-rotate 2s linear infinite;
+}
+
+circle {
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.track {
+  stroke: color-mix(in srgb, currentColor 16%, transparent);
+}
+
+.arc {
+  stroke: currentColor;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: ui-spinner-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes ui-spinner-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes ui-spinner-dash {
   0% {
-    transform: rotate(0);
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
   }
-  70% {
-    transform: rotate(160deg);
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
   }
   100% {
-    transform: rotate(1turn);
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-spinner"] {
+  svg,
+  .arc {
     animation: none;
   }
 }

package/vue/UiTextarea.vue

@@ -129,7 +129,7 @@ useComponentHost(controllerModule.default, {
   opacity: 1;
 }
 
-[data-component~="ui-textarea"]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-textarea"]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 

package/vue/chunks/UiAvatar.js

@@ -41,6 +41,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
 			props.size && `size size=${props.size}`,
+			hasImage.value && "hasImage",
 			props.shape && `shape shape=${props.shape}`,
 			props.active && "active"
 		].filter(Boolean).join(" "));
@@ -80,6 +81,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f9a69ac3"]]);
+}), [["__scopeId", "data-v-f0891fb1"]]);
 //#endregion
 export { UiAvatar_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-38a29166"]]);
+}), [["__scopeId", "data-v-fe098822"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -139,6 +139,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [__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-a89a1895"]]);
+}), [["__scopeId", "data-v-720dbd9f"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCombobox.js

@@ -55,6 +55,7 @@ var _hoisted_16 = {
 	class: "group"
 };
 var _hoisted_17 = [
+	"data-multiple",
 	"id",
 	"aria-selected",
 	"aria-disabled",
@@ -74,7 +75,11 @@ var _hoisted_23 = {
 	key: 1,
 	class: "primary"
 };
-var _hoisted_24 = ["id", "data-index"];
+var _hoisted_24 = [
+	"data-multiple",
+	"id",
+	"data-index"
+];
 var _hoisted_25 = {
 	key: 1,
 	class: "message"
@@ -521,6 +526,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 								key: row.id,
 								class: normalizeClass(["option", { active: row.index === active.value }]),
 								role: "option",
+								"data-ui-choice-option": "",
+								"data-multiple": __props.multiple ? "" : void 0,
 								id: `${uid.value}-option-${row.index}`,
 								"aria-selected": row.selected,
 								"aria-disabled": row.disabled,
@@ -548,7 +555,9 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						key: 0,
 						class: normalizeClass(["option", { active: createIndex.value === active.value }]),
 						role: "option",
+						"data-ui-choice-option": "",
 						"aria-selected": "false",
+						"data-multiple": __props.multiple ? "" : void 0,
 						id: `${uid.value}-option-${createIndex.value}`,
 						"data-index": createIndex.value
 					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_24)) : createCommentVNode("v-if", true),
@@ -567,6 +576,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-87a4808b"]]);
+}), [["__scopeId", "data-v-f90db7fa"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiIconButton.js

@@ -95,6 +95,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ae1ec9d2"]]);
+}), [["__scopeId", "data-v-9828be81"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInput.js

@@ -66,6 +66,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-aa3c35f4"]]);
+}), [["__scopeId", "data-v-0d457505"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -41,6 +41,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-51eefe72"]]);
+}), [["__scopeId", "data-v-5ed34845"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiListbox.js

@@ -1,14 +1,35 @@
 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, defineComponent, mergeProps, openBlock, ref, renderSlot, vModelSelect, withDirectives } from "vue";
+import { t as UiScrollArea_default } from "./UiScrollArea.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-listbox/ui-listbox.js";
 //#region .build/vue/UiListbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"tabindex",
+	"aria-multiselectable",
+	"aria-disabled",
+	"aria-required",
+	"aria-invalid"
+];
+var _hoisted_2 = [
+	"data-multiple",
+	"id",
+	"data-index",
+	"aria-selected",
+	"aria-disabled"
+];
+var _hoisted_3 = [
 	"size",
 	"multiple",
 	"disabled",
 	"required",
-	"aria-invalid"
+	"name"
+];
+var _hoisted_4 = ["name", "value"];
+var _hoisted_5 = [
+	"required",
+	"checked",
+	"disabled"
 ];
 //#endregion
 //#region .build/vue/UiListbox.vue
@@ -28,43 +49,136 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			type: Boolean,
 			default: false
 		},
+		name: { default: "" },
 		required: {
 			type: Boolean,
 			default: false
 		},
 		rows: { default: 5 },
 		value: {},
-		values: {},
-		modelValue: {}
+		values: {}
 	},
-	emits: ["update:modelValue"],
+	emits: [
+		"update:value",
+		"update:values",
+		"change"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const model = computed({
-			get: () => props.modelValue ?? props.value ?? void 0,
-			set: (value) => emit("update:modelValue", value)
-		});
 		const root = ref(null);
-		const dispatch = createDispatch(root);
+		const choicesElement = useTemplateRef("choices");
+		const optionsElement = useTemplateRef("options");
+		const validityElement = useTemplateRef("validity");
+		const choices = ref([]);
+		const selection = ref([]);
+		const hasSelection = ref(false);
+		const active = ref(-1);
+		const uid = ref("");
+		const validationError = ref(false);
+		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && Array.isArray(detail["values"]) && detail["values"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer") && Object.keys(detail).every((key) => [
+			"value",
+			"values",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { change: isChangeDetail },
+			modeled: ["value", "values"]
+		});
 		useComponentHost(controllerModule.default, {
 			root,
 			dispatch,
-			props
+			props,
+			refs: {
+				choices: choicesElement,
+				options: optionsElement,
+				validity: validityElement
+			},
+			state: {
+				choices,
+				selection,
+				hasSelection,
+				active,
+				uid,
+				validationError
+			}
 		});
+		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 withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-listbox" }, _ctx.$attrs, {
-				size: __props.rows,
-				multiple: __props.multiple,
-				disabled: __props.disabled,
-				required: __props.required,
-				"aria-invalid": __props.invalid,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+			return openBlock(), createElementBlock("div", mergeProps({
+				"data-component": "ui-listbox",
+				role: "listbox"
+			}, _ctx.$attrs, {
+				tabindex: attribute({
+					true: "-1",
+					false: "0"
+				}[`${__props.disabled}`]),
+				"aria-multiselectable": __props.multiple,
+				"aria-disabled": __props.disabled,
+				"aria-required": __props.required,
+				"aria-invalid": __props.invalid || validationError.value,
+				style: { "--_rows": __props.rows },
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
+			}), [
+				createVNode(UiScrollArea_default, {
+					class: "choices",
+					ref_key: "choices",
+					ref: choices
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(choices.value, (choice) => {
+						return openBlock(), createElementBlock("div", {
+							key: choice.index,
+							class: normalizeClass(["option", { active: choice.index === active.value }]),
+							role: "option",
+							"data-ui-choice-option": "",
+							"data-multiple": __props.multiple ? "" : void 0,
+							id: `${uid.value}-option-${choice.index}`,
+							"data-index": choice.index,
+							"aria-selected": choice.selected,
+							"aria-disabled": choice.disabled
+						}, [createElementVNode("span", null, toDisplayString(choice.label), 1)], 10, _hoisted_2);
+					}), 128))]),
+					_: 1
+				}, 512),
+				createElementVNode("select", {
+					class: "fallback",
+					"aria-label": "Choices",
+					size: __props.rows,
+					multiple: __props.multiple,
+					disabled: __props.disabled,
+					required: __props.required,
+					name: __props.name,
+					ref: "options"
+				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_3),
+				__props.name && !__props.disabled ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selection.value, (selected, index) => {
+					return openBlock(), createElementBlock("input", {
+						key: index,
+						type: "hidden",
+						name: __props.name,
+						value: selected
+					}, null, 8, _hoisted_4);
+				}), 128)) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					class: "validity",
+					type: "checkbox",
+					"aria-hidden": "true",
+					tabindex: "-1",
+					required: __props.required && !hasSelection.value && !__props.disabled,
+					checked: hasSelection.value,
+					disabled: __props.disabled,
+					ref: "validity"
+				}, null, 8, _hoisted_5)
+			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-44b33b05"]]);
+}), [["__scopeId", "data-v-db56e4d0"]]);
 //#endregion
 export { UiListbox_default as t };

package/vue/chunks/UiMenuItem.js

@@ -144,6 +144,6 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_4));
 		};
 	}
-}), [["__scopeId", "data-v-6b7f9bed"]]);
+}), [["__scopeId", "data-v-6d5ac848"]]);
 //#endregion
 export { UiMenuItem_default as t };

package/vue/chunks/UiSelect.js

@@ -60,6 +60,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-3f68a24f"]]);
+}), [["__scopeId", "data-v-699dcb22"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSpinner.js

@@ -1,9 +1,10 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock } from "vue";
 //#region .build/vue/UiSpinner.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"role",
 	"aria-label",
+	"aria-live",
 	"aria-hidden",
 	"data-ui-spinner-state"
 ];
@@ -47,6 +48,16 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					true: __props.label,
 					false: null
 				}[`${__props.label !== ""}`]),
+				"aria-live": typeof {
+					true: "polite",
+					false: null
+				}[`${__props.label !== ""}`] === "boolean" ? String({
+					true: "polite",
+					false: null
+				}[`${__props.label !== ""}`]) : attribute({
+					true: "polite",
+					false: null
+				}[`${__props.label !== ""}`]),
 				"aria-hidden": typeof {
 					true: null,
 					false: "true"
@@ -58,9 +69,24 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					false: "true"
 				}[`${__props.label !== ""}`]),
 				"data-ui-spinner-state": hostState.value || void 0
-			}), null, 16, _hoisted_1);
+			}), [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+				viewBox: "0 0 50 50",
+				fill: "none",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [createElementVNode("circle", {
+				class: "track",
+				cx: "25",
+				cy: "25",
+				r: "20"
+			}), createElementVNode("circle", {
+				class: "arc",
+				cx: "25",
+				cy: "25",
+				r: "20"
+			})], -1)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f5f5cd89"]]);
+}), [["__scopeId", "data-v-7dbd4f40"]]);
 //#endregion
 export { UiSpinner_default as t };

package/vue/chunks/UiTextarea.js

@@ -74,6 +74,6 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}), null, 16, _hoisted_1)), [[vModelText, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-f371e58f"]]);
+}), [["__scopeId", "data-v-a2e0e09f"]]);
 //#endregion
 export { UiTextarea_default as t };