luxen-ui 0.10.0 → 0.11.0

package/cdn/custom-elements.json

@@ -1200,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."
             }
           ]
         }
@@ -1294,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."
             }
           ]
         }
@@ -1390,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"
           }
         }
       ]
@@ -5847,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/tooltip/tooltip.d.ts

@@ -10,7 +10,7 @@ import { Placement } from '@floating-ui/dom';
  * @csspart body - The tooltip popover container.
  * @csspart arrow - The directional arrow element.
  *
- * @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.
+ * @cssproperty --background-color - 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.
  * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.
  * @cssproperty --border-radius - Border radius. Default `4px`.
  * @cssproperty --max-width - Maximum width. Default `180px`.

package/cdn/elements/tooltip/tooltip.js

@@ -1,4 +1,4 @@
-import{uniqueId as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";import{a as n,t as r}from"../../chunks/lit-html.js";import{LuxenElement as i}from"../../shared/luxen-element.js";import{i as a,t as o}from"../../chunks/decorate.js";import s from"../../shared/styles/host.styles.js";import{PopoverController as c}from"../../shared/controllers/popover.js";var l=t(`:host{--background-color:var(--l-color-bg-fill-brand,var(--lightningcss-light,#1f2937)var(--lightningcss-dark,#f9fafb));--border-radius:4px;--max-width:180px;--arrow-size:6px;--show-duration:.15s;--hide-duration:.15s;display:contents}[popover]{inset:unset;box-sizing:border-box;width:max-content;max-width:var(--max-width);border-radius:var(--border-radius);background:var(--background-color);color:var(--text-color,oklch(from var(--background-color) calc(.59 - .41 * sign(l - .5)) 0 0));filter:drop-shadow(0 1px 2px #00000029);pointer-events:none;border:0;padding:4px 8px;font-size:.8125rem;line-height:1.4;overflow:visible}@supports (color:contrast-color(red vs black, white)){[popover]{color:var(--text-color,contrast-color(var(--background-color) vs #111827, #fff to AA))}}i{width:var(--arrow-size);height:var(--arrow-size);background:var(--background-color);display:block;position:absolute;transform:rotate(45deg)}`),u=class extends i{constructor(...t){super(...t),this._tooltipId=e(`tooltip`),this._floating=new c(this,{getTriggerElement:()=>this._trigger,getFloatingElement:()=>this._popover,getArrowElement:()=>this._arrowEl}),this.#e=``,this.#t=`top`,this.#n=8,this.#r=!1,this.#i=!1,this.#a=`hover focus`,this._onPointerEnter=()=>{this._hasTrigger(`hover`)&&(this._floating.cleanupSafePolygon(),this.show())},this._onPointerLeave=e=>{!this._hasTrigger(`hover`)||!this.open||this._floating.handlePointerLeave(e,()=>this.hide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&this.show()},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&this.hide()},this._onClick=()=>{this._hasTrigger(`click`)&&this.toggle()},this._onKeyDown=e=>{this.open&&e.key===`Escape`&&(e.stopPropagation(),this.hide())}}static{this.styles=[s,l]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get open(){return this.#r}set open(e){this.#r=e}#i;get withoutArrow(){return this.#i}set withoutArrow(e){this.#i=e}#a;get trigger(){return this.#a}set trigger(e){this.#a=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){return this.for?this.getRootNode().getElementById(this.for):null}get _popover(){return this.shadowRoot.querySelector(`[popover]`)}get _arrowEl(){return this.withoutArrow?null:this.shadowRoot.querySelector(`i`)}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}show(){this.open||=!0}hide(){this.open&&=!1}toggle(){this.open=!this.open}async _handleOpenChange(){let e=this._popover;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._trigger?.setAttribute(`aria-describedby`,this._tooltipId)}else this._floating.stopPositioning(),this._floating.cleanupSafePolygon(),this._trigger?.removeAttribute(`aria-describedby`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}_addTriggerListeners(){this._floating.addTriggerListeners({onPointerEnter:this._onPointerEnter,onPointerLeave:this._onPointerLeave,onFocusIn:this._onFocusIn,onFocusOut:this._onFocusOut,onClick:this._onClick,onKeyDown:this._onKeyDown})}_removeTriggerListeners(e){let t=e?this.getRootNode().getElementById(e):void 0;this._floating.removeTriggerListeners(t)}render(){return n`
+import{uniqueId as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";import{a as n,t as r}from"../../chunks/lit-html.js";import{LuxenElement as i}from"../../shared/luxen-element.js";import{i as a,t as o}from"../../chunks/decorate.js";import s from"../../shared/styles/host.styles.js";import{PopoverController as c}from"../../shared/controllers/popover.js";var l=t(`:host{--background-color:var(--l-tooltip-background-color,var(--lightningcss-light,#1f2937)var(--lightningcss-dark,#f9fafb));--border-radius:4px;--max-width:180px;--arrow-size:6px;--show-duration:.15s;--hide-duration:.15s;display:contents}[popover]{inset:unset;box-sizing:border-box;width:max-content;max-width:var(--max-width);border-radius:var(--border-radius);background:var(--background-color);color:var(--text-color,oklch(from var(--background-color) calc(.59 - .41 * sign(l - .5)) 0 0));filter:drop-shadow(0 1px 2px #00000029);pointer-events:none;border:0;padding:4px 8px;font-size:.8125rem;line-height:1.4;overflow:visible}@supports (color:contrast-color(red vs black, white)){[popover]{color:var(--text-color,contrast-color(var(--background-color) vs #111827, #fff to AA))}}i{width:var(--arrow-size);height:var(--arrow-size);background:var(--background-color);display:block;position:absolute;transform:rotate(45deg)}`),u=class extends i{constructor(...t){super(...t),this._tooltipId=e(`tooltip`),this._floating=new c(this,{getTriggerElement:()=>this._trigger,getFloatingElement:()=>this._popover,getArrowElement:()=>this._arrowEl}),this.#e=``,this.#t=`top`,this.#n=8,this.#r=!1,this.#i=!1,this.#a=`hover focus`,this._onPointerEnter=()=>{this._hasTrigger(`hover`)&&(this._floating.cleanupSafePolygon(),this.show())},this._onPointerLeave=e=>{!this._hasTrigger(`hover`)||!this.open||this._floating.handlePointerLeave(e,()=>this.hide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&this.show()},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&this.hide()},this._onClick=()=>{this._hasTrigger(`click`)&&this.toggle()},this._onKeyDown=e=>{this.open&&e.key===`Escape`&&(e.stopPropagation(),this.hide())}}static{this.styles=[s,l]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get open(){return this.#r}set open(e){this.#r=e}#i;get withoutArrow(){return this.#i}set withoutArrow(e){this.#i=e}#a;get trigger(){return this.#a}set trigger(e){this.#a=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){return this.for?this.getRootNode().getElementById(this.for):null}get _popover(){return this.shadowRoot.querySelector(`[popover]`)}get _arrowEl(){return this.withoutArrow?null:this.shadowRoot.querySelector(`i`)}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}show(){this.open||=!0}hide(){this.open&&=!1}toggle(){this.open=!this.open}async _handleOpenChange(){let e=this._popover;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._trigger?.setAttribute(`aria-describedby`,this._tooltipId)}else this._floating.stopPositioning(),this._floating.cleanupSafePolygon(),this._trigger?.removeAttribute(`aria-describedby`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}_addTriggerListeners(){this._floating.addTriggerListeners({onPointerEnter:this._onPointerEnter,onPointerLeave:this._onPointerLeave,onFocusIn:this._onFocusIn,onFocusOut:this._onFocusOut,onClick:this._onClick,onKeyDown:this._onKeyDown})}_removeTriggerListeners(e){let t=e?this.getRootNode().getElementById(e):void 0;this._floating.removeTriggerListeners(t)}render(){return n`
       <div
         id=${this._tooltipId}
         popover="manual"

package/cdn/elements/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/html/elements/tooltip/tooltip.css?inline","../../../src/html/elements/tooltip/tooltip.ts"],"sourcesContent":[":host {\n  --background-color: var(--l-color-bg-fill-brand, light-dark(#1f2937, #f9fafb));\n  --border-radius: 4px;\n  --max-width: 180px;\n  --arrow-size: 6px;\n  --show-duration: 150ms;\n  --hide-duration: 150ms;\n\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--max-width);\n  padding: 4px 8px;\n  border: 0;\n  border-radius: var(--border-radius);\n  background: var(--background-color);\n  color: var(\n    --text-color,\n    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)\n  );\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));\n  pointer-events: none;\n}\n\n@supports (color: contrast-color(red vs black, white)) {\n  [popover] {\n    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));\n  }\n}\n\ni {\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--background-color);\n  transform: rotate(45deg);\n}\n","import { html, nothing, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { PopoverController } from '../../shared/controllers/popover.js';\nimport { uniqueId } from '../../registry.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './tooltip.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A tooltip that displays contextual text on hover or focus.\n * @customElement l-tooltip\n *\n * @slot - Tooltip content (text or rich HTML).\n *\n * @csspart body - The tooltip popover container.\n * @csspart arrow - The directional arrow element.\n *\n * @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.\n * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.\n * @cssproperty --border-radius - Border radius. Default `4px`.\n * @cssproperty --max-width - Maximum width. Default `180px`.\n * @cssproperty --arrow-size - Arrow size. Default `6px`.\n * @cssproperty --show-duration - Show animation duration. Default `150ms`.\n * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.\n */\nexport class Tooltip extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  private _tooltipId = uniqueId('tooltip');\n\n  private _floating = new PopoverController(this, {\n    getTriggerElement: () => this._trigger,\n    getFloatingElement: () => this._popover,\n    getArrowElement: () => this._arrowEl,\n  });\n\n  /** The HTML id of the element triggering the tooltip. */\n  @property()\n  accessor for = '';\n\n  /** The preferred placement of the tooltip. */\n  @property()\n  accessor placement: Placement = 'top';\n\n  /** The distance in pixels from the target element. */\n  @property({ type: Number })\n  accessor distance = 8;\n\n  /** Whether or not the tooltip is visible. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Hide the directional arrow. */\n  @property({ type: Boolean, reflect: true, attribute: 'without-arrow' })\n  accessor withoutArrow = false;\n\n  /** Space-separated list of trigger modes: `hover`, `focus`, `click`, `manual`. */\n  @property()\n  accessor trigger = 'hover focus';\n\n  private _hasTrigger(type: string) {\n    return this.trigger.split(' ').includes(type);\n  }\n\n  private get _trigger(): HTMLElement | null {\n    return this.for ? (this.getRootNode() as Document | ShadowRoot).getElementById(this.for) : null;\n  }\n\n  private get _popover(): HTMLElement {\n    return this.shadowRoot!.querySelector('[popover]')!;\n  }\n\n  private get _arrowEl(): HTMLElement | null {\n    return this.withoutArrow ? null : this.shadowRoot!.querySelector('i');\n  }\n\n  private _getDuration(prop: '--show-duration' | '--hide-duration'): number {\n    const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));\n    return Number.isNaN(parsed) ? 150 : parsed;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._addTriggerListeners());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeTriggerListeners();\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('open')) {\n      void this._handleOpenChange();\n    }\n    if (changed.has('for')) {\n      this._removeTriggerListeners(changed.get('for') as string);\n      this._addTriggerListeners();\n    }\n  }\n\n  show() {\n    if (!this.open) this.open = true;\n  }\n\n  hide() {\n    if (this.open) this.open = false;\n  }\n\n  toggle() {\n    this.open = !this.open;\n  }\n\n  private async _handleOpenChange() {\n    const popover = this._popover;\n    if (!popover) return;\n\n    const posOpts = { placement: this.placement, distance: this.distance };\n\n    if (this.open) {\n      popover.showPopover();\n      await this._floating.updatePosition(posOpts);\n      if (!this.open) return;\n      await this._floating.animateShow(popover, this._getDuration('--show-duration'));\n      this._floating.startPositioning(posOpts);\n      this._trigger?.setAttribute('aria-describedby', this._tooltipId);\n    } else {\n      this._floating.stopPositioning();\n      this._floating.cleanupSafePolygon();\n      this._trigger?.removeAttribute('aria-describedby');\n      await this._floating.animateHide(popover, this._getDuration('--hide-duration'));\n      if (popover.matches(':popover-open')) popover.hidePopover();\n    }\n  }\n\n  // --- Trigger event handlers ---\n\n  private _onPointerEnter = () => {\n    if (!this._hasTrigger('hover')) return;\n    this._floating.cleanupSafePolygon();\n    this.show();\n  };\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (!this._hasTrigger('hover') || !this.open) return;\n    this._floating.handlePointerLeave(e, () => this.hide());\n  };\n\n  private _onFocusIn = () => {\n    if (this._hasTrigger('focus')) this.show();\n  };\n  private _onFocusOut = () => {\n    if (this._hasTrigger('focus')) this.hide();\n  };\n  private _onClick = () => {\n    if (this._hasTrigger('click')) this.toggle();\n  };\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    if (this.open && e.key === 'Escape') {\n      e.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private _addTriggerListeners() {\n    this._floating.addTriggerListeners({\n      onPointerEnter: this._onPointerEnter,\n      onPointerLeave: this._onPointerLeave,\n      onFocusIn: this._onFocusIn,\n      onFocusOut: this._onFocusOut,\n      onClick: this._onClick,\n      onKeyDown: this._onKeyDown,\n    });\n  }\n\n  private _removeTriggerListeners(forId?: string) {\n    const trigger = forId\n      ? (this.getRootNode() as Document | ShadowRoot).getElementById(forId)\n      : undefined;\n    this._floating.removeTriggerListeners(trigger);\n  }\n\n  override render() {\n    return html`\n      <div\n        id=${this._tooltipId}\n        popover=\"manual\"\n        role=\"tooltip\"\n        part=\"body\"\n      >\n        ${this.withoutArrow\n          ? nothing\n          : html`\n              <i\n                part=\"arrow\"\n                role=\"presentation\"\n              ></i>\n            `}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/html/elements/tooltip/tooltip.css?inline","../../../src/html/elements/tooltip/tooltip.ts"],"sourcesContent":[":host {\n  --background-color: var(--l-tooltip-background-color, light-dark(#1f2937, #f9fafb));\n  --border-radius: 4px;\n  --max-width: 180px;\n  --arrow-size: 6px;\n  --show-duration: 150ms;\n  --hide-duration: 150ms;\n\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--max-width);\n  padding: 4px 8px;\n  border: 0;\n  border-radius: var(--border-radius);\n  background: var(--background-color);\n  color: var(\n    --text-color,\n    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)\n  );\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));\n  pointer-events: none;\n}\n\n@supports (color: contrast-color(red vs black, white)) {\n  [popover] {\n    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));\n  }\n}\n\ni {\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--background-color);\n  transform: rotate(45deg);\n}\n","import { html, nothing, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { PopoverController } from '../../shared/controllers/popover.js';\nimport { uniqueId } from '../../registry.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './tooltip.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A tooltip that displays contextual text on hover or focus.\n * @customElement l-tooltip\n *\n * @slot - Tooltip content (text or rich HTML).\n *\n * @csspart body - The tooltip popover container.\n * @csspart arrow - The directional arrow element.\n *\n * @cssproperty --background-color - 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.\n * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.\n * @cssproperty --border-radius - Border radius. Default `4px`.\n * @cssproperty --max-width - Maximum width. Default `180px`.\n * @cssproperty --arrow-size - Arrow size. Default `6px`.\n * @cssproperty --show-duration - Show animation duration. Default `150ms`.\n * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.\n */\nexport class Tooltip extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  private _tooltipId = uniqueId('tooltip');\n\n  private _floating = new PopoverController(this, {\n    getTriggerElement: () => this._trigger,\n    getFloatingElement: () => this._popover,\n    getArrowElement: () => this._arrowEl,\n  });\n\n  /** The HTML id of the element triggering the tooltip. */\n  @property()\n  accessor for = '';\n\n  /** The preferred placement of the tooltip. */\n  @property()\n  accessor placement: Placement = 'top';\n\n  /** The distance in pixels from the target element. */\n  @property({ type: Number })\n  accessor distance = 8;\n\n  /** Whether or not the tooltip is visible. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Hide the directional arrow. */\n  @property({ type: Boolean, reflect: true, attribute: 'without-arrow' })\n  accessor withoutArrow = false;\n\n  /** Space-separated list of trigger modes: `hover`, `focus`, `click`, `manual`. */\n  @property()\n  accessor trigger = 'hover focus';\n\n  private _hasTrigger(type: string) {\n    return this.trigger.split(' ').includes(type);\n  }\n\n  private get _trigger(): HTMLElement | null {\n    return this.for ? (this.getRootNode() as Document | ShadowRoot).getElementById(this.for) : null;\n  }\n\n  private get _popover(): HTMLElement {\n    return this.shadowRoot!.querySelector('[popover]')!;\n  }\n\n  private get _arrowEl(): HTMLElement | null {\n    return this.withoutArrow ? null : this.shadowRoot!.querySelector('i');\n  }\n\n  private _getDuration(prop: '--show-duration' | '--hide-duration'): number {\n    const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));\n    return Number.isNaN(parsed) ? 150 : parsed;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._addTriggerListeners());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeTriggerListeners();\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('open')) {\n      void this._handleOpenChange();\n    }\n    if (changed.has('for')) {\n      this._removeTriggerListeners(changed.get('for') as string);\n      this._addTriggerListeners();\n    }\n  }\n\n  show() {\n    if (!this.open) this.open = true;\n  }\n\n  hide() {\n    if (this.open) this.open = false;\n  }\n\n  toggle() {\n    this.open = !this.open;\n  }\n\n  private async _handleOpenChange() {\n    const popover = this._popover;\n    if (!popover) return;\n\n    const posOpts = { placement: this.placement, distance: this.distance };\n\n    if (this.open) {\n      popover.showPopover();\n      await this._floating.updatePosition(posOpts);\n      if (!this.open) return;\n      await this._floating.animateShow(popover, this._getDuration('--show-duration'));\n      this._floating.startPositioning(posOpts);\n      this._trigger?.setAttribute('aria-describedby', this._tooltipId);\n    } else {\n      this._floating.stopPositioning();\n      this._floating.cleanupSafePolygon();\n      this._trigger?.removeAttribute('aria-describedby');\n      await this._floating.animateHide(popover, this._getDuration('--hide-duration'));\n      if (popover.matches(':popover-open')) popover.hidePopover();\n    }\n  }\n\n  // --- Trigger event handlers ---\n\n  private _onPointerEnter = () => {\n    if (!this._hasTrigger('hover')) return;\n    this._floating.cleanupSafePolygon();\n    this.show();\n  };\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (!this._hasTrigger('hover') || !this.open) return;\n    this._floating.handlePointerLeave(e, () => this.hide());\n  };\n\n  private _onFocusIn = () => {\n    if (this._hasTrigger('focus')) this.show();\n  };\n  private _onFocusOut = () => {\n    if (this._hasTrigger('focus')) this.hide();\n  };\n  private _onClick = () => {\n    if (this._hasTrigger('click')) this.toggle();\n  };\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    if (this.open && e.key === 'Escape') {\n      e.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private _addTriggerListeners() {\n    this._floating.addTriggerListeners({\n      onPointerEnter: this._onPointerEnter,\n      onPointerLeave: this._onPointerLeave,\n      onFocusIn: this._onFocusIn,\n      onFocusOut: this._onFocusOut,\n      onClick: this._onClick,\n      onKeyDown: this._onKeyDown,\n    });\n  }\n\n  private _removeTriggerListeners(forId?: string) {\n    const trigger = forId\n      ? (this.getRootNode() as Document | ShadowRoot).getElementById(forId)\n      : undefined;\n    this._floating.removeTriggerListeners(trigger);\n  }\n\n  override render() {\n    return html`\n      <div\n        id=${this._tooltipId}\n        popover=\"manual\"\n        role=\"tooltip\"\n        part=\"body\"\n      >\n        ${this.withoutArrow\n          ? nothing\n          : html`\n              <i\n                part=\"arrow\"\n                role=\"presentation\"\n              ></i>\n            `}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

package/cdn/standalone.css

@@ -1030,6 +1030,18 @@ In dark mode, mixes the base color with black (default 15% black).
   --l-form-field-choice-gap: var(--l-spacing-2);
 }
 
+/* Tooltip component token (--l-tooltip-background-color). */
+
+/* Luxen design-tokens — tooltip component token.
+   Bundled in the Luxen preset via `luxen-ui/css/tokens`. A neutral inverse
+   surface, decoupled from the brand fill so re-theming primary does not
+   recolor tooltips. */
+
+:root {
+  /* Tooltip surface color — dark in light mode, light in dark mode. Neutral by design; not tied to --l-color-bg-fill-brand, so changing the brand color does not recolor tooltips. Override globally to re-skin every tooltip, or use the per-instance --background-color custom property on a single `<l-tooltip>`. */
+  --l-tooltip-background-color: light-dark(var(--l-color-gray-900), var(--l-color-gray-50));
+}
+
 /* avatar.css */
 @layer components {
   /*

package/cdn/standalone.js

@@ -31920,7 +31920,7 @@ define("toast", Toast);
 define("toast-item", ToastItem);
 //#endregion
 //#region src/html/elements/tooltip/tooltip.ts
-var styles$2 = r$6(":host {\n  --background-color: var(--l-color-bg-fill-brand, light-dark(#1f2937, #f9fafb));\n  --border-radius: 4px;\n  --max-width: 180px;\n  --arrow-size: 6px;\n  --show-duration: 150ms;\n  --hide-duration: 150ms;\n\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--max-width);\n  padding: 4px 8px;\n  border: 0;\n  border-radius: var(--border-radius);\n  background: var(--background-color);\n  color: var(\n    --text-color,\n    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)\n  );\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));\n  pointer-events: none;\n}\n\n@supports (color: contrast-color(red vs black, white)) {\n  [popover] {\n    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));\n  }\n}\n\ni {\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--background-color);\n  transform: rotate(45deg);\n}\n");
+var styles$2 = r$6(":host {\n  --background-color: var(--l-tooltip-background-color, light-dark(#1f2937, #f9fafb));\n  --border-radius: 4px;\n  --max-width: 180px;\n  --arrow-size: 6px;\n  --show-duration: 150ms;\n  --hide-duration: 150ms;\n\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--max-width);\n  padding: 4px 8px;\n  border: 0;\n  border-radius: var(--border-radius);\n  background: var(--background-color);\n  color: var(\n    --text-color,\n    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)\n  );\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));\n  pointer-events: none;\n}\n\n@supports (color: contrast-color(red vs black, white)) {\n  [popover] {\n    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));\n  }\n}\n\ni {\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--background-color);\n  transform: rotate(45deg);\n}\n");
 /**
 * @summary A tooltip that displays contextual text on hover or focus.
 * @customElement l-tooltip
@@ -31930,7 +31930,7 @@ var styles$2 = r$6(":host {\n  --background-color: var(--l-color-bg-fill-brand,
 * @csspart body - The tooltip popover container.
 * @csspart arrow - The directional arrow element.
 *
-* @cssproperty --background-color - Background color. Default: dark in light mode, light in dark mode.
+* @cssproperty --background-color - 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.
 * @cssproperty --text-color - Text color. If unset, auto-derived from `--background-color` luminance.
 * @cssproperty --border-radius - Border radius. Default `4px`.
 * @cssproperty --max-width - Maximum width. Default `180px`.