@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiCombobox.vue

@@ -1,29 +1,20 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  useTemplateRef,
-  watchSyncEffect,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import { vBindControl } from './control'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  isInteger,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+  warnUnless,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiBadge from './UiBadge.vue'
@@ -588,64 +579,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const KeyedFailure = defineComponent({
-  props: { error: { type: null, required: true } },
-  setup(props) {
-    return () => {
-      throw props.error
-    }
-  },
-})
-const KeyedBoundary = defineComponent({
-  setup(_props, { slots }) {
-    let last: VNode[] = []
-    return () => {
-      try {
-        last = slots.default?.() ?? []
-        return last
-      } catch (error) {
-        if (
-          !(error instanceof Error)
-          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
-        ) throw error
-        if (typeof window === 'undefined') throw error
-        return [...last, h(KeyedFailure, { error })]
-      }
-    }
-  },
-})
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:query': [value: string]
@@ -922,39 +856,18 @@ const statusText = ref('')
 const validationStatus = ref('pristine')
 let guardedPrevious: any = null
 const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-input\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
   const candidate: any = concat(uid.value, '-input')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedPrevious
   return guardedPrevious = candidate
 })
 let guardedBindingPrevious: any = null
 const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-input\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
   const candidate: any = concat(uid.value, '-input')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBindingPrevious
   return guardedBindingPrevious = candidate
 })
 let guardedBinding2Previous: any = null
 const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-listbox\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
   const candidate: any = concat(uid.value, '-listbox')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding2Previous
   return guardedBinding2Previous = candidate
@@ -962,264 +875,93 @@ const guardedBinding2 = computed(() => {
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
-      expanded.value == null || typeof expanded.value === 'boolean',
-      '$expanded:expanded',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference expanded does not satisfy its declared type.',
+    !(warnUnless(
+      internalItems.value?.['0'] == null
+      || (typeof internalItems.value?.['0'] === 'object' && internalItems.value?.['0'] !== null
+        && !Array.isArray(internalItems.value?.['0'])),
+      '$required and not ($multiple and $internalItems.0):internalItems.0',
+      './components/ui-combobox/ui-combobox.html: HR007: Reference internalItems.0 does not satisfy its declared type.',
     ))
   ) return guardedBinding3Previous
-  return guardedBinding3Previous = expanded.value
+  return guardedBinding3Previous = checkedProps.value.required
+    && !(checkedProps.value.multiple && internalItems.value[0])
 })
 let guardedBinding4Previous: any
 const guardedBinding4 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
-      validationStatus.value == null || typeof validationStatus.value === 'string',
-      '$invalid or $validationStatus = \'error\':validationStatus',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference validationStatus does not satisfy its declared type.',
+    !(warnUnless(
+      selected.value == null || (typeof selected.value === 'string' || selected.value === null),
+      '$disabled or $readonly or (not $raw and ($multiple or $selected = null)):selected',
+      './components/ui-combobox/ui-combobox.html: HR007: Reference selected does not satisfy its declared type.',
     ))
   ) return guardedBinding4Previous
-  return guardedBinding4Previous = checkedProps.value.invalid || validationStatus.value === 'error'
+  return guardedBinding4Previous = checkedProps.value.disabled || checkedProps.value.readonly
+    || (!raw.value && (checkedProps.value.multiple || selected.value === null))
 })
-let guardedBinding5Previous: any
+let guardedBinding5Previous: any = null
 const guardedBinding5 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      validationStatus.value == null || typeof validationStatus.value === 'string',
-      '$loading or $validationStatus = \'pending\':validationStatus',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference validationStatus does not satisfy its declared type.',
-    ))
-  ) return guardedBinding5Previous
-  return guardedBinding5Previous = checkedProps.value.loading
-    || validationStatus.value === 'pending'
+  const candidate: any = concat(uid.value, '-listbox')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
+  return guardedBinding5Previous = candidate
 })
-let guardedBinding6Previous: any
+let guardedBinding6Previous: any = null
 const guardedBinding6 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      display.value == null || typeof display.value === 'string',
-      '$display:display',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference display does not satisfy its declared type.',
-    ))
-  ) return guardedBinding6Previous
-  return guardedBinding6Previous = display.value
+  const candidate: any = concat(uid.value, '-help')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding6Previous
+  return guardedBinding6Previous = candidate
 })
-let guardedBinding7Previous: any
+let guardedBinding7Previous: any = null
 const guardedBinding7 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalItems.value?.['0'] == null
