luxen-ui 0.9.3 → 0.11.0

package/cdn/custom-elements.json

@@ -11,6 +11,11 @@
           "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"
@@ -172,127 +177,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/badge/badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Badge",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "BadgeVariant | undefined"
-              },
-              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Display as pill shape",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "BadgeSize | undefined"
-              },
-              "description": "Badge size: `sm`, `lg`. Default is md.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "BadgeAppearance | undefined"
-              },
-              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
-              "attribute": "appearance",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "BadgeVariant | undefined"
-              },
-              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
-              "fieldName": "variant"
-            },
-            {
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Display as pill shape",
-              "fieldName": "pill"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "BadgeSize | undefined"
-              },
-              "description": "Badge size: `sm`, `lg`. Default is md.",
-              "fieldName": "size"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "BadgeAppearance | undefined"
-              },
-              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
-              "fieldName": "appearance"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-badge",
-          "customElement": true,
-          "summary": "A badge component for displaying small status indicators."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/html/elements/badge/badge.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/badge/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/button/button.meta.ts",
@@ -446,6 +330,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/badge/badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Badge",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "BadgeVariant | undefined"
+              },
+              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display as pill shape",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "BadgeSize | undefined"
+              },
+              "description": "Badge size: `sm`, `lg`. Default is md.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "BadgeAppearance | undefined"
+              },
+              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
+              "attribute": "appearance",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "BadgeVariant | undefined"
+              },
+              "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
+              "fieldName": "variant"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display as pill shape",
+              "fieldName": "pill"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "BadgeSize | undefined"
+              },
+              "description": "Badge size: `sm`, `lg`. Default is md.",
+              "fieldName": "size"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "BadgeAppearance | undefined"
+              },
+              "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
+              "fieldName": "appearance"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-badge",
+          "customElement": true,
+          "summary": "A badge component for displaying small status indicators."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/html/elements/badge/badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/badge/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/button-group/button-group.ts",
@@ -1195,93 +1200,85 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/checkbox/checkbox.meta.ts",
+      "path": "src/html/elements/close-button/close-button.meta.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CheckboxMeta",
+          "name": "CloseButtonMeta",
           "cssProperties": [
             {
-              "description": "Box size. Defaults to `--l-form-control-toggle-size`.",
+              "description": "Button size.",
               "name": "--size",
-              "default": "1.25em"
+              "default": "36px"
             },
             {
-              "description": "Checked/indeterminate fill color.",
-              "name": "--accent",
-              "default": "var(--l-form-control-activated-color)"
+              "description": "Icon color.",
+              "name": "--icon-color"
             },
             {
-              "description": "Checkmark icon as a `url()`. Override to swap the SVG (color is baked into the image).",
-              "name": "--checkmark"
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Whether the checkbox is checked.",
-              "name": "checked"
+              "description": "Icon size.",
+              "name": "--icon-size",
+              "default": "24px"
             },
             {
-              "description": "Disables the checkbox.",
-              "name": "disabled"
+              "description": "Hover ring color (`ring` appearance only).",
+              "name": "--ring-color"
             },
             {
-              "description": "Marks the checkbox as required for form submission.",
-              "name": "required"
+              "description": "Hover ring thickness (`ring` appearance only).",
+              "name": "--ring-tickness"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "ring | square | circle — Visual appearance (matches the imported appearance CSS).",
+              "name": "data-appearance"
             },
             {
-              "description": "Indeterminate state (DOM property `el.indeterminate = true`; renders a dash). Typically the parent of a group.",
-              "name": "indeterminate"
+              "description": "Invoker command (typically `close`).",
+              "name": "command"
             },
             {
-              "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.",
-              "name": "aria-invalid"
+              "description": "ID of the target element to close.",
+              "name": "commandfor"
             }
           ],
-          "summary": "Checkboxes let users select one or more options, or toggle a single setting on or off.",
+          "summary": "A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.",
           "examples": [
             {
-              "title": "Default",
-              "language": "html",
-              "code": "<input type=\"checkbox\" class=\"l-checkbox\" checked />"
-            },
-            {
-              "title": "In a field (no class needed)",
+              "title": "Ring appearance",
               "language": "html",
-              "code": "<l-form-field>\n<label>Subscribe to the newsletter</label>\n<input type=\"checkbox\" />\n<l-hint>One email a month.</l-hint>\n</l-form-field>"
+              "code": "<button class=\"l-close\" data-appearance=\"ring\" aria-label=\"Close\"></button>"
             }
           ],
           "_cssClasses": [
             {
-              "name": ".l-checkbox",
-              "description": "Base checkbox style, applied to `<input type=\"checkbox\">`. Inside `l-form-field` a bare checkbox is auto-styled, so the class is optional there."
+              "name": ".l-close",
+              "description": "Base close button with X icon via CSS mask."
             }
           ],
           "customElement": false,
           "_native": true,
