@threadlabs/looma 0.37.4 → 0.37.5

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/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";

package/vue/UiButton.d.ts

@@ -53,6 +53,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | null>;
     };
+    square: {
+        type: PropType<boolean | null>;
+    };
     stretch: {
         type: PropType<boolean | null>;
     };
@@ -102,6 +105,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | null>;
     };
+    square: {
+        type: PropType<boolean | null>;
+    };
     stretch: {
         type: PropType<boolean | null>;
     };

package/vue/UiButton.vue

@@ -117,6 +117,14 @@ const propValidityContract = {
       values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
+    square: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'square' },
+      description:
+        'Gives short labels and icons the same square minimum footprint at each size. Longer labels grow naturally. Applies to boxed actions; link and card variants\n      keep their normal layout.',
+      default: false,
+    },
     stretch: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -174,6 +182,7 @@ const props = defineProps({
   rel: { type: null as unknown as PropType<string | null> },
   shape: { type: null as unknown as PropType<'rounded' | 'pill' | null> },
   size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null> },
+  square: { type: null as unknown as PropType<boolean | null> },
   stretch: { type: null as unknown as PropType<boolean | null> },
   target: { type: null as unknown as PropType<string | null> },
   tone: {
@@ -200,6 +209,7 @@ const acceptedProps: Record<string, unknown> = {
   rel: null,
   shape: 'rounded',
   size: 'md',
+  square: false,
   stretch: false,
   target: null,
   tone: 'accent',
@@ -215,6 +225,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   preset: 'none',
   shape: 'rounded',
   size: 'md',
+  square: false,
   stretch: false,
   tone: 'accent',
   type: 'button',
@@ -241,6 +252,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'size':
       return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'square':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'stretch':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'target':
@@ -301,6 +314,11 @@ const checkedProps = computed(() => {
       props['size'],
       props[BINDING_INPUTS_PROP],
     ) as 'xs' | 'sm' | 'md' | 'lg',
+    square: propInputs.value<boolean | null>(
+      'square',
+      props['square'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
     stretch: propInputs.value<boolean | null>(
       'stretch',
       props['stretch'],
@@ -703,6 +721,7 @@ const hostState = computed(() =>
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     checkedProps.value.shape && 'shape',
     checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
+    checkedProps.value.square && 'square',
     checkedProps.value.loading && 'loading',
     checkedProps.value.pending && 'pending',
   ].filter(Boolean).join(' ')
@@ -739,6 +758,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     'rel',
     'shape',
     'size',
+    'square',
     'stretch',
     'target',
     'tone',
@@ -778,6 +798,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -822,6 +843,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -870,6 +892,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -908,6 +931,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-square="reflectedProp('square', 'square', checkedProps.square, undefined, false)"
     :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -1007,6 +1031,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 /* A count is an adornment, not another line of label text. Keep the standard control height
    with enough inset for a 24px mark; large content can still grow the button naturally. */
 
+/* Short numeric and icon actions share a minimum box; large values remain readable. */
+
 /* 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. */
 
@@ -1103,6 +1129,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope:where([data-hn-ui-button])) {
+    --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     appearance: none;
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
@@ -1163,6 +1190,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])) {
+    --_button-square-size: 1.5rem;
     min-block-size: 1.5rem;
     padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25) !important;
     font-size: var(--ui-font-size-xs);
@@ -1173,6 +1201,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button])) {
+    --_button-square-size: var(--ui-control-size-sm);
     min-block-size: var(--ui-control-size-sm);
     padding: var(--ui-control-inset-block-sm, var(--ui-space-1))
       var(--ui-action-inset-sm, var(--ui-space-2)) !important;
@@ -1180,11 +1209,16 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="size=lg"]:where([data-hn-ui-button])) {
+    --_button-square-size: var(--ui-control-size-lg);
     min-block-size: var(--ui-control-size-lg);
     padding: var(--ui-control-inset-block-lg, var(--ui-space-3))
       var(--ui-action-inset-lg, var(--ui-space-4)) !important;
     font-size: var(--ui-font-size-md);
   }
+  :global(:scope[data-ui-button-state~="square"]:not([data-appearance="link"], [data-appearance="card"]):where([data-hn-ui-button])) {
+    min-inline-size: var(--_button-square-size);
+    padding-inline: var(--ui-space-1) !important;
+  }
   :global(:scope[data-appearance="card"]:where([data-hn-ui-button])) {
     display: grid !important;
     grid-template-columns: auto minmax(0, 1fr) auto;