@threadlabs/looma 0.14.8 → 0.15.0

package/vanilla/UiListbox.d.ts

@@ -0,0 +1,20 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+export interface UiListboxEventMap {
+}
+export interface UiListboxElement extends HTMLSelectElement {
+  addEventListener<K extends keyof UiListboxEventMap>(type: K, listener: (this: UiListboxElement, event: UiListboxEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiListboxEventMap>(type: K, listener: (this: UiListboxElement, event: UiListboxEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiListboxProps {
+  disabled?: boolean | null;
+  invalid?: boolean | null;
+  multiple?: boolean | null;
+  required?: boolean | null;
+  rows?: number | null;
+  value?: string | null;
+  values?: readonly (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 createUiListbox(props?: UiListboxProps): UiListboxElement;

package/vanilla/UiListbox.js

@@ -0,0 +1,45 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-listbox/ui-listbox.js";
+import "../styles/ui-listbox.css";
+
+const definition = {...{"contract":{"tag":"ui-listbox","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},"rows":{"type":"number","required":false,"target":{"attribute":"size"},"default":5},"value":{"type":"string","required":false,"target":{"attribute":"value"}},"values":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"values"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"size","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"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":"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 createUiListbox(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...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["rows"] === undefined ? 5 : componentProps["rows"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("size");
+  else element.setAttribute("size", String(value0));
+  const value1 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
+  if (value1 === true) element.setAttribute("multiple", "");
+  else element.removeAttribute("multiple");
+  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value2 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  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-listbox");
+  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/UiMenu.d.ts

@@ -1,6 +1,6 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiMenuEventMap {
-  select: CustomEvent<{ readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  select: CustomEvent<{ readonly value: string; readonly checked?: boolean; 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" }>;
 }

package/vanilla/UiMenu.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-menu/ui-menu.js";
 import "../styles/ui-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"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:""};
+const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"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, checked?: boolean, 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 = {}, ...componentProps } = options;

package/vanilla/UiMenuGroup.d.ts

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

package/vanilla/UiMenuGroup.js

@@ -0,0 +1,35 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-menu-group.css";
+
+const definition = {...{"contract":{"tag":"ui-menu-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"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":"heading"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiMenuGroup(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...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", "group");
+  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value0));
+  element.setAttribute("data-component", "ui-menu-group");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "heading");
+  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,
+  });
+  return element;
+}
+

package/vanilla/UiMenuItem.d.ts

@@ -1,12 +1,16 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiMenuItemEventMap {
+  change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly type: "checkbox" | "radio"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }
-export interface UiMenuItemElement extends HTMLDivElement {
+export interface UiMenuItemElement extends HTMLElement {
   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 {
+  checked?: boolean | null;
   disabled?: boolean | null;
+  href?: string | null;
+  type?: "action" | "checkbox" | "radio" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiMenuItem.js

@@ -1,42 +1,103 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-menu-item/ui-menu-item.js";
 import "../styles/ui-menu-item.css";
 
+const definition = {...{"contract":{"tag":"ui-menu-item","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"},"default":""},"type":{"type":{"enum":["action","checkbox","radio"]},"required":false,"target":{"attribute":"type"},"default":"action"},"value":{"type":"string","required":false,"target":{"attribute":"data-value"},"default":""}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"literal","name":"role","value":"menuitem"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"disabled"}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"when","test":"href and type = 'action'","testPlan":{"source":"href and type = 'action'","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"href"},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"action"}}},"dependencies":["href","type"]}}},{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","expressionPlan":{"source":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":"menuitem"}},{"key":"checkbox","value":{"kind":"literal","value":"menuitemcheckbox"}},{"key":"radio","value":{"kind":"literal","value":"menuitemradio"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["type"]}},{"kind":"attribute","name":"aria-checked","expression":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","expressionPlan":{"source":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":null}},{"key":"checkbox","value":{"kind":"id","name":"internalChecked"}},{"key":"radio","value":{"kind":"id","name":"internalChecked"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["internalChecked","type"]}},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"check"}],"children":[],"flow":{"kind":"if","test":"type = 'checkbox' and internalChecked","testPlan":{"source":"type = 'checkbox' and internalChecked","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"checkbox"}},"right":{"kind":"id","name":"internalChecked"}},"dependencies":["internalChecked","type"]}}},{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"circle-dot"}],"children":[],"flow":{"kind":"if","test":"type = 'radio' and internalChecked","testPlan":{"source":"type = 'radio' and internalChecked","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"radio"}},"right":{"kind":"id","name":"internalChecked"}},"dependencies":["internalChecked","type"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, type: checkbox | radio, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["a","div"]}},source:{file:import.meta.url},css:""};
+
 export function createUiMenuItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...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);
+  const root = componentRootIndex(definition, componentProps);
+  let element;
+  if (root === 0) {
+    element = document.createElement("a");
+    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 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+    if (typeof value0 === "boolean") element.setAttribute("aria-disabled", String(value0));
+    else element.removeAttribute("aria-disabled");
+    const value1 = componentProps["value"] === undefined ? "" : componentProps["value"];
+    if (value1 === null || value1 === undefined) element.removeAttribute("data-value");
+    else element.setAttribute("data-value", String(value1));
+    element.setAttribute("data-component", "ui-menu-item");
+    const element0 = document.createElement("span");
+    element0.setAttribute("class", "label");
+    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("span");
+    element1.setAttribute("class", "shortcut");
+    element1.setAttribute("aria-hidden", "true");
+    if (slots["shortcut"] ?? [].length > 0) {
+      for (const child of slots["shortcut"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, "shortcut"]);
+        element1.append(node);
+      }
+    } else {
     }
+    element.append(element1);
   } 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));
+    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("tabindex")) element.setAttribute("tabindex", "-1");
+    const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+    if (typeof value2 === "boolean") element.setAttribute("aria-disabled", String(value2));
+    else element.removeAttribute("aria-disabled");
+    const value3 = componentProps["value"] === undefined ? "" : componentProps["value"];
+    if (value3 === null || value3 === undefined) element.removeAttribute("data-value");
+    else element.setAttribute("data-value", String(value3));
+    element.setAttribute("data-component", "ui-menu-item");
+    const element2 = document.createElement("span");
+    element2.setAttribute("class", "indicator");
+    element2.setAttribute("aria-hidden", "true");
+    const element3 = document.createElement("ui-icon");
+    element3.setAttribute("name", "check");
+    element2.append(element3);
+    const element4 = document.createElement("ui-icon");
+    element4.setAttribute("name", "circle-dot");
+    element2.append(element4);
+    element.append(element2);
+    const element5 = document.createElement("span");
+    element5.setAttribute("class", "label");
+    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 {
     }
+    element.append(element5);
+    const element6 = document.createElement("span");
+    element6.setAttribute("class", "shortcut");
+    element6.setAttribute("aria-hidden", "true");
+    if (slots["shortcut"] ?? [].length > 0) {
+      for (const child of slots["shortcut"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, "shortcut"]);
+        element6.append(node);
+      }
+    } else {
+    }
+    element.append(element6);
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
   });
   return element;
 }