-          "_nativeTag": "input",
-          "selector": ".l-checkbox",
+          "_nativeTag": "button",
+          "selector": ".l-close",
           "_attributes": [
             {
-              "name": "checked",
-              "description": "Whether the checkbox is checked."
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the checkbox."
-            },
-            {
-              "name": "required",
-              "description": "Marks the checkbox as required for form submission."
+              "name": "data-appearance",
+              "values": [
+                "ring",
+                "square",
+                "circle"
+              ],
+              "description": "Visual appearance (matches the imported appearance CSS)."
             },
             {
-              "name": "indeterminate",
-              "description": "Indeterminate state (DOM property `el.indeterminate = true`; renders a dash). Typically the parent of a group."
+              "name": "command",
+              "description": "Invoker command (typically `close`)."
             },
             {
-              "name": "aria-invalid",
-              "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
+              "name": "commandfor",
+              "description": "ID of the target element to close."
             }
           ]
         }
@@ -1289,95 +1286,103 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CheckboxMeta",
+          "name": "CloseButtonMeta",
           "declaration": {
-            "name": "CheckboxMeta",
-            "module": "src/html/elements/checkbox/checkbox.meta.ts"
+            "name": "CloseButtonMeta",
+            "module": "src/html/elements/close-button/close-button.meta.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/close-button/close-button.meta.ts",
+      "path": "src/html/elements/checkbox/checkbox.meta.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CloseButtonMeta",
+          "name": "CheckboxMeta",
           "cssProperties": [
             {
-              "description": "Button size.",
+              "description": "Box size. Defaults to `--l-form-control-toggle-size`.",
               "name": "--size",
-              "default": "36px"
-            },
-            {
-              "description": "Icon color.",
-              "name": "--icon-color"
-            },
-            {
-              "description": "Icon size.",
-              "name": "--icon-size",
-              "default": "24px"
+              "default": "1.25em"
             },
             {
-              "description": "Hover ring color (`ring` appearance only).",
-              "name": "--ring-color"
+              "description": "Checked/indeterminate fill color.",
+              "name": "--accent",
+              "default": "var(--l-form-control-activated-color)"
             },
             {
-              "description": "Hover ring thickness (`ring` appearance only).",
-              "name": "--ring-tickness"
+              "description": "Checkmark icon as a `url()`. Override to swap the SVG (color is baked into the image).",
+              "name": "--checkmark"
             }
           ],
           "attributes": [
             {
-              "description": "ring | square | circle — Visual appearance (matches the imported appearance CSS).",
-              "name": "data-appearance"
+              "description": "Whether the checkbox is checked.",
+              "name": "checked"
             },
             {
-              "description": "Invoker command (typically `close`).",
-              "name": "command"
+              "description": "Disables the checkbox.",
+              "name": "disabled"
             },
             {
-              "description": "ID of the target element to close.",
-              "name": "commandfor"
+              "description": "Marks the checkbox as required for form submission.",
+              "name": "required"
+            },
+            {
+              "description": "Indeterminate state (DOM property `el.indeterminate = true`; renders a dash). Typically the parent of a group.",
+              "name": "indeterminate"
+            },
+            {
+              "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.",
+              "name": "aria-invalid"
             }
           ],
-          "summary": "A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.",
+          "summary": "Checkboxes let users select one or more options, or toggle a single setting on or off.",
           "examples": [
             {
-              "title": "Ring appearance",
+              "title": "Default",
               "language": "html",
-              "code": "<button class=\"l-close\" data-appearance=\"ring\" aria-label=\"Close\"></button>"
+              "code": "<input type=\"checkbox\" class=\"l-checkbox\" checked />"
+            },
+            {
+              "title": "In a field (no class needed)",
+              "language": "html",
+              "code": "<l-form-field>\n<label>Subscribe to the newsletter</label>\n<input type=\"checkbox\" />\n<l-hint>One email a month.</l-hint>\n</l-form-field>"
             }
           ],
           "_cssClasses": [
             {
-              "name": ".l-close",
-              "description": "Base close button with X icon via CSS mask."
+              "name": ".l-checkbox",
+              "description": "Base checkbox style, applied to `<input type=\"checkbox\">`. Inside `l-form-field` a bare checkbox is auto-styled, so the class is optional there."
             }
           ],
           "customElement": false,
           "_native": true,
-          "_nativeTag": "button",
-          "selector": ".l-close",
+          "_nativeTag": "input",
+          "selector": ".l-checkbox",
           "_attributes": [
             {
-              "name": "data-appearance",
-              "values": [
-                "ring",
-                "square",
-                "circle"
-              ],
-              "description": "Visual appearance (matches the imported appearance CSS)."
+              "name": "checked",
+              "description": "Whether the checkbox is checked."
             },
             {
-              "name": "command",
-              "description": "Invoker command (typically `close`)."
+              "name": "disabled",
+              "description": "Disables the checkbox."
             },
             {
-              "name": "commandfor",
-              "description": "ID of the target element to close."
+              "name": "required",
+              "description": "Marks the checkbox as required for form submission."
+            },
+            {
+              "name": "indeterminate",
+              "description": "Indeterminate state (DOM property `el.indeterminate = true`; renders a dash). Typically the parent of a group."
+            },
+            {
+              "name": "aria-invalid",
+              "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
             }
           ]
         }
