@threadlabs/looma 0.19.1 → 0.20.0

package/vanilla/UiAffordanceScope.d.ts

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

package/vanilla/UiAffordanceScope.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-affordance-scope/ui-affordance-scope.js";
 import "../styles/ui-affordance-scope.css";
 
-const definition = {...{"contract":{"tag":"ui-affordance-scope","props":{"guide":{"type":{"enum":["dot","none"]},"required":false,"target":{"attribute":"guide"},"default":"dot"},"nearRadius":{"type":"number","required":false,"target":{"attribute":"nearradius"},"default":16}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}]},"declarations":[{"kind":"state","name":"engaged","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-affordance-scope","props":{"guide":{"type":{"kind":"terminal","name":"keyword"},"values":["dot","none"],"required":false,"target":{"attribute":"guide"},"default":"dot"},"nearRadius":{"type":"number","required":false,"target":{"attribute":"nearradius"},"default":16}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}]},"declarations":[{"kind":"state","name":"engaged","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAffordanceScope(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -17,6 +17,7 @@ export function createUiAffordanceScope(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element.append(node);
     }

package/vanilla/UiAvatar.d.ts

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

package/vanilla/UiAvatar.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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";
 
-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":""},"decorative":{"type":"boolean","required":false,"target":{"attribute":"decorative"},"default":false},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"shape":{"type":{"enum":["circle","square"]},"required":false,"target":{"attribute":"shape"},"default":"circle"},"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"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"showGlyph","expressionPlan":{"source":"showGlyph","ast":{"kind":"id","name":"showGlyph"},"dependencies":["showGlyph"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"not showGlyph","expressionPlan":{"source":"not showGlyph","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"showGlyph"}},"dependencies":["showGlyph"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"user-round"}],"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":[]}},{"kind":"state","name":"showGlyph","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},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":""},"decorative":{"type":"boolean","required":false,"target":{"attribute":"decorative"},"default":false},"fallback":{"type":"string","required":false,"target":{"attribute":"fallback"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"shape":{"type":{"kind":"terminal","name":"keyword"},"values":["circle","square"],"required":false,"target":{"attribute":"shape"},"default":"circle"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["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"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"showGlyph","expressionPlan":{"source":"showGlyph","ast":{"kind":"id","name":"showGlyph"},"dependencies":["showGlyph"]}},{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"hidden","expression":"not showGlyph","expressionPlan":{"source":"not showGlyph","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"showGlyph"}},"dependencies":["showGlyph"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"user-round"}],"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":[]}},{"kind":"state","name":"showGlyph","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatar(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -17,6 +17,7 @@ export function createUiAvatar(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element.append(node);
     }
@@ -24,7 +25,7 @@ export function createUiAvatar(options = {}) {
   }
   const element0 = document.createElement("img");
   element0.setAttribute("class", "image");
-  const value0 = componentProps["src"] === undefined ? undefined : componentProps["src"];
+  const value0 = componentProps["src"] === undefined ? null : componentProps["src"];
   if (value0 === null || value0 === undefined) element0.removeAttribute("src");
   else element0.setAttribute("src", String(value0));
   element0.setAttribute("alt", "");

package/vanilla/UiAvatarGroup.d.ts

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

package/vanilla/UiAvatarGroup.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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";
 
-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},"overflowLabel":{"type":"string","required":false,"target":{"attribute":"overflowlabel"},"default":"{count} more"},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"total":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"total"}}}},"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":"overflowAnnouncement","expressionPlan":{"source":"overflowAnnouncement","ast":{"kind":"id","name":"overflowAnnouncement"},"dependencies":["overflowAnnouncement"]}}],"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":[]}},{"kind":"state","name":"overflowAnnouncement","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},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},"overflowLabel":{"type":"string","required":false,"target":{"attribute":"overflowlabel"},"default":"{count} more"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"},"total":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"total"}}}},"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":"overflowAnnouncement","expressionPlan":{"source":"overflowAnnouncement","ast":{"kind":"id","name":"overflowAnnouncement"},"dependencies":["overflowAnnouncement"]}}],"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":[]}},{"kind":"state","name":"overflowAnnouncement","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatarGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -21,6 +21,7 @@ export function createUiAvatarGroup(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element.append(node);
     }

package/vanilla/UiBadge.d.ts

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

package/vanilla/UiBadge.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-badge.css";
 
@@ -17,6 +17,7 @@ export function createUiBadge(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element.append(node);
     }

package/vanilla/UiBreadcrumbItem.d.ts

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

package/vanilla/UiBreadcrumbItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-breadcrumb-item.css";
 
@@ -25,6 +25,7 @@ export function createUiBreadcrumbItem(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element2.append(node);
     }

package/vanilla/UiBreadcrumbs.d.ts

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

package/vanilla/UiBreadcrumbs.js

@@ -1,5 +1,5 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+// Generated by HTML Next 1.0.0-alpha.11 for Vanilla DOM. Do not edit.
+import { manageGeneratedProp } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-breadcrumbs.css";
 
 export function createUiBreadcrumbs(options = {}) {
@@ -20,19 +20,16 @@ export function createUiBreadcrumbs(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element0.append(node);
     }
   } else {
   }
   element.append(element0);
