@threadlabs/looma 0.37.4 → 0.37.6

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",
@@ -360,6 +365,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-sidebar/ui-sidebar.html"
     },
+    {
+      "tag": "ui-skeleton",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-skeleton/ui-skeleton.html"
+    },
     {
       "tag": "ui-slider",
       "package": "@threadlabs/looma",
@@ -448,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.37.4",
+  "version": "0.37.6",
   "groups": [
     {
       "id": "layout",
@@ -2544,6 +2554,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 +2702,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 +2888,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 +17219,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",
@@ -20077,6 +20404,169 @@
         }
       ]
     },
+    {
+      "tag": "ui-skeleton",
+      "package": "@threadlabs/looma",
+      "root": "span",
+      "description": "Reserve the shape of incoming content without announcing each placeholder. Text follows the surrounding line metrics; circles and rectangles stand in for avatars and media. Use one status message and aria-busy on the loading region, then replace the placeholders with real content. Keep existing content visible during refresh when possible. Animation is optional and respects reduced motion.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-skeleton/ui-skeleton.html"
+        ],
+        "component": [
+          {
+            "name": "--ui-skeleton-height",
+            "fallbacks": [
+              "1lh",
+              "auto",
+              "8rem"
+            ]
+          },
+          {
+            "name": "--ui-skeleton-width",
+            "fallbacks": [
+              "100%",
+              "calc(2.5rem + 2 * var(--ui-border-width))"
+            ]
+          }
+        ],
+        "shared": [
+          {
+            "name": "--ui-border-width"
+          },
+          {
+            "name": "--ui-radius-md"
+          },
+          {
+            "name": "--ui-radius-round"
+          },
+          {
+            "name": "--ui-radius-sm"
+          },
+          {
+            "name": "--ui-text-primary"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "animated",
+          "property": "animated",
+          "description": "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "height",
+          "property": "height",
+          "description": "Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "shape",
+          "property": "shape",
+          "description": "The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media area.",
+          "type": "keyword",
+          "default": "text",
+          "options": [
+            "text",
+            "circle",
+            "rectangle"
+          ]
+        },
+        {
+          "name": "width",
+          "property": "width",
+          "description": "Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium Avatar's outer size for circles.",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "properties": [
+        {
+          "name": "animated",
+          "description": "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "height",
+          "description": "Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "shape",
+          "description": "The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media area.",
+          "type": "\"text\" | \"circle\" | \"rectangle\"",
+          "default": "text",
+          "options": [
+            "text",
+            "circle",
+            "rectangle"
+          ]
+        },
+        {
+          "name": "width",
+          "description": "Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium Avatar's outer size for circles.",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "group": "display",
+      "id": "@threadlabs/looma/ui-skeleton",
+      "title": "Skeleton",
+      "resource": "@threadlabs/looma/components/ui-skeleton/ui-skeleton.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-skeleton/01-text",
+          "name": "01-text",
+          "title": "Text lines",
+          "description": "Each placeholder reserves a whole text line. Vary the widths to suggest the content without pretending to know its words.",
+          "markup": "<ui-stack gap=\"none\">\n  <ui-skeleton></ui-skeleton>\n  <ui-skeleton width=\"85%\"></ui-skeleton>\n  <ui-skeleton width=\"60%\"></ui-skeleton>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-skeleton/02-shapes",
+          "name": "02-shapes",
+          "title": "Avatar and media shapes",
+          "description": "The default circle matches a medium Avatar. Supply dimensions for a thumbnail or a larger media area; narrow containers constrain the width.",
+          "markup": "<ui-stack gap=\"m\">\n  <ui-cluster gap=\"m\">\n    <ui-skeleton shape=\"circle\"></ui-skeleton>\n    <ui-skeleton shape=\"circle\" width=\"1.75rem\"></ui-skeleton>\n    <ui-skeleton shape=\"rectangle\" width=\"6rem\" height=\"2.5rem\"></ui-skeleton>\n  </ui-cluster>\n  <ui-skeleton shape=\"rectangle\"></ui-skeleton>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-skeleton/03-loading-card",
+          "name": "03-loading-card",
+          "title": "Loading a profile",
+          "description": "One status describes the work; the section stays busy until the application replaces its decorative placeholders. Compare the loaded card's avatar and text metrics.",
+          "markup": "<ui-stack gap=\"m\">\n  <ui-status-message kind=\"loading\">Loading a profile…</ui-status-message>\n  <ui-grid>\n    <ui-card as=\"section\" aria-label=\"Profile\" aria-busy=\"true\">\n      <ui-cluster gap=\"s\">\n        <ui-skeleton shape=\"circle\"></ui-skeleton>\n        <ui-stack fill gap=\"none\">\n          <ui-skeleton width=\"65%\"></ui-skeleton>\n          <ui-skeleton width=\"45%\"></ui-skeleton>\n        </ui-stack>\n      </ui-cluster>\n      <ui-stack gap=\"none\">\n        <ui-skeleton></ui-skeleton>\n        <ui-skeleton width=\"80%\"></ui-skeleton>\n      </ui-stack>\n    </ui-card>\n    <ui-card as=\"section\" aria-label=\"Loaded profile\">\n      <ui-cluster gap=\"s\">\n        <ui-avatar name=\"Ada Lovelace\" decorative></ui-avatar>\n        <ui-stack fill gap=\"none\">\n          <ui-text weight=\"semibold\">Ada Lovelace</ui-text>\n          <ui-text tone=\"secondary\">Mathematician</ui-text>\n        </ui-stack>\n      </ui-cluster>\n      <ui-text>Notes on an analytical engine and the possibilities of computation.</ui-text>\n    </ui-card>\n  </ui-grid>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-skeleton/04-animation",
+          "name": "04-animation",
+          "title": "Optional motion",
+          "description": "Still by default. Opt in to a gentle pulse when it helps convey loading; reduced-motion preferences always keep it still.",
+          "markup": "<ui-stack gap=\"s\">\n  <ui-text tone=\"secondary\" size=\"sm\">Still</ui-text>\n  <ui-skeleton width=\"75%\"></ui-skeleton>\n  <ui-text tone=\"secondary\" size=\"sm\">Animated when motion is welcome</ui-text>\n  <ui-skeleton animated width=\"75%\"></ui-skeleton>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
     {
       "tag": "ui-slider",
       "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.4",
+  "version": "0.37.6",
   "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. */