@threadlabs/looma 0.6.3 → 0.6.5

package/vue/UiCombobox.vue

@@ -1,15 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  useTemplateRef,
-  watchEffect,
-} from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-combobox/ui-combobox.js'
+import { createDispatch, useComponentHost } from './host'
 import UiBadge from './UiBadge.vue'
 import UiTooltip from './UiTooltip.vue'
 
@@ -239,484 +232,240 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  const declared: Record<string, EventInit | undefined> = {
-    'query-change': { bubbles: true, composed: true, cancelable: false },
-    'value-change': { bubbles: true, composed: true, cancelable: false },
-    'free-entry': { bubbles: true, composed: true, cancelable: false },
-    'create-entry': { bubbles: true, composed: true, cancelable: false },
-    'validation-change': { bubbles: true, composed: true, cancelable: false },
-    'options-change': { bubbles: true, composed: true, cancelable: false },
-    'add-item': { bubbles: true, composed: true, cancelable: false },
-    'remove-item': { bubbles: true, composed: true, cancelable: false },
-    'create-item': { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    'query-change': (detail) =>
-      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)
-      ),
-    'value-change': (detail) =>
-      (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'
-        && (((detail as Record<string, unknown>)['option'] !== null
-          && typeof (detail as Record<string, unknown>)['option'] === 'object'
-          && !Array.isArray((detail as Record<string, unknown>)['option'])
-          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
-            === 'string'
-          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'value'
-            ] === 'string'
-          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'label'
-            ] === 'string'
-          && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
-              === undefined
-            || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                'group'
-              ] === 'string')
-          && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
-              === undefined
-            || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                'disabled'
-              ] === 'boolean')
-          && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
-            ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-          )) || (detail as Record<string, unknown>)['option'] === null)
-        && ((detail as Record<string, unknown>)['kind'] === 'selection'
-          || (detail as Record<string, unknown>)['kind'] === 'clear'
-          || (detail as Record<string, unknown>)['kind'] === 'free-entry'
-          || (detail as Record<string, unknown>)['kind'] === 'create')
-        && ((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) =>
-          ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
-        ))
-      || (Array.isArray(detail)
-        && (detail as unknown[]).every((
-          item: unknown,
-        ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
-          && typeof (item as Record<string, unknown>)['id'] === 'string'
-          && typeof (item as Record<string, unknown>)['value'] === 'string'
-          && typeof (item as Record<string, unknown>)['label'] === 'string'
-          && ((item as Record<string, unknown>)['group'] === undefined
-            || typeof (item as Record<string, unknown>)['group'] === 'string')
-          && ((item as Record<string, unknown>)['disabled'] === undefined
-            || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
-          && Object.keys(item as object).every((key) =>
-            ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-          ))
-        )),
-    'free-entry': (detail) =>
-      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'
-      && (((detail as Record<string, unknown>)['option'] !== null
-        && typeof (detail as Record<string, unknown>)['option'] === 'object'
-        && !Array.isArray((detail as Record<string, unknown>)['option'])
-        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
-          === 'string'
-        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-            'value'
-          ] === 'string'
-        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-            'label'
-          ] === 'string'
-        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'group'
-            ] === 'string')
-        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'disabled'
-            ] === 'boolean')
-        && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
-          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-        )) || (detail as Record<string, unknown>)['option'] === null)
-      && ((detail as Record<string, unknown>)['kind'] === 'selection'
-        || (detail as Record<string, unknown>)['kind'] === 'clear'
-        || (detail as Record<string, unknown>)['kind'] === 'free-entry'
-        || (detail as Record<string, unknown>)['kind'] === 'create')
-      && ((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) =>
-        ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
-      ),
-    'create-entry': (detail) =>
-      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'
-      && (((detail as Record<string, unknown>)['option'] !== null
-        && typeof (detail as Record<string, unknown>)['option'] === 'object'
-        && !Array.isArray((detail as Record<string, unknown>)['option'])
-        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
-          === 'string'
-        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-            'value'
-          ] === 'string'
-        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-            'label'
-          ] === 'string'
-        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'group'
-            ] === 'string')
-        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'disabled'
-            ] === 'boolean')
-        && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
-          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-        )) || (detail as Record<string, unknown>)['option'] === null)
-      && ((detail as Record<string, unknown>)['kind'] === 'selection'
-        || (detail as Record<string, unknown>)['kind'] === 'clear'
-        || (detail as Record<string, unknown>)['kind'] === 'free-entry'
-        || (detail as Record<string, unknown>)['kind'] === 'create')
-      && ((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) =>
-        ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
-      ),
-    'validation-change': (detail) =>
-      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'
-        || (detail as Record<string, unknown>)['status'] === 'warning'
-        || (detail as Record<string, unknown>)['status'] === 'error')
-      && typeof (detail as Record<string, unknown>)['touched'] === 'boolean'
-      && typeof (detail as Record<string, unknown>)['dirty'] === 'boolean'
-      && (Array.isArray((detail as Record<string, unknown>)['issues'])
-        && ((detail as Record<string, unknown>)['issues'] as unknown[]).every((
-          item: unknown,
-        ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
-          && typeof (item as Record<string, unknown>)['message'] === 'string'
-          && ((item as Record<string, unknown>)['path'] === undefined
-            || (Array.isArray((item as Record<string, unknown>)['path'])
-              && ((item as Record<string, unknown>)['path'] as unknown[]).every((item: unknown) =>
-                true
-              )))
-          && ((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)
-          ))
-        ))
-      && ((detail as Record<string, unknown>)['output'] === undefined || true)
-      && Object.keys(detail as object).every((key) =>
-        ['status', 'touched', 'dirty', 'issues', 'output'].includes(key)
-      ),
-    'options-change': (detail) =>
-      Array.isArray(detail)
-      && (detail as unknown[]).every((
-        item: unknown,
-      ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
-        && typeof (item as Record<string, unknown>)['id'] === 'string'
-        && typeof (item as Record<string, unknown>)['value'] === 'string'
-        && typeof (item as Record<string, unknown>)['label'] === 'string'
-        && ((item as Record<string, unknown>)['group'] === undefined
-          || typeof (item as Record<string, unknown>)['group'] === 'string')
-        && ((item as Record<string, unknown>)['disabled'] === undefined
-          || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
-        && Object.keys(item as object).every((key) =>
-          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-        ))
-      ),
-    'add-item': (detail) =>
-      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'])
-        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['id']
-          === 'string'
-        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['value']
-          === 'string'
-        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['label']
-          === 'string'
-        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
-              'group'
-            ] === 'string')
-        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
-              'disabled'
-            ] === 'boolean')
-        && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
-          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-        ))
-      && Number.isInteger((detail as Record<string, unknown>)['index'])
-      && ((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)
-      ),
-    'remove-item': (detail) =>
-      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'])
-        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['id']
-          === 'string'
-        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['value']
-          === 'string'
-        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['label']
-          === 'string'
-        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
-              'group'
-            ] === 'string')
-        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
-            === undefined
-          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
-              'disabled'
-            ] === 'boolean')
-        && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
-          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
-        ))
-      && Number.isInteger((detail as Record<string, unknown>)['index'])
-      && ((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)
-      ),
-    'create-item': (detail) =>
-      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)),
-  }
-  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
-  }
-  const emitEvent = emit as (name: string, detail: unknown) => void
-  emitEvent(name, detail)
-  if (detail !== null && typeof detail === 'object' && 'query' in detail) {
-    emitEvent('update:query', (detail as Record<string, unknown>)['query'])
-  }
-  if (detail !== null && typeof detail === 'object' && 'value' in detail) {
-    emitEvent('update:value', (detail as Record<string, unknown>)['value'])
-  }
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'internalItems') return internalItems.value
-  if (name === 'raw') return raw.value
-  if (name === 'display') return display.value
-  if (name === 'selected') return selected.value
-  if (name === 'expanded') return expanded.value
-  if (name === 'rows') return rows.value
-  if (name === 'active') return active.value
-  if (name === 'loading') return loading.value
-  if (name === 'helpOpen') return helpOpen.value
-  if (name === 'lookupError') return lookupError.value
-  if (name === 'validation') return validation.value
-  if (name === 'uid') return uid.value
-  if (name === 'groups') return groups.value
-  if (name === 'creatable') return creatable.value
-  if (name === 'createIndex') return createIndex.value
-  if (name === 'message') return message.value
-  if (name === 'statusText') return statusText.value
-  if (name === 'validationStatus') return validationStatus.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'internalItems') {
-    internalItems.value = value as never
-    return true
-  }
-  if (name === 'raw') {
-    raw.value = value as never
-    return true
-  }
-  if (name === 'display') {
-    display.value = value as never
-    return true
-  }
-  if (name === 'selected') {
-    selected.value = value as never
-    return true
-  }
-  if (name === 'expanded') {
-    expanded.value = value as never
-    return true
-  }
-  if (name === 'rows') {
-    rows.value = value as never
-    return true
-  }
-  if (name === 'active') {
-    active.value = value as never
-    return true
-  }
-  if (name === 'loading') {
-    loading.value = value as never
-    return true
-  }
-  if (name === 'helpOpen') {
-    helpOpen.value = value as never
-    return true
-  }
-  if (name === 'lookupError') {
-    lookupError.value = value as never
-    return true
-  }
-  if (name === 'validation') {
-    validation.value = value as never
-    return true
-  }
-  if (name === 'uid') {
-    uid.value = value as never
-    return true
-  }
-  if (name === 'groups') {
-    groups.value = value as never
-    return true
-  }
-  if (name === 'creatable') {
-    creatable.value = value as never
-    return true
-  }
-  if (name === 'createIndex') {
-    createIndex.value = value as never
-    return true
-  }
-  if (name === 'message') {
-    message.value = value as never
-    return true
-  }
-  if (name === 'statusText') {
-    statusText.value = value as never
-    return true
-  }
-  if (name === 'validationStatus') {
-    validationStatus.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): Element {
-    return root.value as Element
+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)
+    && (typeof (detail as Record<string, unknown>)['value'] === 'string'
+      || (detail as Record<string, unknown>)['value'] === null)
+    && typeof (detail as Record<string, unknown>)['query'] === 'string'
+    && (((detail as Record<string, unknown>)['option'] !== null
+      && typeof (detail as Record<string, unknown>)['option'] === 'object'
+      && !Array.isArray((detail as Record<string, unknown>)['option'])
+      && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
+        === 'string'
+      && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['value']
+        === 'string'
+      && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['label']
+        === 'string'
+      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
+          === undefined
+        || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'group'
+          ] === 'string')
+      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
+          === undefined
+        || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'disabled'
+          ] === 'boolean')
+      && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
+        ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+      )) || (detail as Record<string, unknown>)['option'] === null)
+    && ((detail as Record<string, unknown>)['kind'] === 'selection'
+      || (detail as Record<string, unknown>)['kind'] === 'clear'
+      || (detail as Record<string, unknown>)['kind'] === 'free-entry'
+      || (detail as Record<string, unknown>)['kind'] === 'create')
+    && ((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) =>
+      ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
+    ))
+  || (Array.isArray(detail)
+    && (detail as unknown[]).every((
+      item: unknown,
+    ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
+      && typeof (item as Record<string, unknown>)['id'] === 'string'
+      && typeof (item as Record<string, unknown>)['value'] === 'string'
+      && typeof (item as Record<string, unknown>)['label'] === 'string'
+      && ((item as Record<string, unknown>)['group'] === undefined
+        || typeof (item as Record<string, unknown>)['group'] === 'string')
+      && ((item as Record<string, unknown>)['disabled'] === undefined
+        || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
+      && Object.keys(item as object).every((key) =>
+        ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+      ))
+    ))
+const isFreeEntryDetail = (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'
+  && (((detail as Record<string, unknown>)['option'] !== null
+    && typeof (detail as Record<string, unknown>)['option'] === 'object'
+    && !Array.isArray((detail as Record<string, unknown>)['option'])
+    && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
+      === 'string'
+    && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['value']
+      === 'string'
+    && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['label']
+      === 'string'
+    && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
+        === undefined
+      || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
+        === 'string')
+    && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
+        === undefined
+      || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+          'disabled'
+        ] === 'boolean')
+    && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
+      ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+    )) || (detail as Record<string, unknown>)['option'] === null)
+  && ((detail as Record<string, unknown>)['kind'] === 'selection'
+    || (detail as Record<string, unknown>)['kind'] === 'clear'
+    || (detail as Record<string, unknown>)['kind'] === 'free-entry'
+    || (detail as Record<string, unknown>)['kind'] === 'create')
+  && ((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) =>
+    ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
+  )
+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'
+    || (detail as Record<string, unknown>)['status'] === 'warning'
+    || (detail as Record<string, unknown>)['status'] === 'error')
+  && typeof (detail as Record<string, unknown>)['touched'] === 'boolean'
+  && typeof (detail as Record<string, unknown>)['dirty'] === 'boolean'
+  && (Array.isArray((detail as Record<string, unknown>)['issues'])
+    && ((detail as Record<string, unknown>)['issues'] as unknown[]).every((
+      item: unknown,
+    ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
+      && typeof (item as Record<string, unknown>)['message'] === 'string'
+      && ((item as Record<string, unknown>)['path'] === undefined
+        || (Array.isArray((item as Record<string, unknown>)['path'])
+          && ((item as Record<string, unknown>)['path'] as unknown[]).every((item: unknown) =>
+            true
+          )))
+      && ((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)
+      ))
+    ))
+  && ((detail as Record<string, unknown>)['output'] === undefined || true)
+  && Object.keys(detail as object).every((key) =>
+    ['status', 'touched', 'dirty', 'issues', 'output'].includes(key)
+  )
+const isOptionsChangeDetail = (detail: unknown): boolean =>
+  Array.isArray(detail)
+  && (detail as unknown[]).every((
+    item: unknown,
+  ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
+    && typeof (item as Record<string, unknown>)['id'] === 'string'
+    && typeof (item as Record<string, unknown>)['value'] === 'string'
+    && typeof (item as Record<string, unknown>)['label'] === 'string'
+    && ((item as Record<string, unknown>)['group'] === undefined
+      || typeof (item as Record<string, unknown>)['group'] === 'string')
+    && ((item as Record<string, unknown>)['disabled'] === undefined
+      || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
+    && Object.keys(item as object).every((key) =>
+      ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+    ))
+  )
+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'])
+    && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['id']
+      === 'string'
+    && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['value']
+      === 'string'
+    && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['label']
+      === 'string'
+    && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group']
+        === undefined
+      || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group']
+        === 'string')
+    && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
+        === undefined
+      || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
+        === 'boolean')
+    && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
+      ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+    ))
+  && Number.isInteger((detail as Record<string, unknown>)['index'])
+  && ((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)
+  && 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 dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    'query-change': isQueryChangeDetail,
+    'value-change': isValueChangeDetail,
+    'free-entry': isFreeEntryDetail,
+    'create-entry': isFreeEntryDetail,
+    'validation-change': isValidationChangeDetail,
+    'options-change': isOptionsChangeDetail,
+    'add-item': isAddItemDetail,
+    'remove-item': isAddItemDetail,
+    'create-item': isCreateItemDetail,
   },
