@threadlabs/looma 0.37.3 → 0.37.5

package/docs/catalog.json

@@ -305,6 +305,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-page-header/ui-page-header.html"
     },
+    {
+      "tag": "ui-pagination",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-pagination/ui-pagination.html"
+    },
     {
       "tag": "ui-popover",
       "package": "@threadlabs/looma",
@@ -448,7 +453,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.37.3",
+  "version": "0.37.5",
   "groups": [
     {
       "id": "layout",
@@ -2544,6 +2549,13 @@
             "lg"
           ]
         },
+        {
+          "name": "square",
+          "property": "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 keep their normal layout.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "stretch",
           "property": "stretch",
@@ -2685,6 +2697,12 @@
             "lg"
           ]
         },
+        {
+          "name": "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 keep their normal layout.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "stretch",
           "description": "Fills the inline size of its container.",
@@ -2865,6 +2883,16 @@
           "bindings": "",
           "frameworks": {}
         },
+        {
+          "id": "@threadlabs/looma/ui-button/09-square",
+          "name": "09-square",
+          "title": "Square minimum size",
+          "description": "Short numeric and icon actions share the control's minimum height and width. Longer labels grow naturally; the ordinary Button default stays content-sized.",
+          "markup": "<ui-cluster gap=\"xs\"><ui-button square size=\"sm\" variant=\"ghost\" tone=\"neutral\" aria-label=\"Previous\"><ui-icon\n      name=\"chevron-left\"\n    ></ui-icon></ui-button><ui-button square size=\"sm\" variant=\"ghost\" tone=\"neutral\">1</ui-button><ui-button square size=\"sm\" variant=\"solid\"\n  >2</ui-button><ui-button square size=\"sm\" variant=\"ghost\" tone=\"neutral\">10</ui-button><ui-button\n    square\n    size=\"sm\"\n    variant=\"ghost\"\n    tone=\"neutral\"\n    aria-label=\"Next\"\n  ><ui-icon name=\"chevron-right\"></ui-icon></ui-button></ui-cluster>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
         {
           "id": "@threadlabs/looma/ui-button/10-card",
           "name": "10-card",
@@ -17186,6 +17214,300 @@
         }
       ]
     },