package/vanilla/UiPopover.d.ts

@@ -10,7 +10,7 @@ export interface UiPopoverElement extends HTMLSpanElement {
 export interface UiPopoverProps {
   for?: string | null;
   open?: boolean | null;
-  placement?: string | null;
+  placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiPopover.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/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:""};
+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":{"enum":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"]},"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 = {}, ...componentProps } = options;

package/vanilla/UiRadioGroup.d.ts

@@ -9,6 +9,7 @@ export interface UiRadioGroupElement extends HTMLFieldSetElement {
 }
 export interface UiRadioGroupProps {
   disabled?: boolean | null;
+  invalid?: boolean | null;
   label?: string | null;
   name?: string | null;
   orientation?: "horizontal" | "vertical" | null;

package/vanilla/UiRadioGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/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":"aria-required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"},{"kind":"attribute","name":"aria-required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"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:""};
+const definition = {...{"contract":{"tag":"ui-radio-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"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":"aria-required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"},{"kind":"attribute","name":"aria-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"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"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 = {}, ...componentProps } = options;
@@ -17,8 +17,11 @@ export function createUiRadioGroup(options = {}) {
   const value0 = componentProps["required"] === undefined ? false : componentProps["required"];
   if (typeof value0 === "boolean") element.setAttribute("aria-required", String(value0));
   else element.removeAttribute("aria-required");
-  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value1 === true) element.setAttribute("disabled", "");
+  const value1 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value1 === "boolean") element.setAttribute("aria-invalid", String(value1));
+  else element.removeAttribute("aria-invalid");
+  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value2 === true) element.setAttribute("disabled", "");
   else element.removeAttribute("disabled");
   element.setAttribute("data-component", "ui-radio-group");
   const element0 = document.createElement("legend");

package/vanilla/UiSwitcher.d.ts

@@ -8,6 +8,7 @@ export interface UiSwitcherElement extends HTMLDivElement {
 export interface UiSwitcherProps {
   align?: "start" | "center" | "end" | "stretch" | null;
   gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  limit?: number | null;
   threshold?: "xs" | "sm" | "md" | "lg" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiSwitcher.js

@@ -1,13 +1,13 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-switcher/ui-switcher.js";
 import "../styles/ui-switcher.css";
 
+const definition = {...{"contract":{"tag":"ui-switcher","props":{"align":{"type":{"enum":["start","center","end","stretch"]},"required":false,"target":{"attribute":"align"}},"gap":{"type":{"enum":["xs","s","m","l","xl"]},"required":false,"target":{"attribute":"gap"}},"limit":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"limit"}},"threshold":{"type":{"enum":["xs","sm","md","lg"]},"required":false,"target":{"attribute":"threshold"}}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}]},"declarations":[{"kind":"state","name":"overLimit","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
 export function createUiSwitcher(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
-  const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
-  const prop2 = componentProps["threshold"] === undefined ? undefined : componentProps["threshold"];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -22,11 +22,9 @@ export function createUiSwitcher(options = {}) {
     }
   } 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: "threshold", attribute: "data-threshold", value: componentProps["threshold"], type: ["xs","sm","md","lg"], required: false },
-  ]);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
   return element;
 }
 

