luxen-ui 0.21.5 → 0.22.1

package/cdn/custom-elements.json

@@ -4,144 +4,447 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/alert/alert.ts",
+      "path": "src/html/elements/alert-dialog/alert-dialog.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "Alert",
+          "description": "Fired when the user accepts an alert dialog (the confirm action). Cancelable —\ncall `event.preventDefault()` to keep the dialog open (e.g. to await an async\ntask); close it yourself afterwards by setting `open = false`.\n\nDoes not bubble and is not composed: listen on the element itself.",
+          "name": "ConfirmEvent",
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "Fired when the user dismisses an alert dialog (the cancel action, Escape, or a\nclose request). Cancelable — call `event.preventDefault()` to keep it open.\n\nDoes not bubble and is not composed: listen on the element itself.",
+          "name": "CancelEvent",
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\ncancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\nconsequential action (delete, publish, discard) — not for generic content.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). The dialog closes automatically when the user picks an\naction, unless the matching `confirm` / `cancel` event is canceled.",
+          "name": "AlertDialog",
           "cssProperties": [
             {
-              "description": "Gap between the icon, content, and close button.",
-              "name": "--gap",
-              "default": "0.75rem"
+              "description": "Dialog width.",
+              "name": "--width",
+              "default": "31rem",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             },
             {
-              "description": "Inner padding.",
+              "description": "Dialog border radius.",
+              "name": "--border-radius",
+              "default": "6px",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Padding applied to the header, footer, and inline-padding of the body.",
               "name": "--padding",
-              "default": "1rem"
+              "default": "1.5rem",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             },
             {
-              "description": "Corner radius.",
-              "name": "--border-radius",
-              "default": "8px"
+              "description": "Open transition duration.",
+              "name": "--show-duration",
+              "default": "200ms",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Close transition duration.",
+              "name": "--hide-duration",
+              "default": "200ms",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Timing function of the open and close transitions, backdrop included.",
+              "name": "--easing",
+              "default": "cubic-bezier(0.32, 0.72, 0, 1)",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Backdrop color.",
+              "name": "--backdrop",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Backdrop blur amount (any CSS length).",
+              "name": "--backdrop-blur",
+              "default": "0",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The native `<dialog>` element.",
+              "name": "dialog",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "The header wrapper containing the title.",
+              "name": "header",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "The dialog title heading.",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "The body wrapper around the description.",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "The footer wrapper around the actions.",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Both built-in action buttons.",
+              "name": "button"
+            },
+            {
+              "description": "The built-in cancel button.",
+              "name": "cancel"
+            },
+            {
+              "description": "The built-in confirm button.",
+              "name": "confirm"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Description text. Provides the dialog's accessible description.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Replaces the built-in cancel action (e.g. a link). Keep it focusable.",
+              "name": "cancel"
+            },
+            {
+              "description": "Replaces the built-in confirm action.",
+              "name": "confirm"
+            },
+            {
+              "description": "Close button (typically `<button class=\"l-close\">`).",
+              "name": "close",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Footer actions.",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "confirmText",
               "type": {
-                "text": "AlertVariant | undefined"
+                "text": "string"
               },
-              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
-              "attribute": "variant",
+              "default": "'Confirm'",
+              "description": "Label for the confirm action.",
+              "attribute": "confirm-text"
+            },
+            {
+              "kind": "field",
+              "name": "cancelText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Cancel'",
+              "description": "Label for the cancel action.",
+              "attribute": "cancel-text"
+            },
+            {
+              "kind": "field",
+              "name": "tone",
+              "type": {
+                "text": "'danger' | undefined"
+              },
+              "description": "Visual tone. `danger` renders the confirm action as destructive.",
+              "attribute": "tone",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "loading",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
-              "attribute": "icon"
+              "default": "false",
+              "description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
+              "attribute": "loading",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Dialog title rendered in the header and used as the dialog's accessible name.",
+              "attribute": "title",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the dialog is open.",
+              "attribute": "open",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Close when the backdrop is clicked.",
+              "attribute": "light-dismiss",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "withoutHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "attribute": "without-header",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dialog",
+              "type": {
+                "text": "HTMLDialogElement"
+              },
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "confirm",
+              "description": "Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.",
+              "cancelable": true
+            },
+            {
+              "name": "cancel",
+              "description": "Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.",
+              "cancelable": true
+            },
+            {
+              "name": "show",
+              "description": "Fired when the dialog is about to open. Cancelable.",
+              "cancelable": true
+            },
+            {
+              "name": "hide",
+              "description": "Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)",
+              "cancelable": true
+            },
+            {
+              "name": "after-show",
+              "description": "Fired after the open animation completes. Not cancelable.",
+              "cancelable": false
+            },
+            {
+              "name": "after-hide",
+              "description": "Fired after the close animation completes. Not cancelable.",
+              "cancelable": false
+            }
+          ],
+          "attributes": [
+            {
+              "name": "confirm-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Confirm'",
+              "description": "Label for the confirm action.",
+              "fieldName": "confirmText"
+            },
+            {
+              "name": "cancel-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Cancel'",
+              "description": "Label for the cancel action.",
+              "fieldName": "cancelText"
             },
             {
-              "kind": "field",
-              "name": "withoutIcon",
+              "name": "tone",
               "type": {
-                "text": "boolean"
+                "text": "'danger' | undefined"
               },
-              "default": "false",
-              "description": "Hide the leading icon entirely.",
-              "attribute": "without-icon"
+              "description": "Visual tone. `danger` renders the confirm action as destructive.",
+              "fieldName": "tone"
             },
             {
-              "kind": "field",
-              "name": "dismissible",
+              "name": "loading",
               "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
+              "description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
+              "fieldName": "loading"
             },
             {
-              "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",
+              "name": "title",
               "type": {
-                "text": "AlertVariant | undefined"
+                "text": "string"
               },
-              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
-              "fieldName": "variant"
+              "default": "''",
+              "description": "Dialog title rendered in the header and used as the dialog's accessible name.",
+              "fieldName": "title",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             },
             {
-              "name": "icon",
+              "name": "open",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
-              "fieldName": "icon"
+              "default": "false",
+              "description": "Whether the dialog is open.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             },
             {
-              "name": "without-icon",
+              "name": "light-dismiss",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the leading icon entirely.",
-              "fieldName": "withoutIcon"
+              "description": "Close when the backdrop is clicked.",
+              "fieldName": "lightDismiss",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             },
             {
-              "name": "dismissible",
+              "name": "without-header",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show a close button that dismisses the alert when clicked.",
-              "fieldName": "dismissible"
+              "description": "Hide the header entirely (title and close slot).",
+              "fieldName": "withoutHeader",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
+            "name": "Dialog",
+            "module": "/src/html/elements/dialog/dialog.js"
           },
-          "tagName": "l-alert",
+          "tagName": "l-alert-dialog",
           "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)."
-            },
+          "commands": [
             {
-              "name": ".l-alert-content",
-              "description": "Wrapper the authored children are moved into; stacks them vertically (auto-injected)."
+              "name": "--show",
+              "description": "Sets `open = true`."
             },
             {
-              "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."
+              "name": "--hide",
+              "description": "Sets `open = false`."
             }
           ]
         }