@@ -1385,10 +1390,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CloseButtonMeta",
+          "name": "CheckboxMeta",
           "declaration": {
-            "name": "CloseButtonMeta",
-            "module": "src/html/elements/close-button/close-button.meta.ts"
+            "name": "CheckboxMeta",
+            "module": "src/html/elements/checkbox/checkbox.meta.ts"
           }
         }
       ]
@@ -3803,6 +3808,16 @@
               "description": "Placeholder shown when the editor is empty.",
               "attribute": "placeholder"
             },
+            {
+              "kind": "field",
+              "name": "emojiDataSource",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source.",
+              "attribute": "emoji-data-source"
+            },
             {
               "kind": "field",
               "name": "validationTarget",
@@ -3997,6 +4012,15 @@
               "default": "''",
               "description": "Placeholder shown when the editor is empty.",
               "fieldName": "placeholder"
+            },
+            {
+              "name": "emoji-data-source",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source.",
+              "fieldName": "emojiDataSource"
             }
           ],
           "superclass": {
@@ -5823,7 +5847,7 @@
           "name": "Tooltip",
           "cssProperties": [
             {
-              "description": "Background color. Default: dark in light mode, light in dark mode.",
+              "description": "Background color for this tooltip instance. Defaults to the global `--l-tooltip-background-color` token (a neutral inverse surface, dark in light mode / light in dark mode) — override that token to re-skin every tooltip at once.",
               "name": "--background-color"
             },
             {

package/cdn/elements/avatar/avatar.d.ts

@@ -3,6 +3,7 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @summary An avatar component for displaying user images, initials, or a default icon.
  * @customElement l-avatar
  *
+ * @cssproperty [--size=40px] - 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.
  * @cssproperty --color - Background fill color for initials and the default icon.
  * @cssproperty --text-color - Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).
  * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).

package/cdn/elements/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;;;;GAWG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ,CAEd;CACH"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ,CAEd;CACH"}

package/cdn/elements/avatar/avatar.js

@@ -1,4 +1,4 @@
-import{i as e}from"../../chunks/lit.js";import{a as t,o as n,t as r}from"../../chunks/lit-html.js";import{LuxenElement as i}from"../../shared/luxen-element.js";import{r as a,t as o}from"../../chunks/static-html.js";import{i as s,r as c,t as l}from"../../chunks/decorate.js";import u from"../../shared/styles/host.styles.js";var d=e(`:host{--_size:40px;--_font-size:1rem;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){return e.match(/(\b\S)?/g).join(``).match(/(^\S|\S$)?/g).join(``).toUpperCase()}var p=n`<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+import{i as e}from"../../chunks/lit.js";import{a as t,o as n,t as r}from"../../chunks/lit-html.js";import{LuxenElement as i}from"../../shared/luxen-element.js";import{r as a,t as o}from"../../chunks/static-html.js";import{i as s,r as c,t as l}from"../../chunks/decorate.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){return e.match(/(\b\S)?/g).join(``).match(/(^\S|\S$)?/g).join(``).toUpperCase()}var p=n`<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 i{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.hasAttribute(`role`)||this.setAttribute(`role`,`img`)}updated(){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?o`button`:o`div`}render(){let e=this.src&&!this._hasError?t`<img
             src=${this.src}