luxen-ui 0.24.0 → 0.25.0

package/cdn/custom-elements.json

@@ -172,181 +172,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/avatar/avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
-              "name": "--size",
-              "default": "40px"
-            },
-            {
-              "description": "Background fill color for initials and the default icon.",
-              "name": "--color"
-            },
-            {
-              "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
-              "name": "--text-color"
-            },
-            {
-              "description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
-              "name": "--appearance"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
-              "name": "base"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "badge",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "attribute": "badge"
-            },
-            {
-              "kind": "field",
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "attribute": "interactive",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
-              "fieldName": "src"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "fieldName": "size"
-            },
-            {
-              "name": "badge",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "fieldName": "badge"
-            },
-            {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "fieldName": "interactive"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-avatar",
-          "customElement": true,
-          "summary": "An avatar component for displaying user images, initials, or a default icon.",
-          "_cssClasses": [
-            {
-              "name": ".l-avatar-group",
-              "description": "Flex wrapper that overlaps a row of stacked avatars."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Avatar",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/html/elements/avatar/avatar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/avatar/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/avatar/avatar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/alert-dialog/alert-dialog.ts",
@@ -836,6 +661,181 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/avatar/avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Avatar",
+          "cssProperties": [
+            {
+              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
+              "name": "--size",
+              "default": "40px"
+            },
+            {
+              "description": "Background fill color for initials and the default icon.",
+              "name": "--color"
+            },
+            {
+              "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
+              "name": "--text-color"
+            },
+            {
+              "description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
+              "name": "--appearance"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "badge",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "attribute": "badge"
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "attribute": "interactive",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "fieldName": "src"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "fieldName": "size"
+            },
+            {
+              "name": "badge",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "fieldName": "badge"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "fieldName": "interactive"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-avatar",
+          "customElement": true,
+          "summary": "An avatar component for displaying user images, initials, or a default icon.",
+          "_cssClasses": [
+            {
+              "name": ".l-avatar-group",
+              "description": "Flex wrapper that overlaps a row of stacked avatars."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/html/elements/avatar/avatar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/avatar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/avatar/avatar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/badge/badge.ts",
@@ -991,65 +991,218 @@
           "name": "BreadcrumbMeta",
           "cssProperties": [
             {
-              "description": "Space between crumbs and around the separator.",
-              "name": "--gap",
-              "default": "0.5rem"
+              "description": "Space between crumbs and around the separator.",
+              "name": "--gap",
+              "default": "0.5rem"
+            },
+            {
+              "description": "Separator glyph color.",
+              "name": "--separator-color",
+              "default": "var(--l-color-text-tertiary)"
+            },
+            {
+              "description": "Divider glyph; any character (e.g. `'›'`) or a `url()` image.",
+              "name": "--separator",
+              "default": "'/'"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Names the navigation landmark (use `\"Breadcrumb\"`).",
+              "name": "aria-label"
+            },
+            {
+              "description": "Set to `page` on the current crumb's `<a>`.",
+              "name": "aria-current"
+            },
+            {
+              "description": "Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay.",
+              "name": "data-unstyled-links"
+            }
+          ],
+          "summary": "A navigation trail showing the current page's position in the site hierarchy. Built on a native `<nav><ol>` per the WAI-ARIA APG pattern.",
+          "examples": [
+            {
+              "title": "Basic",
+              "language": "html",
+              "code": "<nav class=\"l-breadcrumb\" aria-label=\"Breadcrumb\">\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/products\">Products</a></li>\n<li><a href=\"/products/bags\" aria-current=\"page\">Bags</a></li>\n</ol>\n</nav>"
+            }
+          ],
+          "_cssClasses": [
+            {
+              "name": ".l-breadcrumb",
+              "description": "Breadcrumb navigation on a `<nav>` wrapping an `<ol>` of `<li><a>` crumbs."
+            }
+          ],
+          "customElement": false,
+          "_native": true,
+          "_nativeTag": "nav",
+          "selector": ".l-breadcrumb",
+          "_attributes": [
+            {
+              "name": "aria-label",
+              "description": "Names the navigation landmark (use `\"Breadcrumb\"`)."
+            },
+            {
+              "name": "aria-current",
+              "description": "Set to `page` on the current crumb's `<a>`."
+            },
+            {
+              "name": "data-unstyled-links",
+              "description": "Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BreadcrumbMeta",
+          "declaration": {
+            "name": "BreadcrumbMeta",
+            "module": "src/html/elements/breadcrumb/breadcrumb.meta.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/button/button.meta.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonMeta",
+          "cssProperties": [
+            {
+              "description": "Button height (md size).",
+              "name": "--height",
+              "default": "36px"
+            },
+            {
+              "description": "Horizontal padding.",
+              "name": "--padding-inline",
+              "default": "0.625rem"
+            },
+            {
+              "description": "Background color.",
+              "name": "--background-color"
+            },
+            {
+              "description": "Background color on hover.",
+              "name": "--background-color-hover"
+            },
+            {
+              "description": "Background color on press.",
+              "name": "--background-color-active"
+            },
+            {
+              "description": "Text color.",
+              "name": "--text-color"
+            },
+            {
+              "description": "Text color on hover.",
+              "name": "--text-color-hover"
+            },
+            {
+              "description": "Border color.",
+              "name": "--border-color"
             },
             {
-              "description": "Separator glyph color.",
-              "name": "--separator-color",
-              "default": "var(--l-color-text-tertiary)"
+              "description": "Border color on hover.",
+              "name": "--border-color-hover"
             },
             {
-              "description": "Divider glyph; any character (e.g. `'›'`) or a `url()` image.",
-              "name": "--separator",
-              "default": "'/'"
+              "description": "Label font size. Stays 14px across all sizes; override to opt into a larger label.",
+              "name": "--font-size",
+              "default": "0.875rem"
             }
           ],
           "attributes": [
             {
-              "description": "Names the navigation landmark (use `\"Breadcrumb\"`).",
-              "name": "aria-label"
+              "description": "Disables the button.",
+              "name": "disabled"
             },
             {
-              "description": "Set to `page` on the current crumb's `<a>`.",
-              "name": "aria-current"
+              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.).",
+              "name": "command"
             },
             {
-              "description": "Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay.",
-              "name": "data-unstyled-links"
+              "description": "ID of the target element for `command`.",
+              "name": "commandfor"
+            },
+            {
+              "description": "primary | destructive — Visual variant. Default is the secondary style.",
+              "name": "data-variant"
+            },
+            {
+              "description": "sm | lg | xl — Control size. Default is md.",
+              "name": "data-size"
+            },
+            {
+              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child.",
+              "name": "data-icon-only"
+            },
+            {
+              "description": "Press effect (scale + translate on active).",
+              "name": "data-press-effect"
             }
           ],
-          "summary": "A navigation trail showing the current page's position in the site hierarchy. Built on a native `<nav><ol>` per the WAI-ARIA APG pattern.",
+          "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
           "examples": [
             {
-              "title": "Basic",
+              "title": "Primary",
               "language": "html",
-              "code": "<nav class=\"l-breadcrumb\" aria-label=\"Breadcrumb\">\n<ol>\n<li><a href=\"/\">Home</a></li>\n<li><a href=\"/products\">Products</a></li>\n<li><a href=\"/products/bags\" aria-current=\"page\">Bags</a></li>\n</ol>\n</nav>"
+              "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
             }
           ],
           "_cssClasses": [
             {
-              "name": ".l-breadcrumb",
-              "description": "Breadcrumb navigation on a `<nav>` wrapping an `<ol>` of `<li><a>` crumbs."
+              "name": ".l-button",
+              "description": "Base button style."
             }
           ],
           "customElement": false,
           "_native": true,
-          "_nativeTag": "nav",
-          "selector": ".l-breadcrumb",
+          "_nativeTag": "button",
+          "selector": ".l-button",
           "_attributes": [
             {
-              "name": "aria-label",
-              "description": "Names the navigation landmark (use `\"Breadcrumb\"`)."
+              "name": "disabled",
+              "description": "Disables the button."
             },
             {
-              "name": "aria-current",
-              "description": "Set to `page` on the current crumb's `<a>`."
+              "name": "command",
+              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
             },
             {
-              "name": "data-unstyled-links",
-              "description": "Opt out of Luxen's link theming (color, underline, hover) so you can apply your own link class. Layout, separators, scroll, and current-page behavior stay."
+              "name": "commandfor",
+              "description": "ID of the target element for `command`."
+            },
+            {
+              "name": "data-variant",
+              "values": [
+                "primary",
+                "destructive"
+              ],
+              "description": "Visual variant. Default is the secondary style."
+            },
+            {
+              "name": "data-size",
+              "values": [
+                "sm",
+                "lg",
+                "xl"
+              ],
+              "description": "Control size. Default is md."
+            },
+            {
+              "name": "data-icon-only",
+              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
+            },
+            {
+              "name": "data-press-effect",
+              "description": "Press effect (scale + translate on active)."
             }
           ]
         }
@@ -1057,10 +1210,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BreadcrumbMeta",
+          "name": "ButtonMeta",
           "declaration": {
-            "name": "BreadcrumbMeta",
-            "module": "src/html/elements/breadcrumb/breadcrumb.meta.ts"
+            "name": "ButtonMeta",
+            "module": "src/html/elements/button/button.meta.ts"
           }
         }
       ]
@@ -1836,159 +1989,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/button/button.meta.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ButtonMeta",
-          "cssProperties": [
-            {
-              "description": "Button height (md size).",
-              "name": "--height",
-              "default": "36px"
-            },
-            {
-              "description": "Horizontal padding.",
-              "name": "--padding-inline",
-              "default": "0.625rem"
-            },
-            {
-              "description": "Background color.",
-              "name": "--background-color"
-            },
-            {
-              "description": "Background color on hover.",
-              "name": "--background-color-hover"
-            },
-            {
-              "description": "Background color on press.",
-              "name": "--background-color-active"
-            },
-            {
-              "description": "Text color.",
-              "name": "--text-color"
-            },
-            {
-              "description": "Text color on hover.",
-              "name": "--text-color-hover"
-            },
-            {
-              "description": "Border color.",
-              "name": "--border-color"
-            },
-            {
-              "description": "Border color on hover.",
-              "name": "--border-color-hover"
-            },
-            {
-              "description": "Label font size. Stays 14px across all sizes; override to opt into a larger label.",
-              "name": "--font-size",
-              "default": "0.875rem"
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Disables the button.",
-              "name": "disabled"
-            },
-            {
-              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.).",
-              "name": "command"
-            },
-            {
-              "description": "ID of the target element for `command`.",
-              "name": "commandfor"
-            },
-            {
-              "description": "primary | destructive — Visual variant. Default is the secondary style.",
-              "name": "data-variant"
-            },
-            {
-              "description": "sm | lg | xl — Control size. Default is md.",
-              "name": "data-size"
-            },
-            {
-              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child.",
-              "name": "data-icon-only"
-            },
-            {
-              "description": "Press effect (scale + translate on active).",
-              "name": "data-press-effect"
-            }
-          ],
-          "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
-          "examples": [
-            {
-              "title": "Primary",
-              "language": "html",
-              "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
-            }
-          ],
-          "_cssClasses": [
-            {
-              "name": ".l-button",
-              "description": "Base button style."
-            }
-          ],
-          "customElement": false,
-          "_native": true,
-          "_nativeTag": "button",
-          "selector": ".l-button",
-          "_attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables the button."
-            },
-            {
-              "name": "command",
-              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
-            },
-            {
-              "name": "commandfor",
-              "description": "ID of the target element for `command`."
-            },
-            {
-              "name": "data-variant",
-              "values": [
-                "primary",
-                "destructive"
-              ],
-              "description": "Visual variant. Default is the secondary style."
-            },
-            {
-              "name": "data-size",
-              "values": [
-                "sm",
-                "lg",
-                "xl"
-              ],
-              "description": "Control size. Default is md."
-            },
-            {
-              "name": "data-icon-only",
-              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
-            },
-            {
-              "name": "data-press-effect",
-              "description": "Press effect (scale + translate on active)."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ButtonMeta",
-          "declaration": {
-            "name": "ButtonMeta",
-            "module": "src/html/elements/button/button.meta.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/carousel-item/carousel-item.ts",