@threadlabs/looma 0.14.6 → 0.14.8

package/vue/chunks/UiCombobox.js

@@ -57,22 +57,35 @@ var _hoisted_16 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
-	"data-index"
+	"data-index",
+	"aria-labelledby",
+	"aria-describedby"
 ];
-var _hoisted_17 = { class: "primary" };
-var _hoisted_18 = ["id", "data-index"];
-var _hoisted_19 = {
+var _hoisted_17 = {
+	key: 0,
+	class: "detail"
+};
+var _hoisted_18 = { class: "line" };
+var _hoisted_19 = ["id"];
+var _hoisted_20 = ["id"];
+var _hoisted_21 = ["id"];
+var _hoisted_22 = {
+	key: 1,
+	class: "primary"
+};
+var _hoisted_23 = ["id", "data-index"];
+var _hoisted_24 = {
 	key: 1,
 	class: "message"
 };
-var _hoisted_20 = ["id", "hidden"];
-var _hoisted_21 = {
+var _hoisted_25 = ["id", "hidden"];
+var _hoisted_26 = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
 };
-var _hoisted_22 = {
+var _hoisted_27 = {
 	class: "authored-options",
 	hidden: "",
 	"aria-hidden": "true",
@@ -104,6 +117,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		filter: { default: "label" },
 		help: { default: "" },
 		items: {},
 		label: { default: "" },
@@ -188,31 +202,37 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			"display",
 			"trigger"
 		].includes(key));
-		const isValueChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
+		const isValueChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && (detail["option"]["description"] === void 0 || typeof detail["option"]["description"] === "string") && (detail["option"]["tag"] === void 0 || detail["option"]["tag"] !== null && typeof detail["option"]["tag"] === "object" && !Array.isArray(detail["option"]["tag"]) && typeof detail["option"]["tag"]["label"] === "string" && (detail["option"]["tag"]["tone"] === void 0 || detail["option"]["tag"]["tone"] === "neutral" || detail["option"]["tag"]["tone"] === "accent" || detail["option"]["tag"]["tone"] === "info" || detail["option"]["tag"]["tone"] === "success" || detail["option"]["tag"]["tone"] === "warning" || detail["option"]["tag"]["tone"] === "danger") && Object.keys(detail["option"]["tag"]).every((key) => ["label", "tone"].includes(key))) && Object.keys(detail["option"]).every((key) => [
 			"id",
 			"value",
 			"label",
 			"group",
-			"disabled"
+			"disabled",
+			"description",
+			"tag"
 		].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"value",
 			"query",
 			"option",
 			"kind",
 			"trigger"
-		].includes(key)) || Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && Object.keys(item).every((key) => [
+		].includes(key)) || Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && (item["description"] === void 0 || typeof item["description"] === "string") && (item["tag"] === void 0 || item["tag"] !== null && typeof item["tag"] === "object" && !Array.isArray(item["tag"]) && typeof item["tag"]["label"] === "string" && (item["tag"]["tone"] === void 0 || item["tag"]["tone"] === "neutral" || item["tag"]["tone"] === "accent" || item["tag"]["tone"] === "info" || item["tag"]["tone"] === "success" || item["tag"]["tone"] === "warning" || item["tag"]["tone"] === "danger") && Object.keys(item["tag"]).every((key) => ["label", "tone"].includes(key))) && Object.keys(item).every((key) => [
 			"id",
 			"value",
 			"label",
 			"group",
-			"disabled"
+			"disabled",
+			"description",
+			"tag"
 		].includes(key)));