package/vanilla/UiTabs.d.ts

@@ -7,6 +7,7 @@ export interface UiTabsElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiTabsEventMap>(type: K, listener: (this: UiTabsElement, event: UiTabsEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiTabsProps {
+  activation?: "auto" | "manual" | null;
   density?: "comfortable" | "compact" | null;
   label?: string | null;
   orientation?: "horizontal" | "vertical" | null;

package/vanilla/UiTabs.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tabs/ui-tabs.js";
 import "../styles/ui-tabs.css";
 
-const definition = {...{"contract":{"tag":"ui-tabs","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Tabs"},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"aria-orientation"},"default":"horizontal"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"tablist"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-orientation","expression":"orientation","expressionPlan":{"source":"orientation","ast":{"kind":"id","name":"orientation"},"dependencies":["orientation"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"tab"},{"kind":"attribute","name":"id","expression":"format('%s-tab', tab.id)","expressionPlan":{"source":"format('%s-tab', tab.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-tab"},{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"}]},"dependencies":["tab.id"]}},{"kind":"attribute","name":"value","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-controls","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-selected","expression":"tab.id = internalValue","expressionPlan":{"source":"tab.id = internalValue","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"right":{"kind":"id","name":"internalValue"}},"dependencies":["internalValue","tab.id"]}},{"kind":"directive","name":"value","expression":"tab.label","expressionPlan":{"source":"tab.label","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"label"},"dependencies":["tab.label"]}}],"children":[],"flow":{"kind":"each","item":"tab","list":"tabs","listPlan":{"source":"tabs","ast":{"kind":"id","name":"tabs"},"dependencies":["tabs"]},"key":"tab.id","keyPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}}}],"ref":"list"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panels"}],"children":[{"kind":"slot"}],"ref":"panels"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"tabs","type":"list(object({ id: string, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tabs","props":{"activation":{"type":{"enum":["auto","manual"]},"required":false,"target":{"attribute":"activation"},"default":"auto"},"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Tabs"},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"aria-orientation"},"default":"horizontal"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"tablist"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-orientation","expression":"orientation","expressionPlan":{"source":"orientation","ast":{"kind":"id","name":"orientation"},"dependencies":["orientation"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"tab"},{"kind":"attribute","name":"id","expression":"format('%s-tab', tab.id)","expressionPlan":{"source":"format('%s-tab', tab.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-tab"},{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"}]},"dependencies":["tab.id"]}},{"kind":"attribute","name":"value","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-controls","expression":"tab.id","expressionPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}},{"kind":"attribute","name":"aria-selected","expression":"tab.id = internalValue","expressionPlan":{"source":"tab.id = internalValue","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"right":{"kind":"id","name":"internalValue"}},"dependencies":["internalValue","tab.id"]}},{"kind":"directive","name":"value","expression":"tab.label","expressionPlan":{"source":"tab.label","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"label"},"dependencies":["tab.label"]}}],"children":[],"flow":{"kind":"each","item":"tab","list":"tabs","listPlan":{"source":"tabs","ast":{"kind":"id","name":"tabs"},"dependencies":["tabs"]},"key":"tab.id","keyPlan":{"source":"tab.id","ast":{"kind":"member","object":{"kind":"id","name":"tab"},"key":"id"},"dependencies":["tab.id"]}}}],"name":"tab"}],"ref":"list"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panels"}],"children":[{"kind":"slot"}],"ref":"panels"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"tabs","type":"list(object({ id: string, label: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, 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 createUiTabs(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -23,10 +23,18 @@ export function createUiTabs(options = {}) {
   const value1 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
   if (value1 === null || value1 === undefined) element0.removeAttribute("aria-orientation");
   else element0.setAttribute("aria-orientation", String(value1));
