luxen-ui 0.21.2 → 0.21.4

package/cdn/custom-elements.json

@@ -2,176 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/alert/alert.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Alert",
-          "cssProperties": [
-            {
-              "description": "Gap between the icon, content, and close button.",
-              "name": "--gap",
-              "default": "0.75rem"
-            },
-            {
-              "description": "Inner padding.",
-              "name": "--padding",
-              "default": "1rem"
-            },
-            {
-              "description": "Corner radius.",
-              "name": "--border-radius",
-              "default": "8px"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "AlertVariant | undefined"
-              },
-              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
-              "attribute": "icon"
-            },
-            {
-              "kind": "field",
-              "name": "withoutIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hide the leading icon entirely.",
-              "attribute": "without-icon"
-            },
-            {
-              "kind": "field",
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show a close button that dismisses the alert when clicked.",
-              "attribute": "dismissible",
-              "reflects": true
-            }
-          ],
-          "events": [
-            {
-              "name": "hide",
-              "description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
-              "cancelable": true
-            },
-            {
-              "name": "after-hide",
-              "description": "Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.",
-              "cancelable": false
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "AlertVariant | undefined"
-              },
-              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "icon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
-              "fieldName": "icon"
-            },
-            {
-              "name": "without-icon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hide the leading icon entirely.",
-              "fieldName": "withoutIcon"
-            },
-            {
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show a close button that dismisses the alert when clicked.",
-              "fieldName": "dismissible"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-alert",
-          "customElement": true,
-          "summary": "A callout box that highlights contextual information with a semantic color and a leading icon.",
-          "examples": [
-            {
-              "language": "html",
-              "code": "<l-alert variant=\"warning\" dismissible>\n  <span class=\"l-alert-title\">Heads up</span>\n  This action cannot be undone.\n</l-alert>"
-            }
-          ],
-          "_cssClasses": [
-            {
-              "name": ".l-alert-icon",
-              "description": "The leading icon, colored by variant (auto-injected)."
-            },
-            {
-              "name": ".l-alert-content",
-              "description": "Wrapper the authored children are moved into; stacks them vertically (auto-injected)."
-            },
-            {
-              "name": ".l-alert-title",
-              "description": "Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Alert",
-          "declaration": {
-            "name": "Alert",
-            "module": "src/html/elements/alert/alert.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/alert/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/alert/alert.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/alert-dialog/alert-dialog.ts",
@@ -629,17 +459,187 @@
         },
         {
           "kind": "js",
-          "name": "AlertDialog",
+          "name": "AlertDialog",
+          "declaration": {
+            "name": "AlertDialog",
+            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/alert-dialog/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/alert-dialog/alert-dialog.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/alert/alert.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Alert",
+          "cssProperties": [
+            {
+              "description": "Gap between the icon, content, and close button.",
+              "name": "--gap",
+              "default": "0.75rem"
+            },
+            {
+              "description": "Inner padding.",
+              "name": "--padding",
+              "default": "1rem"
+            },
+            {
+              "description": "Corner radius.",
+              "name": "--border-radius",
+              "default": "8px"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "AlertVariant | undefined"
+              },
+              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "withoutIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the leading icon entirely.",
+              "attribute": "without-icon"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a close button that dismisses the alert when clicked.",
+              "attribute": "dismissible",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "hide",
+              "description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
+              "cancelable": true
+            },
+            {
+              "name": "after-hide",
+              "description": "Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.",
+              "cancelable": false
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "AlertVariant | undefined"
+              },
+              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
+              "fieldName": "icon"
+            },
+            {
+              "name": "without-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the leading icon entirely.",
+              "fieldName": "withoutIcon"
+            },
+            {
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a close button that dismisses the alert when clicked.",
+              "fieldName": "dismissible"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-alert",
+          "customElement": true,
+          "summary": "A callout box that highlights contextual information with a semantic color and a leading icon.",
+          "examples": [
+            {
+              "language": "html",
+              "code": "<l-alert variant=\"warning\" dismissible>\n  <span class=\"l-alert-title\">Heads up</span>\n  This action cannot be undone.\n</l-alert>"
+            }
+          ],
+          "_cssClasses": [
+            {
+              "name": ".l-alert-icon",
+              "description": "The leading icon, colored by variant (auto-injected)."
+            },
+            {
+              "name": ".l-alert-content",
+              "description": "Wrapper the authored children are moved into; stacks them vertically (auto-injected)."
+            },
+            {
+              "name": ".l-alert-title",
+              "description": "Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Alert",
           "declaration": {
-            "name": "AlertDialog",
-            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+            "name": "Alert",
+            "module": "src/html/elements/alert/alert.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/alert-dialog/index.ts",
+      "path": "src/html/elements/alert/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -647,7 +647,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/html/elements/alert-dialog/alert-dialog.js"
+            "module": "src/html/elements/alert/alert.js"
           }
         }
       ]
@@ -4796,6 +4796,45 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/kbd/kbd.meta.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KbdMeta",
+          "summary": "Displays keyboard keys or shortcuts inline with text.",
+          "examples": [
+            {
+              "title": "Single key",
+              "language": "html",
+              "code": "<kbd class=\"l-kbd\">Esc</kbd>"
+            }
+          ],
+          "_cssClasses": [
+            {
+              "name": ".l-kbd",
+              "description": "Base class for keyboard key styling on `<kbd>` elements."
+            }
+          ],
+          "customElement": false,
+          "_native": true,
+          "_nativeTag": "kbd",
+          "selector": ".l-kbd"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KbdMeta",
+          "declaration": {
+            "name": "KbdMeta",
+            "module": "src/html/elements/kbd/kbd.meta.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/input-stepper/index.ts",
@@ -5032,45 +5071,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/kbd/kbd.meta.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KbdMeta",
-          "summary": "Displays keyboard keys or shortcuts inline with text.",
-          "examples": [
-            {
-              "title": "Single key",
-              "language": "html",
-              "code": "<kbd class=\"l-kbd\">Esc</kbd>"
-            }
-          ],
-          "_cssClasses": [
-            {
-              "name": ".l-kbd",
-              "description": "Base class for keyboard key styling on `<kbd>` elements."
-            }
-          ],
-          "customElement": false,
-          "_native": true,
-          "_nativeTag": "kbd",
-          "selector": ".l-kbd"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "KbdMeta",
-          "declaration": {
-            "name": "KbdMeta",
-            "module": "src/html/elements/kbd/kbd.meta.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/popover/index.ts",
@@ -6545,6 +6545,88 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/skeleton/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/skeleton/skeleton.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/skeleton/skeleton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Skeleton",
+          "cssProperties": [
+            {
+              "description": "Width of the skeleton",
+              "name": "--width"
+            },
+            {
+              "description": "Height of the skeleton",
+              "name": "--height"
+            }
+          ],
+          "members": [],
+          "attributes": [
+            {
+              "description": "circle | text — Placeholder shape. Default is a block.",
+              "name": "shape"
+            },
+            {
+              "description": "pulse | wave — Loading animation. Default is `pulse`.",
+              "name": "animation"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-skeleton",
+          "customElement": true,
+          "summary": "A skeleton loading placeholder.",
+          "_attributes": [
+            {
+              "name": "shape",
+              "values": [
+                "circle",
+                "text"
+              ],
+              "description": "Placeholder shape. Default is a block."
+            },
+            {
+              "name": "animation",
+              "values": [
+                "pulse",
+                "wave"
+              ],
+              "description": "Loading animation. Default is `pulse`."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Skeleton",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/html/elements/skeleton/skeleton.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/select/index.ts",
@@ -6923,88 +7005,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/skeleton/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/skeleton/skeleton.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/skeleton/skeleton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "Width of the skeleton",
-              "name": "--width"
-            },
-            {
-              "description": "Height of the skeleton",
-              "name": "--height"
-            }
-          ],
-          "members": [],
-          "attributes": [
-            {
-              "description": "circle | text — Placeholder shape. Default is a block.",
-              "name": "shape"
-            },
-            {
-              "description": "pulse | wave — Loading animation. Default is `pulse`.",
-              "name": "animation"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-skeleton",
-          "customElement": true,
-          "summary": "A skeleton loading placeholder.",
-          "_attributes": [
-            {
-              "name": "shape",
-              "values": [
-                "circle",
-                "text"
-              ],
-              "description": "Placeholder shape. Default is a block."
-            },
-            {
-              "name": "animation",
-              "values": [
-                "pulse",
-                "wave"
-              ],
-              "description": "Loading animation. Default is `pulse`."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Skeleton",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "src/html/elements/skeleton/skeleton.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/slider/index.ts",

package/cdn/elements/avatar/avatar.js

@@ -1,4 +1,4 @@
-import{i as e}from"../../chunks/lit.js";import{i as t,r as n,t as r}from"../../chunks/decorate.js";import{a as i,o as a,t as o}from"../../chunks/lit-html.js";import{LuxenElement as s}from"../../shared/luxen-element.js";import{r as c,t as l}from"../../chunks/static-html.js";import u from"../../shared/styles/host.styles.js";var d=e(`:host{--size:40px;--_font-size:calc(var(--size) * .4);width:var(--size);height:var(--size);border-radius:calc(var(--size) * .15);isolation:isolate;vertical-align:middle;color:var(--l-color-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([size=xs]){--size:24px;--_font-size:.75rem}:host([size=sm]){--size:32px;--_font-size:.875rem}:host([size=lg]){--size:48px;--_font-size:1.25rem}:host([size=xl]){--size:56px;--_font-size:1.25rem}img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.initials{margin:auto}.icon{color:currentColor;width:60%;height:60%}.badge{z-index:1;min-width:12px;height:12px;box-shadow:0 0 0 2px var(--l-color-surface);background-color:var(--l-color-surface);font-variant-numeric:tabular-nums;color:var(--l-color-text-primary);border-radius:3px;justify-content:center;align-items:center;padding-inline:2px;font-size:.625rem;font-weight:500;line-height:1;display:flex;position:absolute;bottom:0;right:0;overflow:hidden}.base:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--lightningcss-light,oklch(0% 0 0/.07))var(--lightningcss-dark,oklch(100% 0 0/.1))}.base{border-radius:calc(var(--size) * .15);background-color:var(--color,var(--l-color-bg-fill-neutral-soft));--_on:calc(255 * ( 1 - sign(.2126 * (r / 255) * (r / 255) + .7152 * (g / 255) * (g / 255) + .0722 * (b / 255) * (b / 255) - .2) ) / 2);width:100%;height:100%;color:var(--text-color,rgb(from var(--color) var(--_on) var(--_on) var(--_on)));font-size:var(--_font-size);text-transform:uppercase;cursor:inherit;border:none;justify-content:center;align-items:center;padding:0;font-weight:500;line-height:1;display:inline-flex}@supports (color:contrast-color(red)){.base{color:var(--text-color,contrast-color(var(--color)))}}button.base{cursor:pointer}button.base:focus-visible{outline:2px solid var(--l-focus-ring);outline-offset:2px}button.base:hover{box-shadow:inset 0 0 0 1.5px var(--l-color-border-interactive)}@container style(--appearance:circle){.base{border-radius:50%}}`);function f(e=``){let t=e.normalize(`NFC`).trim().split(/\s+/).filter(Boolean);if(t.length===0)return``;let n=e=>[...e][0];return(n(t[0])+(t.length>1?n(t[t.length-1]):``)).toUpperCase()}var p=a`<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+import{i as e}from"../../chunks/lit.js";import{i as t,r as n,t as r}from"../../chunks/decorate.js";import{a as i,o as a,t as o}from"../../chunks/lit-html.js";import{LuxenElement as s}from"../../shared/luxen-element.js";import{r as c,t as l}from"../../chunks/static-html.js";import u from"../../shared/styles/host.styles.js";var d=e(`:host{--size:40px;--_font-size:calc(var(--size) * .4);width:var(--size);height:var(--size);border-radius:calc(var(--size) * .15);isolation:isolate;vertical-align:middle;color:var(--l-color-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([size=xs]){--size:24px;--_font-size:.75rem}:host([size=sm]){--size:32px;--_font-size:.875rem}:host([size=lg]){--size:48px;--_font-size:1.25rem}:host([size=xl]){--size:56px;--_font-size:1.25rem}img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.initials{margin:auto}.icon{color:currentColor;width:60%;height:60%}.badge{z-index:1;min-width:12px;height:12px;box-shadow:0 0 0 2px var(--l-color-surface);background-color:var(--l-color-surface);font-size:.625rem;font-weight:var(--l-font-weight-medium);font-variant-numeric:tabular-nums;color:var(--l-color-text-primary);border-radius:3px;justify-content:center;align-items:center;padding-inline:2px;line-height:1;display:flex;position:absolute;bottom:0;right:0;overflow:hidden}.base:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--lightningcss-light,oklch(0% 0 0/.07))var(--lightningcss-dark,oklch(100% 0 0/.1))}.base{border-radius:calc(var(--size) * .15);background-color:var(--color,var(--l-color-bg-fill-neutral-soft));--_on:calc(255 * ( 1 - sign(.2126 * (r / 255) * (r / 255) + .7152 * (g / 255) * (g / 255) + .0722 * (b / 255) * (b / 255) - .2) ) / 2);width:100%;height:100%;color:var(--text-color,rgb(from var(--color) var(--_on) var(--_on) var(--_on)));font-size:var(--_font-size);font-weight:var(--l-font-weight-medium);text-transform:uppercase;cursor:inherit;border:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}@supports (color:contrast-color(red)){.base{color:var(--text-color,contrast-color(var(--color)))}}button.base{cursor:pointer}button.base:focus-visible{outline:2px solid var(--l-focus-ring);outline-offset:2px}button.base:hover{box-shadow:inset 0 0 0 1.5px var(--l-color-border-interactive)}@container style(--appearance:circle){.base{border-radius:50%}}`);function f(e=``){let t=e.normalize(`NFC`).trim().split(/\s+/).filter(Boolean);if(t.length===0)return``;let n=e=>[...e][0];return(n(t[0])+(t.length>1?n(t[t.length-1]):``)).toUpperCase()}var p=a`<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
   <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
 </svg>`,m=class extends s{constructor(...e){super(...e),this.src=``,this.name=``,this.size=`md`,this.badge=0,this.interactive=!1,this._hasError=!1,this._onError=()=>{this._hasError=!0}}static{this.styles=[u,d]}willUpdate(e){e.has(`src`)&&(this._hasError=!1)}connectedCallback(){super.connectedCallback(),!this.interactive&&!this.hasAttribute(`role`)&&this.setAttribute(`role`,`img`)}updated(){this.interactive?(this.getAttribute(`role`)===`img`&&this.removeAttribute(`role`),this.removeAttribute(`aria-label`)):(this.hasAttribute(`role`)||this.setAttribute(`role`,`img`),this.name&&this.setAttribute(`aria-label`,this.name));let e=getComputedStyle(this).getPropertyValue(`--appearance`).trim()===`circle`;this.style.borderRadius=e?`50%`:``}get _tag(){return this.interactive?l`button`:l`div`}render(){let e=this.src&&!this._hasError?i`<img
             src=${this.src}