@threadlabs/looma 0.37.4 → 0.37.6

package/styles/ui-skeleton.css

@@ -0,0 +1,91 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-skeleton"] { --html-next-scope-owner: "ui-skeleton" !important; }
+}
+@scope ([data-component~="ui-skeleton"]) to ([data-component], [data-slotted]) {
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @property --ui-skeleton-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-skeleton-height {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-skeleton"]) {
+      display: block !important;
+      position: relative;
+      box-sizing: border-box !important;
+      flex: none;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      inline-size: var(--ui-skeleton-width, 100%);
+      block-size: var(--ui-skeleton-height, 1lh);
+      margin: 0 !important;
+      font: inherit;
+    }
+
+    :scope:where([data-component~="ui-skeleton"])::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--ui-radius-sm);
+      background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=text"]::before {
+      inset-block: 22%;
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=circle"] {
+      inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+      block-size: var(--ui-skeleton-height, auto);
+      aspect-ratio: 1;
+    }
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=circle"]::before {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=rectangle"] {
+      block-size: var(--ui-skeleton-height, 8rem);
+    }
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=rectangle"]::before {
+      border-radius: var(--ui-radius-md);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
+      animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+    }
+    @keyframes ui-skeleton-pulse {
+      50% {
+        opacity: 0.45;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
+        animation: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-skeleton"])::before {
+        background: CanvasText;
+        opacity: 0.2;
+        animation: none;
+      }
+    }
+    :scope:where([data-component~="ui-skeleton"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-component~="ui-skeleton"]) to ([data-component]) {
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @media (prefers-reduced-motion: reduce) {
+    }
+    @media (forced-colors: active) {
+    }
+}

package/vanilla/UiButton.d.ts

@@ -20,6 +20,7 @@ export interface UiButtonProps {
   rel?: string | null;
   shape?: "rounded" | "pill" | null;
   size?: "xs" | "sm" | "md" | "lg" | null;
+  square?: boolean | null;
   stretch?: boolean | null;
   target?: string | null;
   tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | 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-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-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-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-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-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 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)] }, "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":"accent", 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)] }, "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":"accent", 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];
