luxen-ui 0.23.0 → 0.25.0

package/cdn/custom-elements.json

@@ -172,181 +172,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/avatar/avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
-              "name": "--size",
-              "default": "40px"
-            },
-            {
-              "description": "Background fill color for initials and the default icon.",
-              "name": "--color"
-            },
-            {
-              "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
-              "name": "--text-color"
-            },
-            {
-              "description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
-              "name": "--appearance"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
-              "name": "base"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "badge",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "attribute": "badge"
-            },
-            {
-              "kind": "field",
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "attribute": "interactive",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
-              "fieldName": "src"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "fieldName": "size"
-            },
-            {
-              "name": "badge",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "fieldName": "badge"
-            },
-            {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "fieldName": "interactive"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-avatar",
-          "customElement": true,
-          "summary": "An avatar component for displaying user images, initials, or a default icon.",
-          "_cssClasses": [
-            {
-              "name": ".l-avatar-group",
-              "description": "Flex wrapper that overlaps a row of stacked avatars."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Avatar",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/html/elements/avatar/avatar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/avatar/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/avatar/avatar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/alert-dialog/alert-dialog.ts",
@@ -836,6 +661,181 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/avatar/avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Avatar",
+          "cssProperties": [
+            {
+              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
+              "name": "--size",
+              "default": "40px"
+            },
+            {
+              "description": "Background fill color for initials and the default icon.",
+              "name": "--color"
+            },
+            {
+              "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
+              "name": "--text-color"
+            },
+            {
+              "description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
+              "name": "--appearance"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "badge",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "attribute": "badge"
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "attribute": "interactive",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "fieldName": "src"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "fieldName": "size"
+            },
+            {
+              "name": "badge",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "fieldName": "badge"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "fieldName": "interactive"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-avatar",
+          "customElement": true,
+          "summary": "An avatar component for displaying user images, initials, or a default icon.",
+          "_cssClasses": [
+            {
+              "name": ".l-avatar-group",
+              "description": "Flex wrapper that overlaps a row of stacked avatars."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/html/elements/avatar/avatar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/avatar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/avatar/avatar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/badge/badge.ts",
@@ -2404,8 +2404,22 @@
           "name": "Combobox",
           "cssProperties": [
             {
-              "description": "Control height. Defaults to the form-control height.",
-              "name": "--height"
+              "description": "Control height. The clear button and the chevron each take a square of this height (borders excluded), so their hit area and spacing follow it.",
+              "name": "--height",
+              "default": "var(--l-form-control-height)"
+            },
+            {
+              "description": "Glyph size of the clear button and the chevron (global form-control token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.",
+              "name": "--l-form-control-icon-size",
+              "default": "1em"
+            },
+            {
+              "description": "Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.",
+              "name": "--chevron-icon"
+            },
+            {
+              "description": "Clear button glyph as a `url()`.",
+              "name": "--clear-icon"
             },
             {
               "description": "Control + panel radius.",
@@ -3636,27 +3650,27 @@
           "name": "Dropdown",
           "cssProperties": [
             {
-              "description": "Panel background color.",
+              "description": "Panel background color. Default `var(--l-color-surface-overlay)`.",
               "name": "--background"
             },
             {
-              "description": "Panel border radius. Default `8px`.",
+              "description": "Panel border radius. Default `var(--l-popover-border-radius)` (6px).",
               "name": "--border-radius"
             },
             {
-              "description": "Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
+              "description": "Panel inner padding. Default `var(--l-popover-padding)` (0.25rem). Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
               "name": "--padding"
             },
             {
-              "description": "Panel box shadow.",
+              "description": "Panel box shadow. Default `var(--l-popover-shadow)`.",
               "name": "--shadow"
             },
             {
-              "description": "Show animation duration in ms. Default `150`.",
+              "description": "Show animation duration. Default `150ms`.",
               "name": "--show-duration"
             },
             {
-              "description": "Hide animation duration in ms. Default `150`.",
+              "description": "Hide animation duration. Default `150ms`.",
               "name": "--hide-duration"
             }
           ],
@@ -4300,7 +4314,7 @@
           },
           "tagName": "l-form-field",
           "customElement": true,
-          "summary": "Progressively enhances a label + control + messages group: wires the\naccessibility plumbing (`id`/`for`, `aria-describedby`, `aria-invalid`,\nrequired marker) and picks an inline or stacked layout from the control type.\n\nStyling stays on the control (`.l-checkbox`, …); inside a field a bare control\nis auto-styled by the element CSS. Add `unstyled` to keep the ARIA wiring while\nopting out of that auto-styling (e.g. for a third-party control).",
+          "summary": "Progressively enhances a label + control + messages group: wires the\naccessibility plumbing (`id`/`for`, `aria-describedby`, `aria-invalid`,\nrequired indicator) and picks an inline or stacked layout from the control type.\n\nStyling stays on the control (`.l-checkbox`, …); inside a field a bare control\nis auto-styled by the element CSS. Add `unstyled` to keep the ARIA wiring while\nopting out of that auto-styling (e.g. for a third-party control).",
           "examples": [
             {
               "language": "html",
@@ -4488,6 +4502,11 @@
             {
               "description": "Search clear glyph as a `url()`.",
               "name": "--clear-icon"
+            },
+            {
+              "description": "Glyph size of the date/time picker icon and the search clear (global form-control token). Their hit area is a square of the control height (borders excluded).",
+              "name": "--l-form-control-icon-size",
+              "default": "1em"
             }
           ],
           "attributes": [
@@ -4765,15 +4784,15 @@
               "name": "--cell-gap"
             },
             {
-              "description": "Cell background color.",
+              "description": "Cell background color (default: a faint ink tint over `--l-form-control-background-color`).",
               "name": "--cell-bg-color"
             },
             {
-              "description": "Cell border color.",
+              "description": "Cell border color (default: `var(--l-form-control-border-color)`).",
               "name": "--cell-border-color"
             },
             {
-              "description": "Cell border-radius.",
+              "description": "Cell border-radius (default: `var(--l-form-control-border-radius)`, like the other text fields).",
               "name": "--cell-border-radius"
             },
             {
@@ -5141,7 +5160,7 @@
           "name": "Popover",
           "cssProperties": [
             {
-              "description": "Background color. Default: `Canvas`.",
+              "description": "Background color. Default `var(--l-color-surface-overlay)`.",
               "name": "--background"
             },
             {
@@ -5149,7 +5168,7 @@
               "name": "--color"
             },
             {
-              "description": "Border radius. Default `8px`.",
+              "description": "Border radius. Default `var(--l-popover-border-radius)` (6px).",
               "name": "--border-radius"
             },
             {
@@ -5157,7 +5176,7 @@
               "name": "--max-width"
             },
             {
-              "description": "Box shadow.",
+              "description": "Box shadow. Default `var(--l-popover-shadow)`.",
               "name": "--shadow"
             },
             {
@@ -6657,8 +6676,22 @@
           "name": "Select",
           "cssProperties": [
             {
-              "description": "Control height. Defaults to the form-control height.",
-              "name": "--height"
+              "description": "Control height. The clear button and the chevron each take a square of this height (borders excluded), so their hit area and spacing follow it.",
+              "name": "--height",
+              "default": "var(--l-form-control-height)"
+            },
+            {
+              "description": "Glyph size of the clear button and the chevron (global form-control token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.",
+              "name": "--l-form-control-icon-size",
+              "default": "1em"
+            },
+            {
+              "description": "Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.",
+              "name": "--chevron-icon"
+            },
+            {
+              "description": "Clear button glyph as a `url()`.",
+              "name": "--clear-icon"
             },
             {
               "description": "Trigger + panel radius.",

package/cdn/elements/avatar/avatar.js

@@ -1,4 +1,4 @@
-import{i as e}from"../../chunks/lit.js";import{LuxenElement as t}from"../../shared/luxen-element.js";import{a as n,s as r,t as i}from"../../chunks/lit-html.js";import{r as a,t as o}from"../../chunks/static-html.js";import{n 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-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=r`<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+import{i as e}from"../../chunks/lit.js";import{LuxenElement as t}from"../../shared/luxen-element.js";import{a as n,s as r,t as i}from"../../chunks/lit-html.js";import{r as a,t as o}from"../../chunks/static-html.js";import{n 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-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:var(--l-focus-ring-width) 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=r`<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 t{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?o`button`:o`div`}render(){let e=this.src&&!this._hasError?n`<img
             src=${this.src}

package/cdn/elements/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["unsafeCSS","rawStyles","hostStyles","nothing","_decorate","property","state","r","b","w","A","u","i","r$1","n","__decorate","host_styles_default","styles","getInitials","words","name","firstLetter","word","defaultIcon","Avatar","LuxenElement","_args","changed","isCircle","content"],"sources":["../../../src/html/elements/avatar/avatar.css?inline","../../../src/html/elements/avatar/avatar.ts"],"sourcesContent":[":host {\n  --size: 40px;\n  --_font-size: calc(var(--size) * 0.4);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  border-radius: calc(var(--size) * 0.15);\n  isolation: isolate;\n  vertical-align: middle;\n  flex-shrink: 0;\n  color: var(--l-color-text-secondary);\n}\n\n:host([size='xs']) {\n  --size: 24px;\n  --_font-size: 0.75rem;\n}\n:host([size='sm']) {\n  --size: 32px;\n  --_font-size: 0.875rem;\n}\n:host([size='lg']) {\n  --size: 48px;\n  --_font-size: 1.25rem;\n}\n:host([size='xl']) {\n  --size: 56px;\n  --_font-size: 1.25rem;\n}\n\nimg {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n\n.initials {\n  margin: auto;\n}\n\n.icon {\n  width: 60%;\n  height: 60%;\n  color: currentColor;\n}\n\n.badge {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: 1;\n  height: 12px;\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 2px;\n  border-radius: 3px;\n  box-shadow: 0 0 0 2px var(--l-color-surface);\n  background-color: var(--l-color-surface);\n  font-size: 0.625rem;\n  font-weight: var(--l-font-weight-medium);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  color: var(--l-color-text-primary);\n  overflow: hidden;\n}\n\n/*\n * Inset ring via ::after so it renders on top of the <img>.\n * A box-shadow on :host would be covered by the image since\n * it fills the entire element with object-fit: cover.\n */\n.base::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px light-dark(oklch(0 0 0 / 7%), oklch(100% 0 0 / 10%));\n  pointer-events: none;\n}\n\n.base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: calc(var(--size) * 0.15);\n  background-color: var(--color, var(--l-color-bg-fill-neutral-soft));\n  /*\n   * Text over --color, decided by the background's own luminance — never the\n   * document mode, since --color is consumer-set and ignores light/dark.\n   * The contrast-color() block below is the primary path (Baseline 2026); this\n   * --_on calc() is the fallback for browsers predating it (Chrome ≤146,\n   * Safari <26, Firefox <146). It approximates WCAG relative luminance with\n   * squared sRGB channels (a cheap linearization, Rec. 709 weights) and flips at\n   * 0.2, just above the black/white crossover (~0.179) to offset squaring\n   * underestimating mid-tones — holding AA across saturated brand colors where an\n   * OKLCH-lightness threshold collapses to ≈1:1 (OKLCH L tracks hue, not\n   * luminance: a mid red reads \"light\" yet needs white text). --text-color lets\n   * consumers force a specific brand text color, overriding both paths.\n   */\n  --_on: calc(\n    255 *\n      (\n        1 -\n          sign(\n            0.2126 * (r / 255) * (r / 255) + 0.7152 * (g / 255) * (g / 255) + 0.0722 * (b / 255) *\n              (b / 255) - 0.2\n          )\n      ) /\n      2\n  );\n  color: var(--text-color, rgb(from var(--color) var(--_on) var(--_on) var(--_on)));\n  font-size: var(--_font-size);\n  font-weight: var(--l-font-weight-medium);\n  line-height: 1;\n  text-transform: uppercase;\n  padding: 0;\n  cursor: inherit;\n}\n\n/* Primary path: native, guaranteed-contrast black/white. contrast-color() is\n * Baseline Newly Available (2026) — Safari 26+, Firefox 146+, Chrome/Edge 147+ —\n * and supersedes the luminance approximation above where supported. @supports (not\n * declaration order) is required: the value contains var(), so a non-supporting\n * browser would treat contrast-color() as invalid-at-computed-value-time and reset\n * to `inherit` rather than falling back to the calc() line. No bg fallback inside,\n * so a bare avatar (no --color) keeps inheriting --l-color-text-secondary.\n * --text-color still wins here, overriding contrast-color()'s choice.\n * (The earlier `… vs black, white to AA` extended syntax was dropped from the spec.) */\n@supports (color: contrast-color(red)) {\n  .base {\n    color: var(--text-color, contrast-color(var(--color)));\n  }\n}\n\nbutton.base {\n  cursor: pointer;\n}\n\nbutton.base:focus-visible {\n  outline: 2px solid var(--l-focus-ring);\n  outline-offset: 2px;\n}\n\nbutton.base:hover {\n  box-shadow: inset 0 0 0 1.5px var(--l-color-border-interactive);\n}\n\n@container style(--appearance: circle) {\n  .base {\n    border-radius: 50%;\n  }\n}\n","import { html, nothing, svg, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { html as staticHtml, literal } from 'lit/static-html.js';\nimport { property, state } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './avatar.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * Extracts up to two uppercase initials from a name: the first letter of the\n * first word, plus the first letter of the last word when there is more than one.\n *\n * Splits on whitespace rather than relying on a `\\b`/`\\w` regex, which only\n * recognises ASCII and mangles accented or non-ASCII names.\n *\n * @param name - The name to extract initials from. Defaults to an empty string.\n * @return The uppercased initials, or an empty string when `name` is blank.\n *\n * @example getInitials('John Doe')            // 'JD'\n * @example getInitials('Markus Nösterer')     // 'MN'  (accents preserved)\n * @example getInitials('Cher')                // 'C'   (single word → one initial)\n * @example getInitials('  John   Doe  ')      // 'JD'  (extra whitespace ignored)\n * @example getInitials('')                    // ''\n */\nfunction getInitials(name: string = ''): string {\n  const words = name.normalize('NFC').trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) return '';\n\n  // Spreading iterates by code point, so an accented letter (or an astral\n  // character like an emoji) is taken whole instead of a broken half.\n  // oxlint-disable-next-line typescript/no-misused-spread -- code-point-safe first char is the intent\n  const firstLetter = (word: string) => [...word][0];\n\n  const first = firstLetter(words[0]);\n  const last = words.length > 1 ? firstLetter(words[words.length - 1]) : '';\n  return (first + last).toUpperCase();\n}\n\nconst defaultIcon = svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n  <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\" />\n</svg>`;\n\n/**\n * @summary An avatar component for displaying user images, initials, or a default icon.\n * @customElement l-avatar\n *\n * @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.\n * @cssproperty --color - Background fill color for initials and the default icon.\n * @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).\n * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).\n *\n * @csspart base - The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.\n *\n * @cssClass .l-avatar-group - Flex wrapper that overlaps a row of stacked avatars.\n */\nexport class Avatar extends LuxenElement {\n  static styles = [hostStyles, styles];\n\n  /** Image URL. Falls back to initials (then the default icon) if it fails to load. */\n  @property()\n  src = '';\n\n  /** Name used as the accessible label and to derive the initials fallback. */\n  @property()\n  name = '';\n\n  /** Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`. */\n  @property({ reflect: true })\n  size = 'md';\n\n  /** Count shown in the corner badge. `0` hides the badge. */\n  @property({ type: Number })\n  badge = 0;\n\n  /** Render as a `<button>` with focus ring and hover states. */\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @state() private _hasError = false;\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.interactive && !this.hasAttribute('role')) {\n      this.setAttribute('role', 'img');\n    }\n  }\n\n  updated() {\n    // An interactive avatar renders a focusable <button>, and a role=\"img\" node\n    // must stay a leaf in the accessibility tree — so the host carries no role\n    // or label and the inner button holds the accessible name (see render()).\n    if (this.interactive) {\n      if (this.getAttribute('role') === 'img') this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n    } else {\n      if (!this.hasAttribute('role')) this.setAttribute('role', 'img');\n      if (this.name) this.setAttribute('aria-label', this.name);\n    }\n\n    const isCircle = getComputedStyle(this).getPropertyValue('--appearance').trim() === 'circle';\n    this.style.borderRadius = isCircle ? '50%' : '';\n  }\n\n  private get _tag() {\n    return this.interactive ? literal`button` : literal`div`;\n  }\n\n  render() {\n    const content =\n      this.src && !this._hasError\n        ? html`<img\n            src=${this.src}\n            alt=${this.name || ''}\n            @error=${this._onError}\n          />`\n        : this.name\n          ? html`<span class=\"initials\">${getInitials(this.name)}</span>`\n          : html`<slot>${defaultIcon}</slot>`;\n\n    return staticHtml`\n      <${this._tag}\n        class=\"base\"\n        part=\"base\"\n        type=${this.interactive ? 'button' : nothing}\n        aria-label=${this.interactive && this.name ? this.name : nothing}\n      >\n        ${content}\n      </${this._tag}>\n      ${\n        this.badge\n          ? html`<div\n              class=\"badge\"\n              aria-hidden=\"true\"\n            >\n              ${this.badge}\n            </div>`\n          : nothing\n      }\n    `;\n  }\n\n  private _onError = () => {\n    this._hasError = true;\n  };\n}\n"],"mappings":"A,oUCOA,IAAMiB,EAASjB,EAAUC,4mEAAS,EAkBlC,SAASiB,EAAY,EAAe,GAAY,CAC9C,IAAMC,EAAQC,EAAK,UAAU,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,EACtE,GAAID,EAAM,SAAW,EAAG,MAAO,GAK/B,IAAME,EAAe,GAAiB,CAAC,GAAGC,CAAI,CAAC,CAAC,GAIhD,OAFcD,EAAYF,EAAM,EAExB,GADKA,EAAM,OAAS,EAAIE,EAAYF,EAAMA,EAAM,OAAS,EAAE,EAAI,IAAA,CACjD,YAAY,CACpC,CAEA,IAAMI,EAAc,CAAG;;QAiBVC,EAAb,cAA4BC,CAAa,C,8BAKjC,KAAA,IAAA,GAIC,KAAA,KAAA,GAIA,KAAA,KAAA,KAIC,KAAA,MAAA,EAIM,KAAA,YAAA,GAEe,KAAA,UAAA,GAqEJ,KAAA,aAAA,CACvB,KAAK,UAAY,EACnB,C,QA7FgB,KAAA,OAAA,CAACvB,EAAYe,CAAM,C,CAwBnC,WAAW,EAA+B,CACpCU,EAAQ,IAAI,KAAK,IACnB,KAAK,UAAY,GAErB,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,EACpB,CAAC,KAAK,aAAe,CAAC,KAAK,aAAa,MAAM,GAChD,KAAK,aAAa,OAAQ,KAAK,CAEnC,CAEA,SAAU,CAIJ,KAAK,aACH,KAAK,aAAa,MAAM,IAAM,OAAO,KAAK,gBAAgB,MAAM,EACpE,KAAK,gBAAgB,YAAY,IAE5B,KAAK,aAAa,MAAM,GAAG,KAAK,aAAa,OAAQ,KAAK,EAC3D,KAAK,MAAM,KAAK,aAAa,aAAc,KAAK,IAAI,GAG1D,IAAMC,EAAW,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,cAAc,CAAC,CAAC,KAAK,IAAM,SACpF,KAAK,MAAM,aAAeA,EAAW,MAAQ,EAC/C,CAEA,IAAY,MAAO,CACjB,OAAO,KAAK,YAAc,CAAO,SAAW,CAAO,KACrD,CAEA,QAAS,CACP,IAAMC,EACJ,KAAK,KAAO,CAAC,KAAK,UACd,CAAI;kBACI,KAAK,IAAI;kBACT,KAAK,MAAQ,GAAG;qBACb,KAAK,SAAS;cAEzB,KAAK,KACH,CAAI,0BAA0BX,EAAY,KAAK,IAAI,EAAE,SACrD,CAAI,SAASK,EAAY,SAEjC,MAAO,EAAU;SACZ,KAAK,KAAK;;;eAGJ,KAAK,YAAc,SAAWpB,EAAQ;qBAChC,KAAK,aAAe,KAAK,KAAO,KAAK,KAAOA,EAAQ;;UAE/D0B,EAAQ;UACR,KAAK,KAAK;QAEZ,KAAK,MACD,CAAI;;;;gBAIA,KAAK,MAAM;oBAEf1B,EACL;KAEL,CAKF,EA3FGC,EAAA,CAAAC,EAAS,CAAA,EAAAmB,EAAA,UAAA,MAAA,IAAA,EAAA,EAITpB,EAAA,CAAAC,EAAS,CAAA,EAAAmB,EAAA,UAAA,OAAA,IAAA,EAAA,EAITpB,EAAA,CAAAC,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAAmB,EAAA,UAAA,OAAA,IAAA,EAAA,EAI1BpB,EAAA,CAAAC,EAAS,CAAE,KAAM,MAAO,CAAC,CAAA,EAAAmB,EAAA,UAAA,QAAA,IAAA,EAAA,EAIzBpB,EAAA,CAAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAAmB,EAAA,UAAA,cAAA,IAAA,EAAA,EAGzCpB,EAAA,CAAAE,EAAM,CAAA,EAAAkB,EAAA,UAAA,YAAA,IAAA,EAAA,E"}
+{"version":3,"file":"avatar.js","names":["unsafeCSS","rawStyles","hostStyles","nothing","_decorate","property","state","r","b","w","A","u","i","r$1","n","__decorate","host_styles_default","styles","getInitials","words","name","firstLetter","word","defaultIcon","Avatar","LuxenElement","_args","changed","isCircle","content"],"sources":["../../../src/html/elements/avatar/avatar.css?inline","../../../src/html/elements/avatar/avatar.ts"],"sourcesContent":[":host {\n  --size: 40px;\n  --_font-size: calc(var(--size) * 0.4);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  border-radius: calc(var(--size) * 0.15);\n  isolation: isolate;\n  vertical-align: middle;\n  flex-shrink: 0;\n  color: var(--l-color-text-secondary);\n}\n\n:host([size='xs']) {\n  --size: 24px;\n  --_font-size: 0.75rem;\n}\n:host([size='sm']) {\n  --size: 32px;\n  --_font-size: 0.875rem;\n}\n:host([size='lg']) {\n  --size: 48px;\n  --_font-size: 1.25rem;\n}\n:host([size='xl']) {\n  --size: 56px;\n  --_font-size: 1.25rem;\n}\n\nimg {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n\n.initials {\n  margin: auto;\n}\n\n.icon {\n  width: 60%;\n  height: 60%;\n  color: currentColor;\n}\n\n.badge {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: 1;\n  height: 12px;\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 2px;\n  border-radius: 3px;\n  box-shadow: 0 0 0 2px var(--l-color-surface);\n  background-color: var(--l-color-surface);\n  font-size: 0.625rem;\n  font-weight: var(--l-font-weight-medium);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  color: var(--l-color-text-primary);\n  overflow: hidden;\n}\n\n/*\n * Inset ring via ::after so it renders on top of the <img>.\n * A box-shadow on :host would be covered by the image since\n * it fills the entire element with object-fit: cover.\n */\n.base::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px light-dark(oklch(0 0 0 / 7%), oklch(100% 0 0 / 10%));\n  pointer-events: none;\n}\n\n.base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: calc(var(--size) * 0.15);\n  background-color: var(--color, var(--l-color-bg-fill-neutral-soft));\n  /*\n   * Text over --color, decided by the background's own luminance — never the\n   * document mode, since --color is consumer-set and ignores light/dark.\n   * The contrast-color() block below is the primary path (Baseline 2026); this\n   * --_on calc() is the fallback for browsers predating it (Chrome ≤146,\n   * Safari <26, Firefox <146). It approximates WCAG relative luminance with\n   * squared sRGB channels (a cheap linearization, Rec. 709 weights) and flips at\n   * 0.2, just above the black/white crossover (~0.179) to offset squaring\n   * underestimating mid-tones — holding AA across saturated brand colors where an\n   * OKLCH-lightness threshold collapses to ≈1:1 (OKLCH L tracks hue, not\n   * luminance: a mid red reads \"light\" yet needs white text). --text-color lets\n   * consumers force a specific brand text color, overriding both paths.\n   */\n  --_on: calc(\n    255 *\n      (\n        1 -\n          sign(\n            0.2126 * (r / 255) * (r / 255) + 0.7152 * (g / 255) * (g / 255) + 0.0722 * (b / 255) *\n              (b / 255) - 0.2\n          )\n      ) /\n      2\n  );\n  color: var(--text-color, rgb(from var(--color) var(--_on) var(--_on) var(--_on)));\n  font-size: var(--_font-size);\n  font-weight: var(--l-font-weight-medium);\n  line-height: 1;\n  text-transform: uppercase;\n  padding: 0;\n  cursor: inherit;\n}\n\n/* Primary path: native, guaranteed-contrast black/white. contrast-color() is\n * Baseline Newly Available (2026) — Safari 26+, Firefox 146+, Chrome/Edge 147+ —\n * and supersedes the luminance approximation above where supported. @supports (not\n * declaration order) is required: the value contains var(), so a non-supporting\n * browser would treat contrast-color() as invalid-at-computed-value-time and reset\n * to `inherit` rather than falling back to the calc() line. No bg fallback inside,\n * so a bare avatar (no --color) keeps inheriting --l-color-text-secondary.\n * --text-color still wins here, overriding contrast-color()'s choice.\n * (The earlier `… vs black, white to AA` extended syntax was dropped from the spec.) */\n@supports (color: contrast-color(red)) {\n  .base {\n    color: var(--text-color, contrast-color(var(--color)));\n  }\n}\n\nbutton.base {\n  cursor: pointer;\n}\n\nbutton.base:focus-visible {\n  outline: var(--l-focus-ring-width) solid var(--l-focus-ring);\n  outline-offset: 2px;\n}\n\nbutton.base:hover {\n  box-shadow: inset 0 0 0 1.5px var(--l-color-border-interactive);\n}\n\n@container style(--appearance: circle) {\n  .base {\n    border-radius: 50%;\n  }\n}\n","import { html, nothing, svg, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { html as staticHtml, literal } from 'lit/static-html.js';\nimport { property, state } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './avatar.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * Extracts up to two uppercase initials from a name: the first letter of the\n * first word, plus the first letter of the last word when there is more than one.\n *\n * Splits on whitespace rather than relying on a `\\b`/`\\w` regex, which only\n * recognises ASCII and mangles accented or non-ASCII names.\n *\n * @param name - The name to extract initials from. Defaults to an empty string.\n * @return The uppercased initials, or an empty string when `name` is blank.\n *\n * @example getInitials('John Doe')            // 'JD'\n * @example getInitials('Markus Nösterer')     // 'MN'  (accents preserved)\n * @example getInitials('Cher')                // 'C'   (single word → one initial)\n * @example getInitials('  John   Doe  ')      // 'JD'  (extra whitespace ignored)\n * @example getInitials('')                    // ''\n */\nfunction getInitials(name: string = ''): string {\n  const words = name.normalize('NFC').trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) return '';\n\n  // Spreading iterates by code point, so an accented letter (or an astral\n  // character like an emoji) is taken whole instead of a broken half.\n  // oxlint-disable-next-line typescript/no-misused-spread -- code-point-safe first char is the intent\n  const firstLetter = (word: string) => [...word][0];\n\n  const first = firstLetter(words[0]);\n  const last = words.length > 1 ? firstLetter(words[words.length - 1]) : '';\n  return (first + last).toUpperCase();\n}\n\nconst defaultIcon = svg`<svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n  <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\" />\n</svg>`;\n\n/**\n * @summary An avatar component for displaying user images, initials, or a default icon.\n * @customElement l-avatar\n *\n * @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.\n * @cssproperty --color - Background fill color for initials and the default icon.\n * @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).\n * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).\n *\n * @csspart base - The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.\n *\n * @cssClass .l-avatar-group - Flex wrapper that overlaps a row of stacked avatars.\n */\nexport class Avatar extends LuxenElement {\n  static styles = [hostStyles, styles];\n\n  /** Image URL. Falls back to initials (then the default icon) if it fails to load. */\n  @property()\n  src = '';\n\n  /** Name used as the accessible label and to derive the initials fallback. */\n  @property()\n  name = '';\n\n  /** Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`. */\n  @property({ reflect: true })\n  size = 'md';\n\n  /** Count shown in the corner badge. `0` hides the badge. */\n  @property({ type: Number })\n  badge = 0;\n\n  /** Render as a `<button>` with focus ring and hover states. */\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @state() private _hasError = false;\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('src')) {\n      this._hasError = false;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.interactive && !this.hasAttribute('role')) {\n      this.setAttribute('role', 'img');\n    }\n  }\n\n  updated() {\n    // An interactive avatar renders a focusable <button>, and a role=\"img\" node\n    // must stay a leaf in the accessibility tree — so the host carries no role\n    // or label and the inner button holds the accessible name (see render()).\n    if (this.interactive) {\n      if (this.getAttribute('role') === 'img') this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n    } else {\n      if (!this.hasAttribute('role')) this.setAttribute('role', 'img');\n      if (this.name) this.setAttribute('aria-label', this.name);\n    }\n\n    const isCircle = getComputedStyle(this).getPropertyValue('--appearance').trim() === 'circle';\n    this.style.borderRadius = isCircle ? '50%' : '';\n  }\n\n  private get _tag() {\n    return this.interactive ? literal`button` : literal`div`;\n  }\n\n  render() {\n    const content =\n      this.src && !this._hasError\n        ? html`<img\n            src=${this.src}\n            alt=${this.name || ''}\n            @error=${this._onError}\n          />`\n        : this.name\n          ? html`<span class=\"initials\">${getInitials(this.name)}</span>`\n          : html`<slot>${defaultIcon}</slot>`;\n\n    return staticHtml`\n      <${this._tag}\n        class=\"base\"\n        part=\"base\"\n        type=${this.interactive ? 'button' : nothing}\n        aria-label=${this.interactive && this.name ? this.name : nothing}\n      >\n        ${content}\n      </${this._tag}>\n      ${\n        this.badge\n          ? html`<div\n              class=\"badge\"\n              aria-hidden=\"true\"\n            >\n              ${this.badge}\n            </div>`\n          : nothing\n      }\n    `;\n  }\n\n  private _onError = () => {\n    this._hasError = true;\n  };\n}\n"],"mappings":"A,oUCOA,IAAMiB,EAASjB,EAAUC,koEAAS,EAkBlC,SAASiB,EAAY,EAAe,GAAY,CAC9C,IAAMC,EAAQC,EAAK,UAAU,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,EACtE,GAAID,EAAM,SAAW,EAAG,MAAO,GAK/B,IAAME,EAAe,GAAiB,CAAC,GAAGC,CAAI,CAAC,CAAC,GAIhD,OAFcD,EAAYF,EAAM,EAExB,GADKA,EAAM,OAAS,EAAIE,EAAYF,EAAMA,EAAM,OAAS,EAAE,EAAI,IAAA,CACjD,YAAY,CACpC,CAEA,IAAMI,EAAc,CAAG;;QAiBVC,EAAb,cAA4BC,CAAa,C,8BAKjC,KAAA,IAAA,GAIC,KAAA,KAAA,GAIA,KAAA,KAAA,KAIC,KAAA,MAAA,EAIM,KAAA,YAAA,GAEe,KAAA,UAAA,GAqEJ,KAAA,aAAA,CACvB,KAAK,UAAY,EACnB,C,QA7FgB,KAAA,OAAA,CAACvB,EAAYe,CAAM,C,CAwBnC,WAAW,EAA+B,CACpCU,EAAQ,IAAI,KAAK,IACnB,KAAK,UAAY,GAErB,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,EACpB,CAAC,KAAK,aAAe,CAAC,KAAK,aAAa,MAAM,GAChD,KAAK,aAAa,OAAQ,KAAK,CAEnC,CAEA,SAAU,CAIJ,KAAK,aACH,KAAK,aAAa,MAAM,IAAM,OAAO,KAAK,gBAAgB,MAAM,EACpE,KAAK,gBAAgB,YAAY,IAE5B,KAAK,aAAa,MAAM,GAAG,KAAK,aAAa,OAAQ,KAAK,EAC3D,KAAK,MAAM,KAAK,aAAa,aAAc,KAAK,IAAI,GAG1D,IAAMC,EAAW,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,cAAc,CAAC,CAAC,KAAK,IAAM,SACpF,KAAK,MAAM,aAAeA,EAAW,MAAQ,EAC/C,CAEA,IAAY,MAAO,CACjB,OAAO,KAAK,YAAc,CAAO,SAAW,CAAO,KACrD,CAEA,QAAS,CACP,IAAMC,EACJ,KAAK,KAAO,CAAC,KAAK,UACd,CAAI;kBACI,KAAK,IAAI;kBACT,KAAK,MAAQ,GAAG;qBACb,KAAK,SAAS;cAEzB,KAAK,KACH,CAAI,0BAA0BX,EAAY,KAAK,IAAI,EAAE,SACrD,CAAI,SAASK,EAAY,SAEjC,MAAO,EAAU;SACZ,KAAK,KAAK;;;eAGJ,KAAK,YAAc,SAAWpB,EAAQ;qBAChC,KAAK,aAAe,KAAK,KAAO,KAAK,KAAOA,EAAQ;;UAE/D0B,EAAQ;UACR,KAAK,KAAK;QAEZ,KAAK,MACD,CAAI;;;;gBAIA,KAAK,MAAM;oBAEf1B,EACL;KAEL,CAKF,EA3FGC,EAAA,CAAAC,EAAS,CAAA,EAAAmB,EAAA,UAAA,MAAA,IAAA,EAAA,EAITpB,EAAA,CAAAC,EAAS,CAAA,EAAAmB,EAAA,UAAA,OAAA,IAAA,EAAA,EAITpB,EAAA,CAAAC,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAAmB,EAAA,UAAA,OAAA,IAAA,EAAA,EAI1BpB,EAAA,CAAAC,EAAS,CAAE,KAAM,MAAO,CAAC,CAAA,EAAAmB,EAAA,UAAA,QAAA,IAAA,EAAA,EAIzBpB,EAAA,CAAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAAmB,EAAA,UAAA,cAAA,IAAA,EAAA,EAGzCpB,EAAA,CAAAE,EAAM,CAAA,EAAAkB,EAAA,UAAA,YAAA,IAAA,EAAA,E"}

package/cdn/elements/combobox/combobox.d.ts

@@ -58,7 +58,12 @@ interface ComboboxEventMap {
  * @csspart option - Each option row.
  * @csspart empty - The "no results" message.
  *
- * @cssproperty [--height] - Control height. Defaults to the form-control height.
+ * @cssproperty [--height=var(--l-form-control-height)] - Control height. The clear button and the chevron
+ *   each take a square of this height (borders excluded), so their hit area and spacing follow it.
+ * @cssproperty [--l-form-control-icon-size=1em] - Glyph size of the clear button and the chevron (global form-control
+ *   token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.
+ * @cssproperty --chevron-icon - Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.
+ * @cssproperty --clear-icon - Clear button glyph as a `url()`.
  * @cssproperty [--border-radius] - Control + panel radius.
  * @cssproperty [--background] - Panel background.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/html/elements/combobox/combobox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/html/elements/combobox/combobox.ts"],"names":[],"mappings":"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"}