@threadlabs/looma 0.24.1 → 0.25.0

package/vue/UiCombobox.vue

@@ -1,4 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 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>
+
 <script setup lang="ts">
 import {
   computed,
@@ -13,6 +24,7 @@ import {
 import type { PropType, VNode } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiBadge from './UiBadge.vue'
 import UiTooltip from './UiTooltip.vue'
@@ -808,11 +820,11 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const fieldElement = useTemplateRef<HTMLElement>('field')
-const inputElement = useTemplateRef<HTMLElement>('input')
-const popupElement = useTemplateRef<HTMLElement>('popup')
-const listboxElement = useTemplateRef<HTMLElement>('listbox')
-const optionsElement = useTemplateRef<HTMLElement>('options')
+const fieldElement = useTemplateRef<HTMLElement>('fieldElement')
+const inputElement = useTemplateRef<HTMLElement>('inputElement')
+const popupElement = useTemplateRef<HTMLElement>('popupElement')
+const listboxElement = useTemplateRef<HTMLElement>('listboxElement')
+const optionsElement = useTemplateRef<HTMLElement>('optionsElement')
 const internalItems = ref<
   {
     id: string
@@ -893,116 +905,202 @@ const statusText = ref('')
 const validationStatus = ref('pristine')
 let guardedPrevious: any = null
 const guarded = computed(() => {
-  if (!(uid.value == null || typeof uid.value === 'string')) return guardedPrevious
+  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 (!(uid.value == null || typeof uid.value === 'string')) return guardedBindingPrevious
+  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 (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding2Previous
+  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
 })
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
-  if (!(expanded.value == null || typeof expanded.value === 'boolean')) {
-    return guardedBinding3Previous
-  }
+  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.',
+    ))
+  ) return guardedBinding3Previous
   return guardedBinding3Previous = expanded.value
 })
 let guardedBinding4Previous: any
 const guardedBinding4 = computed(() => {
-  if (!(validationStatus.value == null || typeof validationStatus.value === 'string')) {
-    return guardedBinding4Previous
-  }
+  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.',
+    ))
+  ) return guardedBinding4Previous
   return guardedBinding4Previous = checkedProps.value.invalid || validationStatus.value === 'error'
 })
 let guardedBinding5Previous: any
 const guardedBinding5 = computed(() => {
-  if (!(validationStatus.value == null || typeof validationStatus.value === 'string')) {
-    return guardedBinding5Previous
-  }
+  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'
 })
 let guardedBinding6Previous: any
 const guardedBinding6 = computed(() => {
-  if (!(display.value == null || typeof display.value === 'string')) return guardedBinding6Previous
+  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
 })
 let guardedBinding7Previous: any
 const guardedBinding7 = computed(() => {
   if (
-    !(internalItems.value?.['0'] == null
+    !(htmlNextAuthoredCheck2(
+      internalItems.value?.['0'] == null
       || (typeof internalItems.value?.['0'] === 'object' && internalItems.value?.['0'] !== null
-        && !Array.isArray(internalItems.value?.['0'])))
+        && !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])
 })
 let guardedBinding8Previous: any
 const guardedBinding8 = computed(() => {
-  if (!(submitted.value == null || typeof submitted.value === 'string')) {
-    return guardedBinding8Previous
-  }
+  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
 })
 let guardedBinding9Previous: any
 const guardedBinding9 = computed(() => {
   if (
-    !((raw.value == null || typeof raw.value === 'string')
-      && (selected.value == null || typeof selected.value === 'string'))
+    !(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))
 })
 let guardedBinding10Previous: any = null
 const guardedBinding10 = computed(() => {
-  if (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding10Previous
+  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')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding10Previous
   return guardedBinding10Previous = candidate
 })
 let guardedBinding11Previous: any = null
 const guardedBinding11 = computed(() => {
-  if (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding11Previous
+  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 guardedBinding11Previous
   const candidate: any = concat(uid.value, '-help')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding11Previous
   return guardedBinding11Previous = candidate
 })
 let guardedBinding12Previous: any = null
 const guardedBinding12 = computed(() => {
-  if (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding12Previous
+  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')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding12Previous
   return guardedBinding12Previous = candidate
 })
 let guardedBinding13Previous: any = null
 const guardedBinding13 = computed(() => {
-  if (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding13Previous
+  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')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding13Previous
   return guardedBinding13Previous = candidate
 })
 let guardedBinding14Previous: any
 const guardedBinding14 = computed(() => {
-  if (!(expanded.value == null || typeof expanded.value === 'boolean')) {
-    return guardedBinding14Previous
-  }
+  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 (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding15Previous
+  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
@@ -1016,16 +1114,32 @@ const guardedBinding16 = computed(() => {
 let guardedBinding17Previous: any
 const guardedBinding17 = computed(() => {
   if (
-    !((active.value == null || Number.isInteger(active.value))
-      && (createIndex.value == null || Number.isInteger(createIndex.value)))
+    !(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 (
-    !((createIndex.value == null || Number.isInteger(createIndex.value))
-      && (uid.value == null || typeof uid.value === 'string'))
+    !(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
@@ -1033,35 +1147,61 @@ const guardedBinding18 = computed(() => {
 })
 let guardedBinding19Previous: any
 const guardedBinding19 = computed(() => {
-  if (!(createIndex.value == null || Number.isInteger(createIndex.value))) {
-    return guardedBinding19Previous
-  }
+  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 (!(raw.value == null || typeof raw.value === 'string')) return guardedBinding20Previous
+  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 (!(message.value == null || typeof message.value === 'string')) return guardedBinding21Previous
+  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 (!(uid.value == null || typeof uid.value === 'string')) return guardedBinding22Previous
+  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 (!(statusText.value == null || typeof statusText.value === 'string')) {
-    return guardedBinding23Previous
-  }
+  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
 })
 provide('html-next:ui-combobox:internalItems', internalItems)
@@ -1111,16 +1251,18 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isQueryChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isQueryChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['query'] === 'string'
   && typeof (detail as Record<string, unknown>)['display'] === 'string'
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['query', 'display', 'trigger'].includes(key))
-const isValueChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['query', 'display', 'trigger'].includes(key)))
+const isValueChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && (typeof (detail as Record<string, unknown>)['value'] === 'string'
     || (detail as Record<string, unknown>)['value'] === null)
   && typeof (detail as Record<string, unknown>)['query'] === 'string'
@@ -1154,7 +1296,8 @@ const isValueChangeDetail = (detail: unknown): boolean =>
           === 'object'
         && !Array.isArray(
           ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag'],
-        ) && typeof (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+        )
+        && typeof (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
             'tag'
           ] as Record<string, unknown>)['label'] === 'string'
         && ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
@@ -1188,9 +1331,7 @@ const isValueChangeDetail = (detail: unknown): boolean =>
           ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
             'tag'
           ] as object,
-        ).every((key) =>
-          ['label', 'tone', 'color'].includes(key)
-        )))
+        ).every((key) => ['label', 'tone', 'color'].includes(key))))
     && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
       ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
     )) || (detail as Record<string, unknown>)['option'] === null)
@@ -1203,9 +1344,10 @@ const isValueChangeDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
   && Object.keys(detail as object).every((key) =>
     ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
-  )
-const isItemsChangeDetail = (detail: unknown): boolean =>
-  Array.isArray(detail)
+  ))
+const isItemsChangeDetail = (
+  detail: unknown,
+): boolean => (Array.isArray(detail)
   && (detail as unknown[]).every((
     item: unknown,
   ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
@@ -1248,9 +1390,10 @@ const isItemsChangeDetail = (detail: unknown): boolean =>
     && Object.keys(item as object).every((key) =>
       ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
     ))
-  )
-const isValidationChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  ))
+const isValidationChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && ((detail as Record<string, unknown>)['status'] === 'pristine'
     || (detail as Record<string, unknown>)['status'] === 'pending'
     || (detail as Record<string, unknown>)['status'] === 'valid'
@@ -1271,16 +1414,15 @@ const isValidationChangeDetail = (detail: unknown): boolean =>
       && ((item as Record<string, unknown>)['severity'] === undefined
         || ((item as Record<string, unknown>)['severity'] === 'error'
           || (item as Record<string, unknown>)['severity'] === 'warning'))
-      && Object.keys(item as object).every((key) =>
-        ['message', 'path', 'severity'].includes(key)
-      ))
+      && Object.keys(item as object).every((key) => ['message', 'path', 'severity'].includes(key)))
     ))
   && ((detail as Record<string, unknown>)['output'] === undefined || true)
   && Object.keys(detail as object).every((key) =>
     ['status', 'touched', 'dirty', 'issues', 'output'].includes(key)
-  )
-const isAddItemDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  ))
+const isAddItemDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && ((detail as Record<string, unknown>)['item'] !== null
     && typeof (detail as Record<string, unknown>)['item'] === 'object'
     && !Array.isArray((detail as Record<string, unknown>)['item'])
@@ -1310,7 +1452,8 @@ const isAddItemDetail = (detail: unknown): boolean =>
           === 'object'
         && !Array.isArray(
           ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'],
-        ) && typeof (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
+        )
+        && typeof (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
             'tag'
           ] as Record<string, unknown>)['label'] === 'string'
         && ((((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
@@ -1342,9 +1485,7 @@ const isAddItemDetail = (detail: unknown): boolean =>
             ] as Record<string, unknown>)['color'] === 'string')
         && Object.keys(
           ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'] as object,
-        ).every((key) =>
-          ['label', 'tone', 'color'].includes(key)
-        )))
+        ).every((key) => ['label', 'tone', 'color'].includes(key))))
     && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
       ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
     ))