-      || (typeof internalItems.value?.['0'] === 'object' && internalItems.value?.['0'] !== null
-        && !Array.isArray(internalItems.value?.['0'])),
-      '$required and not ($multiple and $internalItems.0):internalItems.0',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference internalItems.0 does not satisfy its declared type.',
-    ))
-  ) return guardedBinding7Previous
-  return guardedBinding7Previous = checkedProps.value.required
-    && !(checkedProps.value.multiple && internalItems.value[0])
+  const candidate: any = concat(uid.value, '-help-text')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
+  return guardedBinding7Previous = candidate
 })
-let guardedBinding8Previous: any
+let guardedBinding8Previous: any = null
 const guardedBinding8 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      submitted.value == null || typeof submitted.value === 'string',
-      '$submitted:submitted',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference submitted does not satisfy its declared type.',
-    ))
-  ) return guardedBinding8Previous
-  return guardedBinding8Previous = submitted.value
+  const candidate: any = concat(uid.value, '-help')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding8Previous
+  return guardedBinding8Previous = candidate
 })
-let guardedBinding9Previous: any
+let guardedBinding9Previous: any = null
 const guardedBinding9 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      raw.value == null || typeof raw.value === 'string',
-      '$disabled or $readonly or (not $raw and ($multiple or $selected = null)):raw',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference raw does not satisfy its declared type.',
-    )
-      && htmlNextAuthoredCheck2(
-        selected.value == null || (typeof selected.value === 'string' || selected.value === null),
-        '$disabled or $readonly or (not $raw and ($multiple or $selected = null)):selected',
-        './components/ui-combobox/ui-combobox.html: HR007: Reference selected does not satisfy its declared type.',
-      ))
-  ) return guardedBinding9Previous
-  return guardedBinding9Previous = checkedProps.value.disabled || checkedProps.value.readonly
-    || (!raw.value && (checkedProps.value.multiple || selected.value === null))
+  const candidate: any = concat(uid.value, '-listbox')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding9Previous
+  return guardedBinding9Previous = candidate
 })
 let guardedBinding10Previous: any = null
 const guardedBinding10 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-listbox\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBinding10Previous
-  const candidate: any = concat(uid.value, '-listbox')
+  const candidate: any = concat(checkedProps.value.label, ' suggestions')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding10Previous
   return guardedBinding10Previous = candidate
 })
-let guardedBinding11Previous: any = null
+let guardedBinding11Previous: any
 const guardedBinding11 = computed(() => {
   if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-help\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
+    !(warnUnless(
+      active.value == null || Number.isInteger(active.value),
+      '$createIndex = $active:active',
+      './components/ui-combobox/ui-combobox.html: HR007: Reference active does not satisfy its declared type.',
     ))
   ) return guardedBinding11Previous
-  const candidate: any = concat(uid.value, '-help')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding11Previous
-  return guardedBinding11Previous = candidate
+  return guardedBinding11Previous = createIndex.value === active.value
 })
 let guardedBinding12Previous: any = null
 const guardedBinding12 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-help-text\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBinding12Previous
-  const candidate: any = concat(uid.value, '-help-text')
+  const candidate: any = concat(uid.value, '-option-', createIndex.value)
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding12Previous
   return guardedBinding12Previous = candidate
 })
 let guardedBinding13Previous: any = null
 const guardedBinding13 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-help\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBinding13Previous
-  const candidate: any = concat(uid.value, '-help')
+  const candidate: any = concat('Create “', raw.value, '”')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding13Previous
   return guardedBinding13Previous = candidate
 })
-let guardedBinding14Previous: any
+let guardedBinding14Previous: any = null
 const guardedBinding14 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      expanded.value == null || typeof expanded.value === 'boolean',
