@threadlabs/looma 0.23.22 → 0.23.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.22",
+  "version": "0.23.23",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-button.css

@@ -172,6 +172,42 @@
       font-size: var(--ui-font-size-md);
     }
 
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+    :scope[data-ui-button-state~="variant=card"] {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: start;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+      text-align: start;
+      white-space: normal;
+      box-shadow: none;
+      background-image: none;
+    }
+    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+    }
+    :scope[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .card-icon {
+      display: flex;
+      align-items: flex-start;
+    }
+    .card-icon:empty {
+      display: none;
+    }
+    .card-content {
+      min-inline-size: 0;
+    }
+    .card-action {
+      display: flex;
+      align-items: center;
+      align-self: center;
+    }
+
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
     :scope:hover:not(:disabled, [aria-disabled="true"]) {
@@ -388,6 +424,9 @@
     @supports (text-box-trim: trim-both) {
     }
 
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 

package/styles/ui-separator.css

@@ -12,13 +12,17 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :scope[data-ui-separator-state~="emphasis=strong"] {
+      --_separator-color: var(--ui-border-strong);
     }
 
     :scope[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }
 
     :scope[data-ui-separator-state~="selectable"] {

package/vanilla/UiButton.d.ts

@@ -19,7 +19,7 @@ export interface UiButtonProps {
   target?: string | null;
   tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
   type?: "button" | "submit" | "reset" | null;
-  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
+  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | "card" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

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/UiSeparator.d.ts

@@ -6,6 +6,7 @@ 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;

package/vanilla/UiSeparator.js

@@ -5,19 +5,21 @@ 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 prop1 = componentProps["selectable"] === undefined ? false : componentProps["selectable"];
-  const prop2 = componentProps["selected"] === undefined ? false : componentProps["selected"];
+  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");
   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 },

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;