@threadlabs/looma 0.30.2 → 0.30.3

package/vue/UiCombobox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -17,7 +17,18 @@ import {
   warnUnless,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiBadge from './UiBadge.vue'
 import UiTooltip from './UiTooltip.vue'
 
@@ -268,52 +279,49 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  allowCreate: { type: null as unknown as PropType<boolean | null>, default: false },
-  allowFreeText: { type: null as unknown as PropType<boolean | null>, default: false },
-  autoHighlight: { type: null as unknown as PropType<'none' | 'single' | null>, default: 'none' },
-  clearQueryOnBlur: { 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 },
+  allowCreate: { type: null as unknown as PropType<boolean | null> },
+  allowFreeText: { type: null as unknown as PropType<boolean | null> },
+  autoHighlight: { type: null as unknown as PropType<'none' | 'single' | null> },
+  clearQueryOnBlur: { type: null as unknown as PropType<boolean | null> },
+  clearable: { type: null as unknown as PropType<boolean | null> },
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  disclosure: { type: null as unknown as PropType<boolean | null> },
+  filter: { type: null as unknown as PropType<'label' | 'none' | null> },
+  help: { type: null as unknown as PropType<string | null> },
+  invalid: { type: null as unknown as PropType<boolean | null> },
   items: {
     type: null as unknown as PropType<
       readonly ({
         readonly id: string
         readonly value: string
         readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
+        readonly group?: string | null
+        readonly disabled?: boolean | null
+        readonly description?: string | null
         readonly tag?: {
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
-        }
+          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+          readonly color?: string | null
+        } | null
       })[] | 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 },