-      'not $expanded:expanded',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference expanded does not satisfy its declared type.',
-    ))
-  ) return guardedBinding14Previous
-  return guardedBinding14Previous = !expanded.value
-})
-let guardedBinding15Previous: any = null
-const guardedBinding15 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-listbox\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBinding15Previous
-  const candidate: any = concat(uid.value, '-listbox')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding15Previous
-  return guardedBinding15Previous = candidate
-})
-let guardedBinding16Previous: any = null
-const guardedBinding16 = computed(() => {
-  const candidate: any = concat(checkedProps.value.label, ' suggestions')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding16Previous
-  return guardedBinding16Previous = candidate
-})
-let guardedBinding17Previous: any
-const guardedBinding17 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      active.value == null || Number.isInteger(active.value),
-      '$createIndex = $active:active',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference active does not satisfy its declared type.',
-    )
-      && htmlNextAuthoredCheck2(
-        createIndex.value == null || Number.isInteger(createIndex.value),
-        '$createIndex = $active:createIndex',
-        './components/ui-combobox/ui-combobox.html: HR007: Reference createIndex does not satisfy its declared type.',
-      ))
-  ) return guardedBinding17Previous
-  return guardedBinding17Previous = createIndex.value === active.value
-})
-let guardedBinding18Previous: any = null
-const guardedBinding18 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      createIndex.value == null || Number.isInteger(createIndex.value),
-      'concat($uid, \'-option-\', $createIndex):createIndex',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference createIndex does not satisfy its declared type.',
-    )
-      && htmlNextAuthoredCheck2(
-        uid.value == null || typeof uid.value === 'string',
-        'concat($uid, \'-option-\', $createIndex):uid',
-        './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-      ))
-  ) return guardedBinding18Previous
-  const candidate: any = concat(uid.value, '-option-', createIndex.value)
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding18Previous
-  return guardedBinding18Previous = candidate
-})
-let guardedBinding19Previous: any
-const guardedBinding19 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      createIndex.value == null || Number.isInteger(createIndex.value),
-      '$createIndex:createIndex',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference createIndex does not satisfy its declared type.',
-    ))
-  ) return guardedBinding19Previous
-  return guardedBinding19Previous = createIndex.value
-})
-let guardedBinding20Previous: any = null
-const guardedBinding20 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      raw.value == null || typeof raw.value === 'string',
-      'concat(\'Create “\', $raw, \'”\'):raw',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference raw does not satisfy its declared type.',
-    ))
-  ) return guardedBinding20Previous
-  const candidate: any = concat('Create “', raw.value, '”')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding20Previous
-  return guardedBinding20Previous = candidate
-})
-let guardedBinding21Previous: any
-const guardedBinding21 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      message.value == null || typeof message.value === 'string',
-      '$message:message',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference message does not satisfy its declared type.',
-    ))
-  ) return guardedBinding21Previous
-  return guardedBinding21Previous = message.value
-})
-let guardedBinding22Previous: any = null
-const guardedBinding22 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      uid.value == null || typeof uid.value === 'string',
-      'concat($uid, \'-validation\'):uid',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference uid does not satisfy its declared type.',
-    ))
-  ) return guardedBinding22Previous
   const candidate: any = concat(uid.value, '-validation')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding22Previous
-  return guardedBinding22Previous = candidate
-})
-let guardedBinding23Previous: any
-const guardedBinding23 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      statusText.value == null || typeof statusText.value === 'string',
-      '$statusText:statusText',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference statusText does not satisfy its declared type.',
-    ))
-  ) return guardedBinding23Previous
-  return guardedBinding23Previous = statusText.value
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding14Previous
+  return guardedBinding14Previous = candidate
 })
 provide('html-next:ui-combobox:internalItems', internalItems)
 provide('html-next:ui-combobox:raw', raw)
@@ -1239,22 +981,7 @@ provide('html-next:ui-combobox:createIndex', createIndex)
 provide('html-next:ui-combobox:message', message)
 provide('html-next:ui-combobox:statusText', statusText)
 provide('html-next:ui-combobox:validationStatus', validationStatus)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-combobox> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-combobox> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-combobox')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -1868,62 +1595,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     validationStatus,
   },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
-
-function uniqueKeys<T>(
-  items: readonly T[],
-  keyOf: (
-    item: T,
-    index: number,
-    loop: { index: number; first: boolean; last: boolean; count: number },
-  ) => unknown,
-): readonly T[] {
-  const seen = new Set<unknown>()
-  for (let index = 0; index < items.length; index += 1) {
-    const key = keyOf(items[index]!, index, {
-      index,
-      first: index === 0,
-      last: index === items.length - 1,
-      count: items.length,
-    })
-    if (seen.has(key)) {
-      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
-      throw Object.assign(new Error(`HR004: ${message}`), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({ code: 'HR004', message }),
-      })
-    }
-    seen.add(key)
-  }
-  return items
-}
 </script>
 
 <template>
   <div
