@threadlabs/looma 0.19.1 → 0.21.0

package/vue/UiCombobox.vue

@@ -1,24 +1,34 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
-import * as controllerModule from '../components/ui-combobox/ui-combobox.js'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+  useTemplateRef,
+  watchSyncEffect,
+} from 'vue'
+import type { PropType, VNode } from 'vue'
+import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 import UiBadge from './UiBadge.vue'
 import UiTooltip from './UiTooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    allowCreate?: boolean
-    allowFreeText?: boolean
-    clearable?: boolean
-    disabled?: boolean
-    disclosure?: boolean
-    filter?: 'label' | 'none'
-    help?: string
-    invalid?: boolean
-    items?:
+const props = defineProps({
+  allowCreate: { type: null as unknown as PropType<boolean | null>, default: false },
+  allowFreeText: { type: null as unknown as PropType<boolean | null>, default: false },
+  clearable: { type: null as unknown as PropType<boolean | null>, default: false },
+  disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  disclosure: { type: null as unknown as PropType<boolean | null>, default: false },
+  filter: { type: null as unknown as PropType<'label' | 'none' | null>, default: 'label' },
+  help: { type: null as unknown as PropType<string | null>, default: '' },
+  invalid: { type: null as unknown as PropType<boolean | null>, default: false },
+  items: {
+    type: null as unknown as PropType<
       readonly ({
         readonly id: string
         readonly value: string
@@ -31,57 +41,342 @@ const props = withDefaults(
           readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
           readonly color?: string
         }
-      })[]
-    label?: string
-    labelVisibility?: 'visible' | 'sr-only'
-    loading?: boolean
-    multiple?: boolean
-    name?: string
-    openOnFocus?: boolean
-    placeholder?: string
-    query?: string
-    readonly?: boolean
-    required?: boolean
-    selectedValues?: readonly (string)[]
-    size?: 'sm' | 'md' | 'lg'
-    tokenSeparators?: readonly (string)[]
-    value?: string | null
-  }>(),
-  {
-    allowCreate: false,
-    allowFreeText: false,
-    clearable: false,
-    disabled: false,
-    disclosure: false,
-    filter: 'label',
-    help: '',
-    invalid: false,
-    label: '',
-    labelVisibility: 'visible',
-    loading: false,
-    multiple: false,
-    name: '',
-    openOnFocus: false,
-    placeholder: '',
-    readonly: false,
-    required: false,
-    size: 'md',
+      })[] | null
+    >,
+    default: null,
   },