@@ -1352,18 +1493,18 @@ const isAddItemDetail = (detail: unknown): boolean =>
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) =>
-    ['item', 'index', 'trigger'].includes(key)
-  )
-const isCreateItemDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['item', 'index', 'trigger'].includes(key)))
+const isCreateItemDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['query'] === 'string'
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['query', 'trigger'].includes(key))
-const isSelectedValuesChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['query', 'trigger'].includes(key)))
+const isSelectedValuesChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && (Array.isArray((detail as Record<string, unknown>)['selectedValues'])
     && ((detail as Record<string, unknown>)['selectedValues'] as unknown[]).every((item: unknown) =>
       typeof item === 'string'
@@ -1371,7 +1512,7 @@ const isSelectedValuesChangeDetail = (detail: unknown): boolean =>
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['selectedValues', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['selectedValues', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     'query-change': isQueryChangeDetail,
@@ -1389,9 +1530,257 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   modeled: ['query', 'selectedValues', 'value'],
 })
 
-const { host, ready } = useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
+useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        internalItems: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'group', type: { kind: 'terminal', name: 'string' }, optional: true },
+              { name: 'disabled', type: { kind: 'terminal', name: 'boolean' }, optional: true },
+              { name: 'description', type: { kind: 'terminal', name: 'string' }, optional: true },
+              {
+                name: 'tag',
+                type: {
+                  kind: 'object',
+                  fields: [{
+                    name: 'label',
+                    type: { kind: 'terminal', name: 'string' },
+                    optional: false,
+                  }, {
+                    name: 'tone',
+                    type: {
+                      kind: 'constrained',
+                      base: { kind: 'terminal', name: 'keyword' },
+                      values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+                    },
+                    optional: true,
+                  }, { name: 'color', type: { kind: 'terminal', name: 'string' }, optional: true }],
+                  open: false,
+                },
+                optional: true,
+              },
+            ],
+            open: false,
+          },
+        },
+        raw: { kind: 'terminal', name: 'string' },
+        display: { kind: 'terminal', name: 'string' },
+        selected: {
+          kind: 'union',
+          members: [{ kind: 'terminal', name: 'string' }, { kind: 'terminal', name: 'null' }],
+        },
+        expanded: { kind: 'terminal', name: 'boolean' },
+        rows: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'group', type: { kind: 'terminal', name: 'string' }, optional: true },
+              { name: 'disabled', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+              { name: 'selected', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+              { name: 'description', type: { kind: 'terminal', name: 'string' }, optional: true },
+              {
+                name: 'tag',
+                type: {
+                  kind: 'object',
+                  fields: [{
+                    name: 'label',
+                    type: { kind: 'terminal', name: 'string' },
+                    optional: false,
+                  }, {
+                    name: 'tone',
+                    type: {
+                      kind: 'constrained',
+                      base: { kind: 'terminal', name: 'keyword' },
+                      values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+                    },
+                    optional: true,
+                  }, { name: 'color', type: { kind: 'terminal', name: 'string' }, optional: true }],
+                  open: false,
+                },
+                optional: true,
+              },
+            ],
+            open: false,
+          },
+        },
+        active: { kind: 'terminal', name: 'integer' },
+        helpOpen: { kind: 'terminal', name: 'boolean' },
+        lookupError: { kind: 'terminal', name: 'string' },
+        validation: {
+          kind: 'object',
+          fields: [
+            {
+              name: 'status',
+              type: {
+                kind: 'constrained',
+                base: { kind: 'terminal', name: 'keyword' },
+                values: ['pristine', 'pending', 'valid', 'warning', 'error'],
+              },
+              optional: false,
+            },
+            { name: 'touched', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+            { name: 'dirty', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+            {
+              name: 'issues',
+              type: {
+                kind: 'list',
+                item: {
+                  kind: 'object',
+                  fields: [{
+                    name: 'message',
+                    type: { kind: 'terminal', name: 'string' },
+                    optional: false,
+                  }],
+                  open: false,
+                },
+              },
+              optional: false,
+            },
+          ],
+          open: true,
+        },
+        uid: { kind: 'terminal', name: 'string' },
+        submitted: { kind: 'terminal', name: 'string' },
+        groups: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'name', type: { kind: 'terminal', name: 'string' }, optional: false },
+              {
+                name: 'role',
+                type: {
+                  kind: 'constrained',
+                  base: { kind: 'terminal', name: 'keyword' },
+                  values: ['group', 'presentation'],
+                },
+                optional: false,
+              },
+              {
+                name: 'label',
+                type: {
+                  kind: 'union',
+                  members: [{ kind: 'terminal', name: 'string' }, {
+                    kind: 'terminal',
+                    name: 'null',
+                  }],
+                },
+                optional: false,
+              },
+              {
+                name: 'rows',
+                type: {
+                  kind: 'list',
+                  item: {
+                    kind: 'object',
+                    fields: [{
+                      name: 'id',
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: false,
+                    }, {
+                      name: 'value',
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: false,
+                    }, {
+                      name: 'label',
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: false,
+                    }, {
+                      name: 'group',
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: true,
+                    }, {
+                      name: 'disabled',
+                      type: { kind: 'terminal', name: 'boolean' },
+                      optional: false,
+                    }, {
+                      name: 'selected',
+                      type: { kind: 'terminal', name: 'boolean' },
+                      optional: false,
+                    }, {
+                      name: 'description',
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: true,
+                    }, {
+                      name: 'tag',
+                      type: {
+                        kind: 'object',
+                        fields: [{
+                          name: 'label',
+                          type: { kind: 'terminal', name: 'string' },
+                          optional: false,
+                        }, {
+                          name: 'tone',
+                          type: {
+                            kind: 'constrained',
+                            base: { kind: 'terminal', name: 'keyword' },
+                            values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+                          },
+                          optional: true,
+                        }, {
+                          name: 'color',
+                          type: { kind: 'terminal', name: 'string' },
+                          optional: true,
+                        }],
+                        open: false,
+                      },
+                      optional: true,
+                    }, {
+                      name: 'index',
+                      type: { kind: 'terminal', name: 'integer' },
+                      optional: false,
+                    }, {
+                      name: 'labelledBy',
+                      type: {
+                        kind: 'union',
+                        members: [{ kind: 'terminal', name: 'string' }, {
+                          kind: 'terminal',
+                          name: 'null',
+                        }],
+                      },
+                      optional: false,
+                    }, {
+                      name: 'detail',
+                      type: {
+                        kind: 'union',
+                        members: [{ kind: 'terminal', name: 'string' }, {
+                          kind: 'terminal',
+                          name: 'null',
+                        }],
+                      },
+                      optional: false,
+                    }],
+                    open: false,
+                  },
+                },
+                optional: false,
+              },
+            ],
+            open: false,
+          },
+        },
+        creatable: { kind: 'terminal', name: 'boolean' },
+        createIndex: { kind: 'terminal', name: 'integer' },
+        message: { kind: 'terminal', name: 'string' },
+        statusText: { kind: 'terminal', name: 'string' },
+        validationStatus: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-combobox/ui-combobox.js',
     definition: './components/ui-combobox/ui-combobox.html',
