@threadlabs/looma 0.13.1 → 0.13.3

package/vanilla/UiAvatar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// 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-avatar/ui-avatar.js";
 import "../styles/ui-avatar.css";
@@ -6,7 +6,7 @@ import "../styles/ui-avatar.css";
 const definition = {...{"contract":{"tag":"ui-avatar","props":{"active":{"type":"boolean","required":false,"target":{"attribute":"active"},"default":false},"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"src":{"type":"string","required":false,"target":{"attribute":"src"}}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"},{"kind":"element","name":"img","attributes":[{"kind":"literal","name":"class","value":"image"},{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"literal","name":"alt","value":""},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"attribute","name":"hidden","expression":"hasAuthoredImage or not hasImage","expressionPlan":{"source":"hasAuthoredImage or not hasImage","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"hasAuthoredImage"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasImage"}}},"dependencies":["hasAuthoredImage","hasImage"]}}],"children":[],"ref":"image"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"aria-hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"attribute","name":"hidden","expression":"hasImage","expressionPlan":{"source":"hasImage","ast":{"kind":"id","name":"hasImage"},"dependencies":["hasImage"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]}]},"declarations":[{"kind":"state","name":"hasImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"hasAuthoredImage","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"initials","expression":{"source":"'?'","ast":{"kind":"literal","value":"?"},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatar(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const element = document.createElement("span");
   for (const [name, value] of Object.entries(attributes)) {

package/vanilla/UiAvatarGroup.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiAvatarGroupEventMap {
 }
 export interface UiAvatarGroupElement extends HTMLDivElement {

package/vanilla/UiAvatarGroup.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// 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-avatar-group/ui-avatar-group.js";
 import "../styles/ui-avatar-group.css";
@@ -6,7 +6,7 @@ import "../styles/ui-avatar-group.css";
 const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"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":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s more', overflowCount)","expressionPlan":{"source":"format('%s more', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s more"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatarGroup(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {

package/vanilla/UiBadge.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiBadgeEventMap {
 }
 export interface UiBadgeElement extends HTMLSpanElement {

package/vanilla/UiBadge.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-badge.css";
 
 export function createUiBadge(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const prop0 = componentProps["shape"] === undefined ? "pill" : componentProps["shape"];
   const prop1 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];

package/vanilla/UiBreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiBreadcrumbItemEventMap {
 }
 export interface UiBreadcrumbItemElement extends HTMLLIElement {

package/vanilla/UiBreadcrumbItem.js

@@ -1,11 +1,11 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// 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-breadcrumb-item.css";
 
 const definition = {...{"contract":{"tag":"ui-breadcrumb-item","props":{"current":{"type":"boolean","required":false,"target":{"attribute":"current"},"default":false}}},"template":{"kind":"element","name":"li","attributes":[{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"separator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-right"}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"li","choices":["li"]}},source:{file:import.meta.url},css:""};
 
 export function createUiBreadcrumbItem(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const element = document.createElement("li");
   for (const [name, value] of Object.entries(attributes)) {

package/vanilla/UiBreadcrumbs.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiBreadcrumbsEventMap {
 }
 export interface UiBreadcrumbsElement extends HTMLElement {

package/vanilla/UiBreadcrumbs.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-breadcrumbs.css";
 
 export function createUiBreadcrumbs(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const prop0 = componentProps["label"] === undefined ? "Breadcrumb" : componentProps["label"];
   const element = document.createElement("nav");

package/vanilla/UiButton.d.ts

@@ -1,12 +1,13 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiButtonEventMap {
 }
-export interface UiButtonElement extends HTMLButtonElement {
+export interface UiButtonElement extends HTMLElement {
   addEventListener<K extends keyof UiButtonEventMap>(type: K, listener: (this: UiButtonElement, event: UiButtonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
   removeEventListener<K extends keyof UiButtonEventMap>(type: K, listener: (this: UiButtonElement, event: UiButtonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiButtonProps {
   align?: "center" | "start" | null;
+  as?: "button" | "a" | null;
   disabled?: boolean | null;
   href?: string | null;
   rel?: string | null;
@@ -19,6 +20,5 @@ export interface UiButtonProps {
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;
-  as?: "button" | "a";
 }
 export declare function createUiButton(props?: UiButtonProps): UiButtonElement;

package/vanilla/UiButton.js

@@ -1,31 +1,56 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-button.css";
 
-const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"{ true: type, false: null }[format('%s', not href)]","expressionPlan":{"source":"{ true: type, false: null }[format('%s', not href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"type"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"unary","op":"not","operand":{"kind":"id","name":"href"}}]}},"dependencies":["href","type"]}},{"kind":"attribute","name":"disabled","expression":"{ true: true, false: null }[format('%s', disabled and not href)]","expressionPlan":{"source":"{ true: true, false: null }[format('%s', disabled and not href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":true}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"disabled"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"href"}}}]}},"dependencies":["disabled","href"]}},{"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"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled and href)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled and href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"href"}}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button","a"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"as":{"type":{"enum":["button","a"]},"required":false,"target":{"attribute":"as"},"default":"button"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"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"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled and href)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled and href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"href"}}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"type","expressionPlan":{"source":"type","ast":{"kind":"id","name":"type"},"dependencies":["type"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiButton(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const element = document.createElement(as ?? "button");
-  for (const [name, value] of Object.entries(attributes)) {
-    if (value === null || value === undefined || value === false) continue;
-    element.setAttribute(name, value === true ? "" : String(value));
-  }
-  const value0 = componentProps["target"] === undefined ? undefined : componentProps["target"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("target");
-  else element.setAttribute("target", String(value0));
-  const value1 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
-  if (value1 === null || value1 === undefined) element.removeAttribute("rel");
-  else element.setAttribute("rel", String(value1));
-  element.setAttribute("data-component", "ui-button");
-  if (children.length > 0) {
-    for (const child of children) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      projected.push([node, ""]);
-      element.append(node);
+  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));
+    }
+    const value0 = componentProps["target"] === undefined ? undefined : componentProps["target"];
+    if (value0 === null || value0 === undefined) element.removeAttribute("target");
+    else element.setAttribute("target", String(value0));
+    const value1 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
+    if (value1 === null || value1 === undefined) element.removeAttribute("rel");
+    else element.setAttribute("rel", String(value1));
+    element.setAttribute("data-component", "ui-button");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
     }
   } else {
+    element = document.createElement("button");
+    for (const [name, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || value === false) continue;
+      element.setAttribute(name, value === true ? "" : String(value));
+    }
+    const value2 = componentProps["type"] === undefined ? "button" : componentProps["type"];
+    if (value2 === null || value2 === undefined) element.removeAttribute("type");
+    else element.setAttribute("type", String(value2));
+    const value3 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+    if (value3 === true) element.setAttribute("disabled", "");
+    else element.removeAttribute("disabled");
+    element.setAttribute("data-component", "ui-button");
+    if (children.length > 0) {
+      for (const child of children) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        projected.push([node, ""]);
+        element.append(node);
+      }
+    } else {
+    }
   }
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
   });

package/vanilla/UiCallout.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiCalloutEventMap {
 }
 export interface UiCalloutElement extends HTMLDivElement {

package/vanilla/UiCallout.js

@@ -1,11 +1,11 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// 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-callout.css";
 
 const definition = {...{"contract":{"tag":"ui-callout","props":{"tone":{"type":{"enum":["info","note","warning","success","danger"]},"required":false,"target":{"attribute":"tone"},"default":"info"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"note"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 16v-4"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 8h.01"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'info'","testPlan":{"source":"tone = 'info'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"info"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M13 2v7h7"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'note'","testPlan":{"source":"tone = 'note'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"note"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 9v4"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 17h.01"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'warning'","testPlan":{"source":"tone = 'warning'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"warning"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9 12 2 2 4-4"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'success'","testPlan":{"source":"tone = 'success'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"success"}},"dependencies":["tone"]}}},{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m15 9-6 6"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m9 9 6 6"}],"children":[]}],"flow":{"kind":"if","test":"tone = 'danger'","testPlan":{"source":"tone = 'danger'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"danger"}},"dependencies":["tone"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCallout(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {

package/vanilla/UiCard.d.ts

@@ -1,17 +1,17 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiCardEventMap {
 }
-export interface UiCardElement extends HTMLDivElement {
+export interface UiCardElement extends HTMLElement {
   addEventListener<K extends keyof UiCardEventMap>(type: K, listener: (this: UiCardElement, event: UiCardEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
   removeEventListener<K extends keyof UiCardEventMap>(type: K, listener: (this: UiCardElement, event: UiCardEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiCardProps {
+  as?: "div" | "section" | "article" | "aside" | null;
   padding?: "sm" | "md" | "lg" | null;
   tone?: "neutral" | "danger" | null;
   variant?: "outlined" | "subtle" | "elevated" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;
-  as?: "div" | "section" | "article" | "aside";
 }
 export declare function createUiCard(props?: UiCardProps): UiCardElement;

package/vanilla/UiCard.js

@@ -1,32 +1,77 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-card.css";
 
+const definition = {...{"contract":{"tag":"ui-card","props":{"as":{"type":{"enum":["div","section","article","aside"]},"required":false,"target":{"attribute":"as"},"default":"div"},"padding":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"padding"},"default":"md"},"tone":{"type":{"enum":["neutral","danger"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"enum":["outlined","subtle","elevated"]},"required":false,"target":{"attribute":"variant"},"default":"outlined"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"section","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'section'","testPlan":{"source":"as = 'section'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"section"}},"dependencies":["as"]}}},{"kind":"element","name":"article","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'article'","testPlan":{"source":"as = 'article'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"article"}},"dependencies":["as"]}}},{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'aside'","testPlan":{"source":"as = 'aside'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"aside"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"div","choices":["section","article","aside","div"]}},source:{file:import.meta.url},css:""};
+
 export function createUiCard(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["padding"] === undefined ? "md" : componentProps["padding"];
-  const prop1 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
-  const prop2 = componentProps["variant"] === undefined ? "outlined" : componentProps["variant"];
-  const element = document.createElement(as ?? "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-card");
-  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("section");
+    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-card");
+    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 {
+    }
+  } else if (root === 1) {
+    element = document.createElement("article");
+    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-card");
+    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 {
+    }
+  } else if (root === 2) {
+    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-card");
+    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 {
     }
   } else {
+    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-card");
+    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: "padding", attribute: "data-padding", value: componentProps["padding"], default: "md", type: ["sm","md","lg"], required: false },
-    { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","danger"], required: false },
-    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "outlined", type: ["outlined","subtle","elevated"], required: false },
-  ]);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
   return element;
 }
 

package/vanilla/UiCheckbox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiCheckboxEventMap {
   change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiCheckbox.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// 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-checkbox/ui-checkbox.js";
 import "../styles/ui-checkbox.css";
@@ -6,7 +6,7 @@ import "../styles/ui-checkbox.css";
 const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"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":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"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":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCheckbox(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const element = document.createElement("label");
   for (const [name, value] of Object.entries(attributes)) {

package/vanilla/UiCluster.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiClusterEventMap {
 }
 export interface UiClusterElement extends HTMLDivElement {

package/vanilla/UiCluster.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-cluster.css";
 
 export function createUiCluster(options = {}) {
-  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = 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"];

package/vanilla/UiCombobox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiComboboxEventMap {
   "query-change": CustomEvent<{ readonly query: string; readonly display: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "value-change": CustomEvent<{ readonly value: string | null; readonly query: string; readonly option: { readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" } | readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean })[]>;