@threadlabs/looma 0.23.10 → 0.23.11

package/vue/UiCombobox.vue

@@ -36,6 +36,15 @@ const propValidityContract = {
       description: 'Allows values that do not match an authored option.',
       default: false,
     },
+    autoHighlight: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'autohighlight' },
+      description:
+        'single highlights the only enabled authored suggestion while typing. Ambiguous results and an empty query stay unhighlighted. none preserves manual\n      highlighting with the arrow keys.',
+      values: ['none', 'single'],
+      default: 'none',
+    },
     clearable: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -206,6 +215,14 @@ const propValidityContract = {
         'Requires a value: adds an asterisk to the label, marks the input required for native form validation, and makes validation report "A value is required."\n      when the field is left empty. In multiple mode a chosen item satisfies it, whatever is left in the input.',
       default: false,
     },
+    selectOnTab: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'selectontab' },
+      description:
+        'Commits a highlighted authored suggestion on forward Tab, then lets focus advance normally. In multiple mode a selected suggestion is retained without\n      duplication or removal. Shift+Tab does not commit, and Tab never chooses the create offer.',
+      default: false,
+    },
     selectedValues: {
       type: { kind: 'list', item: { kind: 'terminal', name: 'string' } },
       required: false,
@@ -241,6 +258,7 @@ const propValidityContract = {
 const props = defineProps({
   allowCreate: { type: null as unknown as PropType<boolean | null>, default: false },
   allowFreeText: { type: null as unknown as PropType<boolean | null>, default: false },
+  autoHighlight: { type: null as unknown as PropType<'none' | 'single' | null>, default: 'none' },
   clearable: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   disclosure: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -278,6 +296,7 @@ const props = defineProps({
   query: { type: null as unknown as PropType<string | null>, default: null },
   readonly: { type: null as unknown as PropType<boolean | null>, default: false },
   required: { type: null as unknown as PropType<boolean | null>, default: false },
+  selectOnTab: { type: null as unknown as PropType<boolean | null>, default: false },
   selectedValues: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
   tokenSeparators: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
@@ -286,6 +305,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   allowCreate: false,
   allowFreeText: false,
+  autoHighlight: 'none',
   clearable: false,
   disabled: false,
   disclosure: false,
@@ -303,6 +323,7 @@ const acceptedProps: Record<string, unknown> = {
   query: null,
   readonly: false,
   required: false,
+  selectOnTab: false,
   selectedValues: null,
   size: 'md',
   tokenSeparators: null,
@@ -323,6 +344,13 @@ const checkedProps = computed(() => ({
     'allowFreeText',
     acceptedProps,
   ) as boolean,
+  autoHighlight: checkedProp<'none' | 'single'>(
+    props['autoHighlight'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'autoHighlight',
+    acceptedProps,
+  ) as 'none' | 'single',
   clearable: checkedProp<boolean>(
     props['clearable'],
     { kind: 'terminal', name: 'boolean' },
@@ -491,6 +519,13 @@ const checkedProps = computed(() => ({
     'required',
     acceptedProps,
   ) as boolean,
+  selectOnTab: checkedProp<boolean>(
+    props['selectOnTab'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'selectOnTab',
+    acceptedProps,
+  ) as boolean,
   selectedValues: checkedProp<readonly (string)[]>(
     props['selectedValues'],
     { kind: 'list', item: { kind: 'terminal', name: 'string' } },
@@ -1271,6 +1306,7 @@ const { host, ready } = useComponentHost(() => import('../components/ui-combobox
   propNames: [
     'allowCreate',
     'allowFreeText',
+    'autoHighlight',
     'clearable',
     'disabled',
     'disclosure',
@@ -1288,6 +1324,7 @@ const { host, ready } = useComponentHost(() => import('../components/ui-combobox
     'query',
     'readonly',
     'required',
+    'selectOnTab',
     'selectedValues',
     'size',
     'tokenSeparators',
@@ -1402,6 +1439,7 @@ function uniqueKeys<T>(
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-allow-create="reflectedProp('allowCreate', 'allow-create', checkedProps.allowCreate, undefined, false)"
     :data-allow-free-text="reflectedProp('allowFreeText', 'allow-free-text', checkedProps.allowFreeText, undefined, false)"
+    :data-auto-highlight="reflectedProp('autoHighlight', 'auto-highlight', checkedProps.autoHighlight, undefined, false)"
     :data-clearable="reflectedProp('clearable', 'clearable', checkedProps.clearable, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-disclosure="reflectedProp('disclosure', 'disclosure', checkedProps.disclosure, undefined, false)"
@@ -1419,6 +1457,7 @@ function uniqueKeys<T>(
     :data-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
     :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-select-on-tab="reflectedProp('selectOnTab', 'select-on-tab', checkedProps.selectOnTab, undefined, false)"
     :data-selected-values="reflectedProp('selectedValues', 'selected-values', checkedProps.selectedValues, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-token-separators="reflectedProp('tokenSeparators', 'token-separators', checkedProps.tokenSeparators, undefined, false)"

package/vue/chunks/UiCombobox.js

@@ -9,6 +9,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 var _hoisted_1 = [
 	"data-allow-create",
 	"data-allow-free-text",
+	"data-auto-highlight",
 	"data-clearable",
 	"data-disabled",
 	"data-disclosure",
@@ -26,6 +27,7 @@ var _hoisted_1 = [
 	"data-query",
 	"data-readonly",
 	"data-required",
+	"data-select-on-tab",
 	"data-selected-values",
 	"data-size",
 	"data-token-separators",
@@ -140,6 +142,10 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		autoHighlight: {
+			type: null,
+			default: "none"
+		},
 		clearable: {
 			type: null,
 			default: false
@@ -208,6 +214,10 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		selectOnTab: {
+			type: null,
+			default: false
+		},
 		selectedValues: {
 			type: null,
 			default: null
@@ -263,6 +273,17 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "Allows values that do not match an authored option.",
 				default: false
 			},
+			autoHighlight: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "autohighlight" },
+				description: "single highlights the only enabled authored suggestion while typing. Ambiguous results and an empty query stay unhighlighted. none preserves manual\n      highlighting with the arrow keys.",
+				values: ["none", "single"],
+				default: "none"
+			},
 			clearable: {
 				type: {
 					kind: "terminal",
@@ -531,6 +552,16 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "Requires a value: adds an asterisk to the label, marks the input required for native form validation, and makes validation report \"A value is required.\"\n      when the field is left empty. In multiple mode a chosen item satisfies it, whatever is left in the input.",
 				default: false
 			},
+			selectOnTab: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selectontab" },
+				description: "Commits a highlighted authored suggestion on forward Tab, then lets focus advance normally. In multiple mode a selected suggestion is retained without\n      duplication or removal. Shift+Tab does not commit, and Tab never chooses the create offer.",
+				default: false
+			},
 			selectedValues: {
 				type: {
 					kind: "list",
@@ -584,6 +615,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const acceptedProps = {
 			allowCreate: false,
 			allowFreeText: false,
+			autoHighlight: "none",
 			clearable: false,
 			disabled: false,
 			disclosure: false,
@@ -601,6 +633,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			query: null,
 			readonly: false,
 			required: false,
+			selectOnTab: false,
 			selectedValues: null,
 			size: "md",
 			tokenSeparators: null,
@@ -615,6 +648,10 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "allowFreeText", acceptedProps),
+			autoHighlight: checkedProp(props["autoHighlight"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "autoHighlight", acceptedProps),
 			clearable: checkedProp(props["clearable"], {
 				kind: "terminal",
 				name: "boolean"
@@ -781,6 +818,10 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "required", acceptedProps),
+			selectOnTab: checkedProp(props["selectOnTab"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selectOnTab", acceptedProps),
 			selectedValues: checkedProp(props["selectedValues"], {
 				kind: "list",
 				item: {
@@ -1063,6 +1104,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			propNames: [
 				"allowCreate",
 				"allowFreeText",
+				"autoHighlight",
 				"clearable",
 				"disabled",
 				"disclosure",
@@ -1080,6 +1122,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"query",
 				"readonly",
 				"required",
+				"selectOnTab",
 				"selectedValues",
 				"size",
 				"tokenSeparators",
@@ -1176,6 +1219,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-combobox" }, nativeAttrs(_ctx.$attrs), {
 				"data-allow-create": reflectedProp("allowCreate", "allow-create", checkedProps.value.allowCreate, void 0, false),
 				"data-allow-free-text": reflectedProp("allowFreeText", "allow-free-text", checkedProps.value.allowFreeText, void 0, false),
+				"data-auto-highlight": reflectedProp("autoHighlight", "auto-highlight", checkedProps.value.autoHighlight, void 0, false),
 				"data-clearable": reflectedProp("clearable", "clearable", checkedProps.value.clearable, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-disclosure": reflectedProp("disclosure", "disclosure", checkedProps.value.disclosure, void 0, false),
@@ -1193,6 +1237,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-query": reflectedProp("query", "query", checkedProps.value.query, void 0, false),
 				"data-readonly": reflectedProp("readonly", "readonly", checkedProps.value.readonly, void 0, false),
 				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
+				"data-select-on-tab": reflectedProp("selectOnTab", "select-on-tab", checkedProps.value.selectOnTab, void 0, false),
 				"data-selected-values": reflectedProp("selectedValues", "selected-values", checkedProps.value.selectedValues, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
 				"data-token-separators": reflectedProp("tokenSeparators", "token-separators", checkedProps.value.tokenSeparators, void 0, false),
@@ -1413,6 +1458,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a593ab08"]]);
+}), [["__scopeId", "data-v-8e9a00eb"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/components.css

@@ -1800,7 +1800,7 @@ input[data-v-cb5d05aa]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-a593ab08] {
+[data-component~="ui-combobox"][data-v-8e9a00eb] {
   /* 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);
@@ -1825,20 +1825,20 @@ input[data-v-cb5d05aa]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-a593ab08] {
+label[data-v-8e9a00eb] {
   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-a593ab08] {
+.control[data-v-8e9a00eb] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-a593ab08] {
+.field[data-v-8e9a00eb] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1850,19 +1850,19 @@ label[data-v-a593ab08] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-a593ab08]:focus-within {
+.field[data-v-8e9a00eb]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-.entry[data-v-a593ab08] {
+.entry[data-v-8e9a00eb] {
   display: flex;
   flex: 1 1 auto;
   min-inline-size: 0;
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-a593ab08] {
+.help[data-v-8e9a00eb] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1879,28 +1879,28 @@ label[data-v-a593ab08] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-a593ab08]:hover:enabled,
-.help[aria-expanded="true"][data-v-a593ab08] {
+.help[data-v-8e9a00eb]:hover:enabled,
+.help[aria-expanded="true"][data-v-8e9a00eb] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-a593ab08]:focus-visible {
+.help[data-v-8e9a00eb]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-a593ab08]:disabled {
+.help[data-v-8e9a00eb]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-a593ab08] {
+.help-icon[data-v-8e9a00eb] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-a593ab08]::selection {
+input[data-v-8e9a00eb]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-a593ab08] {
+input[data-v-8e9a00eb] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1916,20 +1916,20 @@ input[data-v-a593ab08] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-8e9a00eb] {
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-8e9a00eb] {
   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-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-8e9a00eb] {
   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-a593ab08] {
+button[data-v-8e9a00eb] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1944,36 +1944,36 @@ button[data-v-a593ab08] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-a593ab08] {
+.affordance-icon[data-v-8e9a00eb] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-a593ab08]:hover:enabled {
+button[data-v-8e9a00eb]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-a593ab08]:focus-visible {
+button[data-v-8e9a00eb]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 var(--ui-focus-width)
     color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-a593ab08]:disabled, button[data-v-a593ab08]:disabled {
+input[data-v-8e9a00eb]:disabled, button[data-v-8e9a00eb]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-a593ab08]:has(input:disabled) {
+.field[data-v-8e9a00eb]: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-a593ab08],
-[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-8e9a00eb],
+[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-8e9a00eb] {
   border-color: var(
     --_ui-combobox-invalid-border,
     var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
   );
 }
-.popup[data-v-a593ab08] {
+.popup[data-v-8e9a00eb] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1994,46 +1994,46 @@ input[data-v-a593ab08]:disabled, button[data-v-a593ab08]:disabled {
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
 }
-[hidden][data-v-a593ab08] {
+[hidden][data-v-8e9a00eb] {
   display: none;
 }
-.option[aria-disabled="true"] .primary[data-v-a593ab08],
-.option[aria-disabled="true"] .secondary[data-v-a593ab08] {
+.option[aria-disabled="true"] .primary[data-v-8e9a00eb],
+.option[aria-disabled="true"] .secondary[data-v-8e9a00eb] {
   color: var(--ui-disabled-text);
 }
-.primary[data-v-a593ab08] {
+.primary[data-v-8e9a00eb] {
   display: block;
   color: var(--_ui-combobox-option-text, inherit);
   font-weight: 500;
 }
 /* A row with a tag or a description: the label and its tag on one line, the description under them. */
-.detail[data-v-a593ab08] {
+.detail[data-v-8e9a00eb] {
   display: grid;
   gap: var(--ui-space-0-5);
   min-inline-size: 0;
 }
-.line[data-v-a593ab08] {
+.line[data-v-8e9a00eb] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.description[data-v-a593ab08] {
+.description[data-v-8e9a00eb] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.message[data-v-a593ab08], .group[data-v-a593ab08] {
+.message[data-v-8e9a00eb], .group[data-v-8e9a00eb] {
   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-a593ab08], .popup .message[data-v-a593ab08] {
+.group[data-v-8e9a00eb], .popup .message[data-v-8e9a00eb] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-a593ab08] {
+.sr-only[data-v-8e9a00eb] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -2042,45 +2042,45 @@ input[data-v-a593ab08]:disabled, button[data-v-a593ab08]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-a593ab08] {
+button[data-v-8e9a00eb] {
     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-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-8e9a00eb] {
     --_row: var(--ui-control-min-block-size);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-8e9a00eb] {
     font-size: inherit;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-a593ab08], .popup[data-v-a593ab08] {
+.field[data-v-8e9a00eb], .popup[data-v-8e9a00eb] {
     border-color: CanvasText;
 }
-.option.active[data-v-a593ab08] {
+.option.active[data-v-8e9a00eb] {
     outline-color: Highlight;
 }
 }
 
 /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
    while the clear and disclosure controls remain fixed at the end of the field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-8e9a00eb] {
   align-items: center;
   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"] .entry[data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-8e9a00eb] {
   align-items: center;
   gap: var(--ui-space-1);
   overflow-x: auto;
   scrollbar-width: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-a593ab08]::-webkit-scrollbar {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-8e9a00eb]::-webkit-scrollbar {
   display: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-a593ab08] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-8e9a00eb] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
@@ -2088,27 +2088,27 @@ button[data-v-a593ab08] {
 }
 /* Size variants keep their control height as selections are added. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  .field[data-v-a593ab08] {
+  .field[data-v-8e9a00eb] {
   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-a593ab08] {
+  input[data-v-8e9a00eb] {
   min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 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-a593ab08] {
+  .field[data-v-8e9a00eb] {
   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-a593ab08] {
+  input[data-v-8e9a00eb] {
   min-block-size: calc(
     var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
   );
 }
-.item[data-v-a593ab08] {
+.item[data-v-8e9a00eb] {
   appearance: none;
   display: inline-flex;
   flex: none;
@@ -2123,16 +2123,16 @@ button[data-v-a593ab08] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-a593ab08]:focus-visible {
+.item[data-v-8e9a00eb]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: var(--ui-border-width);
 }
-.item[data-v-a593ab08]:disabled {
+.item[data-v-8e9a00eb]:disabled {
   color: var(--ui-disabled-text);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-a593ab08] {
+[data-component~="ui-combobox"][hidden][data-v-8e9a00eb] {
   display: none;
 }