@threadlabs/looma 0.3.1 → 0.5.0

package/vanilla/UiEditorToolbar.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiEditorToolbarEventMap {
+}
+export interface UiEditorToolbarElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiEditorToolbarEventMap>(type: K, listener: (this: UiEditorToolbarElement, event: UiEditorToolbarEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorToolbarEventMap>(type: K, listener: (this: UiEditorToolbarElement, event: UiEditorToolbarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorToolbarProps {
+  floating?: boolean | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorToolbar(props?: UiEditorToolbarProps): UiEditorToolbarElement;

package/vanilla/UiEditorToolbar.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-editor-toolbar.css";
+
+export function createUiEditorToolbar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["floating"] === undefined ? false : componentProps["floating"];
+  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", "toolbar");
+  if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Editor toolbar");
+  element.setAttribute("data-component", "ui-editor-toolbar");
+  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: "floating", attribute: "data-floating", value: componentProps["floating"], default: false, type: "boolean", required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiFloatingActionButton.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiFloatingActionButtonEventMap {
+}
+export interface UiFloatingActionButtonElement extends HTMLButtonElement {
+  addEventListener<K extends keyof UiFloatingActionButtonEventMap>(type: K, listener: (this: UiFloatingActionButtonElement, event: UiFloatingActionButtonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiFloatingActionButtonEventMap>(type: K, listener: (this: UiFloatingActionButtonElement, event: UiFloatingActionButtonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiFloatingActionButtonProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  mobileOnly?: boolean | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiFloatingActionButton(props?: UiFloatingActionButtonProps): UiFloatingActionButtonElement;

package/vanilla/UiFloatingActionButton.js

@@ -0,0 +1,35 @@
+// 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-floating-action-button.css";
+
+const definition = {...{"contract":{"tag":"ui-floating-action-button","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"mobileOnly":{"type":"boolean","required":false,"target":{"attribute":"mobileonly"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+
+export function createUiFloatingActionButton(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("button");
+  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("type")) element.setAttribute("type", "button");
+  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value0));
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  element.setAttribute("data-component", "ui-floating-action-button");
+  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 {
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiFormField.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiFormFieldEventMap {
+}
+export interface UiFormFieldElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiFormFieldEventMap>(type: K, listener: (this: UiFormFieldElement, event: UiFormFieldEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiFormFieldEventMap>(type: K, listener: (this: UiFormFieldElement, event: UiFormFieldEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiFormFieldProps {
+  disabled?: boolean | null;
+  invalid?: boolean | null;
+  required?: boolean | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiFormField(props?: UiFormFieldProps): UiFormFieldElement;

package/vanilla/UiFormField.js

@@ -0,0 +1,54 @@
+// 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-form-field/ui-form-field.js";
+import "../styles/ui-form-field.css";
+
+const definition = {...{"contract":{"tag":"ui-form-field","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"invalid"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"label"},{"kind":"slot"},{"kind":"slot","fallback":[],"name":"help"},{"kind":"slot","fallback":[],"name":"error"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiFormField(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-form-field");
+  if (slots["label"] ?? [].length > 0) {
+    for (const child of slots["label"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "label"]);
+      element.append(node);
+    }
+  } else {
+  }
+  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 {
+  }
+  if (slots["help"] ?? [].length > 0) {
+    for (const child of slots["help"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "help"]);
+      element.append(node);
+    }
+  } else {
+  }
+  if (slots["error"] ?? [].length > 0) {
+    for (const child of slots["error"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "error"]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiGrid.d.ts

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

package/vanilla/UiGrid.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-grid.css";
+
+export function createUiGrid(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
+  const prop1 = componentProps["min"] === undefined ? undefined : componentProps["min"];
+  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-grid");
+  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: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
+    { name: "min", attribute: "data-min", value: componentProps["min"], type: ["sm","md","lg"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiIcon.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiIconEventMap {
+}
+export interface UiIconElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiIconEventMap>(type: K, listener: (this: UiIconElement, event: UiIconEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiIconEventMap>(type: K, listener: (this: UiIconElement, event: UiIconEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiIconProps {
+  name?: 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 createUiIcon(props?: UiIconProps): UiIconElement;

package/vanilla/UiIcon.js

@@ -0,0 +1,40 @@
+// 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-icon/ui-icon.js";
+import "../styles/ui-icon.css";
+
+const definition = {...{"contract":{"tag":"ui-icon","props":{"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"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"},{"kind":"literal","name":"focusable","value":"false"}],"children":[{"kind":"element","name":"g","attributes":[],"children":[{"kind":"element","name":"path","attributes":[{"kind":"attribute","name":"d","expression":"shape.d","expressionPlan":{"source":"shape.d","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"d"},"dependencies":["shape.d"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'path'","testPlan":{"source":"shape.tag = 'path'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"path"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"circle","attributes":[{"kind":"attribute","name":"cx","expression":"shape.cx","expressionPlan":{"source":"shape.cx","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"cx"},"dependencies":["shape.cx"]}},{"kind":"attribute","name":"cy","expression":"shape.cy","expressionPlan":{"source":"shape.cy","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"cy"},"dependencies":["shape.cy"]}},{"kind":"attribute","name":"r","expression":"shape.r","expressionPlan":{"source":"shape.r","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"r"},"dependencies":["shape.r"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'circle'","testPlan":{"source":"shape.tag = 'circle'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"circle"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"rect","attributes":[{"kind":"attribute","name":"x","expression":"shape.x","expressionPlan":{"source":"shape.x","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"x"},"dependencies":["shape.x"]}},{"kind":"attribute","name":"y","expression":"shape.y","expressionPlan":{"source":"shape.y","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"y"},"dependencies":["shape.y"]}},{"kind":"attribute","name":"width","expression":"shape.width","expressionPlan":{"source":"shape.width","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"width"},"dependencies":["shape.width"]}},{"kind":"attribute","name":"height","expression":"shape.height","expressionPlan":{"source":"shape.height","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"height"},"dependencies":["shape.height"]}},{"kind":"attribute","name":"rx","expression":"shape.rx","expressionPlan":{"source":"shape.rx","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"rx"},"dependencies":["shape.rx"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'rect'","testPlan":{"source":"shape.tag = 'rect'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"rect"}},"dependencies":["shape.tag"]}}}],"flow":{"kind":"each","item":"shape","list":"shapes","listPlan":{"source":"shapes","ast":{"kind":"id","name":"shapes"},"dependencies":["shapes"]}}}]}]},"declarations":[{"kind":"state","name":"shapes","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiIcon(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("span");
+  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("aria-hidden")) element.setAttribute("aria-hidden", "true");
+  element.setAttribute("data-component", "ui-icon");
+  const element0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element0.setAttribute("viewBox", "0 0 24 24");
+  element0.setAttribute("fill", "none");
+  element0.setAttribute("stroke", "currentColor");
+  element0.setAttribute("stroke-width", "2");
+  element0.setAttribute("stroke-linecap", "round");
+  element0.setAttribute("stroke-linejoin", "round");
+  element0.setAttribute("focusable", "false");
+  const element1 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  const element2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element1.append(element2);
+  const element3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element1.append(element3);
+  const element4 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  element1.append(element4);
+  element0.append(element1);
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiIconButton.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiIconButtonEventMap {
+}
+export interface UiIconButtonElement extends HTMLButtonElement {
+  addEventListener<K extends keyof UiIconButtonEventMap>(type: K, listener: (this: UiIconButtonElement, event: UiIconButtonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiIconButtonEventMap>(type: K, listener: (this: UiIconButtonElement, event: UiIconButtonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiIconButtonProps {
+  anticipatory?: boolean | null;
+  disabled?: boolean | null;
+  label?: string | null;
+  round?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
+  variant?: "ghost" | "outline" | "solid" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiIconButton(props?: UiIconButtonProps): UiIconButtonElement;

package/vanilla/UiIconButton.js

@@ -0,0 +1,37 @@
+// 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-icon-button/ui-icon-button.js";
+import "../styles/ui-icon-button.css";
+
+const definition = {...{"contract":{"tag":"ui-icon-button","props":{"anticipatory":{"type":"boolean","required":false,"target":{"attribute":"anticipatory"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"}},"round":{"type":"boolean","required":false,"target":{"attribute":"round"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"variant":{"type":{"enum":["ghost","outline","solid"]},"required":false,"target":{"attribute":"variant"},"default":"ghost"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+
+export function createUiIconButton(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("button");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  if (!element.hasAttribute("type")) element.setAttribute("type", "button");
+  const value1 = componentProps["label"] === undefined ? undefined : componentProps["label"];
+  if (value1 === null || value1 === undefined) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value1));
+  element.setAttribute("data-component", "ui-icon-button");
+  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 {
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiInput.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiInputEventMap {
+}
+export interface UiInputElement extends HTMLInputElement {
+  addEventListener<K extends keyof UiInputEventMap>(type: K, listener: (this: UiInputElement, event: UiInputEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiInputEventMap>(type: K, listener: (this: UiInputElement, event: UiInputEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiInputProps {
+  disabled?: boolean | null;
+  invalid?: boolean | null;
+  readonly?: 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 createUiInput(props?: UiInputProps): UiInputElement;

package/vanilla/UiInput.js

@@ -0,0 +1,37 @@
+// 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-input/ui-input.js";
+import "../styles/ui-input.css";
+
+const definition = {...{"contract":{"tag":"ui-input","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"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"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"input","choices":["input"]}},source:{file:import.meta.url},css:""};
+
+export function createUiInput(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("input");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["value"] === undefined ? undefined : componentProps["value"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("value");
+  else element.setAttribute("value", String(value0));
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value2 = componentProps["readonly"] === undefined ? false : componentProps["readonly"];
+  if (value2 === true) element.setAttribute("readonly", "");
+  else element.removeAttribute("readonly");
+  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value3 === true) element.setAttribute("required", "");
+  else element.removeAttribute("required");
+  const value4 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value4 === "boolean") element.setAttribute("aria-invalid", String(value4));
+  else element.removeAttribute("aria-invalid");
+  element.setAttribute("data-component", "ui-input");
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiMenu.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiMenuEventMap {
+  select: CustomEvent<{ readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiMenuElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiMenuEventMap>(type: K, listener: (this: UiMenuElement, event: UiMenuEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiMenuEventMap>(type: K, listener: (this: UiMenuElement, event: UiMenuEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiMenuProps {
+  for?: string | null;
+  open?: boolean | null;
+  placement?: 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 createUiMenu(props?: UiMenuProps): UiMenuElement;

package/vanilla/UiMenu.js

@@ -0,0 +1,35 @@
+// 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-menu/ui-menu.js";
+import "../styles/ui-menu.css";
+
+const definition = {...{"contract":{"tag":"ui-menu","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiMenu(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", "menu");
+  if (!element.hasAttribute("aria-orientation")) element.setAttribute("aria-orientation", "vertical");
+  element.setAttribute("data-component", "ui-menu");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "surface");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiMenuItem.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiMenuItemEventMap {
+}
+export interface UiMenuItemElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiMenuItemEventMap>(type: K, listener: (this: UiMenuItemElement, event: UiMenuItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiMenuItemEventMap>(type: K, listener: (this: UiMenuItemElement, event: UiMenuItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiMenuItemProps {
+  disabled?: 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 createUiMenuItem(props?: UiMenuItemProps): UiMenuItemElement;

package/vanilla/UiMenuItem.js

@@ -0,0 +1,43 @@
+// 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-menu-item.css";
+
+export function createUiMenuItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  const prop1 = componentProps["value"] === undefined ? "" : componentProps["value"];
+  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", "menuitem");
+  if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
+  const value0 = prop0;
+  if (typeof value0 === "boolean") element.setAttribute("aria-disabled", String(value0));
+  else element.removeAttribute("aria-disabled");
+  const value1 = prop1;
+  if (value1 === null || value1 === undefined) element.removeAttribute("data-value");
+  else element.setAttribute("data-value", String(value1));
+  element.setAttribute("data-component", "ui-menu-item");
+  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: "disabled", attribute: "data-disabled", value: componentProps["disabled"], default: false, type: "boolean", required: false },
+    { name: "value", attribute: "data-value", value: componentProps["value"], default: "", bound: true, type: "string", required: false },
+  ], (name, value) => {
+    if (name === "disabled") {
+      if (value === null || value === undefined) element.removeAttribute("aria-disabled");
+      else element.setAttribute("aria-disabled", String(value));
+    }
+  });
+  return element;
+}
+

package/vanilla/UiPopover.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiPopoverEventMap {
+  open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiPopoverElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiPopoverEventMap>(type: K, listener: (this: UiPopoverElement, event: UiPopoverEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiPopoverEventMap>(type: K, listener: (this: UiPopoverElement, event: UiPopoverEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiPopoverProps {
+  for?: string | null;
+  open?: boolean | null;
+  placement?: 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 createUiPopover(props?: UiPopoverProps): UiPopoverElement;

package/vanilla/UiPopover.js

@@ -0,0 +1,33 @@
+// 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-popover/ui-popover.js";
+import "../styles/ui-popover.css";
+
+const definition = {...{"contract":{"tag":"ui-popover","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiPopover(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("span");
+  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-popover");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "surface");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiRadio.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiRadioEventMap {
+  change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiRadioElement extends HTMLLabelElement {
+  addEventListener<K extends keyof UiRadioEventMap>(type: K, listener: (this: UiRadioElement, event: UiRadioEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiRadioEventMap>(type: K, listener: (this: UiRadioElement, event: UiRadioEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiRadioProps {
+  checked?: boolean | null;
+  disabled?: boolean | null;
+  name?: string | 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 createUiRadio(props?: UiRadioProps): UiRadioElement;