@threadlabs/looma 0.39.5 → 0.40.0

package/docs/card.html

@@ -32,7 +32,7 @@
       <p class="owner" $if="$packageName">{$packageName}</p>
       <p class="example-caption" $if="$exampleTitle">{$exampleTitle}</p>
 
-      <footer><ui-button $if="$href" as="a" from:href="$href" variant="link" size="sm">View component</ui-button><ui-button $if="$removable" $ref="remove" variant="ghost" size="sm">Remove</ui-button><slot name="actions"></slot></footer>
+      <footer><ui-button $if="$href" from:href="$href" variant="link" size="sm">View component</ui-button><ui-button $if="$removable" $ref="remove" variant="ghost" size="sm">Remove</ui-button><slot name="actions"></slot></footer>
     </ui-stack></div>
   </article>
   <style>

package/docs/catalog.json

@@ -458,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.39.5",
+  "version": "0.40.0",
   "groups": [
     {
       "id": "layout",
@@ -2484,28 +2484,17 @@
             "start"
           ]
         },
-        {
-          "name": "as",
-          "property": "as",
-          "description": "The native element the button renders: a button, or a link (a) that navigates to href.",
-          "type": "keyword",
-          "default": "button",
-          "options": [
-            "button",
-            "a"
-          ]
-        },
         {
           "name": "disabled",
           "property": "disabled",
-          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as=\"a\" with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
+          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
           "type": "boolean",
           "default": false
         },
         {
           "name": "href",
           "property": "href",
-          "description": "The link's destination. Pair it with as=\"a\" so the button renders as a real link that navigates. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
+          "description": "The link's destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
           "type": "string"
         },
         {
@@ -2539,7 +2528,7 @@
         {
           "name": "rel",
           "property": "rel",
-          "description": "The link's relationship to its destination, as on a native link. Only meaningful with as=\"a\".",
+          "description": "The link's relationship to its destination, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2583,7 +2572,7 @@
         {
           "name": "target",
           "property": "target",
-          "description": "Where a link opens, as on a native link. Only meaningful with as=\"a\".",
+          "description": "Where a link opens, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2641,25 +2630,15 @@
             "start"
           ]
         },
-        {
-          "name": "as",
-          "description": "The native element the button renders: a button, or a link (a) that navigates to href.",
-          "type": "\"button\" | \"a\"",
-          "default": "button",
-          "options": [
-            "button",
-            "a"
-          ]
-        },
         {
           "name": "disabled",
-          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as=\"a\" with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
+          "description": "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
           "type": "boolean",
           "default": false
         },
         {
           "name": "href",
-          "description": "The link's destination. Pair it with as=\"a\" so the button renders as a real link that navigates. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
+          "description": "The link's destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed.",
           "type": "string"
         },
         {
@@ -2689,7 +2668,7 @@
         },
         {
           "name": "rel",
-          "description": "The link's relationship to its destination, as on a native link. Only meaningful with as=\"a\".",
+          "description": "The link's relationship to its destination, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2728,7 +2707,7 @@
         },
         {
           "name": "target",
-          "description": "Where a link opens, as on a native link. Only meaningful with as=\"a\".",
+          "description": "Where a link opens, as on a native link. Only meaningful with href.",
           "type": "string"
         },
         {
@@ -2864,8 +2843,8 @@
           "id": "@threadlabs/looma/ui-button/07-as-link",
           "name": "07-as-link",
           "title": "as a link",
-          "description": "as=\"a\" with href renders a real link that looks and responds exactly like the button, in every variant. target and rel pass to the link. A disabled link drops its href and states aria-disabled, so it cannot be followed.",
-          "markup": "<ui-cluster gap=\"s\">\n  <ui-button as=\"a\" href=\"#get-started\" variant=\"solid\">Get started</ui-button>\n  <ui-button as=\"a\" href=\"https://example.com/\" target=\"_blank\" rel=\"noreferrer\">Read the guide</ui-button>\n  <ui-button as=\"a\" href=\"#get-started\" disabled>Unavailable</ui-button>\n</ui-cluster>",
+          "description": "Supplying href automatically renders a real link that looks and responds exactly like the button, in every variant. target and rel pass to the link. A disabled link drops its href and states aria-disabled, so it cannot be followed.",
+          "markup": "<ui-cluster gap=\"s\">\n  <ui-button href=\"#get-started\" variant=\"solid\">Get started</ui-button>\n  <ui-button href=\"https://example.com/\" target=\"_blank\" rel=\"noreferrer\">Read the guide</ui-button>\n  <ui-button href=\"#get-started\" disabled>Unavailable</ui-button>\n</ui-cluster>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}
@@ -3020,7 +2999,7 @@
           {
             "name": "--ui-callout-surface",
             "declarations": [
-              "color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default))",
+              "oklch(from var(--_callout-border) l c h / 10%)",
               "var(--ui-surface-muted)"
             ]
           },
@@ -3077,9 +3056,6 @@
           {
             "name": "--ui-success-solid"
           },
-          {
-            "name": "--ui-surface-default"
-          },
           {
             "name": "--ui-surface-muted"
           },

package/package.json

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

package/styles/ui-callout.css

@@ -59,7 +59,7 @@
       --_ui-callout-icon: var(--ui-callout-icon);
       --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-      --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
+      --_callout-surface: oklch(from var(--_callout-border) l c h / 10%);
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)

package/vanilla/UiButton.d.ts

@@ -11,7 +11,6 @@ export interface UiButtonElement extends HTMLElement {
 }
 export interface UiButtonProps {
   align?: "center" | "start" | null;
-  as?: "button" | "a" | null;
   disabled?: boolean | null;
   href?: string | null;
   loading?: boolean | null;

package/vanilla/UiButton.js

@@ -25,20 +25,20 @@ const T18 = ["",[]];
 const T19 = ["",[]];
 let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19;
 const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
-const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]]];
+const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiButton(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const v = [undefined, undefined, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
+  const v = [undefined, undefined, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
   let B = acceptProps(undefined, D, S.n, v, componentProps, [], html);
   const CS = [];
-  const inputStatus = (j) => { if (j >= 0 && j < 2) { g(j); return CS[j] ?? UNRESOLVED_INPUT; } if (j === 2) return awaitInput(B, "align", true); if (j === 3) return awaitInput(B, "as", true); if (j === 4) return awaitInput(B, "disabled", true); if (j === 5) return awaitInput(B, "href", true); if (j === 6) return awaitInput(B, "loading", true); if (j === 7) return awaitInput(B, "pending", true); if (j === 8) return awaitInput(B, "preset", true); if (j === 9) return awaitInput(B, "rel", true); if (j === 10) return awaitInput(B, "shape", true); if (j === 11) return awaitInput(B, "size", true); if (j === 12) return awaitInput(B, "square", true); if (j === 13) return awaitInput(B, "stretch", true); if (j === 14) return awaitInput(B, "target", true); if (j === 15) return awaitInput(B, "tone", true); if (j === 16) return awaitInput(B, "type", true); if (j === 17) return awaitInput(B, "variant", true); return v[j] === undefined ? UNRESOLVED_INPUT : READY_INPUT; };
+  const inputStatus = (j) => { if (j >= 0 && j < 2) { g(j); return CS[j] ?? UNRESOLVED_INPUT; } if (j === 2) return awaitInput(B, "align", true); if (j === 3) return awaitInput(B, "disabled", true); if (j === 4) return awaitInput(B, "href", true); if (j === 5) return awaitInput(B, "loading", true); if (j === 6) return awaitInput(B, "pending", true); if (j === 7) return awaitInput(B, "preset", true); if (j === 8) return awaitInput(B, "rel", true); if (j === 9) return awaitInput(B, "shape", true); if (j === 10) return awaitInput(B, "size", true); if (j === 11) return awaitInput(B, "square", true); if (j === 12) return awaitInput(B, "stretch", true); if (j === 13) return awaitInput(B, "target", true); if (j === 14) return awaitInput(B, "tone", true); if (j === 15) return awaitInput(B, "type", true); if (j === 16) return awaitInput(B, "variant", true); return v[j] === undefined ? UNRESOLVED_INPUT : READY_INPUT; };
   const X = { e: 0, g: (j) => g(j), w: new Set(), a: CS, i: inputStatus };
   const ke = [];
-  const K = [() => readIndex({ "none": inputRead(v[17], inputStatus(17)), "primary": "solid", "standard": "solid", "quiet": "ghost", "destructive": "solid" }, inputRead(v[8], inputStatus(8))), () => readIndex(recordValue(["none","primary","standard","quiet","destructive"], [readIndex({ "true": "danger", "false": inputRead(v[15], inputStatus(15)) }, textCall("concat", [(inputRead(v[17], inputStatus(17)) === "danger")])), "accent", "neutral", "neutral", "danger"]), inputRead(v[8], inputStatus(8)))];
+  const K = [() => readIndex({ "none": inputRead(v[16], inputStatus(16)), "primary": "solid", "standard": "solid", "quiet": "ghost", "destructive": "solid" }, inputRead(v[7], inputStatus(7))), () => readIndex(recordValue(["none","primary","standard","quiet","destructive"], [readIndex({ "true": "danger", "false": inputRead(v[14], inputStatus(14)) }, textCall("concat", [(inputRead(v[16], inputStatus(16)) === "danger")])), "accent", "neutral", "neutral", "danger"]), inputRead(v[7], inputStatus(7)))];
   const g = (j) => {
     const i = j - 0;
     if (ke[i] === X.e) return v[j];
@@ -51,7 +51,7 @@ export function createUiButton(options = {}, html) {
     if (!Object.is(previous, next)) { v[j] = next; X.n?.(j, previous, next); }
     return next;
   };
-  let a = (((g(0) === "card") && (v[3] === "a")) ? 0 : (g(0) === "card") ? 1 : (v[3] === "a") ? 2 : 3);
+  let a = (((g(0) === "card") && (v[4] !== null)) ? 0 : (g(0) === "card") ? 1 : (v[4] !== null) ? 2 : 3);
   let element;
   if (a === 0) {
     element = document.createElement("a");
@@ -233,64 +233,64 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p0 = (r, c, d) => {
-    if (c & 1073873152) {
+    if (c & 1073807488) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073905920) {
+    if (c & 1073823872) {
       const x1 = g(1);
       if (x1 !== NONCONFORMING) {
         const s1 = toAttribute(x1, "data-tone");
         if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 1073742064) {
-      const x2 = readIndex({ "true": null, "false": v[5] }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
+    if (c & 1073741944) {
+      const x2 = readIndex({ "true": null, "false": v[4] }, textCall("concat", [((truthy(v[3]) || truthy(v[5])) || truthy(v[6]))]));
       if (x2 !== NONCONFORMING) {
         const s2 = toAttribute(x2, "href");
         if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 16384) {
-      const x3 = v[14];
+    if (c & 8192) {
+      const x3 = v[13];
       const s3 = toAttribute(x3, "target");
       if (s3 !== r.v3) writeAttribute(r.n, "target", r.v3 = s3);
     }
-    if (c & 512) {
-      const x4 = v[9];
+    if (c & 256) {
+      const x4 = v[8];
       const s4 = toAttribute(x4, "rel");
       if (s4 !== r.v4) writeAttribute(r.n, "rel", r.v4 = s4);
     }
-    if (c & 1073742032) {
-      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
+    if (c & 1073741928) {
+      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[3]) || truthy(v[5])) || truthy(v[6]))]));
       if (x5 !== NONCONFORMING) {
         const s5 = toAttribute(x5, "aria-disabled");
         if (s5 !== r.v5) writeAttribute(r.n, "aria-disabled", r.v5 = s5);
       }
     }
-    if (c & 192) {
-      const x6 = (truthy(v[6]) || truthy(v[7]));
+    if (c & 96) {
+      const x6 = (truthy(v[5]) || truthy(v[6]));
       const s6 = toAttribute(x6, "aria-busy");
       if (s6 !== r.v6) writeAttribute(r.n, "aria-busy", r.v6 = s6);
     }
-    if (c & 1073742032) {
-      const x7 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[6]) || truthy(v[7])) && !truthy(v[4]))]));
+    if (c & 1073741928) {
+      const x7 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[5]) || truthy(v[6])) && !truthy(v[3]))]));
       if (x7 !== NONCONFORMING) {
         const s7 = toAttribute(x7, "tabindex");
         if (s7 !== r.v7) writeAttribute(r.n, "tabindex", r.v7 = s7);
       }
     }
