@threadlabs/looma 0.9.2 → 0.10.0

package/vanilla/UiRadioGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-radio-group/ui-radio-group.js";
 import "../styles/ui-radio-group.css";
 
-const definition = {...{"contract":{"tag":"ui-radio-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Options"},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"orientation"},"default":"horizontal"},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"}],"children":[{"kind":"element","name":"legend","attributes":[],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}]},{"kind":"slot"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"fieldset","choices":["fieldset"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-radio-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Options"},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"orientation"},"default":"horizontal"},"required":{"type":"boolean","required":false,"target":{"attribute":"aria-required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"},{"kind":"attribute","name":"aria-required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"legend","attributes":[],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}]},{"kind":"slot"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"fieldset","choices":["fieldset"]}},source:{file:import.meta.url},css:""};
 
 export function createUiRadioGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -14,6 +14,12 @@ export function createUiRadioGroup(options = {}) {
     element.setAttribute(name, value === true ? "" : String(value));
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "radiogroup");
+  const value0 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (typeof value0 === "boolean") element.setAttribute("aria-required", String(value0));
+  else element.removeAttribute("aria-required");
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
   element.setAttribute("data-component", "ui-radio-group");
   const element0 = document.createElement("legend");
   const element1 = document.createElement("template");

package/vanilla/UiSearchResultRow.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-search-result-row.css";
 
-const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"selected"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-current"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-current","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSearchResultRow(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -16,6 +16,9 @@ export function createUiSearchResultRow(options = {}) {
   const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
   if (value0 === true) element.setAttribute("disabled", "");
   else element.removeAttribute("disabled");
+  const value1 = componentProps["selected"] === undefined ? false : componentProps["selected"];
+  if (typeof value1 === "boolean") element.setAttribute("aria-current", String(value1));
+  else element.removeAttribute("aria-current");
   element.setAttribute("data-component", "ui-search-result-row");
   const element0 = document.createElement("span");
   element0.setAttribute("class", "leading");

package/vanilla/UiSwitch.d.ts

@@ -9,6 +9,7 @@ export interface UiSwitchElement extends HTMLLabelElement {
 export interface UiSwitchProps {
   checked?: boolean | null;
   disabled?: boolean | null;
+  name?: string | null;
   required?: boolean | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiSwitch.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-switch/ui-switch.js";
 import "../styles/ui-switch.css";
 
-const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSwitch(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -23,9 +23,12 @@ export function createUiSwitch(options = {}) {
   const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
   if (value1 === true) element0.setAttribute("required", "");
   else element0.removeAttribute("required");
-  const value2 = componentProps["value"] === undefined ? "on" : componentProps["value"];
-  if (value2 === null || value2 === undefined) element0.removeAttribute("value");
-  else element0.setAttribute("value", String(value2));
+  const value2 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value2 === null || value2 === undefined) element0.removeAttribute("name");
+  else element0.setAttribute("name", String(value2));
+  const value3 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value3 === null || value3 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value3));
   element.append(element0);
   const element1 = document.createElement("span");
   element1.setAttribute("class", "label");

package/vue/UiCheckbox.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     checked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
+    name?: string;
     required?: boolean;
     value?: string;
 };
@@ -26,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
+    name: string;
     value: string;
     disabled: boolean;
     checked: boolean;

package/vue/UiCheckbox.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
     checked?: boolean
     disabled?: boolean
     indeterminate?: boolean
+    name?: string
     required?: boolean
     value?: string
   }>(),
@@ -18,6 +19,7 @@ const props = withDefaults(
     checked: false,
     disabled: false,
     indeterminate: false,
+    name: '',
     required: false,
     value: 'on',
   },
@@ -81,6 +83,7 @@ useComponentHost(controllerModule.default, {
       :indeterminate.prop="indeterminate"
       :disabled="disabled"
       :required="required"
+      :name="name"
       :value="value"
       ref="input"
     >

package/vue/UiCombobox.vue

@@ -208,6 +208,7 @@ const validation = ref<
   }
 >({ status: 'pristine', touched: false, dirty: false, issues: [] })
 const uid = ref('')
+const submitted = ref('')
 const groups = ref<
   {
     name: string
@@ -455,6 +456,7 @@ const { host, ready } = useComponentHost(controllerModule.default, {
     lookupError,
     validation,
     uid,
+    submitted,
     groups,
     creatable,
     createIndex,
@@ -518,13 +520,33 @@ defineExpose({
           :aria-busy="validationStatus === 'pending'"
           :value.prop="display"
           :placeholder="placeholder"
-          :name="name"
           :disabled="disabled"
           :readonly="readonly"
-          :required="required"
+          :required="required && !(multiple && internalItems[0])"
           ref="input"
         >
-        <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+        <input
+          v-if="name && !multiple"
+          type="hidden"
+          :name="name"
+          :value="submitted"
+          :disabled="disabled"
+        >
+        <template v-if="name && multiple"><input
+            v-for="item in internalItems"
+            :key="item.id"
+            type="hidden"
+            :name="name"
+            :value="item.value"
+            :disabled="disabled"
+          ></template>
+        <button
+          v-if="clearable"
+          type="button"
+          data-combobox-action="clear"
+          aria-label="Clear"
+          :disabled="disabled || readonly"
+        >
           <svg
             class="affordance-icon"
             aria-hidden="true"
@@ -544,6 +566,7 @@ defineExpose({
           tabindex="-1"
           aria-label="Show suggestions"
           :aria-controls="`${uid}-listbox`"
+          :disabled="disabled || readonly"
         >
           <svg
             class="affordance-icon"
@@ -630,7 +653,7 @@ defineExpose({
       </div>
       <slot name="footer" />
     </div>
-    <div class="message" :id="`${uid}-validation`" :hidden="!validation.issues.length">
+    <div class="message" :id="`${uid}-validation`" :hidden="!(validation.issues[0])">
       <div v-for="(issue, index) in validation.issues" :key="index">{{ issue.message }}</div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{{ statusText }}</div>

package/vue/UiRadioGroup.vue

@@ -91,6 +91,8 @@ useComponentHost(controllerModule.default, {
     data-component="ui-radio-group"
     role="radiogroup"
     v-bind="$attrs"
+    :aria-required="required"
+    :disabled="disabled"
     :data-ui-radio-group-state="hostState || undefined"
     ref="root"
   >

package/vue/UiSearchResultRow.vue

@@ -29,6 +29,7 @@ const hostState = computed(() =>
     type="button"
     v-bind="$attrs"
     :disabled="disabled"
+    :aria-current="selected"
     :data-ui-search-result-row-state="hostState || undefined"
   >
     <span class="leading"><slot name="leading" /></span>

package/vue/UiSwitch.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     checked?: boolean;
     disabled?: boolean;
+    name?: string;
     required?: boolean;
     value?: string;
 };
@@ -25,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
+    name: string;
     value: string;
     disabled: boolean;
     checked: boolean;

package/vue/UiSwitch.vue

@@ -10,12 +10,14 @@ const props = withDefaults(
   defineProps<{
     checked?: boolean
     disabled?: boolean
+    name?: string
     required?: boolean
     value?: string
   }>(),
   {
     checked: false,
     disabled: false,
+    name: '',
     required: false,
     value: 'on',
   },
@@ -79,6 +81,7 @@ useComponentHost(controllerModule.default, {
       :checked.prop="internalChecked"
       :disabled="disabled"
       :required="required"
+      :name="name"
       :value="value"
       ref="input"
     >

package/vue/chunks/UiCheckbox.js

@@ -9,6 +9,7 @@ var _hoisted_2 = [
 	".indeterminate",
 	"disabled",
 	"required",
+	"name",
 	"value"
 ];
 var _hoisted_3 = { class: "label" };
@@ -30,6 +31,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		name: { default: "" },
 		required: {
 			type: Boolean,
 			default: false
@@ -76,11 +78,12 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				".indeterminate": __props.indeterminate,
 				disabled: __props.disabled,
 				required: __props.required,
+				name: __props.name,
 				value: __props.value,
 				ref: "input"
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-964081a0"]]);
+}), [["__scopeId", "data-v-44d93832"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -25,50 +25,54 @@ var _hoisted_6 = [
 	"aria-busy",
 	".value",
 	"placeholder",
-	"name",
 	"disabled",
 	"readonly",
 	"required"
 ];
-var _hoisted_7 = {
-	key: 1,
-	type: "button",
-	"data-combobox-action": "clear",
-	"aria-label": "Clear"
-};
-var _hoisted_8 = ["aria-controls"];
-var _hoisted_9 = ["id", "disabled"];
-var _hoisted_10 = ["hidden"];
-var _hoisted_11 = [
+var _hoisted_7 = [
+	"name",
+	"value",
+	"disabled"
+];
+var _hoisted_8 = [
+	"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 = [
 	"id",
 	"aria-label",
 	"aria-busy"
 ];
-var _hoisted_12 = ["role", "aria-label"];
-var _hoisted_13 = {
+var _hoisted_14 = ["role", "aria-label"];
+var _hoisted_15 = {
 	key: 0,
 	class: "group"
 };
-var _hoisted_14 = [
+var _hoisted_16 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"data-index"
 ];
-var _hoisted_15 = { class: "primary" };
-var _hoisted_16 = ["id", "data-index"];
-var _hoisted_17 = {
+var _hoisted_17 = { class: "primary" };
+var _hoisted_18 = ["id", "data-index"];
+var _hoisted_19 = {
 	key: 1,
 	class: "message"
 };
-var _hoisted_18 = ["id", "hidden"];
-var _hoisted_19 = {
+var _hoisted_20 = ["id", "hidden"];
+var _hoisted_21 = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
 };
-var _hoisted_20 = {
+var _hoisted_22 = {
 	class: "authored-options",
 	hidden: "",
 	"aria-hidden": "true",
@@ -162,6 +166,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			issues: []
 		});
 		const uid = ref("");
+		const submitted = ref("");
 		const groups = ref([]);
 		const creatable = ref(false);
 		const createIndex = ref(0);
@@ -280,6 +285,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				lookupError,
 				validation,
 				uid,
+				submitted,
 				groups,
 				creatable,
 				createIndex,
@@ -335,13 +341,34 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"aria-busy": validationStatus.value === "pending",
 						".value": display.value,
 						placeholder: __props.placeholder,
-						name: __props.name,
 						disabled: __props.disabled,
 						readonly: __props.readonly,
-						required: __props.required,
+						required: __props.required && !(__props.multiple && internalItems.value[0]),
 						ref: "input"
 					}, null, 40, _hoisted_6),
-					__props.clearable ? (openBlock(), createElementBlock("button", _hoisted_7, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+					__props.name && !__props.multiple ? (openBlock(), createElementBlock("input", {
+						key: 1,
+						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) => {
+						return openBlock(), createElementBlock("input", {
+							key: item.id,
+							type: "hidden",
+							name: __props.name,
+							value: item.value,
+							disabled: __props.disabled
+						}, null, 8, _hoisted_8);
+					}), 128)) : createCommentVNode("v-if", true),
+					__props.clearable ? (openBlock(), createElementBlock("button", {
+						key: 3,
+						type: "button",
+						"data-combobox-action": "clear",
+						"aria-label": "Clear",
+						disabled: __props.disabled || __props.readonly
+					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
 						viewBox: "0 0 24 24",
@@ -349,14 +376,15 @@ 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)])])) : createCommentVNode("v-if", true),
+					}, [createElementVNode("path", { d: "M7 7l10 10M17 7 7 17" })], -1)])], 8, _hoisted_9)) : createCommentVNode("v-if", true),
 					__props.disclosure ? (openBlock(), createElementBlock("button", {
-						key: 2,
+						key: 4,
 						type: "button",
 						"data-combobox-action": "disclosure",
 						tabindex: "-1",
 						"aria-label": "Show suggestions",
-						"aria-controls": `${uid.value}-listbox`
+						"aria-controls": `${uid.value}-listbox`,
+						disabled: __props.disabled || __props.readonly
 					}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
@@ -366,7 +394,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_8)) : createCommentVNode("v-if", true)
+					}, [createElementVNode("path", { d: "m6 9 6 6 6-6" })], -1)])], 8, _hoisted_10)) : createCommentVNode("v-if", true)
 				], 512), __props.help ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					class: "help",