+    {
+      "tag": "ui-pagination",
+      "package": "@threadlabs/looma",
+      "root": "nav",
+      "description": "Controlled page navigation for result lists, cards and tables. Supply the visible numbered pages and previous/next availability; Looma owns the native controls, current-page semantics and navigate requests. Optional hrefs preserve ordinary link navigation. Applications own routes, data fetching and page windows.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-pagination/ui-pagination.html"
+        ],
+        "component": [],
+        "shared": []
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "property": "disabled",
+          "description": "Makes all page controls unavailable while keeping the current page visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "has-next",
+          "property": "hasNext",
+          "description": "Whether another page is available. The component does not infer a total.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "has-previous",
+          "property": "hasPrevious",
+          "description": "Whether a preceding page is available. Previous is always unavailable on page one.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "property": "label",
+          "description": "Accessible name for the navigation landmark.",
+          "type": "string",
+          "default": "Results pages"
+        },
+        {
+          "name": "next-href",
+          "property": "nextHref",
+          "description": "Optional native destination for Next. Empty renders a request button.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "next-label",
+          "property": "nextLabel",
+          "description": "Accessible label for the following page action.",
+          "type": "string",
+          "default": "Next"
+        },
+        {
+          "name": "page",
+          "property": "page",
+          "description": "Current one-based page. The consumer updates it after a navigate request; activation never changes it internally.",
+          "type": "number",
+          "default": 1
+        },
+        {
+          "name": "page-label",
+          "property": "pageLabel",
+          "description": "Prefix for each numbered page's accessible name, followed by its localized number.",
+          "type": "string",
+          "default": "Page"
+        },
+        {
+          "name": "pages",
+          "property": "pages",
+          "description": "Visible numbered pages in ascending order. Omit for previous/next navigation without a known total. Gaps between numbers show an ellipsis. Supply href to keep a numbered page usable as a native link before JavaScript.",
+          "type": "list(object)",
+          "fields": [
+            {
+              "path": "[].value",
+              "type": "number",
+              "required": true
+            },
+            {
+              "path": "[].href",
+              "type": "string",
+              "required": false
+            }
+          ],
+          "default": "[]"
+        },
+        {
+          "name": "previous-href",
+          "property": "previousHref",
+          "description": "Optional native destination for Previous. Empty renders a request button.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "previous-label",
+          "property": "previousLabel",
+          "description": "Accessible label for the preceding page action.",
+          "type": "string",
+          "default": "Previous"
+        },
+        {
+          "name": "size",
+          "property": "size",
+          "description": "Uses Button's shared size scale. Narrow groups wrap without enlarging compact controls.",
+          "type": "keyword",
+          "default": "sm",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "description": "Makes all page controls unavailable while keeping the current page visible.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "hasNext",
+          "description": "Whether another page is available. The component does not infer a total.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "hasPrevious",
+          "description": "Whether a preceding page is available. Previous is always unavailable on page one.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the navigation landmark.",
+          "type": "string",
+          "default": "Results pages"
+        },
+        {
+          "name": "nextHref",
+          "description": "Optional native destination for Next. Empty renders a request button.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "nextLabel",
+          "description": "Accessible label for the following page action.",
+          "type": "string",
+          "default": "Next"
+        },
+        {
+          "name": "page",
+          "description": "Current one-based page. The consumer updates it after a navigate request; activation never changes it internally.",
+          "type": "number",
+          "default": 1
+        },
+        {
+          "name": "pageLabel",
+          "description": "Prefix for each numbered page's accessible name, followed by its localized number.",
+          "type": "string",
+          "default": "Page"
+        },
+        {
+          "name": "pages",
+          "description": "Visible numbered pages in ascending order. Omit for previous/next navigation without a known total. Gaps between numbers show an ellipsis. Supply href to keep a numbered page usable as a native link before JavaScript.",
+          "type": "readonly ({ readonly value: number; readonly href?: string | null })[]",
+          "fields": [
+            {
+              "path": "[].value",
+              "type": "number",
+              "required": true
+            },
+            {
+              "path": "[].href",
+              "type": "string",
+              "required": false
+            }
+          ],
+          "default": "[]"
+        },
+        {
+          "name": "previousHref",
+          "description": "Optional native destination for Previous. Empty renders a request button.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "previousLabel",
+          "description": "Accessible label for the preceding page action.",
+          "type": "string",
+          "default": "Previous"
+        },
+        {
+          "name": "size",
+          "description": "Uses Button's shared size scale. Narrow groups wrap without enlarging compact controls.",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "sm",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        }
+      ],
+      "events": [
+        {
+          "name": "navigate",
+          "detailType": "{ readonly page: number; readonly previousPage: number; readonly trigger: \"keyboard\" | \"pointer\" | \"programmatic\" }",
+          "detailSchema": "object",
+          "fields": [
+            {
+              "path": "page",
+              "type": "number",
+              "required": true
+            },
+            {
+              "path": "previousPage",
+              "type": "number",
+              "required": true
+            },
+            {
+              "path": "trigger",
+              "type": "keyword",
+              "required": true,
+              "values": [
+                "keyboard",
+                "pointer",
+                "programmatic"
+              ]
+            }
+          ],
+          "detailDocs": "Emitted with the declared detail payload."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "description": "Default child content."
+        }
+      ],
+      "group": "display",
+      "id": "@threadlabs/looma/ui-pagination",
+      "title": "Pagination",
+      "resource": "@threadlabs/looma/components/ui-pagination/ui-pagination.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-pagination/01-numbered",
+          "name": "01-numbered",
+          "title": "Numbered pages",
+          "description": "The consumer supplies a bounded page window. Omitted page numbers produce a quiet ellipsis; the current page remains consumer controlled.",
+          "markup": "<ui-pagination page=\"3\" has-previous has-next pages='[{\"value\":1},{\"value\":2},{\"value\":3},{\"value\":4},{\"value\":10}]'></ui-pagination>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {},
+          "behavior": "@threadlabs/looma/docs/examples/ui-pagination/examples/01-numbered.behavior.js"
+        },
+        {
+          "id": "@threadlabs/looma/ui-pagination/02-native-links",
+          "name": "02-native-links",
+          "title": "Native links",
+          "description": "Supplied hrefs stay ordinary links before upgrade and retain modified-click and open-in-new-tab behavior. Replace these example query destinations with your own routes.",
+          "markup": "<ui-pagination\n  page=\"2\"\n  label=\"Catalog pages\"\n  has-previous\n  has-next\n  previous-href=\"?page=1\"\n  next-href=\"?page=3\"\n  pages='[{\"value\":1,\"href\":\"?page=1\"},{\"value\":2,\"href\":\"?page=2\"},{\"value\":3,\"href\":\"?page=3\"}]'\n></ui-pagination>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-pagination/03-unknown-total",
+          "name": "03-unknown-total",
+          "title": "Unknown total",
+          "description": "Previous and Next work without an invented page count. The application decides availability from its result or cursor data.",
+          "markup": "<ui-pagination page=\"3\" has-previous has-next><ui-text size=\"sm\" tone=\"secondary\">Page 3</ui-text></ui-pagination>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-pagination/04-table",
+          "name": "04-table",
+          "title": "Beside a results table",
+          "description": "Table owns its rows, Pagination owns page controls, and Stack owns their spacing. Data retrieval and sorting stay with the application.",
+          "markup": "<ui-stack gap=\"m\">\n  <ui-table density=\"compact\"><table>\n      <caption>Catalog results</caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">Item</th>\n          <th scope=\"col\">Status</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <th scope=\"row\">Field guide</th>\n          <td>Available</td>\n        </tr>\n        <tr>\n          <th scope=\"row\">Trail notes</th>\n          <td>Available</td>\n        </tr>\n      </tbody>\n    </table></ui-table>\n  <ui-pagination page=\"1\" has-next pages='[{\"value\":1},{\"value\":2},{\"value\":3}]'></ui-pagination>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
     {
       "tag": "ui-popover",
       "package": "@threadlabs/looma",

package/docs/examples/ui-pagination/examples/01-numbered.behavior.js

@@ -0,0 +1,11 @@
+import { componentRegistry } from "@nextwebwg/html-next/runtime";
+/** Reflect navigation requests into this example's bounded, consumer-owned page window. */
+export default function setup(root) {
+    const navigate = (event) => {
+        const page = event.detail.page;
+        const values = [...new Set([1, page - 1, page, page + 1, 10])].filter(value => value >= 1 && value <= 10).sort((a, b) => a - b);
+        componentRegistry.update(event.target, { page, pages: values.map(value => ({ value })), hasPrevious: page > 1, hasNext: page < 10 });
+    };
+    root.addEventListener("navigate", navigate);
+    return () => root.removeEventListener("navigate", navigate);
+}

package/package.json

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

package/styles/ui-button.css

@@ -129,6 +129,7 @@
     }
 
     :scope:where([data-component~="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;
@@ -193,6 +194,7 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
+      --_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);
@@ -203,17 +205,25 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+      --_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;
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=lg"] {
+      --_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);
     }
 
+    /* Short numeric and icon actions share a minimum box; large values remain readable. */
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="square"]:not([data-appearance="link"], [data-appearance="card"]) {
+      min-inline-size: var(--_button-square-size);
+      padding-inline: var(--ui-space-1) !important;
+    }
+
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
     :scope:where([data-component~="ui-button"])[data-appearance="card"] {
@@ -530,6 +540,8 @@
     @supports (text-box-trim: trim-both) {
     }
 
+    /* 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. */
 

package/styles/ui-pagination.css

@@ -0,0 +1 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */

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;