+  const v = [undefined, undefined, null, 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, "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 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 X = { e: 0, g: (j) => g(j), w: new Set(), a: CS, i: inputStatus };
   const ke = [];
-  const K = [() => readIndex({ "none": inputRead(v[16], inputStatus(16)), "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[14], inputStatus(14)) }, textCall("concat", [(inputRead(v[16], inputStatus(16)) === "danger")])), "accent", "neutral", "neutral", "danger"]), inputRead(v[8], inputStatus(8)))];
+  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 g = (j) => {
     const i = j - 0;
     if (ke[i] === X.e) return v[j];
@@ -233,12 +233,12 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p0 = (r, c, d) => {
-    if (c & 1073807616) {
+    if (c & 1073873152) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073824000) {
+    if (c & 1073905920) {
       const x1 = g(1);
       if (x1 !== NONCONFORMING) {
         const s1 = toAttribute(x1, "data-tone");
@@ -252,8 +252,8 @@ export function createUiButton(options = {}, html) {
         if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 8192) {
-      const x3 = v[13];
+    if (c & 16384) {
+      const x3 = v[14];
       const s3 = toAttribute(x3, "target");
       if (s3 !== r.v3) writeAttribute(r.n, "target", r.v3 = s3);
     }
@@ -281,8 +281,8 @@ export function createUiButton(options = {}, html) {
         if (s7 !== r.v7) writeAttribute(r.n, "tabindex", r.v7 = s7);
       }
     }
-    if (c & 7364) {
-      const x8 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+    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]]);
       const s8 = x8;
       if (s8 !== r.v8) writeAttribute(r.n, "data-ui-button-state", (r.v8 = s8) === "" ? null : s8);
     }
@@ -315,20 +315,20 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p6 = (r, c, d) => {
-    if (c & 1073807616) {
+    if (c & 1073873152) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073824000) {
+    if (c & 1073905920) {
       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 & 1073774592) {
-      const x2 = v[15];
+    if (c & 1073807360) {
+      const x2 = v[16];
       const s2 = toAttribute(x2, "type");
       if (s2 !== r.v2) writeAttribute(r.n, "type", r.v2 = s2);
     }
@@ -349,8 +349,8 @@ export function createUiButton(options = {}, html) {
       const s5 = toAttribute(x5, "aria-busy");
       if (s5 !== r.v5) writeAttribute(r.n, "aria-busy", r.v5 = s5);
     }
-    if (c & 7364) {
-      const x6 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+    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]]);
       const s6 = x6;
       if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
     }
@@ -379,12 +379,12 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p12 = (r, c, d) => {
-    if (c & 1073807616) {
+    if (c & 1073873152) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073824000) {
+    if (c & 1073905920) {
       const x1 = g(1);
       if (x1 !== NONCONFORMING) {
         const s1 = toAttribute(x1, "data-tone");
@@ -398,8 +398,8 @@ export function createUiButton(options = {}, html) {
         if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 8192) {
-      const x3 = v[13];
+    if (c & 16384) {
+      const x3 = v[14];
       const s3 = toAttribute(x3, "target");
       if (s3 !== r.v3) writeAttribute(r.n, "target", r.v3 = s3);
     }
@@ -427,8 +427,8 @@ export function createUiButton(options = {}, html) {
         if (s7 !== r.v7) writeAttribute(r.n, "tabindex", r.v7 = s7);
       }
     }
-    if (c & 7364) {
-      const x8 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+    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]]);
       const s8 = x8;
       if (s8 !== r.v8) writeAttribute(r.n, "data-ui-button-state", (r.v8 = s8) === "" ? null : s8);
     }
@@ -453,20 +453,20 @@ export function createUiButton(options = {}, html) {
     return r;
   };
   const p16 = (r, c, d) => {
-    if (c & 1073807616) {
+    if (c & 1073873152) {
       const x0 = g(0);
       const s0 = toAttribute(x0, "data-appearance");
       if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
     }
-    if (c & 1073824000) {
+    if (c & 1073905920) {
       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 & 1073774592) {
-      const x2 = v[15];
+    if (c & 1073807360) {
+      const x2 = v[16];
       const s2 = toAttribute(x2, "type");
       if (s2 !== r.v2) writeAttribute(r.n, "type", r.v2 = s2);
     }
@@ -487,8 +487,8 @@ export function createUiButton(options = {}, html) {
       const s5 = toAttribute(x5, "aria-busy");
       if (s5 !== r.v5) writeAttribute(r.n, "aria-busy", r.v5 = s5);
     }
-    if (c & 7364) {
-      const x6 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+    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]]);
       const s6 = x6;
       if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
     }
@@ -508,7 +508,7 @@ export function createUiButton(options = {}, html) {
   const p = (c, d) => {
     if (R === null) return;
     if (R === undefined) { R = M[a](element, d); return; }
-    if (c & 1073807624) {
+    if (c & 1073873160) {
       const t = (((g(0) === "card") && (v[3] === "a")) ? 0 : (g(0) === "card") ? 1 : (v[3] === "a") ? 2 : 3);
       if (t !== a) {
         dispose(R);
@@ -530,4 +530,4 @@ export function createUiButton(options = {}, html) {
   manageProps(I);
   return element;
 }
-defineComponent("ui-button", createUiButton, ["align","as","disabled","href","loading","pending","preset","rel","shape","size","stretch","target","tone","type","variant"]);
+defineComponent("ui-button", createUiButton, ["align","as","disabled","href","loading","pending","preset","rel","shape","size","square","stretch","target","tone","type","variant"]);

package/vanilla/UiPagination.d.ts

@@ -0,0 +1,35 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiPaginationEventMap {
+  navigate: CustomEvent<{ readonly page: number; readonly previousPage: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
+}
+export interface UiPaginationElement extends HTMLElement {
+  addEventListener<K extends keyof UiPaginationEventMap>(type: K, listener: (this: UiPaginationElement, event: UiPaginationEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiPaginationElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiPaginationEventMap>(type: K, listener: (this: UiPaginationElement, event: UiPaginationEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiPaginationElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiPaginationProps {
+  disabled?: boolean | null;
+  hasNext?: boolean | null;
+  hasPrevious?: boolean | null;
+  label?: string | null;
+  nextHref?: string | null;
+  nextLabel?: string | null;
+  page?: number | null;
+  pageLabel?: string | null;
+  pages?: readonly ({ readonly value: number; readonly href?: string | null })[] | null;
+  previousHref?: string | null;
+  previousLabel?: string | null;
+  size?: "sm" | "md" | "lg" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiPagination(props?: UiPaginationProps): UiPaginationElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-pagination": { element: UiPaginationElement; props: Omit<UiPaginationProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiPagination.js

@@ -0,0 +1,202 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, binaryValue, buildTemplate, clearRegion, defaultValue, formatCall, NONCONFORMING, readIndex, readMember, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, writeUrlAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, project, fillSlot, RangedPositionalList, checkBoolean, checkConstrained, checkFormat, checkList, checkNumber, checkObject, checkString, defineComponent, activateModule, add, subtract } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-pagination/ui-pagination.js";
+import "../styles/ui-pagination.css";
+
+const T0 = ["",[],"\n    ",["ui-cluster",["gap","xs"],["ui-button",["square","","variant","ghost","tone","neutral"],["ui-icon",["name","chevron-left"]]],"\n      ",2,"\n      ",["ui-button",["square","","variant","ghost","tone","neutral"],["ui-icon",["name","chevron-right"]]],"\n      ",4],"\n  "];
+const T1 = ["",[],"\n        ",1,"\n        ",["ui-button",["square",""],0],"\n      "];
+const T2 = ["span",["aria-hidden","true"],"…"];
+const T3 = ["",[]];
+let P0, P1, P2, P3;
+const E = new Map();
+const S = { n: [], t: [], f: import.meta.url, g: "ui-pagination", d: { "navigate": [detailCheck(checkObject([["page", checkNumber, false], ["previousPage", checkNumber, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs };
+const D = { g: "ui-pagination", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "hasNext": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "hasPrevious": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Results pages", c: checkString, t: "string", j: 0, m: "s" }, "nextHref": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "nextLabel": { "required":false,"default":"Next", c: checkString, t: "string", j: 0, m: "s" }, "page": { "required":false,"default":1, c: checkNumber, t: "number", j: 0, m: "n" }, "pageLabel": { "required":false,"default":"Page", c: checkString, t: "string", j: 0, m: "s" }, "pages": { "required":false,"default":[], c: checkList(checkObject([["value", checkNumber, false], ["href", checkString, true]], false)), j: 1, m: ["l",["o",["value","n","href","s"]]] }, "previousHref": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "previousLabel": { "required":false,"default":"Previous", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"sm", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiPagination(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("nav");
+  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-pagination");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null, null, null, null, null, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (o, j, l) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild.nextSibling;
+    const t1 = t0.nextSibling.nextSibling.nextSibling;
+    const t2 = t1.firstChild;
+    const s = document.createComment("html-next:item-start"), t = document.createComment("html-next:item-end");
+    n.prepend(s);
+    n.append(t);
+    const r = { k: undefined, i: o, n: s, t, x: 0, y: 0, j, l, a1: t1, a2: t2, w: 0, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: "", a0: t0, e0: t0.nextSibling, b0: undefined };
+    p1(r, -1, E);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) r.w = 0;
+    if (c & 1073741888) {
+      const x0 = trackContainer(r, readIndex({ "true": "solid", "false": "ghost" }, textCall("concat", [(readMember(o, "value") === v[6])])));
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "variant");
+        if (s0 !== r.v0) writeAttribute(r.a1, "variant", r.v0 = s0);
+      }
+      const x1 = trackContainer(r, readIndex({ "true": "accent", "false": "neutral" }, textCall("concat", [(readMember(o, "value") === v[6])])));
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "tone");
+        if (s1 !== r.v1) writeAttribute(r.a1, "tone", r.v1 = s1);
+      }
+    }
+    if (c & 1073743872) {
+      const x2 = v[11];
+      const s2 = toAttribute(x2, "size");
+      if (s2 !== r.v2) writeAttribute(r.a1, "size", r.v2 = s2);
+    }
+    if (c & 1) {
+      const x3 = v[0];
+      const s3 = toAttribute(x3, "disabled");
+      if (s3 !== r.v3) writeAttribute(r.a1, "disabled", r.v3 = s3);
+    }
+    if (c & 1073741824) {
+      const x4 = trackContainer(r, readIndex({ "true": "a", "false": "button" }, textCall("concat", [(defaultValue(readMember(o, "href"), "") !== "")])));
+      if (x4 !== NONCONFORMING) {
+        const s4 = toAttribute(x4, "as");
+        if (s4 !== r.v4) writeAttribute(r.a1, "as", r.v4 = s4);
+      }
+      const x5 = trackContainer(r, readMember(o, "href"));
+      const s5 = toAttribute(x5, "href");
+      if (s5 !== r.v5) writeUrlAttribute(r.a1, "href", r.v5 = s5);
+      const x6 = trackContainer(r, readMember(o, "value"));
+      const s6 = toAttribute(x6, "data-pagination-page");
+      if (s6 !== r.v6) writeAttribute(r.a1, "data-pagination-page", r.v6 = s6);
+      const x7 = formatCall("format", [trackContainer(r, readMember(o, "value")), "number"], "number");
+      if (x7 !== NONCONFORMING) {
+        const s9 = toText(x7);
+        if (s9 !== r.v9) r.a2.data = r.v9 = s9;
+      }
+    }
+    if (c & 1073741952) {
+      const x8 = textCall("concat", [v[7], " ", formatCall("format", [trackContainer(r, readMember(o, "value")), "number"], "number")]);
+      if (x8 !== NONCONFORMING) {
+        const s7 = toAttribute(x8, "aria-label");
+        if (s7 !== r.v7) writeAttribute(r.a1, "aria-label", r.v7 = s7);
+      }
+    }
+    if (c & 1073741888) {
+      const x9 = trackContainer(r, readIndex({ "true": "page", "false": null }, textCall("concat", [(readMember(o, "value") === v[6])])));
+      if (x9 !== NONCONFORMING) {
+        const s8 = toAttribute(x9, "aria-current");
+        if (s8 !== r.v8) writeAttribute(r.a1, "aria-current", r.v8 = s8);
+      }
+    }
+    if (c & -1073741568 && !((truthy(binaryValue(">", r.j, 0)) && truthy(binaryValue(">", readMember(o, "value"), binaryValue("+", readMember(readIndex(v[8], binaryValue("-", r.j, 1, undefined, undefined, subtract)), "value"), 1, undefined, undefined, add))))) !== !r.b0) {
+      if (r.b0) { r.b0 = undefined; clearRegion(r.a0, r.e0); }
+      else { r.b0 = m2(d); r.e0.before(r.b0.n); }
+    } else if (r.b0 !== undefined) p2(r.b0, c, d);
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const r = { n };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-label", r.v0 = s0);
+    }
+    if (c & 1073743872) {
+      const x1 = v[11];
+      const s1 = toAttribute(x1, "size");
+      if (s1 !== r.v1) writeAttribute(r.a1, "size", r.v1 = s1);
+      const s7 = toAttribute(x1, "size");
+      if (s7 !== r.v7) writeAttribute(r.a3, "size", r.v7 = s7);
+    }
+    if (c & 69) {
+      const x2 = ((truthy(v[0]) || !truthy(v[2])) || truthy(binaryValue("<=", v[6], 1)));
+      const s2 = toAttribute(x2, "disabled");
+      if (s2 !== r.v2) writeAttribute(r.a1, "disabled", r.v2 = s2);
+    }
+    if (c & 1073742336) {
+      const x3 = readIndex({ "true": "a", "false": "button" }, textCall("concat", [(v[9] !== "")]));
+      if (x3 !== NONCONFORMING) {
+        const s3 = toAttribute(x3, "as");
+        if (s3 !== r.v3) writeAttribute(r.a1, "as", r.v3 = s3);
+      }
+    }
+    if (c & 512) {
+      const x4 = v[9];
+      const s4 = toAttribute(x4, "href");
+      if (s4 !== r.v4) writeUrlAttribute(r.a1, "href", r.v4 = s4);
+    }
+    if (c & 1024) {
+      const x5 = v[10];
+      const s5 = toAttribute(x5, "aria-label");
+      if (s5 !== r.v5) writeAttribute(r.a1, "aria-label", r.v5 = s5);
+    }
+    if (c & 64) {
+      const x6 = binaryValue("-", v[6], 1, undefined, undefined, subtract);
+      const s6 = toAttribute(x6, "data-pagination-page");
+      if (s6 !== r.v6) writeAttribute(r.a1, "data-pagination-page", r.v6 = s6);
+    }
+    if (c & 3) {
+      const x7 = (truthy(v[0]) || !truthy(v[1]));
+      const s8 = toAttribute(x7, "disabled");
+      if (s8 !== r.v8) writeAttribute(r.a3, "disabled", r.v8 = s8);
+    }
+    if (c & 1073741840) {
+      const x8 = readIndex({ "true": "a", "false": "button" }, textCall("concat", [(v[4] !== "")]));
+      if (x8 !== NONCONFORMING) {
+        const s9 = toAttribute(x8, "as");
+        if (s9 !== r.v9) writeAttribute(r.a3, "as", r.v9 = s9);
+      }
+    }
+    if (c & 16) {
+      const x9 = v[4];
+      const s10 = toAttribute(x9, "href");
+      if (s10 !== r.v10) writeUrlAttribute(r.a3, "href", r.v10 = s10);
+    }
+    if (c & 32) {
+      const x10 = v[5];
+      const s11 = toAttribute(x10, "aria-label");
+      if (s11 !== r.v11) writeAttribute(r.a3, "aria-label", r.v11 = s11);
+    }
+    if (c & 64) {
+      const x11 = binaryValue("+", v[6], 1, undefined, undefined, add);
+      const s12 = toAttribute(x11, "data-pagination-page");
+      if (s12 !== r.v12) writeAttribute(r.a3, "data-pagination-page", r.v12 = s12);
+    }
+    if (c & 1073742080) r.L0.update(v[8], d, c);
+    if (c !== -1 && c & 1073744321) r.L0.each(c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a4, r.e1, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m3(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p3(r.b1, c, d);
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild;
+  const t2 = t1.nextSibling.nextSibling;
+  const t3 = t2.nextSibling.nextSibling.nextSibling;
+  const t4 = t3.nextSibling.nextSibling;
+  const R = { n: element, a1: t1, a3: t3, v0: undefined, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, L0: new RangedPositionalList(t2, t2.nextSibling, m1, p1, (o) => readMember(o, "value"), "item"), a4: t4, e1: t4.nextSibling, b1: undefined, f1: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-pagination", createUiPagination, ["disabled","hasNext","hasPrevious","label","nextHref","nextLabel","page","pageLabel","pages","previousHref","previousLabel","size"]);

package/vanilla/UiSkeleton.d.ts

@@ -0,0 +1,26 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiSkeletonEventMap {
+}
+export interface UiSkeletonElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiSkeletonEventMap>(type: K, listener: (this: UiSkeletonElement, event: UiSkeletonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSkeletonElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSkeletonEventMap>(type: K, listener: (this: UiSkeletonElement, event: UiSkeletonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSkeletonElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSkeletonProps {
+  animated?: boolean | null;
+  height?: string | null;
+  shape?: "text" | "circle" | "rectangle" | null;
+  width?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSkeleton(props?: UiSkeletonProps): UiSkeletonElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-skeleton": { element: UiSkeletonElement; props: Omit<UiSkeletonProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiSkeleton.js

@@ -0,0 +1,42 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, toText, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkString, defineComponent } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-skeleton.css";
+
+const S = { n: [], t: [], f: import.meta.url, g: "ui-skeleton", b: generatedInputs };
+const D = { g: "ui-skeleton", props: { "animated": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "height": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["text","circle","rectangle"],"default":"text", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "width": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+
+export function createUiSkeleton(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
+  element.setAttribute("data-component", "ui-skeleton");
+  const v = [null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.n.style.setProperty("--ui-skeleton-width", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.n.style.setProperty("--ui-skeleton-height", r.v1 = s1);
+    }
+    if (c & 5) {
+      const x2 = hostState(["shape","animated"], [v[2], v[0]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-skeleton-state", (r.v2 = s2) === "" ? null : s2);
+    }
+  };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-skeleton", createUiSkeleton, ["animated","height","shape","width"]);

package/vanilla/index.js

@@ -59,6 +59,7 @@ export * from "./UiMeter.js";
 export * from "./UiNavItem.js";
 export * from "./UiNumberInput.js";
 export * from "./UiPageHeader.js";
+export * from "./UiPagination.js";
 export * from "./UiPopover.js";
 export * from "./UiRadio.js";
 export * from "./UiRadioGroup.js";
@@ -70,6 +71,7 @@ export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSkeleton.js";
 export * from "./UiSlider.js";
 export * from "./UiSpinner.js";
 export * from "./UiStack.js";