-    if (c & 15556) {
-      const x8 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[13], v[11], v[10], v[12], v[6], v[7]]);
+    if (c & 7780) {
+      const x8 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[12], v[10], v[9], v[11], v[5], v[6]]);
       const s8 = x8;
       if (s8 !== r.v8) writeAttribute(r.n, "data-ui-button-state", (r.v8 = s8) === "" ? null : s8);
     }
-    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
+    if (c & 96 && !((truthy(v[5]) || truthy(v[6]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m1(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
-    if (c & 192 && !(!(truthy(v[6]) || truthy(v[7]))) !== !r.b1) {
+    if (c & 96 && !(!(truthy(v[5]) || truthy(v[6]))) !== !r.b1) {
       if (r.b1) { dispose(r.b1); r.b1 = undefined; clearRegion(r.a2, r.e1); }
       else { r.b1 = m2(d); r.e1.before(r.b1.n); }
     } else if (r.b1 !== undefined) p2(r.b1, c, d);
@@ -315,50 +315,50 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p6 = (r, c, d) => {
-    if (c & 1073873152) {
+    if (c & 1073807488) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073905920) {
+    if (c & 1073823872) {
       const x1 = g(1);
       if (x1 !== NONCONFORMING) {
         const s1 = toAttribute(x1, "data-tone");
         if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 1073807360) {
-      const x2 = v[16];
+    if (c & 1073774592) {
+      const x2 = v[15];
       const s2 = toAttribute(x2, "type");
       if (s2 !== r.v2) writeAttribute(r.n, "type", r.v2 = s2);
     }
-    if (c & 16) {
-      const x3 = v[4];
+    if (c & 8) {
+      const x3 = v[3];
       const s3 = toAttribute(x3, "disabled");
       if (s3 !== r.v3) writeAttribute(r.n, "disabled", r.v3 = s3);
     }
-    if (c & 1073742016) {
-      const x4 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[6]) || truthy(v[7]))]));
+    if (c & 1073741920) {
+      const x4 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[5]) || truthy(v[6]))]));
       if (x4 !== NONCONFORMING) {
         const s4 = toAttribute(x4, "aria-disabled");
         if (s4 !== r.v4) writeAttribute(r.n, "aria-disabled", r.v4 = s4);
       }
     }
-    if (c & 192) {
-      const x5 = (truthy(v[6]) || truthy(v[7]));
+    if (c & 96) {
+      const x5 = (truthy(v[5]) || truthy(v[6]));
       const s5 = toAttribute(x5, "aria-busy");
       if (s5 !== r.v5) writeAttribute(r.n, "aria-busy", r.v5 = s5);
     }
-    if (c & 15556) {
-      const x6 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[13], v[11], v[10], v[12], v[6], v[7]]);
+    if (c & 7780) {
+      const x6 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[12], v[10], v[9], v[11], v[5], v[6]]);
       const s6 = x6;
       if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
     }