@@ -391,7 +419,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_9)) : createCommentVNode("v-if", true)]),
+				], -1)])], 8, _hoisted_11)) : createCommentVNode("v-if", true)]),
 				__props.help ? (openBlock(), createBlock(UiTooltip_default, {
 					key: 0,
 					trigger: "click",
@@ -417,7 +445,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_13, toDisplayString(group.name), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.rows, (row) => {
+						}, [group.name ? (openBlock(), createElementBlock("div", _hoisted_15, 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 }]),
@@ -426,8 +454,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 								"aria-selected": row.selected,
 								"aria-disabled": row.disabled,
 								"data-index": row.index
-							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [createElementVNode("span", _hoisted_15, toDisplayString(row.label), 1)], true)], 10, _hoisted_14);
-						}), 128))], 8, _hoisted_12);
+							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [createElementVNode("span", _hoisted_17, toDisplayString(row.label), 1)], true)], 10, _hoisted_16);
+						}), 128))], 8, _hoisted_14);
 					}), 128)),
 					creatable.value ? (openBlock(), createElementBlock("div", {
 						key: 0,
@@ -436,21 +464,21 @@ 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_16)) : createCommentVNode("v-if", true),
-					message.value ? (openBlock(), createElementBlock("div", _hoisted_17, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true)
-				], 8, _hoisted_11), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_10),
+					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_18)) : createCommentVNode("v-if", true),
+					message.value ? (openBlock(), createElementBlock("div", _hoisted_19, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true)
+				], 8, _hoisted_13), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_12),
 				createElementVNode("div", {
 					class: "message",
 					id: `${uid.value}-validation`,
-					hidden: !validation.value.issues.length
+					hidden: !validation.value.issues[0]
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(validation.value.issues, (issue, index) => {
 					return openBlock(), createElementBlock("div", { key: index }, toDisplayString(issue.message), 1);
-				}), 128))], 8, _hoisted_18),
-				createElementVNode("div", _hoisted_19, toDisplayString(statusText.value), 1),
-				createElementVNode("div", _hoisted_20, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
+				}), 128))], 8, _hoisted_20),
+				createElementVNode("div", _hoisted_21, toDisplayString(statusText.value), 1),
+				createElementVNode("div", _hoisted_22, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3b8b0ecf"]]);
+}), [["__scopeId", "data-v-cd33b9b7"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiRadioGroup.js

@@ -3,7 +3,11 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-radio-group/ui-radio-group.js";
 //#region .build/vue/UiRadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-radio-group-state"];
+var _hoisted_1 = [
+	"aria-required",
+	"disabled",
+	"data-ui-radio-group-state"
+];
 //#endregion
 //#region .build/vue/UiRadioGroup.vue
 var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -63,12 +67,14 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-component": "ui-radio-group",
 				role: "radiogroup"
 			}, _ctx.$attrs, {
+				"aria-required": __props.required,
+				disabled: __props.disabled,
 				"data-ui-radio-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("legend", null, toDisplayString(__props.label), 1), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-cd639df6"]]);
