@threadlabs/looma 0.4.0 → 0.5.0

package/vanilla/UiCallout.js

@@ -0,0 +1,124 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import "../styles/ui-callout.css";
+
+const definition = {...{"contract":{"tag":"ui-callout","props":{"tone":{"type":{"enum":["info","note","warning","success","danger"]},"required":false,"target":{"attribute":"tone"},"default":"info"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"note"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 16v-4"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 8h.01"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'info'","testPlan":{"source":"tone = 'info'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"info"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M13 2v7h7"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'note'","testPlan":{"source":"tone = 'note'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"note"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 9v4"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 17h.01"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'warning'","testPlan":{"source":"tone = 'warning'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"warning"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9 12 2 2 4-4"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'success'","testPlan":{"source":"tone = 'success'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"success"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m15 9-6 6"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9 9 6 6"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'danger'","testPlan":{"source":"tone = 'danger'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"danger"}},"dependencies":["tone"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiCallout(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "note");
+  element.setAttribute("data-component", "ui-callout");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "icon");
+  element0.setAttribute("aria-hidden", "true");
+  const element1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element1.setAttribute("viewBox", "0 0 24 24");
+  element1.setAttribute("fill", "none");
+  element1.setAttribute("stroke", "currentColor");
+  element1.setAttribute("stroke-width", "2");
+  element1.setAttribute("stroke-linecap", "round");
+  element1.setAttribute("stroke-linejoin", "round");
+  const element2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element2.setAttribute("cx", "12");
+  element2.setAttribute("cy", "12");
+  element2.setAttribute("r", "10");
+  element1.append(element2);
+  const element3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element3.setAttribute("d", "M12 16v-4");
+  element1.append(element3);
+  const element4 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element4.setAttribute("d", "M12 8h.01");
+  element1.append(element4);
+  element0.append(element1);
+  const element5 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element5.setAttribute("viewBox", "0 0 24 24");
+  element5.setAttribute("fill", "none");
+  element5.setAttribute("stroke", "currentColor");
+  element5.setAttribute("stroke-width", "2");
+  element5.setAttribute("stroke-linecap", "round");
+  element5.setAttribute("stroke-linejoin", "round");
+  const element6 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element6.setAttribute("d", "M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z");
+  element5.append(element6);
+  const element7 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element7.setAttribute("d", "M13 2v7h7");
+  element5.append(element7);
+  const element8 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element8.setAttribute("d", "m9.5 17.5 4-4 2 2-4 4H9.5v-2Z");
+  element5.append(element8);
+  element0.append(element5);
+  const element9 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element9.setAttribute("viewBox", "0 0 24 24");
+  element9.setAttribute("fill", "none");
+  element9.setAttribute("stroke", "currentColor");
+  element9.setAttribute("stroke-width", "2");
+  element9.setAttribute("stroke-linecap", "round");
+  element9.setAttribute("stroke-linejoin", "round");
+  const element10 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element10.setAttribute("d", "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z");
+  element9.append(element10);
+  const element11 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element11.setAttribute("d", "M12 9v4");
+  element9.append(element11);
+  const element12 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element12.setAttribute("d", "M12 17h.01");
+  element9.append(element12);
+  element0.append(element9);
+  const element13 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element13.setAttribute("viewBox", "0 0 24 24");
+  element13.setAttribute("fill", "none");
+  element13.setAttribute("stroke", "currentColor");
+  element13.setAttribute("stroke-width", "2");
+  element13.setAttribute("stroke-linecap", "round");
+  element13.setAttribute("stroke-linejoin", "round");
+  const element14 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element14.setAttribute("cx", "12");
+  element14.setAttribute("cy", "12");
+  element14.setAttribute("r", "10");
+  element13.append(element14);
+  const element15 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element15.setAttribute("d", "m9 12 2 2 4-4");
+  element13.append(element15);
+  element0.append(element13);
+  const element16 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element16.setAttribute("viewBox", "0 0 24 24");
+  element16.setAttribute("fill", "none");
+  element16.setAttribute("stroke", "currentColor");
+  element16.setAttribute("stroke-width", "2");
+  element16.setAttribute("stroke-linecap", "round");
+  element16.setAttribute("stroke-linejoin", "round");
+  const element17 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element17.setAttribute("cx", "12");
+  element17.setAttribute("cy", "12");
+  element17.setAttribute("r", "10");
+  element16.append(element17);
+  const element18 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element18.setAttribute("d", "m15 9-6 6");
+  element16.append(element18);
+  const element19 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element19.setAttribute("d", "m9 9 6 6");
+  element16.append(element19);
+  element0.append(element16);
+  element.append(element0);
+  const element20 = document.createElement("div");
+  element20.setAttribute("class", "content");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element20.append(node);
+    }
+  } else {
+  }
+  element.append(element20);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiCheckbox.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiCheckboxEventMap {
+  change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiCheckboxElement extends HTMLLabelElement {
+  addEventListener<K extends keyof UiCheckboxEventMap>(type: K, listener: (this: UiCheckboxElement, event: UiCheckboxEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiCheckboxEventMap>(type: K, listener: (this: UiCheckboxElement, event: UiCheckboxEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiCheckboxProps {
+  checked?: boolean | null;
+  disabled?: boolean | null;
+  indeterminate?: boolean | null;
+  required?: boolean | null;
+  value?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiCheckbox(props?: UiCheckboxProps): UiCheckboxElement;

package/vanilla/UiCheckbox.js

@@ -0,0 +1,47 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import * as controller from "../components/ui-checkbox/ui-checkbox.js";
+import "../styles/ui-checkbox.css";
+
+const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+
+export function createUiCheckbox(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("label");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-checkbox");
+  const element0 = document.createElement("input");
+  element0.setAttribute("type", "checkbox");
+  const value0 = componentProps["indeterminate"] === undefined ? false : componentProps["indeterminate"];
+  if (value0 !== undefined) element0["indeterminate"] = value0;
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value1 === true) element0.setAttribute("disabled", "");
+  else element0.removeAttribute("disabled");
+  const value2 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value2 === true) element0.setAttribute("required", "");
+  else element0.removeAttribute("required");
+  const value3 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value3 === null || value3 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value3));
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "label");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element.append(element1);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiCluster.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiClusterEventMap {
+}
+export interface UiClusterElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiClusterEventMap>(type: K, listener: (this: UiClusterElement, event: UiClusterEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiClusterEventMap>(type: K, listener: (this: UiClusterElement, event: UiClusterEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiClusterProps {
+  align?: "start" | "center" | "end" | "stretch" | null;
+  gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiCluster(props?: UiClusterProps): UiClusterElement;

package/vanilla/UiCluster.js

@@ -0,0 +1,30 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/declarative-components/generated-runtime";
+import "../styles/ui-cluster.css";
+
+export function createUiCluster(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
+  const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-cluster");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageGeneratedProps(element, [
+    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiCombobox.d.ts

@@ -0,0 +1,42 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiComboboxEventMap {
+  "query-change": CustomEvent<{ readonly query: string; readonly display: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  "value-change": CustomEvent<{ 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": CustomEvent<{ 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": CustomEvent<{ 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": CustomEvent<{ readonly status: "pristine" | "pending" | "valid" | "warning" | "error"; readonly touched: boolean; readonly dirty: boolean; readonly issues: readonly ({ readonly message: string; readonly path?: readonly (unknown)[]; readonly severity?: "error" | "warning" })[]; readonly output?: unknown }>;
+  "options-change": CustomEvent<readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean })[]>;
+  "add-item": CustomEvent<{ 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": CustomEvent<{ 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": CustomEvent<{ readonly query: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiComboboxElement extends HTMLDivElement {
+  validate(): Promise<unknown>;
+  focusInput(): Promise<void>;
+  addEventListener<K extends keyof UiComboboxEventMap>(type: K, listener: (this: UiComboboxElement, event: UiComboboxEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiComboboxEventMap>(type: K, listener: (this: UiComboboxElement, event: UiComboboxEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiComboboxProps {
+  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;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiCombobox(props?: UiComboboxProps): UiComboboxElement;

package/vanilla/UiCombobox.js

@@ -0,0 +1,194 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import * as controller from "../components/ui-combobox/ui-combobox.js";
+import "../styles/ui-combobox.css";
+
+const definition = {...{"contract":{"tag":"ui-combobox","props":{"allowCreate":{"type":"boolean","required":false,"target":{"attribute":"allowcreate"},"default":false},"allowFreeText":{"type":"boolean","required":false,"target":{"attribute":"allowfreetext"},"default":false},"clearable":{"type":"boolean","required":false,"target":{"attribute":"clearable"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"disclosure":{"type":"boolean","required":false,"target":{"attribute":"disclosure"},"default":false},"help":{"type":"string","required":false,"target":{"attribute":"help"},"default":""},"items":{"type":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"group","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"disabled","type":{"kind":"terminal","name":"boolean"},"optional":true}],"open":false}},"required":false,"target":{"attribute":"items"}},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"labelVisibility":{"type":{"enum":["visible","sr-only"]},"required":false,"target":{"attribute":"labelvisibility"},"default":"visible"},"multiple":{"type":"boolean","required":false,"target":{"attribute":"multiple"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"placeholder":{"type":"string","required":false,"target":{"attribute":"placeholder"},"default":""},"query":{"type":"string","required":false,"target":{"attribute":"query"}},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tokenSeparators":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"tokenseparators"}},"value":{"type":{"kind":"union","members":[{"kind":"terminal","name":"string"},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"label","attributes":[{"kind":"attribute","name":"for","expression":"format('%s-input', uid)","expressionPlan":{"source":"format('%s-input', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-input"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"sr-only","expression":"labelVisibility = 'sr-only'","expressionPlan":{"source":"labelVisibility = 'sr-only'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"labelVisibility"},"right":{"kind":"literal","value":"sr-only"}},"dependencies":["labelVisibility"]},"target":"class"}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"text","value":"\n        *"}],"flow":{"kind":"if","test":"required","testPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"slot","fallback":[],"name":"start"},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"item"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"data-index","expression":"index","expressionPlan":{"source":"index","ast":{"kind":"id","name":"index"},"dependencies":["index"]}},{"kind":"attribute","name":"disabled","expression":"disabled or readonly or item.disabled","expressionPlan":{"source":"disabled or readonly or item.disabled","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"right":{"kind":"member","object":{"kind":"id","name":"item"},"key":"disabled"}},"dependencies":["disabled","item.disabled","readonly"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s, press Delete or Backspace to remove', item.label)","expressionPlan":{"source":"format('%s, press Delete or Backspace to remove', item.label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s, press Delete or Backspace to remove"},{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"}]},"dependencies":["item.label"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"ui-badge","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"nameExpression":{"source":"format('item-%s', item.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"item-%s"},{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"}]},"dependencies":["item.id"]}}],"flow":{"kind":"each","item":"item","list":"items","listPlan":{"source":"items","ast":{"kind":"id","name":"items"},"dependencies":["items"]},"index":"index","key":"item.id","keyPlan":{"source":"item.id","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"},"dependencies":["item.id"]}}}],"flow":{"kind":"if","test":"multiple","testPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}}},{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-input', uid)","expressionPlan":{"source":"format('%s-input', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-input"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"literal","name":"role","value":"combobox"},{"kind":"literal","name":"aria-autocomplete","value":"list"},{"kind":"literal","name":"autocomplete","value":"off"},{"kind":"attribute","name":"aria-controls","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"aria-expanded","expression":"expanded","expressionPlan":{"source":"expanded","ast":{"kind":"id","name":"expanded"},"dependencies":["expanded"]}},{"kind":"attribute","name":"aria-invalid","expression":"validationStatus = 'error'","expressionPlan":{"source":"validationStatus = 'error'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"validationStatus"},"right":{"kind":"literal","value":"error"}},"dependencies":["validationStatus"]}},{"kind":"attribute","name":"aria-busy","expression":"validationStatus = 'pending'","expressionPlan":{"source":"validationStatus = 'pending'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"validationStatus"},"right":{"kind":"literal","value":"pending"}},"dependencies":["validationStatus"]}},{"kind":"property","key":"value","name":"value","expression":"display","expressionPlan":{"source":"display","ast":{"kind":"id","name":"display"},"dependencies":["display"]}},{"kind":"attribute","name":"placeholder","expression":"placeholder","expressionPlan":{"source":"placeholder","ast":{"kind":"id","name":"placeholder"},"dependencies":["placeholder"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}}],"children":[],"ref":"input"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"data-combobox-action","value":"clear"},{"kind":"literal","name":"aria-label","value":"Clear"}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"affordance-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M7 7l10 10M17 7 7 17"}],"children":[]}]}],"flow":{"kind":"if","test":"clearable","testPlan":{"source":"clearable","ast":{"kind":"id","name":"clearable"},"dependencies":["clearable"]}}},{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-help', uid)","expressionPlan":{"source":"format('%s-help', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Help"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"text","value":"?"}]}],"flow":{"kind":"if","test":"help","testPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"data-combobox-action","value":"disclosure"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"literal","name":"aria-label","value":"Show suggestions"},{"kind":"attribute","name":"aria-controls","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"affordance-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2.25"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m6 9 6 6 6-6"}],"children":[]}]}],"flow":{"kind":"if","test":"disclosure","testPlan":{"source":"disclosure","ast":{"kind":"id","name":"disclosure"},"dependencies":["disclosure"]}}}],"ref":"field"},{"kind":"element","name":"ui-tooltip","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-help-text', uid)","expressionPlan":{"source":"format('%s-help-text', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help-text"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"for","expression":"format('%s-help', uid)","expressionPlan":{"source":"format('%s-help', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"help","expressionPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}],"children":[]}],"flow":{"kind":"if","test":"help","testPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"popup"},{"kind":"attribute","name":"hidden","expression":"not expanded","expressionPlan":{"source":"not expanded","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"expanded"}},"dependencies":["expanded"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"id","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s suggestions', label)","expressionPlan":{"source":"format('%s suggestions', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s suggestions"},{"kind":"id","name":"label"}]},"dependencies":["label"]}},{"kind":"attribute","name":"aria-busy","expression":"loading","expressionPlan":{"source":"loading","ast":{"kind":"id","name":"loading"},"dependencies":["loading"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"group.role","expressionPlan":{"source":"group.role","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"role"},"dependencies":["group.role"]}},{"kind":"attribute","name":"aria-label","expression":"group.label","expressionPlan":{"source":"group.label","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"label"},"dependencies":["group.label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"directive","name":"value","expression":"group.name","expressionPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}],"children":[],"flow":{"kind":"if","test":"group.name","testPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"row.index = active","expressionPlan":{"source":"row.index = active","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","row.index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"attribute","name":"aria-selected","expression":"row.value = selected","expressionPlan":{"source":"row.value = selected","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"row"},"key":"value"},"right":{"kind":"id","name":"selected"}},"dependencies":["row.value","selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"row.disabled","expressionPlan":{"source":"row.disabled","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"disabled"},"dependencies":["row.disabled"]}},{"kind":"attribute","name":"data-index","expression":"row.index","expressionPlan":{"source":"row.index","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"},"dependencies":["row.index"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"primary"},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[]}],"nameExpression":{"source":"format('option-%s', row.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"option-%s"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"}]},"dependencies":["row.id"]}}],"flow":{"kind":"each","item":"row","list":"group.rows","listPlan":{"source":"group.rows","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"rows"},"dependencies":["group.rows"]},"key":"row.id","keyPlan":{"source":"row.id","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"},"dependencies":["row.id"]}}}],"flow":{"kind":"each","item":"group","list":"groups","listPlan":{"source":"groups","ast":{"kind":"id","name":"groups"},"dependencies":["groups"]},"key":"group.name","keyPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"createIndex = active","expressionPlan":{"source":"createIndex = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"createIndex"},"right":{"kind":"id","name":"active"}},"dependencies":["active","createIndex"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"literal","name":"aria-selected","value":"false"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, createIndex)","expressionPlan":{"source":"format('%s-option-%s', uid, createIndex)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"id","name":"createIndex"}]},"dependencies":["createIndex","uid"]}},{"kind":"attribute","name":"data-index","expression":"createIndex","expressionPlan":{"source":"createIndex","ast":{"kind":"id","name":"createIndex"},"dependencies":["createIndex"]}},{"kind":"directive","name":"value","expression":"format('Create “%s”', raw)","expressionPlan":{"source":"format('Create “%s”', raw)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Create “%s”"},{"kind":"id","name":"raw"}]},"dependencies":["raw"]}}],"children":[],"flow":{"kind":"if","test":"creatable","testPlan":{"source":"creatable","ast":{"kind":"id","name":"creatable"},"dependencies":["creatable"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"directive","name":"value","expression":"message","expressionPlan":{"source":"message","ast":{"kind":"id","name":"message"},"dependencies":["message"]}}],"children":[],"flow":{"kind":"if","test":"message","testPlan":{"source":"message","ast":{"kind":"id","name":"message"},"dependencies":["message"]}}}],"ref":"listbox"},{"kind":"slot","fallback":[],"name":"footer"}],"ref":"popup"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"attribute","name":"id","expression":"format('%s-validation', uid)","expressionPlan":{"source":"format('%s-validation', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-validation"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"hidden","expression":"not validation.issues.length","expressionPlan":{"source":"not validation.issues.length","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"validation"},"key":"issues"},"key":"length"}},"dependencies":["validation.issues.length"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"directive","name":"value","expression":"issue.message","expressionPlan":{"source":"issue.message","ast":{"kind":"member","object":{"kind":"id","name":"issue"},"key":"message"},"dependencies":["issue.message"]}}],"children":[],"flow":{"kind":"each","item":"issue","list":"validation.issues","listPlan":{"source":"validation.issues","ast":{"kind":"member","object":{"kind":"id","name":"validation"},"key":"issues"},"dependencies":["validation.issues"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sr-only"},{"kind":"literal","name":"role","value":"status"},{"kind":"literal","name":"aria-live","value":"polite"},{"kind":"literal","name":"aria-atomic","value":"true"},{"kind":"directive","name":"value","expression":"statusText","expressionPlan":{"source":"statusText","ast":{"kind":"id","name":"statusText"},"dependencies":["statusText"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"authored-options"},{"kind":"literal","name":"hidden","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot"}],"ref":"options"}]},"declarations":[{"kind":"state","name":"raw","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"display","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"selected","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"expanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"rows","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"active","expression":{"source":"-1","ast":{"kind":"unary","op":"-","operand":{"kind":"literal","value":1}},"dependencies":[]}},{"kind":"state","name":"loading","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"helpOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"lookupError","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validation","expression":{"source":"{ status: 'pristine', touched: false, dirty: false, issues: [] }","ast":{"kind":"object","pairs":[{"key":"status","value":{"kind":"literal","value":"pristine"}},{"key":"touched","value":{"kind":"literal","value":false}},{"key":"dirty","value":{"kind":"literal","value":false}},{"key":"issues","value":{"kind":"array","items":[]}}]},"dependencies":[]}},{"kind":"state","name":"uid","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"groups","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"creatable","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"createIndex","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"message","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"statusText","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validationStatus","expression":{"source":"'pristine'","ast":{"kind":"literal","value":"pristine"},"dependencies":[]}},{"kind":"event","name":"query-change","type":"object({ query: string, display: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"value-change","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"free-entry","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"create-entry","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"validation-change","type":"object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"options-change","type":"list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"add-item","type":"object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"remove-item","type":"object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"create-item","type":"object({ query: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"method","name":"validate","exportName":"validate","returns":"promise(unknown)"},{"kind":"method","name":"focusInput","exportName":"focusInput","returns":"promise(undefined)"}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiCombobox(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-combobox");
+  const element0 = document.createElement("label");
+  const element1 = document.createElement("template");
+  element0.append(element1);
+  const element2 = document.createElement("template");
+  element2.append("\n        *");
+  element0.append(element2);
+  element.append(element0);
+  const element3 = document.createElement("div");
+  element3.setAttribute("class", "field");
+  if (slots["start"] ?? [].length > 0) {
+    for (const child of slots["start"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "start"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  const element4 = document.createElement("template");
+  const element5 = document.createElement("button");
+  element5.setAttribute("class", "item");
+  element5.setAttribute("type", "button");
+  element5.setAttribute("tabindex", "-1");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element5.append(node);
+    }
+  } else {
+  const element6 = document.createElement("ui-badge");
+  element5.append(element6);
+  }
+  element4.append(element5);
+  element3.append(element4);
+  const element7 = document.createElement("input");
+  element7.setAttribute("role", "combobox");
+  element7.setAttribute("aria-autocomplete", "list");
+  element7.setAttribute("autocomplete", "off");
+  const value0 = componentProps["placeholder"] === undefined ? "" : componentProps["placeholder"];
+  if (value0 === null || value0 === undefined) element7.removeAttribute("placeholder");
+  else element7.setAttribute("placeholder", String(value0));
+  const value1 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value1 === null || value1 === undefined) element7.removeAttribute("name");
+  else element7.setAttribute("name", String(value1));
+  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value2 === true) element7.setAttribute("disabled", "");
+  else element7.removeAttribute("disabled");
+  const value3 = componentProps["readonly"] === undefined ? false : componentProps["readonly"];
+  if (value3 === true) element7.setAttribute("readonly", "");
+  else element7.removeAttribute("readonly");
+  const value4 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value4 === true) element7.setAttribute("required", "");
+  else element7.removeAttribute("required");
+  element3.append(element7);
+  const element8 = document.createElement("button");
+  element8.setAttribute("type", "button");
+  element8.setAttribute("data-combobox-action", "clear");
+  element8.setAttribute("aria-label", "Clear");
+  const element9 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element9.setAttribute("class", "affordance-icon");
+  element9.setAttribute("aria-hidden", "true");
+  element9.setAttribute("viewBox", "0 0 24 24");
+  element9.setAttribute("fill", "none");
+  element9.setAttribute("stroke", "currentColor");
+  element9.setAttribute("stroke-width", "2");
+  element9.setAttribute("stroke-linecap", "round");
+  const element10 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element10.setAttribute("d", "M7 7l10 10M17 7 7 17");
+  element9.append(element10);
+  element8.append(element9);
+  element3.append(element8);
+  const element11 = document.createElement("button");
+  element11.setAttribute("type", "button");
+  element11.setAttribute("aria-label", "Help");
+  const value5 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value5 === true) element11.setAttribute("disabled", "");
+  else element11.removeAttribute("disabled");
+  const element12 = document.createElement("span");
+  element12.setAttribute("aria-hidden", "true");
+  element12.append("?");
+  element11.append(element12);
+  element3.append(element11);
+  const element13 = document.createElement("button");
+  element13.setAttribute("type", "button");
+  element13.setAttribute("data-combobox-action", "disclosure");
+  element13.setAttribute("tabindex", "-1");
+  element13.setAttribute("aria-label", "Show suggestions");
+  const element14 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element14.setAttribute("class", "affordance-icon");
+  element14.setAttribute("aria-hidden", "true");
+  element14.setAttribute("viewBox", "0 0 24 24");
+  element14.setAttribute("fill", "none");
+  element14.setAttribute("stroke", "currentColor");
+  element14.setAttribute("stroke-width", "2.25");
+  element14.setAttribute("stroke-linecap", "round");
+  element14.setAttribute("stroke-linejoin", "round");
+  const element15 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element15.setAttribute("d", "m6 9 6 6 6-6");
+  element14.append(element15);
+  element13.append(element14);
+  element3.append(element13);
+  element.append(element3);
+  const element16 = document.createElement("ui-tooltip");
+  const element17 = document.createElement("template");
+  element16.append(element17);
+  element.append(element16);
+  const element18 = document.createElement("div");
+  element18.setAttribute("class", "popup");
+  const element19 = document.createElement("div");
+  element19.setAttribute("role", "listbox");
+  const element20 = document.createElement("div");
+  const element21 = document.createElement("div");
+  element21.setAttribute("class", "group");
+  element20.append(element21);
+  const element22 = document.createElement("div");
+  element22.setAttribute("class", "option");
+  element22.setAttribute("role", "option");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element22.append(node);
+    }
+  } else {
+  const element23 = document.createElement("span");
+  element23.setAttribute("class", "primary");
+  element22.append(element23);
+  }
+  element20.append(element22);
+  element19.append(element20);
+  const element24 = document.createElement("div");
+  element24.setAttribute("class", "option");
+  element24.setAttribute("role", "option");
+  element24.setAttribute("aria-selected", "false");
+  element19.append(element24);
+  const element25 = document.createElement("div");
+  element25.setAttribute("class", "message");
+  element19.append(element25);
+  element18.append(element19);
+  if (slots["footer"] ?? [].length > 0) {
+    for (const child of slots["footer"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "footer"]);
+      element18.append(node);
+    }
+  } else {
+  }
+  element.append(element18);
+  const element26 = document.createElement("div");
+  element26.setAttribute("class", "message");
+  const element27 = document.createElement("div");
+  element26.append(element27);
+  element.append(element26);
+  const element28 = document.createElement("div");
+  element28.setAttribute("class", "sr-only");
+  element28.setAttribute("role", "status");
+  element28.setAttribute("aria-live", "polite");
+  element28.setAttribute("aria-atomic", "true");
+  element.append(element28);
+  const element29 = document.createElement("div");
+  element29.setAttribute("class", "authored-options");
+  element29.setAttribute("hidden", "");
+  element29.setAttribute("aria-hidden", "true");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element29.append(node);
+    }
+  } else {
+  }
+  element.append(element29);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+