-)
+  label: { type: null as unknown as PropType<string | null>, default: '' },
+  labelVisibility: {
+    type: null as unknown as PropType<'visible' | 'sr-only' | null>,
+    default: 'visible',
+  },
+  loading: { type: null as unknown as PropType<boolean | null>, default: false },
+  multiple: { type: null as unknown as PropType<boolean | null>, default: false },
+  name: { type: null as unknown as PropType<string | null>, default: '' },
+  openOnFocus: { type: null as unknown as PropType<boolean | null>, default: false },
+  placeholder: { type: null as unknown as PropType<string | null>, default: '' },
+  query: { type: null as unknown as PropType<string | null>, default: null },
+  readonly: { type: null as unknown as PropType<boolean | null>, default: false },
+  required: { type: null as unknown as PropType<boolean | null>, default: false },
+  selectedValues: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  tokenSeparators: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
+  value: { type: null as unknown as PropType<string | null>, default: null },
+})
+const checkedProps = computed(() => ({
+  allowCreate: checkedProp<boolean>(
+    props['allowCreate'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'allowCreate',
+    undefined,
+    undefined,
+  ) as boolean,
+  allowFreeText: checkedProp<boolean>(
+    props['allowFreeText'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'allowFreeText',
+    undefined,
+    undefined,
+  ) as boolean,
+  clearable: checkedProp<boolean>(
+    props['clearable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'clearable',
+    undefined,
+    undefined,
+  ) as boolean,
+  disabled: checkedProp<boolean>(
+    props['disabled'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'disabled',
+    undefined,
+    undefined,
+  ) as boolean,
+  disclosure: checkedProp<boolean>(
+    props['disclosure'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'disclosure',
+    undefined,
+    undefined,
+  ) as boolean,
+  filter: checkedProp<'label' | 'none'>(
+    props['filter'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'filter',
+    undefined,
+    ['label', 'none'],
+  ) as 'label' | 'none',
+  help: checkedProp<string>(
+    props['help'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'help',
+    undefined,
+    undefined,
+  ) as string,
+  invalid: checkedProp<boolean>(
+    props['invalid'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'invalid',
+    undefined,
+    undefined,
+  ) as boolean,
+  items: checkedProp<
+    readonly ({
+      readonly id: string
+      readonly value: string
+      readonly label: string
+      readonly group?: string
+      readonly disabled?: boolean
+      readonly description?: string
+      readonly tag?: {
+        readonly label: string
+        readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+        readonly color?: string
+      }
+    })[]
+  >(
+    props['items'],
+    {
+      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,
+      },
+    },
+    false,
+    'items',
+    undefined,
+    undefined,
+  ),
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    undefined,
+    undefined,
+  ) as string,
+  labelVisibility: checkedProp<'visible' | 'sr-only'>(
+    props['labelVisibility'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'labelVisibility',
+    undefined,
+    ['visible', 'sr-only'],
+  ) as 'visible' | 'sr-only',
+  loading: checkedProp<boolean>(
+    props['loading'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'loading',
+    undefined,
+    undefined,
+  ) as boolean,
+  multiple: checkedProp<boolean>(
+    props['multiple'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'multiple',
+    undefined,
+    undefined,
+  ) as boolean,
+  name: checkedProp<string>(
+    props['name'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'name',
+    undefined,
+    undefined,
+  ) as string,
+  openOnFocus: checkedProp<boolean>(
+    props['openOnFocus'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'openOnFocus',
+    undefined,
+    undefined,
+  ) as boolean,
+  placeholder: checkedProp<string>(
+    props['placeholder'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'placeholder',
+    undefined,
+    undefined,
+  ) as string,
+  query: checkedProp<string>(
+    props['query'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'query',
+    undefined,
+    undefined,
+  ),
+  readonly: checkedProp<boolean>(
+    props['readonly'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'readonly',
+    undefined,
+    undefined,
+  ) as boolean,
+  required: checkedProp<boolean>(
+    props['required'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'required',
+    undefined,
+    undefined,
+  ) as boolean,
+  selectedValues: checkedProp<readonly (string)[]>(
+    props['selectedValues'],
+    { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+    false,
+    'selectedValues',
+    undefined,
+    undefined,
+  ),
+  size: checkedProp<'sm' | 'md' | 'lg'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    undefined,
+    ['sm', 'md', 'lg'],
+  ) as 'sm' | 'md' | 'lg',
+  tokenSeparators: checkedProp<readonly (string)[]>(
+    props['tokenSeparators'],
+    { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+    false,
+    'tokenSeparators',
+    undefined,
+    undefined,
+  ),
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    undefined,
+    undefined,
+  ),
+}))
+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 hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:query': [value: string]
   'update:selectedValues': [value: readonly (string)[]]
-  'update:value': [value: string | null]
+  'update:value': [value: string]
   'query-change': [
-    detail: {
-      readonly query: string
-      readonly display: string
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly query: string
+        readonly display: string
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
   'value-change': [
-    detail:
-      | {
+    event: CustomEvent<
+      {
         readonly value: string | null
         readonly query: string
         readonly option: {
@@ -100,7 +395,11 @@ const emit = defineEmits<{
         readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
       }
-      | readonly ({
+    >,
+  ]
+  'items-change': [
+    event: CustomEvent<
+      readonly ({
         readonly id: string
         readonly value: string
         readonly label: string
@@ -112,66 +411,73 @@ const emit = defineEmits<{
           readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
           readonly color?: string
         }
-      })[],
+      })[]
+    >,
   ]
   'free-entry': [
-    detail: {
-      readonly value: string | null
-      readonly query: string
-      readonly option: {
-        readonly id: string
-        readonly value: string
-        readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
-        readonly tag?: {
+    event: CustomEvent<
+      {
+        readonly value: string | null
+        readonly query: string
+        readonly option: {
+          readonly id: string
+          readonly value: string
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
-        }
-      } | null
-      readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+          readonly group?: string
+          readonly disabled?: boolean
+          readonly description?: string
+          readonly tag?: {
+            readonly label: string
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+            readonly color?: string
+          }
+        } | null
+        readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
   'create-entry': [
-    detail: {
-      readonly value: string | null
-      readonly query: string
-      readonly option: {
-        readonly id: string
-        readonly value: string
-        readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
-        readonly tag?: {
+    event: CustomEvent<
+      {
+        readonly value: string | null
+        readonly query: string
+        readonly option: {
+          readonly id: string
+          readonly value: string
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
-        }
-      } | null
-      readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+          readonly group?: string
+          readonly disabled?: boolean
+          readonly description?: string
+          readonly tag?: {
+            readonly label: string
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+            readonly color?: string
+          }
+        } | null
+        readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
   'validation-change': [
-    detail: {
-      readonly status: 'pristine' | 'pending' | 'valid' | 'warning' | 'error'
-      readonly touched: boolean
-      readonly dirty: boolean
-      readonly issues:
-        readonly ({
-          readonly message: string
-          readonly path?: readonly (unknown)[]
-          readonly severity?: 'error' | 'warning'
-        })[]
-      readonly output?: unknown
-    },
+    event: CustomEvent<
+      {
+        readonly status: 'pristine' | 'pending' | 'valid' | 'warning' | 'error'
+        readonly touched: boolean
+        readonly dirty: boolean
+        readonly issues:
+          readonly ({
+            readonly message: string
+            readonly path?: readonly (unknown)[]
+            readonly severity?: 'error' | 'warning'
+          })[]
+        readonly output?: unknown
+      }
+    >,
   ]
   'options-change': [
-    detail:
+    event: CustomEvent<
       readonly ({
         readonly id: string
         readonly value: string
@@ -184,54 +490,63 @@ const emit = defineEmits<{
           readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
           readonly color?: string
         }
-      })[],
+      })[]
+    >,
   ]
   'add-item': [
-    detail: {
-      readonly item: {
-        readonly id: string
-        readonly value: string
-        readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
-        readonly tag?: {
+    event: CustomEvent<
+      {
+        readonly item: {
+          readonly id: string
+          readonly value: string
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
+          readonly group?: string
+          readonly disabled?: boolean
+          readonly description?: string
+          readonly tag?: {
+            readonly label: string
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+            readonly color?: string
+          }
         }
+        readonly index: number
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
       }
-      readonly index: number
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    >,
   ]
   'remove-item': [
-    detail: {
-      readonly item: {
-        readonly id: string
-        readonly value: string
-        readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
-        readonly tag?: {
+    event: CustomEvent<
+      {
+        readonly item: {
+          readonly id: string
+          readonly value: string
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
+          readonly group?: string
+          readonly disabled?: boolean
+          readonly description?: string
+          readonly tag?: {
+            readonly label: string
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+            readonly color?: string
+          }
         }
+        readonly index: number
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
       }
-      readonly index: number
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    >,
   ]
   'create-item': [
-    detail: { readonly query: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+    event: CustomEvent<
+      { readonly query: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' }
+    >,
   ]
   'selected-values-change': [
-    detail: {
-      readonly selectedValues: readonly (string)[]
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly selectedValues: readonly (string)[]
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
 }>()
 
@@ -319,15 +634,50 @@ const createIndex = ref(0)
 const message = ref('')
 const statusText = ref('')
 const validationStatus = ref('pristine')
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (
+    !(internalItems.value?.['0'] == null
+      || (typeof internalItems.value?.['0'] === 'object' && internalItems.value?.['0'] !== null
+        && !Array.isArray(internalItems.value?.['0'])))
+  ) return guardedPrevious
+  return guardedPrevious = checkedProps.value.required
+    && !(checkedProps.value.multiple && internalItems.value[0])
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (
+    !(selected.value == null || (typeof selected.value === 'string' || selected.value === null))
+  ) return guardedBindingPrevious
+  return guardedBindingPrevious = checkedProps.value.disabled || checkedProps.value.readonly
+    || (!raw.value && (checkedProps.value.multiple || selected.value === null))
+})
+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.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.size && `size size=${props.size}`,
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     validationStatus.value && 'validationStatus',
     `validationStatus=${encodeURIComponent(validationStatus.value)}`,
-    props.invalid && 'invalid',
-    props.multiple && 'multiple',
+    checkedProps.value.invalid && 'invalid',
+    checkedProps.value.multiple && 'multiple',
   ].filter(Boolean).join(' ')
 )
 
@@ -340,137 +690,6 @@ const isQueryChangeDetail = (detail: unknown): boolean =>
     || (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')
-      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['description']
-          === undefined
-        || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-            'description'
-          ] === 'string')
-      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
-          === undefined
-        || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
-            !== null
-          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'tag'
-            ] === '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>)[
-              'tag'
-            ] as Record<string, unknown>)['label'] === 'string'
-          && ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                'tag'
-              ] as Record<string, unknown>)['tone'] === undefined
-            || ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                  'tag'
-                ] as Record<string, unknown>)['tone'] === 'neutral'
-              || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                  'tag'
-                ] as Record<string, unknown>)['tone'] === 'accent'
-              || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                  'tag'
-                ] as Record<string, unknown>)['tone'] === 'info'
-              || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                  'tag'
-                ] as Record<string, unknown>)['tone'] === 'success'
-              || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                  'tag'
-                ] as Record<string, unknown>)['tone'] === 'warning'
-              || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                  'tag'
-                ] as Record<string, unknown>)['tone'] === 'danger'))
-          && ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                'tag'
-              ] as Record<string, unknown>)['color'] === undefined
-            || typeof (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-                'tag'
-              ] as Record<string, unknown>)['color'] === 'string')
-          && Object.keys(
-            ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
-              'tag'
-            ] as object,
-          ).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)
-    && ((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')
-      && ((item as Record<string, unknown>)['description'] === undefined
-        || typeof (item as Record<string, unknown>)['description'] === 'string')
-      && ((item as Record<string, unknown>)['tag'] === undefined
-        || ((item as Record<string, unknown>)['tag'] !== null
-          && typeof (item as Record<string, unknown>)['tag'] === 'object'
-          && !Array.isArray((item as Record<string, unknown>)['tag'])
-          && typeof ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['label']
-            === 'string'
-          && (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-              === undefined
-            || (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-                === 'neutral'
-              || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-                === 'accent'
-              || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-                === 'info'
-              || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-                === 'success'
-              || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-                === 'warning'
-              || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
-                === 'danger'))
-          && (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['color']
-              === undefined
-            || typeof ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['color']
-              === 'string')
-          && Object.keys((item as Record<string, unknown>)['tag'] as object).every((key) =>
-            ['label', 'tone', 'color'].includes(key)
-          )))
-      && Object.keys(item as object).every((key) =>
-        ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].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)
@@ -555,37 +774,7 @@ const isFreeEntryDetail = (detail: unknown): boolean =>
   && 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 =>
+const isItemsChangeDetail = (detail: unknown): boolean =>
   Array.isArray(detail)
   && (detail as unknown[]).every((
     item: unknown,
@@ -630,6 +819,36 @@ const isOptionsChangeDetail = (detail: unknown): boolean =>
       ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].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 isAddItemDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && ((detail as Record<string, unknown>)['item'] !== null
@@ -727,10 +946,11 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   checks: {
     'query-change': isQueryChangeDetail,
     'value-change': isValueChangeDetail,
-    'free-entry': isFreeEntryDetail,
-    'create-entry': isFreeEntryDetail,
+    'items-change': isItemsChangeDetail,
+    'free-entry': isValueChangeDetail,
+    'create-entry': isValueChangeDetail,
     'validation-change': isValidationChangeDetail,
-    'options-change': isOptionsChangeDetail,
+    'options-change': isItemsChangeDetail,
     'add-item': isAddItemDetail,
     'remove-item': isAddItemDetail,
     'create-item': isCreateItemDetail,
@@ -739,10 +959,14 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   modeled: ['query', 'selectedValues', 'value'],
 })
 
-const { host, ready } = useComponentHost(controllerModule.default, {
+const { host, ready } = useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-combobox/ui-combobox.js',
+    definition: './components/ui-combobox/ui-combobox.html',
+  },
+  props: checkedProps,
   refs: {
     field: fieldElement,
     input: inputElement,
@@ -774,86 +998,165 @@ const { host, ready } = useComponentHost(controllerModule.default, {
 
 defineExpose({
   validate: async (...args: unknown[]) => {
-    await ready()
-    return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['validate']!(
-      host,
-      ...args,
-    )
+    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[]) => {
-    await ready()
-    return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['focusInput']!(
-      host,
-      ...args,
-    )
+    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)
+}
+
+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"
-    v-bind="$attrs"
+    v-bind="nativeAttrs($attrs)"
+    :data-allow-create="reflectedProp('allowCreate', 'allow-create', checkedProps.allowCreate, undefined, false)"
+    :data-allow-free-text="reflectedProp('allowFreeText', 'allow-free-text', checkedProps.allowFreeText, undefined, false)"
+    :data-clearable="reflectedProp('clearable', 'clearable', checkedProps.clearable, undefined, false)"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-disclosure="reflectedProp('disclosure', 'disclosure', checkedProps.disclosure, undefined, false)"
+    :data-filter="reflectedProp('filter', 'filter', checkedProps.filter, undefined, false)"
+    :data-help="reflectedProp('help', 'help', checkedProps.help, undefined, false)"
+    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
+    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"
+    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-open-on-focus="reflectedProp('openOnFocus', 'open-on-focus', checkedProps.openOnFocus, undefined, false)"
+    :data-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
+    :data-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
+    :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
+    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-selected-values="reflectedProp('selectedValues', 'selected-values', checkedProps.selectedValues, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-token-separators="reflectedProp('tokenSeparators', 'token-separators', checkedProps.tokenSeparators, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-combobox-state="hostState || undefined"
     ref="root"
   >
-    <label :for="`${uid}-input`" :class="{ 'sr-only': labelVisibility === 'sr-only' }">{{ label }}
-      <template v-if="required">
+    <label
+      :for="`${uid}-input`"
+      :class="{ 'sr-only': checkedProps.labelVisibility === 'sr-only' }"
+    >{{ checkedProps.label }}
+      <template v-if="checkedProps.required">
         *</template></label>
     <div class="control">
       <div class="field" ref="field">
         <div class="entry">
           <slot name="start" />
-          <template v-if="multiple"><button
-              v-for="(item, index) in internalItems"
-              :key="item.id"
-              class="item"
-              type="button"
-              tabindex="-1"
-              :data-index="index"
-              :disabled="disabled || readonly || item.disabled"
-              :aria-label="`${item.label}, press Delete or Backspace to remove`"
-            >
-              <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
-            </button></template>
+          <template v-if="checkedProps.multiple"><KeyedBoundary><button
+                v-for="(item, index) in uniqueKeys(internalItems, (item, index, loop) => item.id)"
+                :key="item.id"
+                class="item"
+                type="button"
+                tabindex="-1"
+                :data-index="index"
+                :disabled="checkedProps.disabled || checkedProps.readonly || item.disabled"
+                :aria-label="`${item.label}, press Delete or Backspace to remove`"
+              >
+                <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
+              </button></KeyedBoundary></template>
           <input
             role="combobox"
             aria-autocomplete="list"
             autocomplete="off"
+            v-bind-control="{ tag: 'input', name: 'value', value: display, nativeProperty: true, defaultValue: '' }"
             :id="`${uid}-input`"
             :aria-controls="`${uid}-listbox`"
             :aria-expanded="expanded"
-            :aria-invalid="invalid || validationStatus === 'error'"
-            :aria-busy="loading || validationStatus === 'pending'"
-            :value.prop="display"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :readonly="readonly"
-            :required="required && !(multiple && internalItems[0])"
+            :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="guarded"
             ref="input"
           >
         </div>
         <input
-          v-if="name && !multiple"
+          v-if="checkedProps.name && !checkedProps.multiple"
           type="hidden"
-          :name="name"
-          :value="submitted"
-          :disabled="disabled"
+          :name="checkedProps.name ?? undefined"
+          :value.attr="submitted"
+          :disabled="checkedProps.disabled ?? undefined"
         >
-        <template v-if="name && multiple"><input
-            v-for="item in internalItems"
-            :key="item.id"
-            type="hidden"
-            :name="name"
-            :value="item.value"
-            :disabled="disabled"
-          ></template>
+        <template v-if="checkedProps.name && checkedProps.multiple"><KeyedBoundary><input
+              v-for="item in uniqueKeys(internalItems, (item, index, loop) => item.id)"
+              :key="item.id"
+              type="hidden"
+              :name="checkedProps.name ?? undefined"
+              :value.attr="item.value"
+              :disabled="checkedProps.disabled ?? undefined"
+            ></KeyedBoundary></template>
         <button
-          v-if="clearable"
+          v-if="checkedProps.clearable"
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
-          :disabled="disabled || readonly || (!raw && (multiple || selected === null))"
+          :disabled="guardedBinding"
         >
           <svg
             class="affordance-icon"
@@ -868,13 +1171,13 @@ defineExpose({
           </svg>
         </button>
         <button
-          v-if="disclosure"
+          v-if="checkedProps.disclosure"
           type="button"
           data-combobox-action="disclosure"
           tabindex="-1"
           aria-label="Show suggestions"
           :aria-controls="`${uid}-listbox`"
-          :disabled="disabled || readonly"
+          :disabled="checkedProps.disabled || checkedProps.readonly"
         >
           <svg
             class="affordance-icon"
@@ -891,12 +1194,12 @@ defineExpose({
         </button>
       </div>
       <button
-        v-if="help"
+        v-if="checkedProps.help"
         class="help"
         type="button"
         aria-label="Help"
         :id="`${uid}-help`"
-        :disabled="disabled"
+        :disabled="checkedProps.disabled ?? undefined"
       >
         <svg
           class="help-icon"
@@ -914,66 +1217,69 @@ defineExpose({
         </svg>
       </button>
     </div>
-    <UiTooltip v-if="help" trigger="click" :id="`${uid}-help-text`" :for="`${uid}-help`">{{
-      help
-    }}</UiTooltip>
+    <UiTooltip
+      v-if="checkedProps.help"
+      trigger="click"
+      :id="`${uid}-help-text`"
+      :for="`${uid}-help`"
+    >{{ checkedProps.help }}</UiTooltip>
     <div class="popup" :hidden="!expanded" ref="popup">
       <div
         role="listbox"
         :id="`${uid}-listbox`"
-        :aria-label="`${label} suggestions`"
-        :aria-busy="loading"
+        :aria-label="`${checkedProps.label ?? ''} suggestions`"
+        :aria-busy="checkedProps.loading ?? undefined"
         ref="listbox"
       >
-        <div
-          v-for="group in groups"
-          :key="group.name"
-          :role="group.role"
-          :aria-label="group.label ?? undefined"
-        >
-          <div v-if="group.name" class="group">{{ group.name }}</div>
-          <div
-            v-for="row in group.rows"
-            :key="row.id"
-            class="option"
-            role="option"
-            data-ui-choice-option=""
-            :data-multiple="multiple ? '' : undefined"
-            :id="`${uid}-option-${row.index}`"
-            :aria-selected="row.selected"
-            :aria-disabled="row.disabled"
-            :data-index="row.index"
-            :aria-labelledby="row.labelledBy ?? undefined"
-            :aria-describedby="row.detail ?? undefined"
-            :class="{ active: row.index === active }"
+        <KeyedBoundary><div
+            v-for="group in uniqueKeys(groups, (group, indexLoop, loop) => group.name)"
+            :key="group.name"
+            :role="group.role"
+            :aria-label="group.label ?? undefined"
           >
-            <slot :name="`option-${row.id}`"><span v-if="row.detail" class="detail"><span
-                  class="line"
-                ><span class="primary" :id="`${uid}-option-${row.index}-label`">{{
-                    row.label
-                  }}</span>
-                  <UiBadge
-                    v-if="row.tag"
-                    :tone="row.tag?.tone"
-                    :style="{ '--ui-badge-color': row.tag?.color }"
-                  ><span :id="`${uid}-option-${row.index}-tag`">{{
-                      row.tag?.label
-                    }}</span></UiBadge></span>
-                <span
-                  v-if="row.description"
-                  class="description"
-                  :id="`${uid}-option-${row.index}-description`"
-                >{{ row.description }}</span></span>
-              <span v-if="!row.detail" class="primary">{{ row.label }}</span></slot>
-          </div>
-        </div>
+            <div v-if="group.name" class="group">{{ group.name }}</div>
+            <KeyedBoundary><div
+                v-for="row in uniqueKeys(group.rows, (row, indexLoop2, loop) => row.id)"
+                :key="row.id"
+                class="option"
+                role="option"
+                data-ui-choice-option=""
+                :data-multiple="checkedProps.multiple ? '' : undefined"
+                :id="`${uid}-option-${row.index}`"
+                :aria-selected="row.selected"
+                :aria-disabled="row.disabled"
+                :data-index="row.index"
+                :aria-labelledby="row.labelledBy ?? undefined"
+                :aria-describedby="row.detail ?? undefined"
+                :class="{ active: row.index === active }"
+              >
+                <slot :name="`option-${row.id}`"><span v-if="row.detail" class="detail"><span
+                      class="line"
+                    ><span class="primary" :id="`${uid}-option-${row.index}-label`">{{
+                        row.label
+                      }}</span>
+                      <UiBadge
+                        v-if="row.tag"
+                        :tone="row.tag?.tone"
+                        :style="{ '--ui-badge-color': row.tag?.color ?? undefined }"
+                      ><span :id="`${uid}-option-${row.index}-tag`">{{
+                          row.tag?.label
+                        }}</span></UiBadge></span>
+                    <span
+                      v-if="row.description"
+                      class="description"
+                      :id="`${uid}-option-${row.index}-description`"
+                    >{{ row.description }}</span></span>
+                  <span v-if="!row.detail" class="primary">{{ row.label }}</span></slot>
+              </div></KeyedBoundary>
+          </div></KeyedBoundary>
         <div
           v-if="creatable"
           class="option"
           role="option"
           data-ui-choice-option=""
           aria-selected="false"
-          :data-multiple="multiple ? '' : undefined"
+          :data-multiple="checkedProps.multiple ? '' : undefined"
           :id="`${uid}-option-${createIndex}`"
           :data-index="createIndex"
           :class="{ active: createIndex === active }"
@@ -981,14 +1287,19 @@ defineExpose({
           {{ `Create “${raw}”` }}
         </div>
         <div v-if="message" class="message">{{ message }}</div>
-        <div v-if="!loading && !(rows[0]) && !creatable && !lookupError" class="message">
+        <div
+          v-if="!checkedProps.loading && !(rows[0]) && !creatable && !lookupError"
+          class="message"
+        >
           <slot name="empty">No suggestions.</slot>
         </div>
       </div>
       <slot name="footer" />
     </div>
     <div class="message" :id="`${uid}-validation`" :hidden="!validation.issues.length">
-      <div v-for="(issue, index) in validation.issues" :key="index">{{ issue.message }}</div>
+      <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">{{ statusText }}</div>
     <div class="authored-options" hidden="" aria-hidden="true" ref="options"><slot /></div>