-  manageGeneratedProps(element, [
-    { name: "label", attribute: "data-label", value: componentProps["label"], default: "Breadcrumb", type: "string", required: false },
-  ], (name, value) => {
-    if (name === "label") {
+  manageGeneratedProp(element, { name: "label", attribute: "data-label", value: componentProps["label"], default: "Breadcrumb", type: "string", required: false }, (value) => {
       if (value === null || value === undefined) element.removeAttribute("aria-label");
       else element.setAttribute("aria-label", String(value));
-    }
   });
   return element;
 }

package/vanilla/UiButton.d.ts

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

package/vanilla/UiButton.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 for Vanilla DOM. Do not edit.
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-button/ui-button.js";
 import "../styles/ui-button.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"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"loading"},"default":false},"pending":{"type":"boolean","required":false,"target":{"attribute":"pending"},"default":false},"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 or loading or pending)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled or loading or pending)]","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":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"loading"}},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","href","loading","pending"]}},{"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 or loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled or loading or pending)]","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":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"loading"}},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"tabindex","expression":"{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"0"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}}]}},"dependencies":["disabled","loading","pending"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"spinner-wrap"}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[]}],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"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"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', loading or pending)]","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":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"spinner-wrap"}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[]}],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["center","start"],"required":false,"target":{"attribute":"align"},"default":"center"},"as":{"type":{"kind":"terminal","name":"keyword"},"values":["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"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"loading"},"default":false},"pending":{"type":"boolean","required":false,"target":{"attribute":"pending"},"default":false},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["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":{"kind":"terminal","name":"keyword"},"values":["accent","neutral","danger","success","warning","info"],"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"kind":"terminal","name":"keyword"},"values":["button","submit","reset"],"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["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 or loading or pending)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled or loading or pending)]","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":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"loading"}},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","href","loading","pending"]}},{"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 or loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled or loading or pending)]","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":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"loading"}},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"tabindex","expression":"{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"0"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}}]}},"dependencies":["disabled","loading","pending"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"spinner-wrap"}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[]}],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"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"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', loading or pending)]","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":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"spinner-wrap"}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[]}],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"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 = {}, ...componentProps } = options;
@@ -16,10 +16,10 @@ export function createUiButton(options = {}) {
       if (value === null || value === undefined || value === false) continue;
       element.setAttribute(name, value === true ? "" : String(value));
     }
-    const value0 = componentProps["target"] === undefined ? undefined : componentProps["target"];
+    const value0 = componentProps["target"] === undefined ? null : componentProps["target"];
     if (value0 === null || value0 === undefined) element.removeAttribute("target");
     else element.setAttribute("target", String(value0));
-    const value1 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
+    const value1 = componentProps["rel"] === undefined ? null : componentProps["rel"];
     if (value1 === null || value1 === undefined) element.removeAttribute("rel");
     else element.setAttribute("rel", String(value1));
     element.setAttribute("data-component", "ui-button");
@@ -32,6 +32,7 @@ export function createUiButton(options = {}) {
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
         element.append(node);
       }
@@ -59,6 +60,7 @@ export function createUiButton(options = {}) {
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
         element.append(node);
       }

package/vanilla/UiCallout.d.ts

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

package/vanilla/UiCallout.js

@@ -1,8 +1,8 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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","neutral","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 = 'neutral' or tone = 'note'","testPlan":{"source":"tone = 'neutral' or tone = 'note'","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"neutral"}},"right":{"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:""};
+const definition = {...{"contract":{"tag":"ui-callout","props":{"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["info","neutral","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 = 'neutral' or tone = 'note'","testPlan":{"source":"tone = 'neutral' or tone = 'note'","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"tone"},"right":{"kind":"literal","value":"neutral"}},"right":{"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 = {}, ...componentProps } = options;
@@ -111,6 +111,7 @@ export function createUiCallout(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element20.append(node);
     }

package/vanilla/UiCard.d.ts

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

package/vanilla/UiCard.js

@@ -1,8 +1,8 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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:""};
+const definition = {...{"contract":{"tag":"ui-card","props":{"as":{"type":{"kind":"terminal","name":"keyword"},"values":["div","section","article","aside"],"required":false,"target":{"attribute":"as"},"default":"div"},"padding":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"padding"},"default":"md"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["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 = {}, ...componentProps } = options;
@@ -19,6 +19,7 @@ export function createUiCard(options = {}) {
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
         element.append(node);
       }
@@ -34,6 +35,7 @@ export function createUiCard(options = {}) {
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
         element.append(node);
       }
@@ -49,6 +51,7 @@ export function createUiCard(options = {}) {
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
         element.append(node);
       }
@@ -64,6 +67,7 @@ export function createUiCard(options = {}) {
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
         projected.push([node, ""]);
         element.append(node);
       }

package/vanilla/UiCheckbox.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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";
 
-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},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"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":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"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:""};
+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},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"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":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"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","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"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 = {}, ...componentProps } = options;
@@ -41,6 +41,7 @@ export function createUiCheckbox(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element2.append(node);
     }
@@ -53,6 +54,7 @@ export function createUiCheckbox(options = {}) {
   if (slots["description"] ?? [].length > 0) {
     for (const child of slots["description"] ?? []) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, "description"]);
       element3.append(node);
     }

package/vanilla/UiCluster.d.ts

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

package/vanilla/UiCluster.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 for Vanilla DOM. Do not edit.
 import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-cluster.css";
 
@@ -18,6 +18,7 @@ export function createUiCluster(options = {}) {
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
       element.append(node);
     }

package/vanilla/UiCombobox.d.ts

@@ -1,7 +1,8 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.11 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; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } } | 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; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } })[]>;
+  "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; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+  "items-change": CustomEvent<readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } })[]>;
   "free-entry": CustomEvent<{ readonly value: string | null; readonly query: string; readonly option: { readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "create-entry": CustomEvent<{ readonly value: string | null; readonly query: string; readonly option: { readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "validation-change": CustomEvent<{ readonly status: "pristine" | "pending" | "valid" | "warning" | "error"; readonly touched: boolean; readonly dirty: boolean; readonly issues: readonly ({ readonly message: string; readonly path?: readonly (unknown)[]; readonly severity?: "error" | "warning" })[]; readonly output?: unknown }>;