@threadlabs/looma 0.5.1 → 0.5.2

package/vue/UiCombobox.vue

@@ -1,466 +1,1055 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import UiBadge from "./UiBadge.vue";
-import UiTooltip from "./UiTooltip.vue";
-import * as controllerModule from "../components/ui-combobox/ui-combobox.js";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watchEffect,
+} from 'vue'
+import * as controllerModule from '../components/ui-combobox/ui-combobox.js'
+import UiBadge from './UiBadge.vue'
+import UiTooltip from './UiTooltip.vue'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  n: (v: unknown): number | undefined => typeof v === "number" && v === v ? v : undefined,
-  op: (op: string, a: unknown, b: unknown): unknown => {
-    const x = hn.n(a), y = hn.n(b);
-    if (x === undefined || y === undefined) return undefined;
-    switch (op) {
-      case "<": return x < y; case "<=": return x <= y; case ">": return x > y; case ">=": return x >= y;
-      case "+": return x + y; case "-": return x - y; case "*": return x * y; case "/": return x / y; case "%": return x % y;
-    }
-    return undefined;
-  },
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-  call: (fn: string, ...args: unknown[]): any => {
-    if (fn === "format") {
-      let index = 1;
-      return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : undefined;
-    }
-    const n = args.map(hn.n);
-    if (n.some((value) => value === undefined)) return undefined;
-    const v = n as number[];
-    switch (fn) {
-      case "abs": return v.length === 1 ? Math.abs(v[0]!) : undefined;
-      case "round": return v.length === 1 ? Math.round(v[0]!) : undefined;
-      case "min": return v.length > 0 ? Math.min(...v) : undefined;
-      case "max": return v.length > 0 ? Math.max(...v) : undefined;
-      case "clamp": return v.length === 3 ? Math.min(Math.max(v[0]!, v[1]!), v[2]!) : undefined;
-    }
-    return undefined;
+const props = withDefaults(
+  defineProps<{
+    allowCreate?: boolean
+    allowFreeText?: boolean
+    clearable?: boolean
+    disabled?: boolean
+    disclosure?: boolean
+    help?: string
+    items?:
+      readonly ({
+        readonly id: string
+        readonly value: string
+        readonly label: string
+        readonly group?: string
+        readonly disabled?: boolean
+      })[]
+    label?: string
+    labelVisibility?: 'visible' | 'sr-only'
+    multiple?: boolean
+    name?: string
+    placeholder?: string
+    query?: string
+    readonly?: boolean
+    required?: boolean
+    size?: 'sm' | 'md'
+    tokenSeparators?: readonly (string)[]
+    value?: string | null
+  }>(),
+  {
+    allowCreate: false,
+    allowFreeText: false,
+    clearable: false,
+    disabled: false,
+    disclosure: false,
+    help: '',
+    label: '',
+    labelVisibility: 'visible',
+    multiple: false,
+    name: '',
+    placeholder: '',
+    readonly: false,
+    required: false,
+    size: 'md',
   },
-  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
-    let list = Array.isArray(items) ? items.slice() : [];
-    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
-    if (sort.length > 0) {
-      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
-        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
-        : item;
-      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-      list.sort((a, b) => {
-        for (const key of sort) {
-          const descending = key.startsWith("-");
-          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-          if (order !== 0) return descending ? -order : order;
-        }
-        return 0;
-      });
-    }
-    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
-  },
-};
-
-const props = withDefaults(defineProps<{
-  allowCreate?: boolean | null;
-  allowFreeText?: boolean | null;
-  clearable?: boolean | null;
-  disabled?: boolean | null;
-  disclosure?: boolean | null;
-  help?: string | null;
-  items?: readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean })[] | null;
-  label?: string | null;
-  labelVisibility?: "visible" | "sr-only" | null;
-  multiple?: boolean | null;
-  name?: string | null;
-  placeholder?: string | null;
-  query?: string | null;
-  readonly?: boolean | null;
-  required?: boolean | null;
-  size?: "sm" | "md" | null;
-  tokenSeparators?: readonly (string)[] | null;
-  value?: string | null;
-}>(), {
-  allowCreate: false,
-  allowFreeText: false,
-  clearable: false,
-  disabled: false,
-  disclosure: false,
-  help: "",
-  label: "",
-  labelVisibility: "visible",
-  multiple: false,
-  name: "",
-  placeholder: "",
-  readonly: false,
-  required: false,
-  size: "md",
-});
+)
 const emit = defineEmits<{
-  "query-change": [detail: { readonly query: string; readonly display: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "value-change": [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 } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" } | readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean })[]];
-  "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 } | 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 } | 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 }];
-  "options-change": [detail: readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean })[]];
-  "add-item": [detail: { readonly item: { readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean }; 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 index: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "create-item": [detail: { readonly query: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_raw = ref<any>("");
-const state_display = ref<any>("");
-const state_selected = ref<any>(null);
-const state_expanded = ref<any>(false);
-const state_rows = ref<any>([]);
-const state_active = ref<any>(hn.op("-", 0, 1));
-const state_loading = ref<any>(false);
-const state_helpOpen = ref<any>(false);
-const state_lookupError = ref<any>("");
-const state_validation = ref<any>(({ "status": "pristine", "touched": false, "dirty": false, "issues": [] }));
-const state_uid = ref<any>("");
-const state_groups = ref<any>([]);
-const state_creatable = ref<any>(false);
-const state_createIndex = ref<any>(0);
-const state_message = ref<any>("");
-const state_statusText = ref<any>("");
-const state_validationStatus = ref<any>("pristine");
+  'update:query': [value: string]
+  'update:value': [value: string | null]
+  'query-change': [
+    detail: {
+      readonly query: string
+      readonly display: string
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+  'value-change': [
+    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
+        } | null
+        readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+      | readonly ({
+        readonly id: string
+        readonly value: string
+        readonly label: string
+        readonly group?: string
+        readonly disabled?: boolean
+      })[],
+  ]
+  '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
+      } | 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
+      } | 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
+    },
+  ]
+  'options-change': [
+    detail:
+      readonly ({
+        readonly id: string
+        readonly value: string
+        readonly label: string
+        readonly group?: string
+        readonly disabled?: boolean
+      })[],
+  ]
+  'add-item': [
+    detail: {
+      readonly item: {
+        readonly id: string
+        readonly value: string
+        readonly label: string
+        readonly group?: string
+        readonly disabled?: boolean
+      }
+      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 index: number
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+  'create-item': [
+    detail: { readonly query: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const fieldElement = useTemplateRef<HTMLElement>('field')
+const inputElement = useTemplateRef<HTMLElement>('input')
+const popupElement = useTemplateRef<HTMLElement>('popup')
+const listboxElement = useTemplateRef<HTMLElement>('listbox')
+const optionsElement = useTemplateRef<HTMLElement>('options')
+const raw = ref('')
+const display = ref('')
+const selected = ref<string | null>(null)
+const expanded = ref(false)
+const rows = ref<{ id: string; value: string; label: string; group?: string; disabled: boolean }[]>(
+  [],
+)
+const active = ref<number | null>(-1)
+const loading = ref(false)
+const helpOpen = ref(false)
+const lookupError = ref('')
+const validation = ref<
+  {
+    status: 'pristine' | 'pending' | 'valid' | 'warning' | 'error'
+    touched: boolean
+    dirty: boolean
+    issues: { message: string }[]
+    [name: string]: any
+  }
+>({ status: 'pristine', touched: false, dirty: false, issues: [] })
+const uid = ref('')
+const groups = ref<
+  {
+    name: string
+    role: 'group' | 'presentation'
+    label: string | null
+    rows: {
+      id: string
+      value: string
+      label: string
+      group?: string
+      disabled: boolean
+      index: number
+    }[]
+  }[]
+>([])
+const creatable = ref(false)
+const createIndex = ref(0)
+const message = ref('')
+const statusText = ref('')
+const validationStatus = ref('pristine')
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    validationStatus.value && 'validationStatus',
+    `validationStatus=${encodeURIComponent(validationStatus.value)}`,
+    props.multiple && 'multiple',
+  ].filter(Boolean).join(' ')
+)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"query-change":{"bubbles":true,"composed":true,"cancelable":false},"value-change":{"bubbles":true,"composed":true,"cancelable":false},"free-entry":{"bubbles":true,"composed":true,"cancelable":false},"create-entry":{"bubbles":true,"composed":true,"cancelable":false},"validation-change":{"bubbles":true,"composed":true,"cancelable":false},"options-change":{"bubbles":true,"composed":true,"cancelable":false},"add-item":{"bubbles":true,"composed":true,"cancelable":false},"remove-item":{"bubbles":true,"composed":true,"cancelable":false},"create-item":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    'query-change': { bubbles: true, composed: true, cancelable: false },
+    'value-change': { bubbles: true, composed: true, cancelable: false },
+    'free-entry': { bubbles: true, composed: true, cancelable: false },
+    'create-entry': { bubbles: true, composed: true, cancelable: false },
+    'validation-change': { bubbles: true, composed: true, cancelable: false },
+    'options-change': { bubbles: true, composed: true, cancelable: false },
+    'add-item': { bubbles: true, composed: true, cancelable: false },
+    'remove-item': { bubbles: true, composed: true, cancelable: false },
+    'create-item': { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "query-change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["query"] === "string" && typeof (detail as Record<string, unknown>)["display"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["query","display","trigger"].includes(key))),
-    "value-change": (detail: unknown) => ((detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof (detail as Record<string, unknown>)["value"] === "string" || (detail as Record<string, unknown>)["value"] === null) && typeof (detail as Record<string, unknown>)["query"] === "string" && (((detail as Record<string, unknown>)["option"] !== null && typeof (detail as Record<string, unknown>)["option"] === "object" && !Array.isArray((detail as Record<string, unknown>)["option"]) && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["id"] === "string" && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["value"] === "string" && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["label"] === "string" && (((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["group"] === undefined || typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["group"] === "string") && (((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["disabled"] === undefined || typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["disabled"] === "boolean") && Object.keys((detail as Record<string, unknown>)["option"] as object).every((key) => ["id","value","label","group","disabled"].includes(key))) || (detail as Record<string, unknown>)["option"] === null) && ((detail as Record<string, unknown>)["kind"] === "selection" || (detail as Record<string, unknown>)["kind"] === "clear" || (detail as Record<string, unknown>)["kind"] === "free-entry" || (detail as Record<string, unknown>)["kind"] === "create") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","query","option","kind","trigger"].includes(key))) || (Array.isArray(detail) && (detail as unknown[]).every((item: unknown) => (item !== null && typeof item === "object" && !Array.isArray(item) && typeof (item as Record<string, unknown>)["id"] === "string" && typeof (item as Record<string, unknown>)["value"] === "string" && typeof (item as Record<string, unknown>)["label"] === "string" && ((item as Record<string, unknown>)["group"] === undefined || typeof (item as Record<string, unknown>)["group"] === "string") && ((item as Record<string, unknown>)["disabled"] === undefined || typeof (item as Record<string, unknown>)["disabled"] === "boolean") && Object.keys(item as object).every((key) => ["id","value","label","group","disabled"].includes(key)))))),
-    "free-entry": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof (detail as Record<string, unknown>)["value"] === "string" || (detail as Record<string, unknown>)["value"] === null) && typeof (detail as Record<string, unknown>)["query"] === "string" && (((detail as Record<string, unknown>)["option"] !== null && typeof (detail as Record<string, unknown>)["option"] === "object" && !Array.isArray((detail as Record<string, unknown>)["option"]) && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["id"] === "string" && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["value"] === "string" && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["label"] === "string" && (((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["group"] === undefined || typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["group"] === "string") && (((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["disabled"] === undefined || typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["disabled"] === "boolean") && Object.keys((detail as Record<string, unknown>)["option"] as object).every((key) => ["id","value","label","group","disabled"].includes(key))) || (detail as Record<string, unknown>)["option"] === null) && ((detail as Record<string, unknown>)["kind"] === "selection" || (detail as Record<string, unknown>)["kind"] === "clear" || (detail as Record<string, unknown>)["kind"] === "free-entry" || (detail as Record<string, unknown>)["kind"] === "create") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","query","option","kind","trigger"].includes(key))),
-    "create-entry": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof (detail as Record<string, unknown>)["value"] === "string" || (detail as Record<string, unknown>)["value"] === null) && typeof (detail as Record<string, unknown>)["query"] === "string" && (((detail as Record<string, unknown>)["option"] !== null && typeof (detail as Record<string, unknown>)["option"] === "object" && !Array.isArray((detail as Record<string, unknown>)["option"]) && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["id"] === "string" && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["value"] === "string" && typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["label"] === "string" && (((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["group"] === undefined || typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["group"] === "string") && (((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["disabled"] === undefined || typeof ((detail as Record<string, unknown>)["option"] as Record<string, unknown>)["disabled"] === "boolean") && Object.keys((detail as Record<string, unknown>)["option"] as object).every((key) => ["id","value","label","group","disabled"].includes(key))) || (detail as Record<string, unknown>)["option"] === null) && ((detail as Record<string, unknown>)["kind"] === "selection" || (detail as Record<string, unknown>)["kind"] === "clear" || (detail as Record<string, unknown>)["kind"] === "free-entry" || (detail as Record<string, unknown>)["kind"] === "create") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","query","option","kind","trigger"].includes(key))),
-    "validation-change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["status"] === "pristine" || (detail as Record<string, unknown>)["status"] === "pending" || (detail as Record<string, unknown>)["status"] === "valid" || (detail as Record<string, unknown>)["status"] === "warning" || (detail as Record<string, unknown>)["status"] === "error") && typeof (detail as Record<string, unknown>)["touched"] === "boolean" && typeof (detail as Record<string, unknown>)["dirty"] === "boolean" && (Array.isArray((detail as Record<string, unknown>)["issues"]) && ((detail as Record<string, unknown>)["issues"] as unknown[]).every((item: unknown) => (item !== null && typeof item === "object" && !Array.isArray(item) && typeof (item as Record<string, unknown>)["message"] === "string" && ((item as Record<string, unknown>)["path"] === undefined || (Array.isArray((item as Record<string, unknown>)["path"]) && ((item as Record<string, unknown>)["path"] as unknown[]).every((item: unknown) => true))) && ((item as Record<string, unknown>)["severity"] === undefined || ((item as Record<string, unknown>)["severity"] === "error" || (item as Record<string, unknown>)["severity"] === "warning")) && Object.keys(item as object).every((key) => ["message","path","severity"].includes(key))))) && ((detail as Record<string, unknown>)["output"] === undefined || true) && Object.keys(detail as object).every((key) => ["status","touched","dirty","issues","output"].includes(key))),
-    "options-change": (detail: unknown) => (Array.isArray(detail) && (detail as unknown[]).every((item: unknown) => (item !== null && typeof item === "object" && !Array.isArray(item) && typeof (item as Record<string, unknown>)["id"] === "string" && typeof (item as Record<string, unknown>)["value"] === "string" && typeof (item as Record<string, unknown>)["label"] === "string" && ((item as Record<string, unknown>)["group"] === undefined || typeof (item as Record<string, unknown>)["group"] === "string") && ((item as Record<string, unknown>)["disabled"] === undefined || typeof (item as Record<string, unknown>)["disabled"] === "boolean") && Object.keys(item as object).every((key) => ["id","value","label","group","disabled"].includes(key))))),
-    "add-item": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["item"] !== null && typeof (detail as Record<string, unknown>)["item"] === "object" && !Array.isArray((detail as Record<string, unknown>)["item"]) && typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["id"] === "string" && typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["value"] === "string" && typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["label"] === "string" && (((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["group"] === undefined || typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["group"] === "string") && (((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["disabled"] === undefined || typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["disabled"] === "boolean") && Object.keys((detail as Record<string, unknown>)["item"] as object).every((key) => ["id","value","label","group","disabled"].includes(key))) && Number.isInteger((detail as Record<string, unknown>)["index"]) && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["item","index","trigger"].includes(key))),
-    "remove-item": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["item"] !== null && typeof (detail as Record<string, unknown>)["item"] === "object" && !Array.isArray((detail as Record<string, unknown>)["item"]) && typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["id"] === "string" && typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["value"] === "string" && typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["label"] === "string" && (((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["group"] === undefined || typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["group"] === "string") && (((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["disabled"] === undefined || typeof ((detail as Record<string, unknown>)["item"] as Record<string, unknown>)["disabled"] === "boolean") && Object.keys((detail as Record<string, unknown>)["item"] as object).every((key) => ["id","value","label","group","disabled"].includes(key))) && Number.isInteger((detail as Record<string, unknown>)["index"]) && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["item","index","trigger"].includes(key))),
-    "create-item": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["query"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["query","trigger"].includes(key))),
-  };
+    'query-change': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['query'] === 'string'
+      && typeof (detail as Record<string, unknown>)['display'] === 'string'
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) =>
+        ['query', 'display', 'trigger'].includes(key)
+      ),
+    'value-change': (detail) =>
+      (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+        && (typeof (detail as Record<string, unknown>)['value'] === 'string'
+          || (detail as Record<string, unknown>)['value'] === null)
+        && typeof (detail as Record<string, unknown>)['query'] === 'string'
+        && (((detail as Record<string, unknown>)['option'] !== null
+          && typeof (detail as Record<string, unknown>)['option'] === 'object'
+          && !Array.isArray((detail as Record<string, unknown>)['option'])
+          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
+            === 'string'
+          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              'value'
+            ] === 'string'
+          && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              'label'
+            ] === 'string'
+          && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
+              === undefined
+            || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+                'group'
+              ] === 'string')
+          && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
+              === undefined
+            || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+                'disabled'
+              ] === 'boolean')
+          && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
+            ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+          )) || (detail as Record<string, unknown>)['option'] === null)
+        && ((detail as Record<string, unknown>)['kind'] === 'selection'
+          || (detail as Record<string, unknown>)['kind'] === 'clear'
+          || (detail as Record<string, unknown>)['kind'] === 'free-entry'
+          || (detail as Record<string, unknown>)['kind'] === 'create')
+        && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+          || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+          || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+        && Object.keys(detail as object).every((key) =>
+          ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
+        ))
+      || (Array.isArray(detail)
+        && (detail as unknown[]).every((
+          item: unknown,
+        ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
+          && typeof (item as Record<string, unknown>)['id'] === 'string'
+          && typeof (item as Record<string, unknown>)['value'] === 'string'
+          && typeof (item as Record<string, unknown>)['label'] === 'string'
+          && ((item as Record<string, unknown>)['group'] === undefined
+            || typeof (item as Record<string, unknown>)['group'] === 'string')
+          && ((item as Record<string, unknown>)['disabled'] === undefined
+            || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
+          && Object.keys(item as object).every((key) =>
+            ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+          ))
+        )),
+    'free-entry': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && (typeof (detail as Record<string, unknown>)['value'] === 'string'
+        || (detail as Record<string, unknown>)['value'] === null)
+      && typeof (detail as Record<string, unknown>)['query'] === 'string'
+      && (((detail as Record<string, unknown>)['option'] !== null
+        && typeof (detail as Record<string, unknown>)['option'] === 'object'
+        && !Array.isArray((detail as Record<string, unknown>)['option'])
+        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
+          === 'string'
+        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'value'
+          ] === 'string'
+        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'label'
+          ] === 'string'
+        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              'group'
+            ] === 'string')
+        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              'disabled'
+            ] === 'boolean')
+        && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
+          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+        )) || (detail as Record<string, unknown>)['option'] === null)
+      && ((detail as Record<string, unknown>)['kind'] === 'selection'
+        || (detail as Record<string, unknown>)['kind'] === 'clear'
+        || (detail as Record<string, unknown>)['kind'] === 'free-entry'
+        || (detail as Record<string, unknown>)['kind'] === 'create')
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) =>
+        ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
+      ),
+    'create-entry': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && (typeof (detail as Record<string, unknown>)['value'] === 'string'
+        || (detail as Record<string, unknown>)['value'] === null)
+      && typeof (detail as Record<string, unknown>)['query'] === 'string'
+      && (((detail as Record<string, unknown>)['option'] !== null
+        && typeof (detail as Record<string, unknown>)['option'] === 'object'
+        && !Array.isArray((detail as Record<string, unknown>)['option'])
+        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['id']
+          === 'string'
+        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'value'
+          ] === 'string'
+        && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+            'label'
+          ] === 'string'
+        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['group']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              'group'
+            ] === 'string')
+        && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['disabled']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
+              'disabled'
+            ] === 'boolean')
+        && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
+          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+        )) || (detail as Record<string, unknown>)['option'] === null)
+      && ((detail as Record<string, unknown>)['kind'] === 'selection'
+        || (detail as Record<string, unknown>)['kind'] === 'clear'
+        || (detail as Record<string, unknown>)['kind'] === 'free-entry'
+        || (detail as Record<string, unknown>)['kind'] === 'create')
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) =>
+        ['value', 'query', 'option', 'kind', 'trigger'].includes(key)
+      ),
+    'validation-change': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && ((detail as Record<string, unknown>)['status'] === 'pristine'
+        || (detail as Record<string, unknown>)['status'] === 'pending'
+        || (detail as Record<string, unknown>)['status'] === 'valid'
+        || (detail as Record<string, unknown>)['status'] === 'warning'
+        || (detail as Record<string, unknown>)['status'] === 'error')
+      && typeof (detail as Record<string, unknown>)['touched'] === 'boolean'
+      && typeof (detail as Record<string, unknown>)['dirty'] === 'boolean'
+      && (Array.isArray((detail as Record<string, unknown>)['issues'])
+        && ((detail as Record<string, unknown>)['issues'] as unknown[]).every((
+          item: unknown,
+        ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
+          && typeof (item as Record<string, unknown>)['message'] === 'string'
+          && ((item as Record<string, unknown>)['path'] === undefined
+            || (Array.isArray((item as Record<string, unknown>)['path'])
+              && ((item as Record<string, unknown>)['path'] as unknown[]).every((item: unknown) =>
+                true
+              )))
+          && ((item as Record<string, unknown>)['severity'] === undefined
+            || ((item as Record<string, unknown>)['severity'] === 'error'
+              || (item as Record<string, unknown>)['severity'] === 'warning'))
+          && Object.keys(item as object).every((key) =>
+            ['message', 'path', 'severity'].includes(key)
+          ))
+        ))
+      && ((detail as Record<string, unknown>)['output'] === undefined || true)
+      && Object.keys(detail as object).every((key) =>
+        ['status', 'touched', 'dirty', 'issues', 'output'].includes(key)
+      ),
+    'options-change': (detail) =>
+      Array.isArray(detail)
+      && (detail as unknown[]).every((
+        item: unknown,
+      ) => (item !== null && typeof item === 'object' && !Array.isArray(item)
+        && typeof (item as Record<string, unknown>)['id'] === 'string'
+        && typeof (item as Record<string, unknown>)['value'] === 'string'
+        && typeof (item as Record<string, unknown>)['label'] === 'string'
+        && ((item as Record<string, unknown>)['group'] === undefined
+          || typeof (item as Record<string, unknown>)['group'] === 'string')
+        && ((item as Record<string, unknown>)['disabled'] === undefined
+          || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
+        && Object.keys(item as object).every((key) =>
+          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+        ))
+      ),
+    'add-item': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && ((detail as Record<string, unknown>)['item'] !== null
+        && typeof (detail as Record<string, unknown>)['item'] === 'object'
+        && !Array.isArray((detail as Record<string, unknown>)['item'])
+        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['id']
+          === 'string'
+        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['value']
+          === 'string'
+        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['label']
+          === 'string'
+        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
+              'group'
+            ] === 'string')
+        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
+              'disabled'
+            ] === 'boolean')
+        && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
+          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+        ))
+      && Number.isInteger((detail as Record<string, unknown>)['index'])
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) =>
+        ['item', 'index', 'trigger'].includes(key)
+      ),
+    'remove-item': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && ((detail as Record<string, unknown>)['item'] !== null
+        && typeof (detail as Record<string, unknown>)['item'] === 'object'
+        && !Array.isArray((detail as Record<string, unknown>)['item'])
+        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['id']
+          === 'string'
+        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['value']
+          === 'string'
+        && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['label']
+          === 'string'
+        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['group']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
+              'group'
+            ] === 'string')
+        && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
+            === undefined
+          || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
+              'disabled'
+            ] === 'boolean')
+        && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
+          ['id', 'value', 'label', 'group', 'disabled'].includes(key)
+        ))
+      && Number.isInteger((detail as Record<string, unknown>)['index'])
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) =>
+        ['item', 'index', 'trigger'].includes(key)
+      ),
+    'create-item': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['query'] === 'string'
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['query', 'trigger'].includes(key)),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["size","validationStatus","multiple"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  if (detail !== null && typeof detail === 'object' && 'query' in detail) {
+    emitEvent('update:query', (detail as Record<string, unknown>)['query'])
+  }
+  if (detail !== null && typeof detail === 'object' && 'value' in detail) {
+    emitEvent('update:value', (detail as Record<string, unknown>)['value'])
+  }
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "raw") return state_raw.value;
-  if (name === "display") return state_display.value;
-  if (name === "selected") return state_selected.value;
-  if (name === "expanded") return state_expanded.value;
-  if (name === "rows") return state_rows.value;
-  if (name === "active") return state_active.value;
-  if (name === "loading") return state_loading.value;
-  if (name === "helpOpen") return state_helpOpen.value;
-  if (name === "lookupError") return state_lookupError.value;
-  if (name === "validation") return state_validation.value;
-  if (name === "uid") return state_uid.value;
-  if (name === "groups") return state_groups.value;
-  if (name === "creatable") return state_creatable.value;
-  if (name === "createIndex") return state_createIndex.value;
-  if (name === "message") return state_message.value;
-  if (name === "statusText") return state_statusText.value;
-  if (name === "validationStatus") return state_validationStatus.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'raw') return raw.value
+  if (name === 'display') return display.value
+  if (name === 'selected') return selected.value
+  if (name === 'expanded') return expanded.value
+  if (name === 'rows') return rows.value
+  if (name === 'active') return active.value
+  if (name === 'loading') return loading.value
+  if (name === 'helpOpen') return helpOpen.value
+  if (name === 'lookupError') return lookupError.value
+  if (name === 'validation') return validation.value
+  if (name === 'uid') return uid.value
+  if (name === 'groups') return groups.value
+  if (name === 'creatable') return creatable.value
+  if (name === 'createIndex') return createIndex.value
+  if (name === 'message') return message.value
+  if (name === 'statusText') return statusText.value
+  if (name === 'validationStatus') return validationStatus.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "raw") { state_raw.value = value; return true; }
-  if (name === "display") { state_display.value = value; return true; }
-  if (name === "selected") { state_selected.value = value; return true; }
-  if (name === "expanded") { state_expanded.value = value; return true; }
-  if (name === "rows") { state_rows.value = value; return true; }
-  if (name === "active") { state_active.value = value; return true; }
-  if (name === "loading") { state_loading.value = value; return true; }
-  if (name === "helpOpen") { state_helpOpen.value = value; return true; }
-  if (name === "lookupError") { state_lookupError.value = value; return true; }
-  if (name === "validation") { state_validation.value = value; return true; }
-  if (name === "uid") { state_uid.value = value; return true; }
-  if (name === "groups") { state_groups.value = value; return true; }
-  if (name === "creatable") { state_creatable.value = value; return true; }
-  if (name === "createIndex") { state_createIndex.value = value; return true; }
-  if (name === "message") { state_message.value = value; return true; }
-  if (name === "statusText") { state_statusText.value = value; return true; }
-  if (name === "validationStatus") { state_validationStatus.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'raw') {
+    raw.value = value as never
+    return true
+  }
+  if (name === 'display') {
+    display.value = value as never
+    return true
+  }
+  if (name === 'selected') {
+    selected.value = value as never
+    return true
+  }
+  if (name === 'expanded') {
+    expanded.value = value as never
+    return true
+  }
+  if (name === 'rows') {
+    rows.value = value as never
+    return true
+  }
+  if (name === 'active') {
+    active.value = value as never
+    return true
+  }
+  if (name === 'loading') {
+    loading.value = value as never
+    return true
+  }
+  if (name === 'helpOpen') {
+    helpOpen.value = value as never
+    return true
+  }
+  if (name === 'lookupError') {
+    lookupError.value = value as never
+    return true
+  }
+  if (name === 'validation') {
+    validation.value = value as never
+    return true
+  }
+  if (name === 'uid') {
+    uid.value = value as never
+    return true
+  }
+  if (name === 'groups') {
+    groups.value = value as never
+    return true
+  }
+  if (name === 'creatable') {
+    creatable.value = value as never
+    return true
+  }
+  if (name === 'createIndex') {
+    createIndex.value = value as never
+    return true
+  }
+  if (name === 'message') {
+    message.value = value as never
+    return true
+  }
+  if (name === 'statusText') {
+    statusText.value = value as never
+    return true
+  }
+  if (name === 'validationStatus') {
+    validationStatus.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {
+    get field(): Element {
+      return fieldElement.value as Element
+    },
+    get input(): Element {
+      return inputElement.value as Element
+    },
+    get popup(): Element {
+      return popupElement.value as Element
+    },
+    get listbox(): Element {
+      return listboxElement.value as Element
+    },
+    get options(): Element {
+      return optionsElement.value as Element
+    },
+  } as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 defineExpose({
-  validate: async (...args: unknown[]) => { await ready; return (controllerModule as Record<string, (...values: unknown[]) => unknown>)["validate"]!(host, ...args); },
-  focusInput: async (...args: unknown[]) => { await ready; return (controllerModule as Record<string, (...values: unknown[]) => unknown>)["focusInput"]!(host, ...args); },
-});
+  validate: async (...args: unknown[]) => {
+    await ready
+    return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['validate']!(
+      host,
+      ...args,
+    )
+  },
+  focusInput: async (...args: unknown[]) => {
+    await ready
+    return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['focusInput']!(
+      host,
+      ...args,
+    )
+  },
+})
 </script>
 
 <template>