-    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
+    if (c & 96 && !((truthy(v[5]) || truthy(v[6]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m7(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p7(r.b0, c, d);
-    if (c & 192 && !(!(truthy(v[6]) || truthy(v[7]))) !== !r.b1) {
+    if (c & 96 && !(!(truthy(v[5]) || truthy(v[6]))) !== !r.b1) {
       if (r.b1) { dispose(r.b1); r.b1 = undefined; clearRegion(r.a2, r.e1); }
       else { r.b1 = m8(d); r.e1.before(r.b1.n); }
     } else if (r.b1 !== undefined) p8(r.b1, c, d);
@@ -380,60 +380,60 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p12 = (r, c, d) => {
-    if (c & 1073873152) {
+    if (c & 1073807488) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073905920) {
+    if (c & 1073823872) {
       const x1 = g(1);
       if (x1 !== NONCONFORMING) {
         const s1 = toAttribute(x1, "data-tone");
         if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 1073742064) {
-      const x2 = readIndex({ "true": null, "false": v[5] }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
+    if (c & 1073741944) {
+      const x2 = readIndex({ "true": null, "false": v[4] }, textCall("concat", [((truthy(v[3]) || truthy(v[5])) || truthy(v[6]))]));
       if (x2 !== NONCONFORMING) {
         const s2 = toAttribute(x2, "href");
         if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 16384) {
-      const x3 = v[14];
+    if (c & 8192) {
+      const x3 = v[13];
       const s3 = toAttribute(x3, "target");
       if (s3 !== r.v3) writeAttribute(r.n, "target", r.v3 = s3);
     }
-    if (c & 512) {
-      const x4 = v[9];
+    if (c & 256) {
+      const x4 = v[8];
       const s4 = toAttribute(x4, "rel");
       if (s4 !== r.v4) writeAttribute(r.n, "rel", r.v4 = s4);
     }
-    if (c & 1073742032) {
-      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
+    if (c & 1073741928) {
+      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[3]) || truthy(v[5])) || truthy(v[6]))]));
       if (x5 !== NONCONFORMING) {
         const s5 = toAttribute(x5, "aria-disabled");
         if (s5 !== r.v5) writeAttribute(r.n, "aria-disabled", r.v5 = s5);
       }
     }
-    if (c & 192) {
-      const x6 = (truthy(v[6]) || truthy(v[7]));
+    if (c & 96) {
+      const x6 = (truthy(v[5]) || truthy(v[6]));
       const s6 = toAttribute(x6, "aria-busy");
       if (s6 !== r.v6) writeAttribute(r.n, "aria-busy", r.v6 = s6);
     }
-    if (c & 1073742032) {
-      const x7 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[6]) || truthy(v[7])) && !truthy(v[4]))]));
+    if (c & 1073741928) {
+      const x7 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[5]) || truthy(v[6])) && !truthy(v[3]))]));
       if (x7 !== NONCONFORMING) {
         const s7 = toAttribute(x7, "tabindex");
         if (s7 !== r.v7) writeAttribute(r.n, "tabindex", r.v7 = s7);
       }
     }