-  state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === 'string' && write(name, value),
-  }),
+  modeled: ['query', 'value'],
+})
+
+const { host, ready } = useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
   refs: {
-    get field(): Element {
-      return fieldElement.value as Element
-    },
-    get input(): Element {
-      return inputElement.value as Element
-    },
-    get popup(): Element {
-      return popupElement.value as Element
-    },
-    get listbox(): Element {
-      return listboxElement.value as Element
-    },
-    get options(): Element {
-      return optionsElement.value as Element
-    },
-  } as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    get: (_target, name) => {
-      if (typeof name !== 'string' || root.value === null) return undefined
-      const form = root.value instanceof HTMLFormElement
-        ? root.value
-        : root.value.querySelector('form')
-      return form?.elements.namedItem(name)
-        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
-  },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    stops.push(stop)
-    return stop
+    field: fieldElement,
+    input: inputElement,
+    popup: popupElement,
+    listbox: listboxElement,
+    options: optionsElement,
   },
-  on(event: string, listener: EventListener): () => void {
-    const element = root.value
-    element?.addEventListener(event, listener)
-    const off = (): void => element?.removeEventListener(event, listener)
-    stops.push(off)
-    return off
+  state: {
+    internalItems,
+    raw,
+    display,
+    selected,
+    expanded,
+    rows,
+    active,
+    loading,
+    helpOpen,
+    lookupError,
+    validation,
+    uid,
+    groups,
+    creatable,
+    createIndex,
+    message,
+    statusText,
+    validationStatus,
   },
-  dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
-})
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
 })
+
 defineExpose({
   validate: async (...args: unknown[]) => {
-    await ready
+    await ready()
     return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['validate']!(
       host,
       ...args,
     )
   },
   focusInput: async (...args: unknown[]) => {
-    await ready
+    await ready()
     return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['focusInput']!(
       host,
       ...args,