@@ -149,17 +452,33 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Alert",
+          "name": "ConfirmEvent",
           "declaration": {
-            "name": "Alert",
-            "module": "src/html/elements/alert/alert.ts"
+            "name": "ConfirmEvent",
+            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CancelEvent",
+          "declaration": {
+            "name": "CancelEvent",
+            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AlertDialog",
+          "declaration": {
+            "name": "AlertDialog",
+            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/alert/index.ts",
+      "path": "src/html/elements/alert-dialog/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -167,156 +486,151 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/html/elements/alert/alert.js"
+            "module": "src/html/elements/alert-dialog/alert-dialog.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/avatar/avatar.ts",
+      "path": "src/html/elements/alert/alert.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Avatar",
+          "name": "Alert",
           "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": "Gap between the icon, content, and close button.",
+              "name": "--gap",
+              "default": "0.75rem"
             },
             {
-              "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": "Inner padding.",
+              "name": "--padding",
+              "default": "1rem"
             },
             {
-              "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"
+              "description": "Corner radius.",
+              "name": "--border-radius",
+              "default": "8px"
             }
           ],
           "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",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "AlertVariant | undefined"
               },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "attribute": "name"
+              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "icon",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
+              "attribute": "icon"
             },
             {
               "kind": "field",
-              "name": "badge",
+              "name": "withoutIcon",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "attribute": "badge"
+              "default": "false",
+              "description": "Hide the leading icon entirely.",
+              "attribute": "without-icon"
             },
             {
               "kind": "field",
-              "name": "interactive",
+              "name": "dismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "attribute": "interactive",
+              "description": "Show a close button that dismisses the alert when clicked.",
+              "attribute": "dismissible",
               "reflects": true
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "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": "hide",
+              "description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
+              "cancelable": true
             },
             {
-              "name": "name",
+              "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": "string"
+                "text": "AlertVariant | undefined"
               },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "fieldName": "name"