-    if (c & 15556) {
-      const x8 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[13], v[11], v[10], v[12], v[6], v[7]]);
+    if (c & 7780) {
+      const x8 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[12], v[10], v[9], v[11], v[5], v[6]]);
       const s8 = x8;
       if (s8 !== r.v8) writeAttribute(r.n, "data-ui-button-state", (r.v8 = s8) === "" ? null : s8);
     }
-    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
+    if (c & 96 && !((truthy(v[5]) || truthy(v[6]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m13(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p13(r.b0, c, d);
@@ -455,46 +455,46 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p16 = (r, c, d) => {
-    if (c & 1073873152) {
+    if (c & 1073807488) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073905920) {
+    if (c & 1073823872) {
       const x1 = g(1);
       if (x1 !== NONCONFORMING) {
         const s1 = toAttribute(x1, "data-tone");
         if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 1073807360) {
-      const x2 = v[16];
+    if (c & 1073774592) {
+      const x2 = v[15];
       const s2 = toAttribute(x2, "type");
       if (s2 !== r.v2) writeAttribute(r.n, "type", r.v2 = s2);
     }
-    if (c & 16) {
-      const x3 = v[4];
+    if (c & 8) {
+      const x3 = v[3];
       const s3 = toAttribute(x3, "disabled");
       if (s3 !== r.v3) writeAttribute(r.n, "disabled", r.v3 = s3);
     }
-    if (c & 1073742016) {
-      const x4 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[6]) || truthy(v[7]))]));
+    if (c & 1073741920) {
+      const x4 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[5]) || truthy(v[6]))]));
       if (x4 !== NONCONFORMING) {
         const s4 = toAttribute(x4, "aria-disabled");
         if (s4 !== r.v4) writeAttribute(r.n, "aria-disabled", r.v4 = s4);
       }
     }
-    if (c & 192) {
-      const x5 = (truthy(v[6]) || truthy(v[7]));
+    if (c & 96) {
+      const x5 = (truthy(v[5]) || truthy(v[6]));
       const s5 = toAttribute(x5, "aria-busy");
       if (s5 !== r.v5) writeAttribute(r.n, "aria-busy", r.v5 = s5);
     }
-    if (c & 15556) {
-      const x6 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[13], v[11], v[10], v[12], v[6], v[7]]);
+    if (c & 7780) {
+      const x6 = hostState(["align","stretch","size","shape","square","loading","pending"], [v[2], v[12], v[10], v[9], v[11], v[5], v[6]]);
       const s6 = x6;
       if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
     }
-    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
+    if (c & 96 && !((truthy(v[5]) || truthy(v[6]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m17(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p17(r.b0, c, d);
@@ -510,8 +510,8 @@ export function createUiButton(options = {}, html) {
   const p = (c, d) => {
     if (R === null) return;
     if (R === undefined) { R = M[a](element, d); return; }
-    if (c & 1073873160) {
-      const t = (((g(0) === "card") && (v[3] === "a")) ? 0 : (g(0) === "card") ? 1 : (v[3] === "a") ? 2 : 3);
+    if (c & 1073807504) {
+      const t = (((g(0) === "card") && (v[4] !== null)) ? 0 : (g(0) === "card") ? 1 : (v[4] !== null) ? 2 : 3);
       if (t !== a) {
         dispose(R);
         for (const key in I.r) delete I.r[key];
@@ -532,4 +532,4 @@ export function createUiButton(options = {}, html) {
   manageProps(I);
   return element;
 }
-defineComponent("ui-button", createUiButton, ["align","as","disabled","href","loading","pending","preset","rel","shape","size","square","stretch","target","tone","type","variant"]);
+defineComponent("ui-button", createUiButton, ["align","disabled","href","loading","pending","preset","rel","shape","size","square","stretch","target","tone","type","variant"]);

package/vanilla/UiEditorLinkCard.js

@@ -5,7 +5,7 @@ import "../styles/ui-editor-link-card.css";
 
 const T0 = ["",[],"\n    ",["ui-card",["variant","elevated","padding","xs","size","sm"],["ui-cluster",["gap","xs","wrap","nowrap","role","group","aria-label","Link actions"],["ui-icon",[]],"\n        ",["ui-stack",["gap","none","fill",""],["ui-text",["as","strong","size","sm","weight","medium","font","sans","truncate",""],0],"\n          ",1],"\n        ",1,"\n        ",["ui-icon-button",["label","Edit link","variant","ghost","size","sm","data-link-action","edit"],["ui-icon",["name","pencil"]]],"\n        ",["ui-tooltip",[],"Edit link"],"\n        ",["ui-icon-button",["label","Remove link","variant","ghost","size","sm","data-link-action","remove"],["ui-icon",["name","unlink"]]],"\n        ",["ui-tooltip",[],"Remove link"]]],"\n  "];
 const T1 = ["ui-text",["as","small","size","xs","tone","secondary","font","sans","truncate",""],0];
-const T2 = ["",[],"\n          ",["ui-button",["as","a","variant","ghost","tone","neutral","size","sm","target","_blank","rel","noopener noreferrer","aria-label","Open link"],["ui-icon",["name","external-link"]]],"\n          ",["ui-tooltip",[],"Open link"],"\n        "];
+const T2 = ["",[],"\n          ",["ui-button",["variant","ghost","tone","neutral","size","sm","target","_blank","rel","noopener noreferrer","aria-label","Open link"],["ui-icon",["name","external-link"]]],"\n          ",["ui-tooltip",[],"Open link"],"\n        "];
 let P0, P1, P2;
 const S = { n: ["base","resolved","shown"], t: ["s","?","?"], f: import.meta.url, g: "ui-editor-link-card", k: 1, d: { "edit": [detailCheck(checkRecord(checkUnknown)), true, true, false], "remove": [detailCheck(checkRecord(checkUnknown)), true, true, false] }, x: dispatchDeclared, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs, i: ["ui-editor-link-card"] };
 const D = { g: "ui-editor-link-card", props: { "detail": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "href": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "openHref": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "targetLabel": { "required":false,"default":"Item", c: checkString, t: "string", j: 0, m: "s" } } };