+}), [["__scopeId", "data-v-f54344c6"]]);
 //#endregion
 export { UiRadioGroup_default as t };

package/vue/chunks/UiSearchResultRow.js

@@ -1,7 +1,11 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
 //#region .build/vue/UiSearchResultRow.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled", "data-ui-search-result-row-state"];
+var _hoisted_1 = [
+	"disabled",
+	"aria-current",
+	"data-ui-search-result-row-state"
+];
 var _hoisted_2 = { class: "leading" };
 var _hoisted_3 = { class: "content" };
 var _hoisted_4 = { class: "title" };
@@ -33,6 +37,7 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 				type: "button"
 			}, _ctx.$attrs, {
 				disabled: __props.disabled,
+				"aria-current": __props.selected,
 				"data-ui-search-result-row-state": hostState.value || void 0
 			}), [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
@@ -45,6 +50,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-9f29c4b0"]]);
+}), [["__scopeId", "data-v-c2562cce"]]);
 //#endregion
 export { UiSearchResultRow_default as t };

package/vue/chunks/UiSwitch.js

@@ -8,6 +8,7 @@ var _hoisted_2 = [
 	".checked",
 	"disabled",
 	"required",
+	"name",
 	"value"
 ];
 var _hoisted_3 = { class: "label" };
@@ -25,6 +26,7 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
+		name: { default: "" },
 		required: {
 			type: Boolean,
 			default: false
@@ -71,11 +73,12 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				".checked": internalChecked.value,
 				disabled: __props.disabled,
 				required: __props.required,
+				name: __props.name,
 				value: __props.value,
 				ref: "input"
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-529fe437"]]);
+}), [["__scopeId", "data-v-aeb44053"]]);
 //#endregion
 export { UiSwitch_default as t };