+              "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
+              "fieldName": "variant"
             },
             {
-              "name": "size",
+              "name": "icon",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "fieldName": "size"
+              "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
+              "fieldName": "icon"
             },
             {
-              "name": "badge",
+              "name": "without-icon",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "fieldName": "badge"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the leading icon entirely.",
+              "fieldName": "withoutIcon"
             },
             {
-              "name": "interactive",
+              "name": "dismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "fieldName": "interactive"
+              "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-avatar",
+          "tagName": "l-alert",
           "customElement": true,
-          "summary": "An avatar component for displaying user images, initials, or a default icon.",
+          "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-avatar-group",
-              "description": "Flex wrapper that overlaps a row of stacked avatars."
+              "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."
             }
           ]
         }
@@ -324,17 +638,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Avatar",
+          "name": "Alert",
           "declaration": {
-            "name": "Avatar",
-            "module": "src/html/elements/avatar/avatar.ts"
+            "name": "Alert",
+            "module": "src/html/elements/alert/alert.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/avatar/index.ts",
+      "path": "src/html/elements/alert/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -342,445 +656,156 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/html/elements/avatar/avatar.js"
+            "module": "src/html/elements/alert/alert.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/alert-dialog/alert-dialog.ts",
+      "path": "src/html/elements/avatar/avatar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Fired when the user accepts an alert dialog (the confirm action). Cancelable —\ncall `event.preventDefault()` to keep the dialog open (e.g. to await an async\ntask); close it yourself afterwards by setting `open = false`.\n\nDoes not bubble and is not composed: listen on the element itself.",
-          "name": "ConfirmEvent",
-          "superclass": {
-            "name": "Event",
-            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
-          }
-        },
-        {
-          "kind": "class",
-          "description": "Fired when the user dismisses an alert dialog (the cancel action, Escape, or a\nclose request). Cancelable — call `event.preventDefault()` to keep it open.\n\nDoes not bubble and is not composed: listen on the element itself.",
-          "name": "CancelEvent",
-          "superclass": {
-            "name": "Event",
-            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
-          }
-        },
-        {
-          "kind": "class",
-          "description": "An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\ncancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\nconsequential action (delete, publish, discard) — not for generic content.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). The dialog closes automatically when the user picks an\naction, unless the matching `confirm` / `cancel` event is canceled.",
-          "name": "AlertDialog",
+          "description": "",
+          "name": "Avatar",
           "cssProperties": [
             {
-              "description": "Dialog width.",
-              "name": "--width",
-              "default": "31rem",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Dialog border radius.",
-              "name": "--border-radius",
-              "default": "6px",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Padding applied to the header, footer, and inline-padding of the body.",
-              "name": "--padding",
-              "default": "1.5rem",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Open transition duration.",
-              "name": "--show-duration",
-              "default": "200ms",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Close transition duration.",
-              "name": "--hide-duration",
-              "default": "200ms",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Backdrop color.",
-              "name": "--backdrop",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Backdrop blur amount (any CSS length).",
-              "name": "--backdrop-blur",
-              "default": "0",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The native `<dialog>` element.",
-              "name": "dialog",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "The header wrapper containing the title.",
-              "name": "header",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "The dialog title heading.",
-              "name": "title",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "The body wrapper around the description.",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "The footer wrapper around the actions.",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Both built-in action buttons.",
-              "name": "button"
-            },
-            {
-              "description": "The built-in cancel button.",
-              "name": "cancel"
-            },
-            {
-              "description": "The built-in confirm button.",
-              "name": "confirm"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Description text. Provides the dialog's accessible description.",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.",
-              "name": "title",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Replaces the built-in cancel action (e.g. a link). Keep it focusable.",
-              "name": "cancel"
-            },
-            {
-              "description": "Replaces the built-in confirm action.",
-              "name": "confirm"
-            },
-            {
-              "description": "Close button (typically `<button class=\"l-close\">`).",
-              "name": "close",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Footer actions.",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "confirmText",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Confirm'",
-              "description": "Label for the confirm action.",
-              "attribute": "confirm-text"
+              "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"
             },
             {
-              "kind": "field",
-              "name": "cancelText",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Cancel'",
-              "description": "Label for the cancel action.",
-              "attribute": "cancel-text"
+              "description": "Background fill color for initials and the default icon.",
+              "name": "--color"
             },
-            {
-              "kind": "field",
-              "name": "tone",
-              "type": {
-                "text": "'danger' | undefined"
-              },
-              "description": "Visual tone. `danger` renders the confirm action as destructive.",
-              "attribute": "tone",
-              "reflects": true
+            {
+              "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": "loading",
+              "name": "src",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
-              "attribute": "loading",
-              "reflects": true
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Dialog title rendered in the header and used as the dialog's accessible name.",
-              "attribute": "title",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the dialog is open.",
-              "attribute": "open",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "lightDismiss",
+              "name": "badge",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Close when the backdrop is clicked.",
-              "attribute": "light-dismiss",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "attribute": "badge"
             },
             {
               "kind": "field",
-              "name": "withoutHeader",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the header entirely (title and close slot).",
-              "attribute": "without-header",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dialog",
-              "type": {
-                "text": "HTMLDialogElement"
-              },
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "confirm",
-              "description": "Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.",
-              "cancelable": true
-            },
-            {
-              "name": "cancel",
-              "description": "Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.",
-              "cancelable": true
-            },
-            {
-              "name": "show",
-              "description": "Fired when the dialog is about to open. Cancelable.",
-              "cancelable": true
-            },
-            {
-              "name": "hide",
-              "description": "Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)",
-              "cancelable": true
-            },
-            {
-              "name": "after-show",
-              "description": "Fired after the open animation completes. Not cancelable.",
-              "cancelable": false
-            },
-            {
-              "name": "after-hide",
-              "description": "Fired after the close animation completes. Not cancelable.",
-              "cancelable": false
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "attribute": "interactive",
+              "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "confirm-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Confirm'",
-              "description": "Label for the confirm action.",
-              "fieldName": "confirmText"
-            },
-            {
-              "name": "cancel-text",
+              "name": "src",
               "type": {
                 "text": "string"
               },
-              "default": "'Cancel'",
-              "description": "Label for the cancel action.",
-              "fieldName": "cancelText"
-            },
-            {
-              "name": "tone",
-              "type": {
-                "text": "'danger' | undefined"
-              },
-              "description": "Visual tone. `danger` renders the confirm action as destructive.",
-              "fieldName": "tone"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
-              "fieldName": "loading"
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "fieldName": "src"
             },
             {
-              "name": "title",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Dialog title rendered in the header and used as the dialog's accessible name.",
-              "fieldName": "title",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "fieldName": "name"
             },
             {
-              "name": "open",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the dialog is open.",
-              "fieldName": "open",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "fieldName": "size"
             },
             {
-              "name": "light-dismiss",
+              "name": "badge",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Close when the backdrop is clicked.",
-              "fieldName": "lightDismiss",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "fieldName": "badge"
             },
             {
-              "name": "without-header",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the header entirely (title and close slot).",
-              "fieldName": "withoutHeader",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "fieldName": "interactive"
             }
           ],
           "superclass": {
-            "name": "Dialog",
-            "module": "/src/html/elements/dialog/dialog.js"
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
           },
-          "tagName": "l-alert-dialog",
+          "tagName": "l-avatar",
           "customElement": true,
-          "commands": [
-            {
-              "name": "--show",
-              "description": "Sets `open = true`."
-            },
+          "summary": "An avatar component for displaying user images, initials, or a default icon.",
+          "_cssClasses": [
             {
-              "name": "--hide",
-              "description": "Sets `open = false`."
+              "name": ".l-avatar-group",
+              "description": "Flex wrapper that overlaps a row of stacked avatars."
             }
           ]
         }
@@ -788,33 +813,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ConfirmEvent",
-          "declaration": {
-            "name": "ConfirmEvent",
-            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CancelEvent",
-          "declaration": {
-            "name": "CancelEvent",
-            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "AlertDialog",
+          "name": "Avatar",
           "declaration": {
-            "name": "AlertDialog",
-            "module": "src/html/elements/alert-dialog/alert-dialog.ts"
+            "name": "Avatar",
+            "module": "src/html/elements/avatar/avatar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/alert-dialog/index.ts",
+      "path": "src/html/elements/avatar/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -822,7 +831,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/html/elements/alert-dialog/alert-dialog.js"
+            "module": "src/html/elements/avatar/avatar.js"
           }
         }
       ]
@@ -2743,6 +2752,11 @@
               "name": "--hide-duration",
               "default": "200ms"
             },
+            {
+              "description": "Timing function of the open and close transitions, backdrop included.",
+              "name": "--easing",
+              "default": "cubic-bezier(0.32, 0.72, 0, 1)"
+            },
             {
               "description": "Backdrop color.",
               "name": "--backdrop"
@@ -3202,7 +3216,7 @@
               "name": "--shadow"
             },
             {
-              "description": "Open transition duration. Default `200ms`.",
+              "description": "Open transition duration. Default `300ms`.",
               "name": "--show-duration",
               "default": "200ms",
               "inheritedFrom": {
@@ -3219,6 +3233,15 @@
                 "module": "src/html/elements/dialog/dialog.ts"
               }
             },
+            {
+              "description": "Timing function of the open and close transitions, backdrop included. Default `cubic-bezier(0.32, 0.72, 0, 1)`.",
+              "name": "--easing",
+              "default": "cubic-bezier(0.32, 0.72, 0, 1)",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
             {
               "description": "Backdrop color.",
               "name": "--backdrop",