-  selectOnTab: { type: null as unknown as PropType<boolean | null>, default: false },
-  selectedValues: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
-  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
-  tokenSeparators: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
-  value: { type: null as unknown as PropType<string | null>, default: null },
+  label: { type: null as unknown as PropType<string | null> },
+  labelVisibility: { type: null as unknown as PropType<'visible' | 'sr-only' | null> },
+  loading: { type: null as unknown as PropType<boolean | null> },
+  multiple: { type: null as unknown as PropType<boolean | null> },
+  name: { type: null as unknown as PropType<string | null> },
+  openOnFocus: { type: null as unknown as PropType<boolean | null> },
+  placeholder: { type: null as unknown as PropType<string | null> },
+  query: { type: null as unknown as PropType<string | null> },
+  readonly: { type: null as unknown as PropType<boolean | null> },
+  required: { type: null as unknown as PropType<boolean | null> },
+  selectOnTab: { type: null as unknown as PropType<boolean | null> },
+  selectedValues: { type: null as unknown as PropType<readonly (string)[] | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
+  tokenSeparators: { type: null as unknown as PropType<readonly (string)[] | null> },
+  value: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   allowCreate: false,
@@ -343,239 +351,281 @@ const acceptedProps: Record<string, unknown> = {
   tokenSeparators: null,
   value: null,
 }
-const checkedProps = computed(() => ({
-  allowCreate: checkedProp<boolean>(
-    props['allowCreate'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'allowCreate',
-    acceptedProps,
-  ) as boolean,
-  allowFreeText: checkedProp<boolean>(
-    props['allowFreeText'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'allowFreeText',
-    acceptedProps,
-  ) as boolean,
-  autoHighlight: checkedProp<'none' | 'single'>(
-    props['autoHighlight'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'autoHighlight',
-    acceptedProps,
-  ) as 'none' | 'single',
-  clearQueryOnBlur: checkedProp<boolean>(
-    props['clearQueryOnBlur'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'clearQueryOnBlur',
-    acceptedProps,
-  ) as boolean,
-  clearable: checkedProp<boolean>(
-    props['clearable'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'clearable',
-    acceptedProps,
-  ) as boolean,
-  disabled: checkedProp<boolean>(
-    props['disabled'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'disabled',
-    acceptedProps,
-  ) as boolean,
-  disclosure: checkedProp<boolean>(
-    props['disclosure'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'disclosure',
-    acceptedProps,
-  ) as boolean,
-  filter: checkedProp<'label' | 'none'>(
-    props['filter'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'filter',
-    acceptedProps,
-  ) as 'label' | 'none',
-  help: checkedProp<string>(
-    props['help'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'help',
-    acceptedProps,
-  ) as string,
-  invalid: checkedProp<boolean>(
-    props['invalid'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'invalid',
-    acceptedProps,
-  ) 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',
+const inputTracking = vuePropInputs(acceptedProps, {
+  allowCreate: false,
+  allowFreeText: false,
+  autoHighlight: 'none',
+  clearQueryOnBlur: 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,
+  selectOnTab: false,
+  size: 'md',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'allowCreate':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'allowFreeText':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'autoHighlight':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'clearQueryOnBlur':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'clearable':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'disclosure':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'filter':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'help':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'invalid':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'items':
+      return checkPropInput(
+        value,
+        {
+          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: 'constrained',
-                  base: { kind: 'terminal', name: 'keyword' },
-                  values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+                  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: 'color', type: { kind: 'terminal', name: 'string' }, optional: true }],
-              open: false,
-            },
-            optional: true,
+              },
+            ],
+            open: false,
           },
-        ],
-        open: false,
-      },
-    },
-    false,
-    'items',
-    acceptedProps,
-  ),
-  label: checkedProp<string>(
-    props['label'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'label',
-    acceptedProps,
-  ) as string,
-  labelVisibility: checkedProp<'visible' | 'sr-only'>(
-    props['labelVisibility'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'labelVisibility',
-    acceptedProps,
-  ) as 'visible' | 'sr-only',
-  loading: checkedProp<boolean>(
-    props['loading'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'loading',
-    acceptedProps,
-  ) as boolean,
-  multiple: checkedProp<boolean>(
-    props['multiple'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'multiple',
-    acceptedProps,
-  ) as boolean,
-  name: checkedProp<string>(
-    props['name'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'name',
-    acceptedProps,
-  ) as string,
-  openOnFocus: checkedProp<boolean>(
-    props['openOnFocus'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'openOnFocus',
-    acceptedProps,
-  ) as boolean,
-  placeholder: checkedProp<string>(
-    props['placeholder'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'placeholder',
-    acceptedProps,
-  ) as string,
-  query: checkedProp<string>(
-    props['query'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'query',
-    acceptedProps,
-  ),
-  readonly: checkedProp<boolean>(
-    props['readonly'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'readonly',
-    acceptedProps,
-  ) as boolean,
-  required: checkedProp<boolean>(
-    props['required'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'required',
-    acceptedProps,
-  ) as boolean,
-  selectOnTab: checkedProp<boolean>(
-    props['selectOnTab'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'selectOnTab',
-    acceptedProps,
-  ) as boolean,
-  selectedValues: checkedProp<readonly (string)[]>(
-    props['selectedValues'],
-    { kind: 'list', item: { kind: 'terminal', name: 'string' } },
-    false,
-    'selectedValues',
-    acceptedProps,
-  ),
-  size: checkedProp<'sm' | 'md' | 'lg'>(
-    props['size'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'size',
-    acceptedProps,
-  ) as 'sm' | 'md' | 'lg',
-  tokenSeparators: checkedProp<readonly (string)[]>(
-    props['tokenSeparators'],
-    { kind: 'list', item: { kind: 'terminal', name: 'string' } },
-    false,
-    'tokenSeparators',
-    acceptedProps,
-  ),
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    acceptedProps,
-  ),
-}))
+        },
+        true,
+        true,
+      )
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'labelVisibility':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'loading':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'multiple':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'name':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'openOnFocus':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'placeholder':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'query':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'readonly':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'required':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'selectOnTab':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'selectedValues':
+      return checkPropInput(
+        value,
+        { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+        true,
+        true,
+      )
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'tokenSeparators':
+      return checkPropInput(
+        value,
+        { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+        true,
+        true,
+      )
+    case 'value':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    allowCreate: propInputs.value<boolean | null>(
+      'allowCreate',
+      props['allowCreate'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    allowFreeText: propInputs.value<boolean | null>(
+      'allowFreeText',
+      props['allowFreeText'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    autoHighlight: propInputs.value<'none' | 'single' | null>(
+      'autoHighlight',
+      props['autoHighlight'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'none' | 'single',
+    clearQueryOnBlur: propInputs.value<boolean | null>(
+      'clearQueryOnBlur',
+      props['clearQueryOnBlur'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    clearable: propInputs.value<boolean | null>(
+      'clearable',
+      props['clearable'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    disclosure: propInputs.value<boolean | null>(
+      'disclosure',
+      props['disclosure'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    filter: propInputs.value<'label' | 'none' | null>(
+      'filter',
+      props['filter'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'label' | 'none',
+    help: propInputs.value<string | null>(
+      'help',
+      props['help'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    invalid: propInputs.value<boolean | null>(
+      'invalid',
+      props['invalid'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    items: propInputs.value<
+      readonly ({
+        readonly id: string
+        readonly value: string
+        readonly label: string
+        readonly group?: string | null
+        readonly disabled?: boolean | null
+        readonly description?: string | null
+        readonly tag?: {
+          readonly label: string
+          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+          readonly color?: string | null
+        } | null
+      })[] | null
+    >('items', props['items'], props[BINDING_INPUTS_PROP]),
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    labelVisibility: propInputs.value<'visible' | 'sr-only' | null>(
+      'labelVisibility',
+      props['labelVisibility'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'visible' | 'sr-only',
+    loading: propInputs.value<boolean | null>(
+      'loading',
+      props['loading'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    multiple: propInputs.value<boolean | null>(
+      'multiple',
+      props['multiple'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    name: propInputs.value<string | null>(
+      'name',
+      props['name'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    openOnFocus: propInputs.value<boolean | null>(
+      'openOnFocus',
+      props['openOnFocus'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    placeholder: propInputs.value<string | null>(
+      'placeholder',
+      props['placeholder'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    query: propInputs.value<string | null>('query', props['query'], props[BINDING_INPUTS_PROP]),
+    readonly: propInputs.value<boolean | null>(
+      'readonly',
+      props['readonly'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    required: propInputs.value<boolean | null>(
+      'required',
+      props['required'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    selectOnTab: propInputs.value<boolean | null>(
+      'selectOnTab',
+      props['selectOnTab'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    selectedValues: propInputs.value<readonly (string)[] | null>(
+      'selectedValues',
+      props['selectedValues'],
+      props[BINDING_INPUTS_PROP],
+    ),
+    size: propInputs.value<'sm' | 'md' | 'lg' | null>(
+      'size',
+      props['size'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'sm' | 'md' | 'lg',
+    tokenSeparators: propInputs.value<readonly (string)[] | null>(
+      'tokenSeparators',
+      props['tokenSeparators'],
+      props[BINDING_INPUTS_PROP],
+    ),
+    value: propInputs.value<string | null>('value', props['value'], props[BINDING_INPUTS_PROP]),
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -598,20 +648,20 @@ const emit = defineEmits<{
   'value-change': [
     event: CustomEvent<
       {
-        readonly value: string | null
+        readonly value?: string | null
         readonly query: string
-        readonly option: {
+        readonly option?: {
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
         } | null
         readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -624,34 +674,34 @@ const emit = defineEmits<{
         readonly id: string
         readonly value: string
         readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
+        readonly group?: string | null
+        readonly disabled?: boolean | null
+        readonly description?: string | null
         readonly tag?: {
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
-        }
+          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+          readonly color?: string | null
+        } | null
       })[]
     >,
   ]
   'free-entry': [
     event: CustomEvent<
       {
-        readonly value: string | null
+        readonly value?: string | null
         readonly query: string
-        readonly option: {
+        readonly option?: {
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
         } | null
         readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -661,20 +711,20 @@ const emit = defineEmits<{
   'create-entry': [
     event: CustomEvent<
       {
-        readonly value: string | null
+        readonly value?: string | null
         readonly query: string
-        readonly option: {
+        readonly option?: {
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
         } | null
         readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -690,10 +740,10 @@ const emit = defineEmits<{
         readonly issues:
           readonly ({
             readonly message: string
-            readonly path?: readonly (unknown)[]
-            readonly severity?: 'error' | 'warning'
+            readonly path?: readonly (unknown)[] | null
+            readonly severity?: 'error' | 'warning' | null
           })[]
-        readonly output?: unknown
+        readonly output?: unknown | null
       }
     >,
   ]
@@ -703,14 +753,14 @@ const emit = defineEmits<{
         readonly id: string
         readonly value: string
         readonly label: string
-        readonly group?: string
-        readonly disabled?: boolean
-        readonly description?: string
+        readonly group?: string | null
+        readonly disabled?: boolean | null
+        readonly description?: string | null
         readonly tag?: {
           readonly label: string
-          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-          readonly color?: string
-        }
+          readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+          readonly color?: string | null
+        } | null
       })[]
     >,
   ]
@@ -721,14 +771,14 @@ const emit = defineEmits<{
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
         }
         readonly index: number
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -742,14 +792,14 @@ const emit = defineEmits<{
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
         }
         readonly index: number
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -830,7 +880,7 @@ const groups = ref<
   {
     name: string
     role: 'group' | 'presentation'
-    label: string | null
+    label?: string
     rows: {
       id: string
       value: string
@@ -845,8 +895,8 @@ const groups = ref<
         color?: string
       }
       index: number
-      labelledBy: string | null
-      detail: string | null
+      labelledBy?: string
+      detail?: string
       option: {
         id: string
         value: string
@@ -901,83 +951,71 @@ const guardedBinding3 = computed(() => {
   return guardedBinding3Previous = checkedProps.value.required
     && !(checkedProps.value.multiple && internalItems.value[0])
 })
-let guardedBinding4Previous: any
+let guardedBinding4Previous: any = null
 const guardedBinding4 = computed(() => {
-  if (
-    !(warnUnless(
-      selected.value == null || (typeof selected.value === 'string' || selected.value === null),
-      '$disabled or $readonly or (not $raw and ($multiple or $selected = null)):selected',
-      './components/ui-combobox/ui-combobox.html: HR007: Reference selected does not satisfy its declared type.',
-    ))
-  ) return guardedBinding4Previous
-  return guardedBinding4Previous = checkedProps.value.disabled || checkedProps.value.readonly
-    || (!raw.value && (checkedProps.value.multiple || selected.value === null))
+  const candidate: any = concat(uid.value, '-listbox')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding4Previous
+  return guardedBinding4Previous = candidate
 })
 let guardedBinding5Previous: any = null
 const guardedBinding5 = computed(() => {
-  const candidate: any = concat(uid.value, '-listbox')
+  const candidate: any = concat(uid.value, '-help')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
   return guardedBinding5Previous = candidate
 })
 let guardedBinding6Previous: any = null
 const guardedBinding6 = computed(() => {
-  const candidate: any = concat(uid.value, '-help')
+  const candidate: any = concat(uid.value, '-help-text')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding6Previous
   return guardedBinding6Previous = candidate
 })
 let guardedBinding7Previous: any = null
 const guardedBinding7 = computed(() => {
-  const candidate: any = concat(uid.value, '-help-text')
+  const candidate: any = concat(uid.value, '-help')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
   return guardedBinding7Previous = candidate
 })
 let guardedBinding8Previous: any = null
 const guardedBinding8 = computed(() => {
-  const candidate: any = concat(uid.value, '-help')
+  const candidate: any = concat(uid.value, '-listbox')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding8Previous
   return guardedBinding8Previous = candidate
 })
 let guardedBinding9Previous: any = null
 const guardedBinding9 = computed(() => {
-  const candidate: any = concat(uid.value, '-listbox')
+  const candidate: any = concat(checkedProps.value.label, ' suggestions')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding9Previous
   return guardedBinding9Previous = candidate
 })
-let guardedBinding10Previous: any = null
+let guardedBinding10Previous: any
 const guardedBinding10 = computed(() => {
-  const candidate: any = concat(checkedProps.value.label, ' suggestions')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding10Previous
-  return guardedBinding10Previous = candidate
-})
-let guardedBinding11Previous: any
-const guardedBinding11 = computed(() => {
   if (
     !(warnUnless(
       active.value == null || Number.isInteger(active.value),
       '$createIndex = $active:active',
       './components/ui-combobox/ui-combobox.html: HR007: Reference active does not satisfy its declared type.',
     ))
-  ) return guardedBinding11Previous
-  return guardedBinding11Previous = createIndex.value === active.value
+  ) return guardedBinding10Previous
+  return guardedBinding10Previous = createIndex.value === active.value
+})
+let guardedBinding11Previous: any = null
+const guardedBinding11 = computed(() => {
+  const candidate: any = concat(uid.value, '-option-', createIndex.value)
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding11Previous
+  return guardedBinding11Previous = candidate
 })
 let guardedBinding12Previous: any = null
 const guardedBinding12 = computed(() => {
-  const candidate: any = concat(uid.value, '-option-', createIndex.value)
+  const candidate: any = concat('Create “', raw.value, '”')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding12Previous
   return guardedBinding12Previous = candidate
 })
 let guardedBinding13Previous: any = null
 const guardedBinding13 = computed(() => {
-  const candidate: any = concat('Create “', raw.value, '”')
+  const candidate: any = concat(uid.value, '-validation')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding13Previous
   return guardedBinding13Previous = candidate
 })
-let guardedBinding14Previous: any = null
-const guardedBinding14 = computed(() => {
-  const candidate: any = concat(uid.value, '-validation')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding14Previous
-  return guardedBinding14Previous = candidate
-})
 provide('html-next:ui-combobox:internalItems', internalItems)
 provide('html-next:ui-combobox:raw', raw)
 provide('html-next:ui-combobox:display', display)
@@ -1006,14 +1044,14 @@ defineSlots<
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
         }
       },
     ): any
@@ -1023,15 +1061,15 @@ defineSlots<
           readonly id: string
           readonly value: string
           readonly label: string
-          readonly group?: string
-          readonly disabled?: boolean
-          readonly description?: string
+          readonly group?: string | null
+          readonly disabled?: boolean | null
+          readonly description?: string | null
           readonly tag?: {
             readonly label: string
-            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-            readonly color?: string
-          }
-          readonly selected?: boolean
+            readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+            readonly color?: string | null
+          } | null
+          readonly selected?: boolean | null
         }
       },
     ): any
@@ -1066,78 +1104,81 @@ const isQueryChangeDetail = (
 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)
+  && ((detail as Record<string, unknown>)['value'] == null
+    || typeof (detail as Record<string, unknown>)['value'] === 'string')
   && 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>)[
+  && ((detail as Record<string, unknown>)['option'] == null
+    || ((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']
+          == null
+        || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'group'
+          ] === 'string')
+      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
+          == null
+        || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'disabled'
+          ] === 'boolean')
+      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['description']
+          == null
+        || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'description'
+          ] === 'string')
+      && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag'] == null
+        || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
+            !== null
+          && typeof ((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>)[
+            ] === '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'] === 'info'
-            || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              ] as Record<string, unknown>)['tone'] == null
+            || ((((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>)['tone'] === 'success'
-            || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              ] as Record<string, unknown>)['color'] == null
+            || typeof (((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>)[
+              ] as Record<string, unknown>)['color'] === 'string')
+          && Object.keys(
+            ((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)
+            ] 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>)['kind'] === 'selection'
     || (detail as Record<string, unknown>)['kind'] === 'clear'
     || (detail as Record<string, unknown>)['kind'] === 'free-entry'
@@ -1157,20 +1198,19 @@ const isItemsChangeDetail = (
     && 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
+    && ((item as Record<string, unknown>)['group'] == null
       || typeof (item as Record<string, unknown>)['group'] === 'string')
-    && ((item as Record<string, unknown>)['disabled'] === undefined
+    && ((item as Record<string, unknown>)['disabled'] == null
       || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
-    && ((item as Record<string, unknown>)['description'] === undefined
+    && ((item as Record<string, unknown>)['description'] == null
       || typeof (item as Record<string, unknown>)['description'] === 'string')
-    && ((item as Record<string, unknown>)['tag'] === undefined
+    && ((item as Record<string, unknown>)['tag'] == null
       || ((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'] == null
           || (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
               === 'neutral'
             || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
@@ -1183,8 +1223,7 @@ const isItemsChangeDetail = (
               === '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
+        && (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['color'] == null
           || 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) =>
@@ -1209,17 +1248,17 @@ const isValidationChangeDetail = (
       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
+      && ((item as Record<string, unknown>)['path'] == null
         || (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'] == null
         || ((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)
+  && ((detail as Record<string, unknown>)['output'] == null || true)
   && Object.keys(detail as object).every((key) =>
     ['status', 'touched', 'dirty', 'issues', 'output'].includes(key)
   ))
@@ -1235,21 +1274,18 @@ const isAddItemDetail = (
       === '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
+    && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group'] == null
       || 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
+    && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled'] == null
       || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
         === 'boolean')
     && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['description']
-        === undefined
+        == null
       || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
           'description'
         ] === 'string')
-    && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag']
-        === undefined
+    && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'] == null
       || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'] !== null
         && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag']
           === 'object'
@@ -1261,7 +1297,7 @@ const isAddItemDetail = (
           ] as Record<string, unknown>)['label'] === 'string'
         && ((((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
               'tag'
-            ] as Record<string, unknown>)['tone'] === undefined
+            ] as Record<string, unknown>)['tone'] == null
           || ((((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
                 'tag'
               ] as Record<string, unknown>)['tone'] === 'neutral'
@@ -1282,7 +1318,7 @@ const isAddItemDetail = (
               ] as Record<string, unknown>)['tone'] === 'danger'))
         && ((((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
               'tag'
-            ] as Record<string, unknown>)['color'] === undefined
+            ] as Record<string, unknown>)['color'] == null
           || typeof (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
               'tag'
             ] as Record<string, unknown>)['color'] === 'string')
@@ -1378,10 +1414,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
         },
         raw: { kind: 'terminal', name: 'string' },
         display: { kind: 'terminal', name: 'string' },
-        selected: {
-          kind: 'union',
-          members: [{ kind: 'terminal', name: 'string' }, { kind: 'terminal', name: 'null' }],
-        },
+        selected: { kind: 'terminal', name: 'string' },
         expanded: { kind: 'terminal', name: 'boolean' },
         rows: {
           kind: 'list',
@@ -1473,17 +1506,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                 },
                 optional: false,
               },
-              {
-                name: 'label',
-                type: {
-                  kind: 'union',
-                  members: [{ kind: 'terminal', name: 'string' }, {
-                    kind: 'terminal',
-                    name: 'null',
-                  }],
-                },
-                optional: false,
-              },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: true },
               {
                 name: 'rows',
                 type: {
@@ -1548,24 +1571,12 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                       optional: false,
                     }, {
                       name: 'labelledBy',
-                      type: {
-                        kind: 'union',
-                        members: [{ kind: 'terminal', name: 'string' }, {
-                          kind: 'terminal',
-                          name: 'null',
-                        }],
-                      },
-                      optional: false,
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: true,
                     }, {
                       name: 'detail',
-                      type: {
-                        kind: 'union',
-                        members: [{ kind: 'terminal', name: 'string' }, {
-                          kind: 'terminal',
-                          name: 'null',
-                        }],
-                      },
-                      optional: false,
+                      type: { kind: 'terminal', name: 'string' },
+                      optional: true,
                     }, {
                       name: 'option',
                       type: {
@@ -1651,11 +1662,31 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       } as Record<string, any>)[name],
       keys,
     ),
+  initials: {
+    internalItems: [],
+    raw: '',
+    display: '',
+    expanded: false,
+    rows: [],
+    helpOpen: false,
+    lookupError: '',
+    validation: { status: 'pristine', touched: false, dirty: false, issues: [] },
+    uid: '',
+    submitted: '',
+    groups: [],
+    creatable: false,
+    createIndex: 0,
+    message: '',
+    statusText: '',
+    validationStatus: 'pristine',
+  },
   controllerSource: {
     specifier: '../components/ui-combobox/ui-combobox.js',
     definition: './components/ui-combobox/ui-combobox.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -1831,7 +1862,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           data-combobox-action="clear"
           aria-label="Clear"
           data-hn-ui-combobox
-          :disabled="guardedBinding4"
+          :disabled="checkedProps.disabled || checkedProps.readonly
+          || (!raw && (checkedProps.multiple || selected === null))"
         >
           <svg
             class="affordance-icon"
@@ -1852,7 +1884,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           tabindex="-1"
           aria-label="Show suggestions"
           data-hn-ui-combobox
-          :aria-controls="guardedBinding5"
+          :aria-controls="guardedBinding4"
           :disabled="checkedProps.disabled || checkedProps.readonly"
         >
           <svg
@@ -1876,7 +1908,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
         type="button"
         aria-label="Help"
         data-hn-ui-combobox
-        :id="guardedBinding6"
+        :id="guardedBinding5"
         :disabled="checkedProps.disabled ?? undefined"
       >
         <svg
@@ -1900,15 +1932,15 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       v-if="checkedProps.help"
       class="ui-tooltip"
       trigger="click"
-      :id="guardedBinding7"
-      :for="guardedBinding8"
+      :id="guardedBinding6"
+      :for="guardedBinding7"
     >{{ checkedProps.help }}</UiTooltip>
     <div class="popup" data-hn-ui-combobox :hidden="!expanded" ref="popupElement">
       <div
         role="listbox"
         data-hn-ui-combobox
-        :id="guardedBinding9"
-        :aria-label="guardedBinding10"
+        :id="guardedBinding8"
+        :aria-label="guardedBinding9"
         :aria-busy="checkedProps.loading ?? undefined"
         ref="listboxElement"
       >
@@ -1917,7 +1949,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
             :key="group.name"
             data-hn-ui-combobox
             :role="group.role"
-            :aria-label="group.label ?? undefined"
+            :aria-label="group.label"
           >
             <div v-if="group.name" class="group" data-hn-ui-combobox>{{ group.name }}</div>{{
               ' '
@@ -1933,8 +1965,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                 :aria-selected="row.selected"
                 :aria-disabled="row.disabled"
                 :data-index="row.index"
-                :aria-labelledby="row.labelledBy ?? undefined"
-                :aria-describedby="row.detail ?? undefined"
+                :aria-labelledby="row.labelledBy"
+                :aria-describedby="row.detail"
                 :class="{ active: row.index === active }"
               >
                 <slot :name="scopedSlotName('option')" :option="row.option">{{ ' ' }}<span
@@ -1971,11 +2003,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           aria-selected="false"
           data-hn-ui-combobox
           :data-multiple="checkedProps.multiple ? '' : undefined"
-          :id="guardedBinding12"
+          :id="guardedBinding11"
           :data-index="createIndex"
-          :class="{ active: guardedBinding11 }"
+          :class="{ active: guardedBinding10 }"
         >
-          {{ guardedBinding13 }}
+          {{ guardedBinding12 }}
         </div>{{ ' ' }}<div v-if="message" class="message" data-hn-ui-combobox>{{ message }}</div>{{
           ' '
         }}<div
@@ -1991,7 +2023,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     <div
       class="message"
       data-hn-ui-combobox
-      :id="guardedBinding14"
+      :id="guardedBinding13"
       :hidden="!validation.issues.length"
     >
       <div v-for="(issue, indexLoop3) in validation.issues" :key="indexLoop3" data-hn-ui-combobox>