@threadlabs/looma 0.4.0 → 0.5.0

package/vanilla/UiRadio.js

@@ -0,0 +1,48 @@
+// 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-radio/ui-radio.js";
+import "../styles/ui-radio.css";
+
+const definition = {...{"contract":{"tag":"ui-radio","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"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":"radio"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"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"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}}],"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 createUiRadio(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-radio");
+  const element0 = document.createElement("input");
+  element0.setAttribute("type", "radio");
+  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value0 === true) element0.setAttribute("disabled", "");
+  else element0.removeAttribute("disabled");
+  const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value1 === true) element0.setAttribute("required", "");
+  else element0.removeAttribute("required");
+  const value2 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value2 === null || value2 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value2));
+  const value3 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value3 === null || value3 === undefined) element0.removeAttribute("name");
+  else element0.setAttribute("name", 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/UiRadioGroup.d.ts

@@ -0,0 +1,21 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiRadioGroupEventMap {
+  select: CustomEvent<{ readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiRadioGroupElement extends HTMLFieldSetElement {
+  addEventListener<K extends keyof UiRadioGroupEventMap>(type: K, listener: (this: UiRadioGroupElement, event: UiRadioGroupEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiRadioGroupEventMap>(type: K, listener: (this: UiRadioGroupElement, event: UiRadioGroupEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiRadioGroupProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  name?: string | null;
+  orientation?: "horizontal" | "vertical" | 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 createUiRadioGroup(props?: UiRadioGroupProps): UiRadioGroupElement;

package/vanilla/UiRadioGroup.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-radio-group/ui-radio-group.js";
+import "../styles/ui-radio-group.css";
+
+const definition = {...{"contract":{"tag":"ui-radio-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Options"},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"orientation"},"default":"horizontal"},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"}],"children":[{"kind":"element","name":"legend","attributes":[],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}]},{"kind":"slot"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"fieldset","choices":["fieldset"]}},source:{file:import.meta.url},css:""};
+
+export function createUiRadioGroup(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("fieldset");
+  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", "radiogroup");
+  element.setAttribute("data-component", "ui-radio-group");
+  const element0 = document.createElement("legend");
+  const element1 = document.createElement("template");
+  element0.append(element1);
+  element.append(element0);
+  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/UiReel.d.ts

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

package/vanilla/UiReel.js

@@ -0,0 +1,34 @@
+// 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-reel.css";
+
+export function createUiReel(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
+  const prop1 = componentProps["itemWidth"] === undefined ? undefined : componentProps["itemWidth"];
+  const prop2 = componentProps["snap"] === undefined ? undefined : componentProps["snap"];
+  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", "region");
+  if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "0");
+  element.setAttribute("data-component", "ui-reel");
+  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: "itemWidth", attribute: "data-item-width", value: componentProps["itemWidth"], type: ["sm","md","lg"], required: false },
+    { name: "snap", attribute: "data-snap", value: componentProps["snap"], type: ["start","center"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiSearchResultRow.d.ts

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

package/vanilla/UiSearchResultRow.js

@@ -0,0 +1,82 @@
+// 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-search-result-row.css";
+
+const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"selected"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"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":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+
+export function createUiSearchResultRow(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["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  element.setAttribute("data-component", "ui-search-result-row");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "content");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "title");
+  if (slots["title"] ?? [].length > 0) {
+    for (const child of slots["title"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "title"]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "meta");
+  if (slots["meta"] ?? [].length > 0) {
+    for (const child of slots["meta"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "meta"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element1.append(element3);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "excerpt");
+  if (slots["excerpt"] ?? [].length > 0) {
+    for (const child of slots["excerpt"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "excerpt"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element1.append(element4);
+  element.append(element1);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "trailing");
+  if (slots["trailing"] ?? [].length > 0) {
+    for (const child of slots["trailing"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "trailing"]);
+      element5.append(node);
+    }
+  } else {
+  }
+  element.append(element5);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiSearchShell.d.ts

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

package/vanilla/UiSearchShell.js

@@ -0,0 +1,74 @@
+// 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-search-shell/ui-search-shell.js";
+import "../styles/ui-search-shell.css";
+
+const definition = {...{"contract":{"tag":"ui-search-shell","props":{"dismissible":{"type":"boolean","required":false,"target":{"attribute":"dismissible"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Search"},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"search"}],"children":[{"kind":"slot","fallback":[],"name":"search"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"status"}],"children":[{"kind":"slot","fallback":[],"name":"status"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot","fallback":[],"name":"body"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"footer"}],"children":[{"kind":"slot","fallback":[],"name":"footer"}]}]}],"ref":"dialog"}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"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 createUiSearchShell(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-search-shell");
+  const element0 = document.createElement("dialog");
+  const value0 = componentProps["label"] === undefined ? "Search" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element0.removeAttribute("aria-label");
+  else element0.setAttribute("aria-label", String(value0));
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "panel");
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "search");
+  if (slots["search"] ?? [].length > 0) {
+    for (const child of slots["search"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "search"]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("div");
+  element3.setAttribute("class", "status");
+  if (slots["status"] ?? [].length > 0) {
+    for (const child of slots["status"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "status"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element1.append(element3);
+  const element4 = document.createElement("div");
+  element4.setAttribute("class", "body");
+  if (slots["body"] ?? [].length > 0) {
+    for (const child of slots["body"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "body"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element1.append(element4);
+  const element5 = document.createElement("div");
+  element5.setAttribute("class", "footer");
+  if (slots["footer"] ?? [].length > 0) {
+    for (const child of slots["footer"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "footer"]);
+      element5.append(node);
+    }
+  } else {
+  }
+  element1.append(element5);
+  element0.append(element1);
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiSelect.d.ts

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

package/vanilla/UiSelect.js

@@ -0,0 +1,42 @@
+// 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-select/ui-select.js";
+import "../styles/ui-select.css";
+
+const definition = {...{"contract":{"tag":"ui-select","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"multiple":{"type":"boolean","required":false,"target":{"attribute":"multiple"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"select","attributes":[{"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":"multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
+
+export function createUiSelect(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("select");
+  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");
+  const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value1 === true) element.setAttribute("required", "");
+  else element.removeAttribute("required");
+  const value2 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
+  if (value2 === true) element.setAttribute("multiple", "");
+  else element.removeAttribute("multiple");
+  const value3 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value3 === "boolean") element.setAttribute("aria-invalid", String(value3));
+  else element.removeAttribute("aria-invalid");
+  element.setAttribute("data-component", "ui-select");
+  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/UiSeparator.d.ts

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

package/vanilla/UiSeparator.js

@@ -0,0 +1,28 @@
+// 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-separator.css";
+
+export function createUiSeparator(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
+  const element = document.createElement("hr");
+  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 = prop0;
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-orientation");
+  else element.setAttribute("aria-orientation", String(value0));
+  element.setAttribute("data-component", "ui-separator");
+  manageGeneratedProps(element, [
+    { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "horizontal", type: ["horizontal","vertical"], required: false },
+  ], (name, value) => {
+    if (name === "orientation") {
+      if (value === null || value === undefined) element.removeAttribute("aria-orientation");
+      else element.setAttribute("aria-orientation", String(value));
+    }
+  });
+  return element;
+}
+

package/vanilla/UiSidebar.d.ts

@@ -0,0 +1,24 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+export interface UiSidebarEventMap {
+  resize: CustomEvent<{ readonly width: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  toggle: CustomEvent<{ readonly open: boolean; readonly mode: "docked" | "drawer"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiSidebarElement extends HTMLElement {
+  addEventListener<K extends keyof UiSidebarEventMap>(type: K, listener: (this: UiSidebarElement, event: UiSidebarEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSidebarEventMap>(type: K, listener: (this: UiSidebarElement, event: UiSidebarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSidebarProps {
+  breakpoint?: "sm" | "md" | "lg" | null;
+  collapsed?: boolean | null;
+  maxWidth?: number | null;
+  minWidth?: number | null;
+  resizable?: boolean | null;
+  resizeLabel?: string | null;
+  resizeStep?: number | null;
+  side?: "start" | "end" | null;
+  width?: number | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSidebar(props?: UiSidebarProps): UiSidebarElement;

package/vanilla/UiSidebar.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-sidebar/ui-sidebar.js";
+import "../styles/ui-sidebar.css";
+
+const definition = {...{"contract":{"tag":"ui-sidebar","props":{"breakpoint":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"breakpoint"},"default":"md"},"collapsed":{"type":"boolean","required":false,"target":{"attribute":"collapsed"},"default":false},"maxWidth":{"type":"number","required":false,"target":{"attribute":"maxwidth"},"default":480},"minWidth":{"type":"number","required":false,"target":{"attribute":"minwidth"},"default":200},"resizable":{"type":"boolean","required":false,"target":{"attribute":"resizable"},"default":false},"resizeLabel":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Resize sidebar"},"resizeStep":{"type":"number","required":false,"target":{"attribute":"resizestep"},"default":16},"side":{"type":{"enum":["start","end"]},"required":false,"target":{"attribute":"side"},"default":"start"},"width":{"type":"number","required":false,"target":{"attribute":"width"},"default":0}}},"template":{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"resizer"},{"kind":"literal","name":"role","value":"separator"},{"kind":"literal","name":"aria-orientation","value":"vertical"},{"kind":"literal","name":"tabindex","value":"0"},{"kind":"literal","name":"data-ui-affordance","value":"resize"},{"kind":"attribute","name":"aria-label","expression":"resizeLabel","expressionPlan":{"source":"resizeLabel","ast":{"kind":"id","name":"resizeLabel"},"dependencies":["resizeLabel"]}},{"kind":"attribute","name":"hidden","expression":"not resizable or drawer or internalCollapsed","expressionPlan":{"source":"not resizable or drawer or internalCollapsed","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"unary","op":"not","operand":{"kind":"id","name":"resizable"}},"right":{"kind":"id","name":"drawer"}},"right":{"kind":"id","name":"internalCollapsed"}},"dependencies":["drawer","internalCollapsed","resizable"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"resizer"}]},"declarations":[{"kind":"state","name":"internalCollapsed","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"drawer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"resize","type":"object({ width: number, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"toggle","type":"object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"aside","choices":["aside"]}},source:{file:import.meta.url},css:""};
+
+export function createUiSidebar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("aside");
+  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-sidebar");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "content");
+  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);
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "resizer");
+  element1.setAttribute("role", "separator");
+  element1.setAttribute("aria-orientation", "vertical");
+  element1.setAttribute("tabindex", "0");
+  element1.setAttribute("data-ui-affordance", "resize");
+  const value0 = componentProps["resizeLabel"] === undefined ? "Resize sidebar" : componentProps["resizeLabel"];
+  if (value0 === null || value0 === undefined) element1.removeAttribute("aria-label");
+  else element1.setAttribute("aria-label", String(value0));
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "guide");
+  element2.setAttribute("aria-hidden", "true");
+  element1.append(element2);
+  element.append(element1);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiStack.d.ts

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

package/vanilla/UiStack.js

@@ -0,0 +1,32 @@
+// 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-stack.css";
+
+export function createUiStack(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 prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
+  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-stack");
+  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 },
+    { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
+  ]);
+  return element;
+}
+