+  if (slots["tab"] ?? [].length > 0) {
+    for (const child of slots["tab"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "tab"]);
+      element0.append(node);
+    }
+  } else {
   const element1 = document.createElement("button");
   element1.setAttribute("type", "button");
   element1.setAttribute("role", "tab");
   element0.append(element1);
+  }
   element.append(element0);
   const element2 = document.createElement("div");
   element2.setAttribute("class", "panels");

package/vanilla/UiTextarea.d.ts

@@ -6,6 +6,7 @@ export interface UiTextareaElement extends HTMLTextAreaElement {
   removeEventListener<K extends keyof UiTextareaEventMap>(type: K, listener: (this: UiTextareaElement, event: UiTextareaEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiTextareaProps {
+  autosize?: boolean | null;
   disabled?: boolean | null;
   invalid?: boolean | null;
   readonly?: boolean | null;

package/vanilla/UiTextarea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";
 
-const definition = {...{"contract":{"tag":"ui-textarea","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},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","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"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-textarea","props":{"autosize":{"type":"boolean","required":false,"target":{"attribute":"autosize"},"default":false},"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},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","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"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTextarea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -31,6 +31,9 @@ export function createUiTextarea(options = {}) {
   const value5 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
   if (value5 === null || value5 === undefined) element.removeAttribute("rows");
   else element.setAttribute("rows", String(value5));
+  const value6 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
+  if (value6 === null || value6 === undefined) element.removeAttribute("--_rows");
+  else element.setAttribute("--_rows", String(value6));
   element.setAttribute("data-component", "ui-textarea");
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,

package/vanilla/UiToast.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+export interface UiToastEventMap {
+  dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiToastElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiToastEventMap>(type: K, listener: (this: UiToastElement, event: UiToastEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiToastEventMap>(type: K, listener: (this: UiToastElement, event: UiToastEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiToastProps {
+  duration?: number | null;
+  tone?: "neutral" | "info" | "success" | "warning" | "danger" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiToast(props?: UiToastProps): UiToastElement;