-  <div data-component="ui-combobox" v-bind="$attrs" :data-ui-combobox-state="hostState || undefined" ref="root"><label :for="hn.attr(hn.call('format', '%s-input', state_uid))" :class="{ 'sr-only': hn.t((props.labelVisibility === 'sr-only')) }">{{ hn.text(props.label) }}<template v-if="hn.t(props.required)">
-        *</template></label><div class="field" :ref="(element) => { refs['field'] = element as Element }"><slot name="start"></slot><template v-if="hn.t(props.multiple)"><template v-for="(item, index) in hn.shape(props.items, undefined, [], undefined)" :key="(item)?.id"><button class="item" type="button" tabindex="-1" :data-index="hn.attr(index)" :disabled="hn.attr((hn.t((hn.t(props.disabled) || hn.t(props.readonly))) || hn.t((item)?.disabled)))" :aria-label="hn.enumerated(hn.call('format', '%s, press Delete or Backspace to remove', (item)?.label))"><slot :name="hn.call('format', 'item-%s', (item)?.id)"><UiBadge>{{ hn.text((item)?.label) }}</UiBadge></slot></button></template></template><input role="combobox" aria-autocomplete="list" autocomplete="off" :id="hn.attr(hn.call('format', '%s-input', state_uid))" :aria-controls="hn.enumerated(hn.call('format', '%s-listbox', state_uid))" :aria-expanded="hn.enumerated(state_expanded)" :aria-invalid="hn.enumerated((state_validationStatus === 'error'))" :aria-busy="hn.enumerated((state_validationStatus === 'pending'))" :value.prop="(state_display) as any" :placeholder="hn.attr(props.placeholder)" :name="hn.attr(props.name)" :disabled="hn.attr(props.disabled)" :readonly="hn.attr(props.readonly)" :required="hn.attr(props.required)" :ref="(element) => { refs['input'] = element as Element }"><template v-if="hn.t(props.clearable)"><button type="button" data-combobox-action="clear" aria-label="Clear"><svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 7l10 10M17 7 7 17"></path></svg></button></template><template v-if="hn.t(props.help)"><button type="button" aria-label="Help" :id="hn.attr(hn.call('format', '%s-help', state_uid))" :disabled="hn.attr(props.disabled)"><span aria-hidden="true">?</span></button></template><template v-if="hn.t(props.disclosure)"><button type="button" data-combobox-action="disclosure" tabindex="-1" aria-label="Show suggestions" :aria-controls="hn.enumerated(hn.call('format', '%s-listbox', state_uid))"><svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg></button></template></div><template v-if="hn.t(props.help)"><UiTooltip :id="hn.call('format', '%s-help-text', state_uid)" :for="hn.call('format', '%s-help', state_uid)">{{ hn.text(props.help) }}</UiTooltip></template><div class="popup" :hidden="hn.attr(!hn.t(state_expanded))" :ref="(element) => { refs['popup'] = element as Element }"><div role="listbox" :id="hn.attr(hn.call('format', '%s-listbox', state_uid))" :aria-label="hn.enumerated(hn.call('format', '%s suggestions', props.label))" :aria-busy="hn.enumerated(state_loading)" :ref="(element) => { refs['listbox'] = element as Element }"><template v-for="(group, index) in hn.shape(state_groups, undefined, [], undefined)" :key="(group)?.name"><div :role="hn.attr((group)?.role)" :aria-label="hn.enumerated((group)?.label)"><template v-if="hn.t((group)?.name)"><div class="group">{{ hn.text((group)?.name) }}</div></template><template v-for="(row, index) in hn.shape((group)?.rows, undefined, [], undefined)" :key="(row)?.id"><div class="option" role="option" :id="hn.attr(hn.call('format', '%s-option-%s', state_uid, (row)?.index))" :aria-selected="hn.enumerated(((row)?.value === state_selected))" :aria-disabled="hn.enumerated((row)?.disabled)" :data-index="hn.attr((row)?.index)" :class="{ 'active': hn.t(((row)?.index === state_active)) }"><slot :name="hn.call('format', 'option-%s', (row)?.id)"><span class="primary">{{ hn.text((row)?.label) }}</span></slot></div></template></div></template><template v-if="hn.t(state_creatable)"><div class="option" role="option" aria-selected="false" :id="hn.attr(hn.call('format', '%s-option-%s', state_uid, state_createIndex))" :data-index="hn.attr(state_createIndex)" :class="{ 'active': hn.t((state_createIndex === state_active)) }">{{ hn.text(hn.call("format", "Create “%s”", state_raw)) }}</div></template><template v-if="hn.t(state_message)"><div class="message">{{ hn.text(state_message) }}</div></template></div><slot name="footer"></slot></div><div class="message" :id="hn.attr(hn.call('format', '%s-validation', state_uid))" :hidden="hn.attr(!hn.t(((state_validation)?.issues)?.length))"><template v-for="(issue, index) in hn.shape((state_validation)?.issues, undefined, [], undefined)" :key="index"><div>{{ hn.text((issue)?.message) }}</div></template></div><div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{{ hn.text(state_statusText) }}</div><div class="authored-options" hidden="" aria-hidden="true" :ref="(element) => { refs['options'] = element as Element }"><slot></slot></div></div>
+  <div
+    data-component="ui-combobox"
+    v-bind="$attrs"
+    :data-ui-combobox-state="hostState || undefined"
+    ref="root"
+  >
+    <label :for="`${uid}-input`" :class="{ 'sr-only': labelVisibility === 'sr-only' }">{{ label }}
+      <template v-if="required">
+        *</template></label>
+    <div class="field" ref="field">
+      <slot name="start" />
+      <template v-if="multiple"><button
+          v-for="(item, index) in items"
+          :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>
+      <input
+        role="combobox"
+        aria-autocomplete="list"
+        autocomplete="off"
+        :id="`${uid}-input`"
+        :aria-controls="`${uid}-listbox`"
+        :aria-expanded="expanded"
+        :aria-invalid="validationStatus === 'error'"
+        :aria-busy="validationStatus === 'pending'"
+        :value.prop="display"
+        :placeholder="placeholder"
+        :name="name"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        ref="input"
+      >
+      <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+        <svg
+          class="affordance-icon"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        >
+          <path d="M7 7l10 10M17 7 7 17"></path>
+        </svg>
+      </button>
+      <button v-if="help" type="button" aria-label="Help" :id="`${uid}-help`" :disabled="disabled">
+        <span aria-hidden="true">?</span>
+      </button>
+      <button
+        v-if="disclosure"
+        type="button"
+        data-combobox-action="disclosure"
+        tabindex="-1"
+        aria-label="Show suggestions"
+        :aria-controls="`${uid}-listbox`"
+      >
+        <svg
+          class="affordance-icon"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6"></path>
+        </svg>
+      </button>
+    </div>
+    <UiTooltip v-if="help" :id="`${uid}-help-text`" :for="`${uid}-help`">{{ help }}</UiTooltip>
+    <div class="popup" :hidden="!expanded" ref="popup">
+      <div
+        role="listbox"
+        :id="`${uid}-listbox`"
+        :aria-label="`${label} suggestions`"
+        :aria-busy="loading"
+        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"
+            :id="`${uid}-option-${row.index}`"
+            :aria-selected="row.value === selected"
+            :aria-disabled="row.disabled"
+            :data-index="row.index"
+            :class="{ active: row.index === active }"
+          >
+            <slot :name="`option-${row.id}`"><span class="primary">{{ row.label }}</span></slot>
+          </div>
+        </div>
+        <div
+          v-if="creatable"
+          class="option"
+          role="option"
+          aria-selected="false"
+          :id="`${uid}-option-${createIndex}`"
+          :data-index="createIndex"
+          :class="{ active: createIndex === active }"
+        >
+          {{ `Create “${raw}”` }}
+        </div>
+        <div v-if="message" class="message">{{ message }}</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>
+    <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>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-combobox"] {
-      display: grid;
-      gap: var(--ui-space-1);
-      min-inline-size: 0;
-      color: var(--ui-text-primary);
-      font: inherit;
-    }
-    label {
-      color: var(--ui-field-label-color, var(--ui-text-primary));
-      font-size: var(--ui-field-label-size, 0.875rem);
-      font-weight: var(--ui-field-label-weight, 500);
-    }
-    .field {
-      display: flex;
-      min-inline-size: 0;
-      border: 1px solid var(--ui-control-border, var(--ui-border-default));
-      border-radius: var(--ui-radius-2);
-      background: var(--ui-control-surface, var(--ui-surface-default));
-      box-shadow: var(--ui-control-inset);
-      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-    .field:focus-within {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
-      box-shadow:
-        var(--ui-control-inset),
-        var(--ui-control-focus-halo-shadow);
-    }
-    input::selection {
-      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-      color: inherit;
-    }
-    input {
-      appearance: none;
-      width: 100%;
-      min-inline-size: 0;
-      min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
-      box-sizing: border-box;
-      border: 0;
-      border-radius: inherit;
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      line-height: var(--ui-line-height-md);
-      padding: var(--ui-space-2) var(--ui-space-3);
-      margin: 0;
-      outline: none;
-    }
-    [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
-      min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
-      padding: var(--ui-space-1) var(--ui-space-2);
-    }
-    button {
-      appearance: none;
-      display: inline-grid;
-      place-items: center;
-      align-self: stretch;
-      border: 0;
-      border-radius: var(--ui-radius-2);
-      background: transparent;
-      color: var(--ui-field-affordance-color, var(--ui-text-secondary));
-      font: inherit;
-      font-weight: var(--ui-field-affordance-weight, 400);
-      min-inline-size: 2rem;
-      padding: 0 var(--ui-space-1);
-      cursor: pointer;
-    }
-    .affordance-icon {
-      display: block;
-      inline-size: var(--ui-icon-size-sm, 1rem);
-      block-size: var(--ui-icon-size-sm, 1rem);
-    }
-    button:hover:enabled {
-      background: var(--ui-surface-muted);
-      color: var(--ui-text-primary);
-    }
-    button:focus-visible {
-      outline: none;
-      background: var(--ui-surface-muted);
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
-    }
-    input:disabled, button:disabled {
-      color: var(--ui-text-muted);
-      cursor: not-allowed;
-    }
-    .field:has(input:disabled) {
-      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    }
-    [data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field {
-      border-color: var(--ui-danger-solid, var(--ui-accent-active));
-    }
-    .popup {
-      box-sizing: border-box;
-      min-inline-size: 12rem;
-      max-inline-size: calc(100vw - 1rem);
-      max-block-size: var(--ui-combobox-max-block-size, 18rem);
-      overflow: auto;
-      margin: 0;
-      padding: var(--ui-space-1);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-2);
-      background: var(--ui-surface-elevated);
-      color: var(--ui-text-primary);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-    }
-    [hidden] {
-      display: none;
-    }
-    .option {
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-1);
-      cursor: pointer;
-      overflow-wrap: anywhere;
-    }
-    .option:hover, .option.active {
-      background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring, currentColor);
-      outline-offset: -1px;
-    }
-    .option[aria-disabled="true"] {
-      color: var(--ui-text-muted);
-      cursor: not-allowed;
-    }
-    .primary {
-      display: block;
-      color: var(--ui-option-primary-color, var(--ui-text-primary));
-      font-weight: var(--ui-option-primary-weight, 500);
-    }
-    .message, .group {
-      color: var(--ui-field-message-color, var(--ui-text-secondary));
-      font-weight: var(--ui-field-message-weight, 400);
-      font-size: var(--ui-font-size-sm);
-      line-height: var(--ui-line-height-md);
-      overflow-wrap: anywhere;
-    }
-    .group, .popup .message {
-      padding: var(--ui-space-2) var(--ui-space-3);
-    }
-    .sr-only {
-      position: absolute;
-      inline-size: 1px;
-      block-size: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
-    @media (pointer: coarse) {
-      button {
-        min-inline-size: 2.75rem;
-        min-block-size: 2.75rem;
-      }
-    }
-    @media (forced-colors: active) {
-      .field, .popup {
-        border-color: CanvasText;
-      }
-      .option.active {
-        outline-color: Highlight;
-      }
-    }
+  display: grid;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+  font: inherit;
+}
+label {
+  color: var(--ui-field-label-color, var(--ui-text-primary));
+  font-size: var(--ui-field-label-size, 0.875rem);
+  font-weight: var(--ui-field-label-weight, 500);
+}
+.field {
+  display: flex;
+  min-inline-size: 0;
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-control-surface, var(--ui-surface-default));
+  box-shadow: var(--ui-control-inset);
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.field:focus-within {
+  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+  box-shadow:
+    var(--ui-control-inset),
+    var(--ui-control-focus-halo-shadow);
+}
+input::selection {
+  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+  color: inherit;
+}
+input {
+  appearance: none;
+  width: 100%;
+  min-inline-size: 0;
+  min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+  box-sizing: border-box;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  margin: 0;
+  outline: none;
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
+  min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+  padding: var(--ui-space-1) var(--ui-space-2);
+}
+button {
+  appearance: none;
+  display: inline-grid;
+  place-items: center;
+  align-self: stretch;
+  border: 0;
+  border-radius: var(--ui-radius-2);
+  background: transparent;
+  color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+  font: inherit;
+  font-weight: var(--ui-field-affordance-weight, 400);
+  min-inline-size: 2rem;
+  padding: 0 var(--ui-space-1);
+  cursor: pointer;
+}
+.affordance-icon {
+  display: block;
+  inline-size: var(--ui-icon-size-sm, 1rem);
+  block-size: var(--ui-icon-size-sm, 1rem);
+}
+button:hover:enabled {
+  background: var(--ui-surface-muted);
+  color: var(--ui-text-primary);
+}
+button:focus-visible {
+  outline: none;
+  background: var(--ui-surface-muted);
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+}
+input:disabled, button:disabled {
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
+.field:has(input:disabled) {
+  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field {
+  border-color: var(--ui-danger-solid, var(--ui-accent-active));
+}
+.popup {
+  box-sizing: border-box;
+  min-inline-size: 12rem;
+  max-inline-size: calc(100vw - 1rem);
+  max-block-size: var(--ui-combobox-max-block-size, 18rem);
+  overflow: auto;
+  margin: 0;
+  padding: var(--ui-space-1);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-surface-elevated);
+  color: var(--ui-text-primary);
+  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+}
+[hidden] {
+  display: none;
+}
+.option {
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border-radius: var(--ui-radius-1);
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.option:hover, .option.active {
+  background: var(--ui-surface-muted);
+  outline: 1px solid var(--ui-focus-ring, currentColor);
+  outline-offset: -1px;
+}
+.option[aria-disabled="true"] {
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
+.primary {
+  display: block;
+  color: var(--ui-option-primary-color, var(--ui-text-primary));
+  font-weight: var(--ui-option-primary-weight, 500);
+}
+.message, .group {
+  color: var(--ui-field-message-color, var(--ui-text-secondary));
+  font-weight: var(--ui-field-message-weight, 400);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-md);
+  overflow-wrap: anywhere;
+}
+.group, .popup .message {
+  padding: var(--ui-space-2) var(--ui-space-3);
+}
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (pointer: coarse) {
+  button {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+  }
+}
+@media (forced-colors: active) {
+  .field, .popup {
+    border-color: CanvasText;
+  }
+  .option.active {
+    outline-color: Highlight;
+  }
+}
 
-    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-    [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-1);
-      min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
-      padding: var(--ui-space-1);
-    }
-    [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input {
-      flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
-      width: auto;
-      min-block-size: 1.75rem;
-      padding: var(--ui-space-0-5) var(--ui-space-1);
-    }
-    .item {
-      appearance: none;
-      display: inline-flex;
-      min-inline-size: 0;
-      max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
-      overflow: hidden;
-      padding: 0;
-      border: 0;
-      border-radius: var(--ui-radius-1);
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      cursor: default;
-    }
-    .item:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
-      outline-offset: 1px;
-    }
-    .item:disabled {
-      opacity: 0.6;
-    }
+/* Multiple mode: chips wrap before the cursor on one flexible field line. */
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-1);
+  min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+  padding: var(--ui-space-1);
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input {
+  flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+  width: auto;
+  min-block-size: 1.75rem;
+  padding: var(--ui-space-0-5) var(--ui-space-1);
+}
+.item {
+  appearance: none;
+  display: inline-flex;
+  min-inline-size: 0;
+  max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-1);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: default;
+}
+.item:focus-visible {
+  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline-offset: 1px;
+}
+.item:disabled {
+  opacity: 0.6;
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-combobox"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-combobox"][hidden] {
+  display: none;
+}
 </style>