-		const isFreeEntryDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && Object.keys(detail["option"]).every((key) => [
+		const isFreeEntryDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && (detail["option"]["description"] === void 0 || typeof detail["option"]["description"] === "string") && (detail["option"]["tag"] === void 0 || detail["option"]["tag"] !== null && typeof detail["option"]["tag"] === "object" && !Array.isArray(detail["option"]["tag"]) && typeof detail["option"]["tag"]["label"] === "string" && (detail["option"]["tag"]["tone"] === void 0 || detail["option"]["tag"]["tone"] === "neutral" || detail["option"]["tag"]["tone"] === "accent" || detail["option"]["tag"]["tone"] === "info" || detail["option"]["tag"]["tone"] === "success" || detail["option"]["tag"]["tone"] === "warning" || detail["option"]["tag"]["tone"] === "danger") && Object.keys(detail["option"]["tag"]).every((key) => ["label", "tone"].includes(key))) && Object.keys(detail["option"]).every((key) => [
 			"id",
 			"value",
 			"label",
 			"group",
-			"disabled"
+			"disabled",
+			"description",
+			"tag"
 		].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"value",
 			"query",
@@ -231,19 +251,23 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			"issues",
 			"output"
 		].includes(key));
-		const isOptionsChangeDetail = (detail) => Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && Object.keys(item).every((key) => [
+		const isOptionsChangeDetail = (detail) => Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && (item["description"] === void 0 || typeof item["description"] === "string") && (item["tag"] === void 0 || item["tag"] !== null && typeof item["tag"] === "object" && !Array.isArray(item["tag"]) && typeof item["tag"]["label"] === "string" && (item["tag"]["tone"] === void 0 || item["tag"]["tone"] === "neutral" || item["tag"]["tone"] === "accent" || item["tag"]["tone"] === "info" || item["tag"]["tone"] === "success" || item["tag"]["tone"] === "warning" || item["tag"]["tone"] === "danger") && Object.keys(item["tag"]).every((key) => ["label", "tone"].includes(key))) && Object.keys(item).every((key) => [
 			"id",
 			"value",
 			"label",
 			"group",
-			"disabled"
+			"disabled",
+			"description",
+			"tag"
 		].includes(key)));
-		const isAddItemDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["item"] !== null && typeof detail["item"] === "object" && !Array.isArray(detail["item"]) && typeof detail["item"]["id"] === "string" && typeof detail["item"]["value"] === "string" && typeof detail["item"]["label"] === "string" && (detail["item"]["group"] === void 0 || typeof detail["item"]["group"] === "string") && (detail["item"]["disabled"] === void 0 || typeof detail["item"]["disabled"] === "boolean") && Object.keys(detail["item"]).every((key) => [
+		const isAddItemDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["item"] !== null && typeof detail["item"] === "object" && !Array.isArray(detail["item"]) && typeof detail["item"]["id"] === "string" && typeof detail["item"]["value"] === "string" && typeof detail["item"]["label"] === "string" && (detail["item"]["group"] === void 0 || typeof detail["item"]["group"] === "string") && (detail["item"]["disabled"] === void 0 || typeof detail["item"]["disabled"] === "boolean") && (detail["item"]["description"] === void 0 || typeof detail["item"]["description"] === "string") && (detail["item"]["tag"] === void 0 || detail["item"]["tag"] !== null && typeof detail["item"]["tag"] === "object" && !Array.isArray(detail["item"]["tag"]) && typeof detail["item"]["tag"]["label"] === "string" && (detail["item"]["tag"]["tone"] === void 0 || detail["item"]["tag"]["tone"] === "neutral" || detail["item"]["tag"]["tone"] === "accent" || detail["item"]["tag"]["tone"] === "info" || detail["item"]["tag"]["tone"] === "success" || detail["item"]["tag"]["tone"] === "warning" || detail["item"]["tag"]["tone"] === "danger") && Object.keys(detail["item"]["tag"]).every((key) => ["label", "tone"].includes(key))) && Object.keys(detail["item"]).every((key) => [
 			"id",
 			"value",
 			"label",
 			"group",
-			"disabled"
+			"disabled",
+			"description",
+			"tag"
 		].includes(key)) && Number.isInteger(detail["index"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"item",
 			"index",
@@ -462,8 +486,23 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 								id: `${uid.value}-option-${row.index}`,
 								"aria-selected": row.selected,
 								"aria-disabled": row.disabled,
-								"data-index": row.index
-							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [createElementVNode("span", _hoisted_17, toDisplayString(row.label), 1)], true)], 10, _hoisted_16);
+								"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", {
+								class: "primary",
+								id: `${uid.value}-option-${row.index}-label`
+							}, toDisplayString(row.label), 9, _hoisted_19), row.tag ? (openBlock(), createBlock(UiBadge_default, {
+								key: 0,
+								tone: row.tag?.tone
+							}, {
+								default: withCtx(() => [createElementVNode("span", { id: `${uid.value}-option-${row.index}-tag` }, toDisplayString(row.tag?.label), 9, _hoisted_20)]),
+								_: 2
+							}, 1032, ["tone"])) : 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);
 					}), 128)),
 					creatable.value ? (openBlock(), createElementBlock("div", {
@@ -473,8 +512,8 @@ 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_18)) : createCommentVNode("v-if", true),
-					message.value ? (openBlock(), createElementBlock("div", _hoisted_19, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true)
+					}, 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)
 				], 8, _hoisted_13), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_12),
 				createElementVNode("div", {
 					class: "message",
@@ -482,12 +521,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_20),
-				createElementVNode("div", _hoisted_21, toDisplayString(statusText.value), 1),
-				createElementVNode("div", _hoisted_22, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
+				}), 128))], 8, _hoisted_25),
+				createElementVNode("div", _hoisted_26, toDisplayString(statusText.value), 1),
+				createElementVNode("div", _hoisted_27, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-fd4a871f"]]);
+}), [["__scopeId", "data-v-10aa8368"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/components.css

@@ -1356,7 +1356,7 @@ input[data-v-bfcc98e1]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-v-10aa8368] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-combobox-label-text: var(--ui-combobox-label-text);
   --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -1375,20 +1375,20 @@ input[data-v-bfcc98e1]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-fd4a871f] {
+label[data-v-10aa8368] {
   color: var(--_ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-fd4a871f] {
+.control[data-v-10aa8368] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-fd4a871f] {
+.field[data-v-10aa8368] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1400,14 +1400,14 @@ label[data-v-fd4a871f] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-fd4a871f]:focus-within {
+.field[data-v-10aa8368]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-fd4a871f] {
+.help[data-v-10aa8368] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1424,28 +1424,28 @@ label[data-v-fd4a871f] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-fd4a871f]:hover:enabled,
-.help[aria-expanded="true"][data-v-fd4a871f] {
+.help[data-v-10aa8368]:hover:enabled,
+.help[aria-expanded="true"][data-v-10aa8368] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-fd4a871f]:focus-visible {
+.help[data-v-10aa8368]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-fd4a871f]:disabled {
+.help[data-v-10aa8368]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-fd4a871f] {
+.help-icon[data-v-10aa8368] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-fd4a871f]::selection {
+input[data-v-10aa8368]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-fd4a871f] {
+input[data-v-10aa8368] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1461,20 +1461,20 @@ input[data-v-fd4a871f] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-10aa8368] {
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-10aa8368] {
   min-block-size: calc(var(--_row) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-10aa8368] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
-button[data-v-fd4a871f] {
+button[data-v-10aa8368] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1489,31 +1489,31 @@ button[data-v-fd4a871f] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-fd4a871f] {
+.affordance-icon[data-v-10aa8368] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-fd4a871f]:hover:enabled {
+button[data-v-10aa8368]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-fd4a871f]:focus-visible {
+button[data-v-10aa8368]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-fd4a871f]:disabled, button[data-v-fd4a871f]:disabled {
+input[data-v-10aa8368]:disabled, button[data-v-10aa8368]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-fd4a871f]:has(input:disabled) {
+.field[data-v-10aa8368]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-10aa8368] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-fd4a871f] {
+.popup[data-v-10aa8368] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1527,40 +1527,57 @@ input[data-v-fd4a871f]:disabled, button[data-v-fd4a871f]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-fd4a871f] {
+[hidden][data-v-10aa8368] {
   display: none;
 }
-.option[data-v-fd4a871f] {
+.option[data-v-10aa8368] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-fd4a871f]:hover, .option.active[data-v-fd4a871f] {
+.option[data-v-10aa8368]:hover, .option.active[data-v-10aa8368] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-fd4a871f] {
+.option[aria-disabled="true"][data-v-10aa8368] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.primary[data-v-fd4a871f] {
+.primary[data-v-10aa8368] {
   display: block;
   color: var(--_ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-fd4a871f], .group[data-v-fd4a871f] {
+/* A row with a tag or a description: the label and its tag on one line, the description under them. */
+.detail[data-v-10aa8368] {
+  display: grid;
+  gap: var(--ui-space-0-5);
+  min-inline-size: 0;
+}
+.line[data-v-10aa8368] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+.description[data-v-10aa8368] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-md);
+}
+.message[data-v-10aa8368], .group[data-v-10aa8368] {
   color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-fd4a871f], .popup .message[data-v-fd4a871f] {
+.group[data-v-10aa8368], .popup .message[data-v-10aa8368] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-fd4a871f] {
+.sr-only[data-v-10aa8368] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -1569,24 +1586,24 @@ input[data-v-fd4a871f]:disabled, button[data-v-fd4a871f]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-fd4a871f] {
+button[data-v-10aa8368] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
   /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
      body-size text: below 16px, iOS zooms the page into the focused field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-10aa8368] {
     --_row: var(--ui-control-min-block-size);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-10aa8368] {
     font-size: inherit;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-fd4a871f], .popup[data-v-fd4a871f] {
+.field[data-v-10aa8368], .popup[data-v-10aa8368] {
     border-color: CanvasText;
 }
-.option.active[data-v-fd4a871f] {
+.option.active[data-v-10aa8368] {
     outline-color: Highlight;
 }
 }
@@ -1594,12 +1611,12 @@ button[data-v-fd4a871f] {
 /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
    before anything is picked. aria-selected is the state; this draws it.
    Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-10aa8368] {
   display: flex;
   gap: var(--ui-space-2);
   align-items: center;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-fd4a871f]::before {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-10aa8368]::before {
   content: "";
   flex: none;
   inline-size: 1.125rem;
@@ -1614,7 +1631,7 @@ button[data-v-fd4a871f] {
   background-size: 0.7rem;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-fd4a871f]::before {
+  .option[aria-selected="true"][data-v-10aa8368]::before {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
@@ -1624,14 +1641,14 @@ button[data-v-fd4a871f] {
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-10aa8368] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-fd4a871f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-10aa8368] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
@@ -1639,25 +1656,25 @@ button[data-v-fd4a871f] {
 }
 /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  .field[data-v-fd4a871f] {
+  .field[data-v-10aa8368] {
   min-block-size: 0;
   padding: var(--ui-space-0-5);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  input[data-v-fd4a871f] {
+  input[data-v-10aa8368] {
   min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
   padding: 0 var(--ui-space-1);
 }
 /* A large multiple field starts at the large control height, as sm starts at the small one. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  .field[data-v-fd4a871f] {
+  .field[data-v-10aa8368] {
   min-block-size: 0;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  input[data-v-fd4a871f] {
+  input[data-v-10aa8368] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
 }
-.item[data-v-fd4a871f] {
+.item[data-v-10aa8368] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -1671,16 +1688,16 @@ button[data-v-fd4a871f] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-fd4a871f]:focus-visible {
+.item[data-v-10aa8368]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-fd4a871f]:disabled {
+.item[data-v-10aa8368]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-fd4a871f] {
+[data-component~="ui-combobox"][hidden][data-v-10aa8368] {
   display: none;
 }