@threadlabs/looma 0.23.21 → 0.23.23

package/vanilla/UiButton.js

@@ -3,7 +3,7 @@ import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-ne
 import * as controller from "../components/ui-button/ui-button.js";
 import "../styles/ui-button.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"}},"shape":{"type":{"kind":"terminal","name":"keyword"},"values":["rounded","pill"],"required":false,"target":{"attribute":"shape"},"default":"rounded"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","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 }[concat(disabled or loading or pending)]","expressionPlan":{"source":"{ true: null, false: href }[concat(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":"concat","args":[{"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 }[concat(disabled or loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[concat(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":"concat","args":[{"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 }[concat((loading or pending) and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[concat((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":"concat","args":[{"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 }[concat(loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[concat(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":"concat","args":[{"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"}},"shape":{"type":{"kind":"terminal","name":"keyword"},"values":["rounded","pill"],"required":false,"target":{"attribute":"shape"},"default":"rounded"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","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","card"],"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 }[concat(disabled or loading or pending)]","expressionPlan":{"source":"{ true: null, false: href }[concat(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":"concat","args":[{"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 }[concat(disabled or loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[concat(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":"concat","args":[{"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 }[concat((loading or pending) and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[concat((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":"concat","args":[{"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":"card-icon"}],"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":"element","name":"template","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"icon"}],"flow":{"kind":"if","test":"not (loading or pending)","testPlan":{"source":"not (loading or pending)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}},"dependencies":["loading","pending"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"card-content"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"card-action"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-right"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"name":"action"}]}],"flow":{"kind":"when","test":"variant = 'card' and as = 'a'","testPlan":{"source":"variant = 'card' and as = 'a'","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"variant"},"right":{"kind":"literal","value":"card"}},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}}},"dependencies":["as","variant"]}}},{"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 }[concat(loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[concat(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":"concat","args":[{"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":"card-icon"}],"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":"element","name":"template","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"icon"}],"flow":{"kind":"if","test":"not (loading or pending)","testPlan":{"source":"not (loading or pending)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}},"dependencies":["loading","pending"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"card-content"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"card-action"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-right"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"name":"action"}]}],"flow":{"kind":"when","test":"variant = 'card'","testPlan":{"source":"variant = 'card'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"variant"},"right":{"kind":"literal","value":"card"}},"dependencies":["variant"]}}},{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[concat(disabled or loading or pending)]","expressionPlan":{"source":"{ true: null, false: href }[concat(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":"concat","args":[{"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 }[concat(disabled or loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[concat(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":"concat","args":[{"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 }[concat((loading or pending) and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[concat((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":"concat","args":[{"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 }[concat(loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[concat(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":"concat","args":[{"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;
@@ -24,21 +24,51 @@ export function createUiButton(options = {}) {
     else element.setAttribute("rel", String(value1));
     element.setAttribute("data-component", "ui-button");
     const element0 = document.createElement("span");
-    element0.setAttribute("class", "spinner-wrap");
+    element0.setAttribute("class", "card-icon");
     const element1 = document.createElement("ui-spinner");
     element1.setAttribute("size", "sm");
     element0.append(element1);
+    const element2 = document.createElement("template");
+    if (slots["icon"] ?? [].length > 0) {
+      for (const child of slots["icon"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+        projected.push([node, "icon"]);
+        element2.append(node);
+      }
+    } else {
+    }
+    element0.append(element2);
     element.append(element0);
+    const element3 = document.createElement("span");
+    element3.setAttribute("class", "card-content");
     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);
+        element3.append(node);
       }
     } else {
     }
-  } else {
+    element.append(element3);
+    const element4 = document.createElement("span");
+    element4.setAttribute("class", "card-action");
+    if (slots["action"] ?? [].length > 0) {
+      for (const child of slots["action"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+        projected.push([node, "action"]);
+        element4.append(node);
+      }
+    } else {
+    const element5 = document.createElement("ui-icon");
+    element5.setAttribute("name", "chevron-right");
+    element5.setAttribute("aria-hidden", "true");
+    element4.append(element5);
+    }
+    element.append(element4);
+  } else if (root === 1) {
     element = document.createElement("button");
     for (const [name, value] of Object.entries(attributes)) {
       if (value === null || value === undefined || value === false) continue;
@@ -51,12 +81,98 @@ export function createUiButton(options = {}) {
     if (value3 === true) element.setAttribute("disabled", "");
     else element.removeAttribute("disabled");
     element.setAttribute("data-component", "ui-button");
-    const element2 = document.createElement("span");
-    element2.setAttribute("class", "spinner-wrap");
-    const element3 = document.createElement("ui-spinner");
-    element3.setAttribute("size", "sm");
-    element2.append(element3);
-    element.append(element2);
+    const element6 = document.createElement("span");
+    element6.setAttribute("class", "card-icon");
+    const element7 = document.createElement("ui-spinner");
+    element7.setAttribute("size", "sm");
+    element6.append(element7);
+    const element8 = document.createElement("template");
+    if (slots["icon"] ?? [].length > 0) {
+      for (const child of slots["icon"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+        projected.push([node, "icon"]);
+        element8.append(node);
+      }
+    } else {
+    }
+    element6.append(element8);
+    element.append(element6);
+    const element9 = document.createElement("span");
+    element9.setAttribute("class", "card-content");
+    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, ""]);
+        element9.append(node);
+      }
+    } else {
+    }
+    element.append(element9);
+    const element10 = document.createElement("span");
+    element10.setAttribute("class", "card-action");
+    if (slots["action"] ?? [].length > 0) {
+      for (const child of slots["action"] ?? []) {
+        const node = typeof child === "string" ? document.createTextNode(child) : child;
+        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+        projected.push([node, "action"]);
+        element10.append(node);
+      }
+    } else {
+    const element11 = document.createElement("ui-icon");
+    element11.setAttribute("name", "chevron-right");
+    element11.setAttribute("aria-hidden", "true");
+    element10.append(element11);
+    }
+    element.append(element10);
+  } else if (root === 2) {
+    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 value4 = componentProps["target"] === undefined ? null : componentProps["target"];
+    if (value4 === null || value4 === undefined) element.removeAttribute("target");
+    else element.setAttribute("target", String(value4));
+    const value5 = componentProps["rel"] === undefined ? null : componentProps["rel"];
+    if (value5 === null || value5 === undefined) element.removeAttribute("rel");
+    else element.setAttribute("rel", String(value5));
+    element.setAttribute("data-component", "ui-button");
+    const element12 = document.createElement("span");
+    element12.setAttribute("class", "spinner-wrap");
+    const element13 = document.createElement("ui-spinner");
+    element13.setAttribute("size", "sm");
+    element12.append(element13);
+    element.append(element12);
+    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);
+      }
+    } 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 value6 = componentProps["type"] === undefined ? "button" : componentProps["type"];
+    if (value6 === null || value6 === undefined) element.removeAttribute("type");
+    else element.setAttribute("type", String(value6));
+    const value7 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+    if (value7 === true) element.setAttribute("disabled", "");
+    else element.removeAttribute("disabled");
+    element.setAttribute("data-component", "ui-button");
+    const element14 = document.createElement("span");
+    element14.setAttribute("class", "spinner-wrap");
+    const element15 = document.createElement("ui-spinner");
+    element15.setAttribute("size", "sm");
+    element14.append(element15);
+    element.append(element14);
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;

package/vanilla/UiImage.d.ts

@@ -0,0 +1,21 @@
+// Generated by HTML Next 1.0.0-alpha.26 for Vanilla DOM. Do not edit.
+export interface UiImageEventMap {
+  resize: CustomEvent<{ readonly width: number; readonly height: number; readonly phase: "preview" | "commit" | "cancel"; readonly trigger: "pointer" | "keyboard" }>;
+}
+export interface UiImageElement extends HTMLElement {
+  addEventListener<K extends keyof UiImageEventMap>(type: K, listener: (this: UiImageElement, event: UiImageEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiImageEventMap>(type: K, listener: (this: UiImageElement, event: UiImageEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiImageProps {
+  alt?: string | null;
+  height?: number | null;
+  placement?: "block" | "center" | "wrap-left" | "wrap-right" | null;
+  resizable?: boolean | null;
+  selected?: boolean | null;
+  src?: string | null;
+  width?: number | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiImage(props?: UiImageProps): UiImageElement;

package/vanilla/UiImage.js

@@ -0,0 +1,84 @@
+// Generated by HTML Next 1.0.0-alpha.26 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-image/ui-image.js";
+import "../styles/ui-image.css";
+
+const definition = {...{"contract":{"tag":"ui-image","props":{"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"height":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"height"}},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["block","center","wrap-left","wrap-right"],"required":false,"target":{"attribute":"placement"},"default":"block"},"resizable":{"type":"boolean","required":false,"target":{"attribute":"resizable"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"selected"},"default":false},"src":{"type":"string","required":false,"target":{"attribute":"src"},"default":""},"width":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"width"}}}},"template":{"kind":"element","name":"figure","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"frame"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"img","attributes":[{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"attribute","name":"alt","expression":"alt","expressionPlan":{"source":"alt","ast":{"kind":"id","name":"alt"},"dependencies":["alt"]}},{"kind":"attribute","name":"width","expression":"width","expressionPlan":{"source":"width","ast":{"kind":"id","name":"width"},"dependencies":["width"]}},{"kind":"attribute","name":"height","expression":"height","expressionPlan":{"source":"height","ast":{"kind":"id","name":"height"},"dependencies":["height"]}}],"children":[]}],"name":"media"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"handles"},{"kind":"attribute","name":"hidden","expression":"not (selected and resizable)","expressionPlan":{"source":"not (selected and resizable)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"selected"},"right":{"kind":"id","name":"resizable"}}},"dependencies":["resizable","selected"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"top-left"},{"kind":"literal","name":"aria-label","value":"Resize image from top left"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"top-right"},{"kind":"literal","name":"aria-label","value":"Resize image from top right"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"bottom-left"},{"kind":"literal","name":"aria-label","value":"Resize image from bottom left"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"bottom-right"},{"kind":"literal","name":"aria-label","value":"Resize image from bottom right"}],"children":[]}]},{"kind":"slot","fallback":[],"name":"controls"}],"ref":"frame"}]},"declarations":[{"kind":"event","name":"resize","type":"object","shape":{"kind":"object","fields":[{"name":"width","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"phase","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["preview","commit","cancel"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["pointer","keyboard"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"figure","choices":["figure"]}},source:{file:import.meta.url},css:""};
+
+export function createUiImage(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("figure");
+  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-image");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "frame");
+  if (slots["media"] ?? [].length > 0) {
+    for (const child of slots["media"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "media"]);
+      element0.append(node);
+    }
+  } else {
+  const element1 = document.createElement("img");
+  const value0 = componentProps["src"] === undefined ? "" : componentProps["src"];
+  if (value0 === null || value0 === undefined) element1.removeAttribute("src");
+  else element1.setAttribute("src", String(value0));
+  const value1 = componentProps["alt"] === undefined ? "" : componentProps["alt"];
+  if (value1 === null || value1 === undefined) element1.removeAttribute("alt");
+  else element1.setAttribute("alt", String(value1));
+  const value2 = componentProps["width"] === undefined ? null : componentProps["width"];
+  if (value2 === null || value2 === undefined) element1.removeAttribute("width");
+  else element1.setAttribute("width", String(value2));
+  const value3 = componentProps["height"] === undefined ? null : componentProps["height"];
+  if (value3 === null || value3 === undefined) element1.removeAttribute("height");
+  else element1.setAttribute("height", String(value3));
+  element0.append(element1);
+  }
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "handles");
+  const element3 = document.createElement("button");
+  element3.setAttribute("type", "button");
+  element3.setAttribute("class", "handle");
+  element3.setAttribute("data-corner", "top-left");
+  element3.setAttribute("aria-label", "Resize image from top left");
+  element2.append(element3);
+  const element4 = document.createElement("button");
+  element4.setAttribute("type", "button");
+  element4.setAttribute("class", "handle");
+  element4.setAttribute("data-corner", "top-right");
+  element4.setAttribute("aria-label", "Resize image from top right");
+  element2.append(element4);
+  const element5 = document.createElement("button");
+  element5.setAttribute("type", "button");
+  element5.setAttribute("class", "handle");
+  element5.setAttribute("data-corner", "bottom-left");
+  element5.setAttribute("aria-label", "Resize image from bottom left");
+  element2.append(element5);
+  const element6 = document.createElement("button");
+  element6.setAttribute("type", "button");
+  element6.setAttribute("class", "handle");
+  element6.setAttribute("data-corner", "bottom-right");
+  element6.setAttribute("aria-label", "Resize image from bottom right");
+  element2.append(element6);
+  element0.append(element2);
+  if (slots["controls"] ?? [].length > 0) {
+    for (const child of slots["controls"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "controls"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiSeparator.d.ts

@@ -6,7 +6,10 @@ export interface UiSeparatorElement extends HTMLHRElement {
   removeEventListener<K extends keyof UiSeparatorEventMap>(type: K, listener: (this: UiSeparatorElement, event: UiSeparatorEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiSeparatorProps {
+  emphasis?: "normal" | "strong" | null;
   orientation?: "horizontal" | "vertical" | null;
+  selectable?: boolean | null;
+  selected?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiSeparator.js

@@ -1,23 +1,33 @@
 // Generated by HTML Next 1.0.0-alpha.26 for Vanilla DOM. Do not edit.
-import { manageGeneratedProp } from "@nextwebwg/html-next/generated-runtime";
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-separator.css";
 
 export function createUiSeparator(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
+  const prop0 = componentProps["emphasis"] === undefined ? "normal" : componentProps["emphasis"];
+  const prop1 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
+  const prop2 = componentProps["selectable"] === undefined ? false : componentProps["selectable"];
+  const prop3 = componentProps["selected"] === undefined ? false : componentProps["selected"];
   const element = document.createElement("hr");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
-  const value0 = prop0;
+  const value0 = prop1;
   if (value0 === null || value0 === undefined) element.removeAttribute("aria-orientation");
   else element.setAttribute("aria-orientation", String(value0));
   element.setAttribute("data-component", "ui-separator");
-  manageGeneratedProp(element, { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "horizontal", type: ["horizontal","vertical"], required: false }, (value) => {
+  manageGeneratedProps(element, [
+    { name: "emphasis", attribute: "data-emphasis", value: componentProps["emphasis"], default: "normal", type: ["normal","strong"], required: false },
+    { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "horizontal", type: ["horizontal","vertical"], required: false },
+    { name: "selectable", attribute: "data-selectable", value: componentProps["selectable"], default: false, type: "boolean", required: false },
+    { name: "selected", attribute: "data-selected", value: componentProps["selected"], default: false, type: "boolean", required: false },
+  ], (name, value) => {
+    if (name === "orientation") {
       if (value === null || value === undefined) element.removeAttribute("aria-orientation");
       else element.setAttribute("aria-orientation", String(value));
+    }
   });
   return element;
 }

package/vanilla/index.js

@@ -34,6 +34,7 @@ export * from "./UiFormField.js";
 export * from "./UiGrid.js";
 export * from "./UiIcon.js";
 export * from "./UiIconButton.js";
+export * from "./UiImage.js";
 export * from "./UiInput.js";
 export * from "./UiInputGroup.js";
 export * from "./UiList.js";

package/vue/UiButton.d.ts

@@ -1,9 +1,21 @@
 import type { PropType } from 'vue';
-declare var __VLS_6: {}, __VLS_13: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_38: {}, __VLS_45: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    icon?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    action?: (props: typeof __VLS_10) => any;
+} & {
+    icon?: (props: typeof __VLS_22) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    action?: (props: typeof __VLS_26) => any;
+} & {
+    default?: (props: typeof __VLS_38) => any;
+} & {
+    default?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     align: {
@@ -59,7 +71,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | null>;
+        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | "card" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -116,7 +128,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | null>;
+        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | "card" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
@@ -124,7 +136,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     shape: "pill" | "rounded" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
-    variant: "link" | "danger" | "solid" | "outline" | "ghost" | null;
+    variant: "link" | "danger" | "solid" | "outline" | "ghost" | "card" | null;
     align: "center" | "start" | null;
     as: "a" | "button" | null;
     disabled: boolean | null;