@@ -1462,43 +1851,6 @@ const { host, ready } = useComponentHost(() => import('../components/ui-combobox
   },
 })
 
-defineExpose({
-  validate: async (...args: unknown[]) => {
-    const controllerModule = await ready()
-    if (controllerModule === undefined) {
-      throw new TypeError('Controller method `validate` is not ready for <ui-combobox>.')
-    }
-    const method = Reflect.get(controllerModule, 'validate')
-    if (typeof method !== 'function') {
-      throw Object.assign(new Error('HJ003: Controller does not export method `validate`.'), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({
-          code: 'HJ003',
-          message: 'Controller does not export method `validate`.',
-        }),
-      })
-    }
-    return method(host, ...args)
-  },
-  focusInput: async (...args: unknown[]) => {
-    const controllerModule = await ready()
-    if (controllerModule === undefined) {
-      throw new TypeError('Controller method `focusInput` is not ready for <ui-combobox>.')
-    }
-    const method = Reflect.get(controllerModule, 'focusInput')
-    if (typeof method !== 'function') {
-      throw Object.assign(new Error('HJ003: Controller does not export method `focusInput`.'), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({
-          code: 'HJ003',
-          message: 'Controller does not export method `focusInput`.',
-        }),
-      })
-    }
-    return method(host, ...args)
-  },
-})
-
 function text(value: unknown): string {
   if (Array.isArray(value)) return value.map(text).join(' ')
   return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
@@ -1589,7 +1941,7 @@ function uniqueKeys<T>(
       }}<template v-if="checkedProps.required">
         *</template></label>
     <div class="control">