-    data-component="ui-combobox"
+    class="ui-combobox"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-allow-create="reflectedProp('allowCreate', 'allow-create', checkedProps.allowCreate, undefined, false)"
@@ -1979,7 +1655,9 @@ function uniqueKeys<T>(
                 :disabled="checkedProps.disabled || checkedProps.readonly || item.disabled"
                 :aria-label="concat(item.label, ', press Delete or Backspace to remove')"
               >
-                <slot :name="concat('item-', item.id)"><UiBadge>{{ item.label }}</UiBadge></slot>
+                <slot :name="concat('item-', item.id)"><UiBadge class="ui-badge">{{
+                    item.label
+                  }}</UiBadge></slot>
               </button></KeyedBoundary></template>
           <input
             role="combobox"
@@ -1988,13 +1666,13 @@ function uniqueKeys<T>(
             v-bind-control="{ tag: 'input', name: 'value', value: display, nativeProperty: true, defaultValue: '' }"
             :id="guardedBinding"
             :aria-controls="guardedBinding2"
-            :aria-expanded="guardedBinding3"
-            :aria-invalid="guardedBinding4"
-            :aria-busy="guardedBinding5"
+            :aria-expanded="expanded"
+            :aria-invalid="checkedProps.invalid || validationStatus === 'error'"
+            :aria-busy="checkedProps.loading || validationStatus === 'pending'"
             :placeholder="checkedProps.placeholder ?? undefined"
             :disabled="checkedProps.disabled ?? undefined"
             :readonly="checkedProps.readonly ?? undefined"
-            :required="guardedBinding7"
+            :required="guardedBinding3"
             ref="inputElement"
           >
         </div>
@@ -2002,7 +1680,7 @@ function uniqueKeys<T>(
           v-if="checkedProps.name && !checkedProps.multiple"
           type="hidden"
           :name="checkedProps.name ?? undefined"
-          :value.attr="guardedBinding8"
+          :value.attr="submitted"
           :disabled="checkedProps.disabled ?? undefined"
         >
         <template v-if="checkedProps.name && checkedProps.multiple"><KeyedBoundary><input
@@ -2018,7 +1696,7 @@ function uniqueKeys<T>(
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
-          :disabled="guardedBinding9"
+          :disabled="guardedBinding4"
         >
           <svg
             class="affordance-icon"
@@ -2038,7 +1716,7 @@ function uniqueKeys<T>(
           data-combobox-action="disclosure"
           tabindex="-1"
           aria-label="Show suggestions"
-          :aria-controls="guardedBinding10"
+          :aria-controls="guardedBinding5"
           :disabled="checkedProps.disabled || checkedProps.readonly"
         >
           <svg
@@ -2060,7 +1738,7 @@ function uniqueKeys<T>(
         class="help"
         type="button"
         aria-label="Help"
-        :id="guardedBinding11"
+        :id="guardedBinding6"
         :disabled="checkedProps.disabled ?? undefined"
       >
         <svg
@@ -2081,15 +1759,16 @@ function uniqueKeys<T>(
     </div>
     <UiTooltip
       v-if="checkedProps.help"
+      class="ui-tooltip"
       trigger="click"
-      :id="guardedBinding12"
-      :for="guardedBinding13"
+      :id="guardedBinding7"
+      :for="guardedBinding8"
     >{{ checkedProps.help }}</UiTooltip>
-    <div class="popup" :hidden="guardedBinding14" ref="popupElement">
+    <div class="popup" :hidden="!expanded" ref="popupElement">
       <div
         role="listbox"
-        :id="guardedBinding15"
-        :aria-label="guardedBinding16"
+        :id="guardedBinding9"
+        :aria-label="guardedBinding10"
         :aria-busy="checkedProps.loading ?? undefined"
         ref="listboxElement"
       >
@@ -2122,6 +1801,7 @@ function uniqueKeys<T>(
                       }}</span>
                       <UiBadge
                         v-if="row.tag"
+                        class="ui-badge"
                         :tone="row.tag?.tone"
                         :style="{ '--ui-badge-color': row.tag?.color ?? undefined }"
                       ><span :id="concat(uid, '-option-', row.index, '-tag')">{{
@@ -2142,13 +1822,13 @@ function uniqueKeys<T>(
           data-ui-choice-option=""
           aria-selected="false"
           :data-multiple="checkedProps.multiple ? '' : undefined"
-          :id="guardedBinding18"
-          :data-index="guardedBinding19"
-          :class="{ active: guardedBinding17 }"
+          :id="guardedBinding12"
+          :data-index="createIndex"
+          :class="{ active: guardedBinding11 }"
         >
-          {{ guardedBinding20 }}
+          {{ guardedBinding13 }}
         </div>
-        <div v-if="message" class="message">{{ guardedBinding21 }}</div>
+        <div v-if="message" class="message">{{ message }}</div>
         <div
           v-if="!checkedProps.loading && !(rows[0]) && !creatable && !lookupError"
           class="message"
@@ -2158,14 +1838,12 @@ function uniqueKeys<T>(
       </div>
       <slot name="footer" />
     </div>
-    <div class="message" :id="guardedBinding22" :hidden="!validation.issues.length">
+    <div class="message" :id="guardedBinding14" :hidden="!validation.issues.length">
       <div v-for="(issue, indexLoop3) in validation.issues" :key="indexLoop3">
         {{ issue.message }}
       </div>
     </div>
-    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-      {{ guardedBinding23 }}
-    </div>
+    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{{ statusText }}</div>
     <div class="authored-options" hidden="" aria-hidden="true" ref="optionsElement"><slot /></div>
   </div>
 </template>
@@ -2236,353 +1914,349 @@ function uniqueKeys<T>(
   syntax: "*";
   inherits: false;
 }
-
-[data-component~="ui-combobox"] {
-  /* 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);
-  --_ui-combobox-affordance-text: var(--ui-combobox-affordance-text);
-  --_ui-combobox-max-block-size: var(--ui-combobox-max-block-size);
-  --_ui-combobox-option-text: var(--ui-combobox-option-text);
-  --_ui-combobox-message-text: var(--ui-combobox-message-text);
-  --_ui-combobox-option-check: var(--ui-combobox-option-check);
-  --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
-  --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
-  --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
-  --_ui-combobox-radius: var(--ui-combobox-radius);
-  --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
-  --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
-  --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
-  --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
-  --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
-
-  --_row: var(--ui-control-size-md);
-  display: grid;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-  font: inherit;
-}
-label {
-  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 {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-inline-size: 0;
-}
-
-.field {
-  box-sizing: border-box;
-  min-block-size: var(--_row);
-  flex: 1 1 auto;
-  display: flex;
-  min-inline-size: 0;
-  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background: var(--ui-control-surface, var(--ui-surface-default));
-  box-shadow: var(--ui-control-inset);
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
-.field: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 {
-  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 {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--ui-control-size-sm);
-  block-size: var(--ui-control-size-sm);
-  padding: 0;
-  border: 0;
-  border-radius: var(--ui-radius-round);
-  background: transparent;
-  color: var(--ui-text-secondary);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease);
-}
+/* A row with a tag or a description: the label and its tag on one line, the description under them. */
 
-.help:hover:enabled,
-.help[aria-expanded="true"] {
-  background: color-mix(in srgb, currentColor 8%, transparent);
-  color: var(--ui-text-primary);
-}
+/* 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. */
+/* Size variants keep their control height as selections are added. */
+/* A large multiple field starts at the large control height, as sm starts at the small one. */
 
-.help:focus-visible {
-  outline: none;
-  box-shadow: var(--ui-focus-halo);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.help:disabled {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
+@scope (.ui-combobox) to (.ui-badge, .ui-tooltip) {
+  :scope:where(:scope) {
+    /* 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);
+    --_ui-combobox-affordance-text: var(--ui-combobox-affordance-text);
+    --_ui-combobox-max-block-size: var(--ui-combobox-max-block-size);
+    --_ui-combobox-option-text: var(--ui-combobox-option-text);
+    --_ui-combobox-message-text: var(--ui-combobox-message-text);
+    --_ui-combobox-option-check: var(--ui-combobox-option-check);
+    --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
+    --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
+    --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+    --_ui-combobox-radius: var(--ui-combobox-radius);
+    --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+    --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+    --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+    --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+    --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
-.help-icon {
-  inline-size: var(--ui-icon-size-sm);
-  block-size: var(--ui-icon-size-sm);
-}
+    --_row: var(--ui-control-size-md);
+    display: grid;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+    font: inherit;
+  }
+  label {
+    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;
+  }
+  .control {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
+  }
 
-input::selection {
-  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-  color: inherit;
-}
-input {
-  appearance: none;
-  width: 100%;
-  min-inline-size: 0;
-  min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-  box-sizing: border-box;
-  border: 0;
-  border-radius: inherit;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: var(--ui-line-height-tight);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  margin: 0;
-  outline: none;
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] {
-  --_row: var(--ui-control-size-sm);
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
-  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"] {
-  --_row: var(--ui-control-size-lg);
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input {
-  padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: var(--ui-font-size-md);
-}
-button {
-  appearance: none;
-  display: inline-grid;
-  place-items: center;
-  align-self: stretch;
-  border: 0;
-  border-radius: var(--ui-radius-md);
-  background: transparent;
-  color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
-  font: inherit;
-  font-weight: 400;
-  min-inline-size: 2rem;
-  padding: 0 var(--ui-space-1);
-  cursor: pointer;
-}
-.affordance-icon {
-  display: block;
-  inline-size: var(--ui-icon-size-sm);
-  block-size: var(--ui-icon-size-sm);
-}
-button:hover:enabled {
-  background: var(--ui-surface-muted);
-  color: var(--ui-text-primary);
-}
-button: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:disabled, button:disabled {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
-.field: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-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field {
-  border-color: var(
-    --_ui-combobox-invalid-border,
-    var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
-  );
-}
-.popup {
-  box-sizing: border-box;
-  min-inline-size: 12rem;
-  max-inline-size: calc(100vw - 1rem);
-  max-block-size: var(--_ui-combobox-max-block-size, 18rem);
-  overflow: auto;
-  margin: 0;
-  padding: var(--ui-space-1);
-  border: var(--ui-border-width) solid
-    var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
-  background: var(
-    --_ui-combobox-popup-surface,
-    var(--ui-overlay-surface, var(--ui-surface-elevated))
-  );
-  color: var(--ui-text-primary);
-  box-shadow: var(
-    --_ui-combobox-popup-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-  );
-}
-[hidden] {
-  display: none;
-}
-.option[aria-disabled="true"] .primary,
-.option[aria-disabled="true"] .secondary {
-  color: var(--ui-disabled-text);
-}
-.primary {
-  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 {
-  display: grid;
-  gap: var(--ui-space-0-5);
-  min-inline-size: 0;
-}
-.line {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-space-2);
-}
-.description {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height-md);
-}
-.message, .group {
-  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, .popup .message {
-  padding: var(--ui-space-2) var(--ui-space-3);
-}
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-@media (pointer: coarse) {
-  [data-component~="ui-combobox"] {
-    --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+  .field {
+    box-sizing: border-box;
+    min-block-size: var(--_row);
+    flex: 1 1 auto;
+    display: flex;
+    min-inline-size: 0;
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
+    border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-default));
+    box-shadow: var(--ui-control-inset);
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  button {
-    min-inline-size: 2.75rem;
-    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+  .field:focus-within {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
   }
-  /* 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"] {
-    --_row: var(--ui-control-min-block-size);
+  .entry {
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
   }
-  [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
-    font-size: inherit;
+  .help {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ui-control-size-sm);
+    block-size: var(--ui-control-size-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-round);
+    background: transparent;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
   }
-}
-@media (forced-colors: active) {
-  .field, .popup {
-    border-color: CanvasText;
+
+  .help:hover:enabled, .help[aria-expanded="true"] {
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    color: var(--ui-text-primary);
   }
-  .option.active {
-    outline-color: Highlight;
+
+  .help:focus-visible {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
   }
-}
 
-/* 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 {
-  align-items: center;
-  min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
-  padding: var(--ui-space-1);
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry {
-  align-items: center;
-  gap: var(--ui-space-1);
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry::-webkit-scrollbar {
-  display: none;
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input {
-  flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
-  width: auto;
-  min-block-size: 1.75rem;
-  padding: var(--ui-space-0-5) var(--ui-space-1);
-}
-/* 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 {
-  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 {
-  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 {
-  min-block-size: 0;
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  input {
-  min-block-size: calc(
-    var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
-  );
-}
-.item {
-  appearance: none;
-  display: inline-flex;
-  flex: none;
-  min-inline-size: 0;
-  max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  border-radius: var(--ui-radius-sm);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: default;
-}
-.item:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-border-width);
-}
-.item:disabled {
-  color: var(--ui-disabled-text);
-}
+  .help:disabled {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden] {
-  display: none;
+  .help-icon {
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
+  }
+
+  input::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
+  }
+  input {
+    appearance: none;
+    width: 100%;
+    min-inline-size: 0;
+    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    box-sizing: border-box;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: var(--ui-line-height-tight);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    margin: 0;
+    outline: none;
+  }
+  :scope:where(:scope):is([data-ui-combobox-state~="size=sm"]) {
+    --_row: var(--ui-control-size-sm);
+  }
+  :scope[data-ui-combobox-state~="size=sm"] input {
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
+  }
+  :scope:where(:scope):is([data-ui-combobox-state~="size=lg"]) {
+    --_row: var(--ui-control-size-lg);
+  }
+  :scope[data-ui-combobox-state~="size=lg"] input {
+    padding: var(--ui-space-3) var(--ui-space-4);
+    font-size: var(--ui-font-size-md);
+  }
+  button {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    align-self: stretch;
+    border: 0;
+    border-radius: var(--ui-radius-md);
+    background: transparent;
+    color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
+    font: inherit;
+    font-weight: 400;
+    min-inline-size: 2rem;
+    padding: 0 var(--ui-space-1);
+    cursor: pointer;
+  }
+  .affordance-icon {
+    display: block;
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
+  }
+  button:hover:enabled {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-primary);
+  }
+  button: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:disabled, button:disabled {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
+  .field:has(input:disabled) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  }
+  :scope[data-ui-combobox-state~="validationStatus=error"] .field,
+  :scope[data-ui-combobox-state~="invalid"] .field {
+    border-color: var(
+      --_ui-combobox-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
+    );
+  }
+  .popup {
+    box-sizing: border-box;
+    min-inline-size: 12rem;
+    max-inline-size: calc(100vw - 1rem);
+    max-block-size: var(--_ui-combobox-max-block-size, 18rem);
+    overflow: auto;
+    margin: 0;
+    padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid
+      var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+    background: var(
+      --_ui-combobox-popup-surface,
+      var(--ui-overlay-surface, var(--ui-surface-elevated))
+    );
+    color: var(--ui-text-primary);
+    box-shadow: var(
+      --_ui-combobox-popup-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+  }
+  [hidden] {
+    display: none;
+  }
+  .option[aria-disabled="true"] .primary, .option[aria-disabled="true"] .secondary {
+    color: var(--ui-disabled-text);
+  }
+  .primary {
+    display: block;
+    color: var(--_ui-combobox-option-text, inherit);
+    font-weight: 500;
+  }
+  .detail {
+    display: grid;
+    gap: var(--ui-space-0-5);
+    min-inline-size: 0;
+  }
+  .line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+  .description {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-md);
+  }
+  .message, .group {
+    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, .popup .message {
+    padding: var(--ui-space-2) var(--ui-space-3);
+  }
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  @media (pointer: coarse) {
+    :scope:where(:scope) {
+      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
+    button {
+      min-inline-size: 2.75rem;
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    }
+    /* 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. */
+    :scope:where(:scope):is([data-ui-combobox-state~="size=sm"]) {
+      --_row: var(--ui-control-min-block-size);
+    }
+    :scope[data-ui-combobox-state~="size=sm"] input {
+      font-size: inherit;
+    }
+  }
+  @media (forced-colors: active) {
+    .field, .popup {
+      border-color: CanvasText;
+    }
+    .option.active {
+      outline-color: Highlight;
+    }
+  }
+  :scope[data-ui-combobox-state~="multiple"] .field {
+    align-items: center;
+    min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
+    padding: var(--ui-space-1);
+  }
+  :scope[data-ui-combobox-state~="multiple"] .entry {
+    align-items: center;
+    gap: var(--ui-space-1);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  :scope[data-ui-combobox-state~="multiple"] .entry::-webkit-scrollbar {
+    display: none;
+  }
+  :scope[data-ui-combobox-state~="multiple"] input {
+    flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
+    width: auto;
+    min-block-size: 1.75rem;
+    padding: var(--ui-space-0-5) var(--ui-space-1);
+  }
+  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] .field {
+    min-block-size: 0;
+    padding: var(--ui-space-0-5);
+  }
+  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] input {
+    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
+    padding: 0 var(--ui-space-1);
+  }
+  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] .field {
+    min-block-size: 0;
+  }
+  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] input {
+    min-block-size: calc(
+      var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
+    );
+  }
+  .item {
+    appearance: none;
+    display: inline-flex;
+    flex: none;
+    min-inline-size: 0;
+    max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: default;
+  }
+  .item:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-border-width);
+  }
+  .item:disabled {
+    color: var(--ui-disabled-text);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>