-      <div class="field" ref="field">
+      <div class="field" ref="fieldElement">
         <div class="entry">
           <slot name="start" />
           <template v-if="checkedProps.multiple"><KeyedBoundary><button
@@ -1618,7 +1970,7 @@ function uniqueKeys<T>(
             :disabled="checkedProps.disabled ?? undefined"
             :readonly="checkedProps.readonly ?? undefined"
             :required="guardedBinding7"
-            ref="input"
+            ref="inputElement"
           >
         </div>
         <input
@@ -1708,13 +2060,13 @@ function uniqueKeys<T>(
       :id="guardedBinding12"
       :for="guardedBinding13"
     >{{ checkedProps.help }}</UiTooltip>
-    <div class="popup" :hidden="guardedBinding14" ref="popup">
+    <div class="popup" :hidden="guardedBinding14" ref="popupElement">
       <div
         role="listbox"
         :id="guardedBinding15"
         :aria-label="guardedBinding16"
         :aria-busy="checkedProps.loading ?? undefined"
-        ref="listbox"
+        ref="listboxElement"
       >
         <KeyedBoundary><div
             v-for="group in uniqueKeys(groups, (group, indexLoop, loop) => group.name)"
@@ -1789,7 +2141,7 @@ function uniqueKeys<T>(
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
       {{ guardedBinding23 }}
     </div>
-    <div class="authored-options" hidden="" aria-hidden="true" ref="options"><slot /></div>
+    <div class="authored-options" hidden="" aria-hidden="true" ref="optionsElement"><slot /></div>
   </div>
 </template>