luxen-ui 0.15.0 → 0.16.0

package/cdn/custom-elements.json

@@ -2849,6 +2849,10 @@
               "description": "arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.",
               "name": "data-marker"
             },
+            {
+              "description": "start | end — Marker side. Defaults to `end`.",
+              "name": "data-marker-placement"
+            },
             {
               "description": "bordered — Adds border, background, and border-radius.",
               "name": "data-variant"
@@ -2893,6 +2897,14 @@
               ],
               "description": "Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross."
             },
+            {
+              "name": "data-marker-placement",
+              "values": [
+                "start",
+                "end"
+              ],
+              "description": "Marker side. Defaults to `end`."
+            },
             {
               "name": "data-variant",
               "description": "bordered — Adds border, background, and border-radius."
@@ -9215,6 +9227,26 @@
               "description": "The distance in pixels from the target element.",
               "attribute": "distance"
             },
+            {
+              "kind": "field",
+              "name": "showDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately.",
+              "attribute": "show-delay"
+            },
+            {
+              "kind": "field",
+              "name": "hideDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds to wait after the pointer leaves the trigger (and its safe\npolygon) before hiding. Bridges a brief exit-and-return without flicker.\nApplies to `hover` only.",
+              "attribute": "hide-delay"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -9288,6 +9320,24 @@
               "description": "The distance in pixels from the target element.",
               "fieldName": "distance"
             },
+            {
+              "name": "show-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately.",
+              "fieldName": "showDelay"
+            },
+            {
+              "name": "hide-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds to wait after the pointer leaves the trigger (and its safe\npolygon) before hiding. Bridges a brief exit-and-return without flicker.\nApplies to `hover` only.",
+              "fieldName": "hideDelay"
+            },
             {
               "name": "open",
               "type": {

package/cdn/elements/disclosure/disclosure.meta.d.ts

@@ -7,6 +7,7 @@
  * @attribute open - Native attribute — starts the disclosure expanded.
  * @attribute name - Native attribute — groups disclosures into an exclusive accordion.
  * @attribute data-marker - arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
+ * @attribute data-marker-placement - start | end — Marker side. Defaults to `end`.
  * @attribute data-variant - bordered — Adds border, background, and border-radius.
  * @attribute disabled - Disables interaction (set on `<details>` or `<summary>`).
  *

package/cdn/elements/disclosure/disclosure.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/disclosure/disclosure.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,cAAc;CAAG"}
+{"version":3,"file":"disclosure.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/disclosure/disclosure.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,qBAAa,cAAc;CAAG"}

package/cdn/elements/tooltip/tooltip.d.ts

@@ -28,6 +28,19 @@ export declare class Tooltip extends LuxenElement {
     accessor placement: Placement;
     /** The distance in pixels from the target element. */
     accessor distance: number;
+    /**
+     * Milliseconds the pointer must dwell on the trigger before the tooltip
+     * shows. Applies to `hover` only — focus shows immediately.
+     */
+    accessor showDelay: number;
+    /**
+     * Milliseconds to wait after the pointer leaves the trigger (and its safe
+     * polygon) before hiding. Bridges a brief exit-and-return without flicker.
+     * Applies to `hover` only.
+     */
+    accessor hideDelay: number;
+    private _showTimer?;
+    private _hideTimer?;
     /** Whether or not the tooltip is visible. */
     accessor open: boolean;
     /** Hide the directional arrow. */
@@ -42,12 +55,16 @@ export declare class Tooltip extends LuxenElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: PropertyValues<this>): void;
+    /** Cancel any pending delayed show/hide (trigger gone, `for` changed, disconnect). */
+    private _clearTimers;
     show(): void;
     hide(): void;
     toggle(): void;
     private _handleOpenChange;
     private _onPointerEnter;
     private _onPointerLeave;
+    /** Hide now, or after `hide-delay` if set (cancellable by a pointer return). */
+    private _scheduleHide;
     private _onFocusIn;
     private _onFocusOut;
     private _onClick;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAoBlD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAId;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAS;IAEtC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAiB;IAEjC,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAMjB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IAgC/B,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAoBlD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAId;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAS;IAEtC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB;;;OAGG;IAEH,QAAQ,CAAC,SAAS,SAAK;IAEvB;;;;OAIG;IAEH,QAAQ,CAAC,SAAS,SAAK;IAEvB,OAAO,CAAC,UAAU,CAAC,CAAgC;IACnD,OAAO,CAAC,UAAU,CAAC,CAAgC;IAEnD,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAiB;IAEjC,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAMjB,oBAAoB;IAQpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAY9C,sFAAsF;IACtF,OAAO,CAAC,YAAY;IAOpB,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IAgC/B,OAAO,CAAC,eAAe,CAkBrB;IAEF,OAAO,CAAC,eAAe,CAMrB;IAEF,gFAAgF;IAChF,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,UAAU,CAOhB;IACF,OAAO,CAAC,WAAW,CAOjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}

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{i as n,t as r}from"../../chunks/decorate.js";import{a as i,t as a}from"../../chunks/lit-html.js";import{LuxenElement as o}from"../../shared/luxen-element.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);--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);--_on:calc(255 * ( 1 - sign(.2126 * (r / 255) * (r / 255) + .7152 * (g / 255) * (g / 255) + .0722 * (b / 255) * (b / 255) - .2) ) / 2);color:var(--text-color,rgb(from var(--background-color) var(--_on) var(--_on) var(--_on)));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)){[popover]{color:var(--text-color,contrast-color(var(--background-color)))}}i{width:var(--arrow-size);height:var(--arrow-size);background:var(--background-color);display:block;position:absolute;transform:rotate(45deg)}`),u=new Set,d=null,f=class extends o{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=()=>{if(this._hasTrigger(`hover`)){for(let e of u)e._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(){if(!this.for)return null;let e=this.getRootNode();return e instanceof Document||e instanceof ShadowRoot?e.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(),u.add(this),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),u.delete(this),d===this&&(d=null),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(this._hasTrigger(`manual`)||(d&&d!==this&&d.hide(),d=this),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 d===this&&(d=null),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 i`
+import{uniqueId as e}from"../../registry.js";import{i as t}from"../../chunks/lit.js";import{i as n,t as r}from"../../chunks/decorate.js";import{a as i,t as a}from"../../chunks/lit-html.js";import{LuxenElement as o}from"../../shared/luxen-element.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);--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);--_on:calc(255 * ( 1 - sign(.2126 * (r / 255) * (r / 255) + .7152 * (g / 255) * (g / 255) + .0722 * (b / 255) * (b / 255) - .2) ) / 2);color:var(--text-color,rgb(from var(--background-color) var(--_on) var(--_on) var(--_on)));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)){[popover]{color:var(--text-color,contrast-color(var(--background-color)))}}i{width:var(--arrow-size);height:var(--arrow-size);background:var(--background-color);display:block;position:absolute;transform:rotate(45deg)}`),u=new Set,d=null,f=class extends o{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=0,this.#i=0,this.#a=!1,this.#o=!1,this.#s=`hover focus`,this._onPointerEnter=()=>{if(this._hasTrigger(`hover`)){for(let e of u)e._floating.cleanupSafePolygon();clearTimeout(this._hideTimer),this._hideTimer=void 0,this.showDelay>0&&!this.open?(clearTimeout(this._showTimer),this._showTimer=setTimeout(()=>this.show(),this.showDelay)):this.show()}},this._onPointerLeave=e=>{clearTimeout(this._showTimer),this._showTimer=void 0,!(!this._hasTrigger(`hover`)||!this.open)&&this._floating.handlePointerLeave(e,()=>this._scheduleHide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&(clearTimeout(this._hideTimer),this._hideTimer=void 0,this.show())},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&(clearTimeout(this._showTimer),this._showTimer=void 0,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 showDelay(){return this.#r}set showDelay(e){this.#r=e}#i;get hideDelay(){return this.#i}set hideDelay(e){this.#i=e}#a;get open(){return this.#a}set open(e){this.#a=e}#o;get withoutArrow(){return this.#o}set withoutArrow(e){this.#o=e}#s;get trigger(){return this.#s}set trigger(e){this.#s=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){if(!this.for)return null;let e=this.getRootNode();return e instanceof Document||e instanceof ShadowRoot?e.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(),u.add(this),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),u.delete(this),d===this&&(d=null),this._clearTimers(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._clearTimers(),this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}_clearTimers(){clearTimeout(this._showTimer),clearTimeout(this._hideTimer),this._showTimer=void 0,this._hideTimer=void 0}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(this._hasTrigger(`manual`)||(d&&d!==this&&d.hide(),d=this),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 d===this&&(d=null),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()}_scheduleHide(){this.hideDelay>0?(clearTimeout(this._hideTimer),this._hideTimer=setTimeout(()=>this.hide(),this.hideDelay)):this.hide()}_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 i`
       <div
         id=${this._tooltipId}
         popover="manual"
@@ -13,5 +13,5 @@ import{uniqueId as e}from"../../registry.js";import{i as t}from"../../chunks/lit
             `}
         <slot></slot>
       </div>
-    `}};r([n({reflect:!0})],f.prototype,`for`,null),r([n()],f.prototype,`placement`,null),r([n({type:Number})],f.prototype,`distance`,null),r([n({type:Boolean,reflect:!0})],f.prototype,`open`,null),r([n({type:Boolean,reflect:!0,attribute:`without-arrow`})],f.prototype,`withoutArrow`,null),r([n()],f.prototype,`trigger`,null);export{f as Tooltip};
+    `}};r([n({reflect:!0})],f.prototype,`for`,null),r([n()],f.prototype,`placement`,null),r([n({type:Number})],f.prototype,`distance`,null),r([n({type:Number,attribute:`show-delay`})],f.prototype,`showDelay`,null),r([n({type:Number,attribute:`hide-delay`})],f.prototype,`hideDelay`,null),r([n({type:Boolean,reflect:!0})],f.prototype,`open`,null),r([n({type:Boolean,reflect:!0,attribute:`without-arrow`})],f.prototype,`withoutArrow`,null),r([n()],f.prototype,`trigger`,null);export{f as Tooltip};
 //# sourceMappingURL=tooltip.js.map

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-tooltip-background-color);\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  /*\n   * Text over --background-color, decided by the background's own luminance —\n   * never the document mode, since --background-color is consumer-set and\n   * ignores light/dark. The contrast-color() block below is the primary path\n   * (Baseline 2026); this --_on calc() is the fallback for browsers predating\n   * it. It approximates WCAG relative luminance with squared sRGB channels\n   * (Rec. 709 weights) and flips at 0.2, just above the black/white crossover\n   * (~0.179) — holding AA across saturated custom colors where an\n   * OKLCH-lightness threshold collapses to ≈1:1 (OKLCH L tracks hue, not\n   * luminance). --text-color lets consumers force a specific text color.\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(--background-color) var(--_on) var(--_on) var(--_on)));\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/* Primary path: native, guaranteed-contrast black/white. @supports (not\n * declaration order) is required — the value contains var(), so a non-supporting\n * browser treats contrast-color() as invalid-at-computed-value-time and resets to\n * inherit rather than falling back to the calc() line. */\n@supports (color: contrast-color(red)) {\n  [popover] {\n    color: var(--text-color, contrast-color(var(--background-color)));\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 * Module-level registry of connected tooltips. A tooltip behaves like a label,\n * not a dialog: at most one pointer/focus/click-triggered tooltip is visible at\n * a time. Without this, on a dense grid of small triggers the safe polygon of\n * the previous tooltip overlaps the neighbouring triggers and two (or more)\n * tooltips end up visible during a horizontal sweep. `trigger=\"manual\"`\n * tooltips opt out: they never claim the active slot and are never evicted, so\n * programmatic multi-tooltip scenarios (annotations, coach marks) keep working.\n */\nconst tooltipInstances = new Set<Tooltip>();\nlet activeTooltip: Tooltip | null = null;\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({ reflect: true })\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    if (!this.for) return null;\n    // A detached tooltip's root is a plain element with no getElementById —\n    // async open/close work (e.g. an eviction) may land after removal.\n    const root = this.getRootNode();\n    return root instanceof Document || root instanceof ShadowRoot\n      ? root.getElementById(this.for)\n      : 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    tooltipInstances.add(this);\n    requestAnimationFrame(() => this._addTriggerListeners());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    tooltipInstances.delete(this);\n    if (activeTooltip === this) activeTooltip = null;\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      // Single-open invariant: opening a non-manual tooltip evicts the current\n      // one. The evicted tooltip's hide flows back through this method, which\n      // also removes its safe-polygon `pointermove` listener.\n      if (!this._hasTrigger('manual')) {\n        if (activeTooltip && activeTooltip !== this) activeTooltip.hide();\n        activeTooltip = this;\n      }\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      if (activeTooltip === this) activeTooltip = null;\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    // The safe polygon means \"the pointer is travelling toward the bubble\" —\n    // provably false once the pointer enters another tooltip's trigger, so\n    // invalidate every peer's polygon (and drop its stale `pointermove`\n    // listener) along with our own.\n    for (const tooltip of tooltipInstances) {\n      tooltip._floating.cleanupSafePolygon();\n    }\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);\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  /*\n   * Text over --background-color, decided by the background's own luminance —\n   * never the document mode, since --background-color is consumer-set and\n   * ignores light/dark. The contrast-color() block below is the primary path\n   * (Baseline 2026); this --_on calc() is the fallback for browsers predating\n   * it. It approximates WCAG relative luminance with squared sRGB channels\n   * (Rec. 709 weights) and flips at 0.2, just above the black/white crossover\n   * (~0.179) — holding AA across saturated custom colors where an\n   * OKLCH-lightness threshold collapses to ≈1:1 (OKLCH L tracks hue, not\n   * luminance). --text-color lets consumers force a specific text color.\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(--background-color) var(--_on) var(--_on) var(--_on)));\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/* Primary path: native, guaranteed-contrast black/white. @supports (not\n * declaration order) is required — the value contains var(), so a non-supporting\n * browser treats contrast-color() as invalid-at-computed-value-time and resets to\n * inherit rather than falling back to the calc() line. */\n@supports (color: contrast-color(red)) {\n  [popover] {\n    color: var(--text-color, contrast-color(var(--background-color)));\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 * Module-level registry of connected tooltips. A tooltip behaves like a label,\n * not a dialog: at most one pointer/focus/click-triggered tooltip is visible at\n * a time. Without this, on a dense grid of small triggers the safe polygon of\n * the previous tooltip overlaps the neighbouring triggers and two (or more)\n * tooltips end up visible during a horizontal sweep. `trigger=\"manual\"`\n * tooltips opt out: they never claim the active slot and are never evicted, so\n * programmatic multi-tooltip scenarios (annotations, coach marks) keep working.\n */\nconst tooltipInstances = new Set<Tooltip>();\nlet activeTooltip: Tooltip | null = null;\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({ reflect: true })\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  /**\n   * Milliseconds the pointer must dwell on the trigger before the tooltip\n   * shows. Applies to `hover` only — focus shows immediately.\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  accessor showDelay = 0;\n\n  /**\n   * Milliseconds to wait after the pointer leaves the trigger (and its safe\n   * polygon) before hiding. Bridges a brief exit-and-return without flicker.\n   * Applies to `hover` only.\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  accessor hideDelay = 0;\n\n  private _showTimer?: ReturnType<typeof setTimeout>;\n  private _hideTimer?: ReturnType<typeof setTimeout>;\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    if (!this.for) return null;\n    // A detached tooltip's root is a plain element with no getElementById —\n    // async open/close work (e.g. an eviction) may land after removal.\n    const root = this.getRootNode();\n    return root instanceof Document || root instanceof ShadowRoot\n      ? root.getElementById(this.for)\n      : 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    tooltipInstances.add(this);\n    requestAnimationFrame(() => this._addTriggerListeners());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    tooltipInstances.delete(this);\n    if (activeTooltip === this) activeTooltip = null;\n    this._clearTimers();\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      // A queued show/hide targets the old trigger — drop it before rewiring.\n      this._clearTimers();\n      this._removeTriggerListeners(changed.get('for') as string);\n      this._addTriggerListeners();\n    }\n  }\n\n  /** Cancel any pending delayed show/hide (trigger gone, `for` changed, disconnect). */\n  private _clearTimers() {\n    clearTimeout(this._showTimer);\n    clearTimeout(this._hideTimer);\n    this._showTimer = undefined;\n    this._hideTimer = undefined;\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      // Single-open invariant: opening a non-manual tooltip evicts the current\n      // one. The evicted tooltip's hide flows back through this method, which\n      // also removes its safe-polygon `pointermove` listener.\n      if (!this._hasTrigger('manual')) {\n        if (activeTooltip && activeTooltip !== this) activeTooltip.hide();\n        activeTooltip = this;\n      }\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      if (activeTooltip === this) activeTooltip = null;\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    // The safe polygon means \"the pointer is travelling toward the bubble\" —\n    // provably false once the pointer enters another tooltip's trigger, so\n    // invalidate every peer's polygon (and drop its stale `pointermove`\n    // listener) along with our own.\n    for (const tooltip of tooltipInstances) {\n      tooltip._floating.cleanupSafePolygon();\n    }\n    // The pointer is back on the trigger: cancel a pending hide (exit-and-return).\n    clearTimeout(this._hideTimer);\n    this._hideTimer = undefined;\n    if (this.showDelay > 0 && !this.open) {\n      clearTimeout(this._showTimer);\n      this._showTimer = setTimeout(() => this.show(), this.showDelay);\n    } else {\n      this.show();\n    }\n  };\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    // Cancel a still-pending show — the pointer left before the dwell elapsed.\n    clearTimeout(this._showTimer);\n    this._showTimer = undefined;\n    if (!this._hasTrigger('hover') || !this.open) return;\n    this._floating.handlePointerLeave(e, () => this._scheduleHide());\n  };\n\n  /** Hide now, or after `hide-delay` if set (cancellable by a pointer return). */\n  private _scheduleHide() {\n    if (this.hideDelay > 0) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = setTimeout(() => this.hide(), this.hideDelay);\n    } else {\n      this.hide();\n    }\n  }\n\n  private _onFocusIn = () => {\n    // Focus is a discrete affordance — show immediately, ignoring the dwell delay.\n    if (this._hasTrigger('focus')) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = undefined;\n      this.show();\n    }\n  };\n  private _onFocusOut = () => {\n    if (this._hasTrigger('focus')) {\n      // A hover may have queued a show; blur must not resurrect it.\n      clearTimeout(this._showTimer);\n      this._showTimer = undefined;\n      this.hide();\n    }\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":"oXCSA,IAAM,EAAS,EAAU,w7BAAS,EAW5B,EAAmB,IAAI,IACzB,EAAgC,KAmBvB,EAAb,cAA6B,CAAa,+CAGnB,EAAS,SAAS,iBAEnB,IAAI,EAAkB,KAAM,CAC9C,sBAAyB,KAAK,SAC9B,uBAA0B,KAAK,SAC/B,oBAAuB,KAAK,QAC9B,CAAC,UAIc,WAIiB,cAIZ,UAOC,UAQA,UAOL,WAIQ,WAIL,uCA2Ga,CACzB,QAAK,YAAY,OAAO,EAK7B,KAAK,IAAM,KAAW,EACpB,EAAQ,UAAU,mBAAmB,EAGvC,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,IAAA,GACd,KAAK,UAAY,GAAK,CAAC,KAAK,MAC9B,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,eAAiB,KAAK,KAAK,EAAG,KAAK,SAAS,GAE9D,KAAK,KAAK,CAT2B,CAWzC,uBAE2B,GAAoB,CAE7C,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,IAAA,GACd,GAAC,KAAK,YAAY,OAAO,GAAK,CAAC,KAAK,OACxC,KAAK,UAAU,mBAAmB,MAAS,KAAK,cAAc,CAAC,CACjE,sBAY2B,CAErB,KAAK,YAAY,OAAO,IAC1B,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,IAAA,GAClB,KAAK,KAAK,EAEd,uBAC4B,CACtB,KAAK,YAAY,OAAO,IAE1B,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,IAAA,GAClB,KAAK,KAAK,EAEd,oBACyB,CACnB,KAAK,YAAY,OAAO,GAAG,KAAK,OAAO,CAC7C,kBAEsB,GAAqB,CACrC,KAAK,MAAQ,EAAE,MAAQ,WACzB,EAAE,gBAAgB,EAClB,KAAK,KAAK,EAEd,qBA5NyB,CAAC,EAAY,CAAM,SAYnC,KAAA,4CAIA,WAAA,kDAIA,UAAA,iDAOA,WAAA,kDAQA,WAAA,kDAOA,MAAA,6CAIA,cAAA,qDAIA,SAAA,yCAET,YAAoB,EAAc,CAChC,OAAO,KAAK,QAAQ,MAAM,GAAG,CAAC,CAAC,SAAS,CAAI,CAC9C,CAEA,IAAY,UAA+B,CACzC,GAAI,CAAC,KAAK,IAAK,OAAO,KAGtB,IAAM,EAAO,KAAK,YAAY,EAC9B,OAAO,aAAgB,UAAY,aAAgB,WAC/C,EAAK,eAAe,KAAK,GAAG,EAC5B,IACN,CAEA,IAAY,UAAwB,CAClC,OAAO,KAAK,WAAY,cAAc,WAAW,CACnD,CAEA,IAAY,UAA+B,CACzC,OAAO,KAAK,aAAe,KAAO,KAAK,WAAY,cAAc,GAAG,CACtE,CAEA,aAAqB,EAAqD,CACxE,IAAM,EAAS,WAAW,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,CAAI,CAAC,EACvE,OAAO,OAAO,MAAM,CAAM,EAAI,IAAM,CACtC,CAEA,mBAA6B,CAC3B,MAAM,kBAAkB,EACxB,EAAiB,IAAI,IAAI,EACzB,0BAA4B,KAAK,qBAAqB,CAAC,CACzD,CAEA,sBAAgC,CAC9B,MAAM,qBAAqB,EAC3B,EAAiB,OAAO,IAAI,EACxB,IAAkB,OAAM,EAAgB,MAC5C,KAAK,aAAa,EAClB,KAAK,wBAAwB,CAC/B,CAEA,QAAiB,EAA+B,CAC1C,EAAQ,IAAI,MAAM,GACpB,KAAU,kBAAkB,EAE1B,EAAQ,IAAI,KAAK,IAEnB,KAAK,aAAa,EAClB,KAAK,wBAAwB,EAAQ,IAAI,KAAK,CAAW,EACzD,KAAK,qBAAqB,EAE9B,CAGA,cAAuB,CACrB,aAAa,KAAK,UAAU,EAC5B,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,IAAA,GAClB,KAAK,WAAa,IAAA,EACpB,CAEA,MAAO,CACL,AAAgB,KAAK,OAAO,EAC9B,CAEA,MAAO,CACL,AAAe,KAAK,OAAO,EAC7B,CAEA,QAAS,CACP,KAAK,KAAO,CAAC,KAAK,IACpB,CAEA,MAAc,mBAAoB,CAChC,IAAM,EAAU,KAAK,SACrB,GAAI,CAAC,EAAS,OAEd,IAAM,EAAU,CAAE,UAAW,KAAK,UAAW,SAAU,KAAK,QAAS,EAErE,GAAI,KAAK,KAAM,CAUb,GANK,KAAK,YAAY,QAAQ,IACxB,GAAiB,IAAkB,MAAM,EAAc,KAAK,EAChE,EAAgB,MAElB,EAAQ,YAAY,EACpB,MAAM,KAAK,UAAU,eAAe,CAAO,EACvC,CAAC,KAAK,KAAM,OAChB,MAAM,KAAK,UAAU,YAAY,EAAS,KAAK,aAAa,iBAAiB,CAAC,EAC9E,KAAK,UAAU,iBAAiB,CAAO,EACvC,KAAK,UAAU,aAAa,mBAAoB,KAAK,UAAU,CACjE,MACM,IAAkB,OAAM,EAAgB,MAC5C,KAAK,UAAU,gBAAgB,EAC/B,KAAK,UAAU,mBAAmB,EAClC,KAAK,UAAU,gBAAgB,kBAAkB,EACjD,MAAM,KAAK,UAAU,YAAY,EAAS,KAAK,aAAa,iBAAiB,CAAC,EAC1E,EAAQ,QAAQ,eAAe,GAAG,EAAQ,YAAY,CAE9D,CAiCA,eAAwB,CAClB,KAAK,UAAY,GACnB,aAAa,KAAK,UAAU,EAC5B,KAAK,WAAa,eAAiB,KAAK,KAAK,EAAG,KAAK,SAAS,GAE9D,KAAK,KAAK,CAEd,CA6BA,sBAA+B,CAC7B,KAAK,UAAU,oBAAoB,CACjC,eAAgB,KAAK,gBACrB,eAAgB,KAAK,gBACrB,UAAW,KAAK,WAChB,WAAY,KAAK,YACjB,QAAS,KAAK,SACd,UAAW,KAAK,UAClB,CAAC,CACH,CAEA,wBAAgC,EAAgB,CAC9C,IAAM,EAAU,EACX,KAAK,YAAY,CAAC,CAA2B,eAAe,CAAK,EAClE,IAAA,GACJ,KAAK,UAAU,uBAAuB,CAAO,CAC/C,CAEA,QAAkB,CAChB,MAAO,EAAI;;aAEF,KAAK,WAAW;;;;;UAKnB,KAAK,aACH,EACA,CAAI;;;;;cAKF;;;KAIZ,CACF,KAzPG,EAAS,CAAE,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,MAAA,IAAA,KAI1B,EAAS,CAAA,EAAA,EAAA,UAAA,YAAA,IAAA,KAIT,EAAS,CAAE,KAAM,MAAO,CAAC,CAAA,EAAA,EAAA,UAAA,WAAA,IAAA,KAOzB,EAAS,CAAE,KAAM,OAAQ,UAAW,YAAa,CAAC,CAAA,EAAA,EAAA,UAAA,YAAA,IAAA,KAQlD,EAAS,CAAE,KAAM,OAAQ,UAAW,YAAa,CAAC,CAAA,EAAA,EAAA,UAAA,YAAA,IAAA,KAOlD,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,CAAA,EAAA,EAAA,UAAA,OAAA,IAAA,KAIzC,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,eAAgB,CAAC,CAAA,EAAA,EAAA,UAAA,eAAA,IAAA,KAIrE,EAAS,CAAA,EAAA,EAAA,UAAA,UAAA,IAAA"}

package/cdn/standalone.css

@@ -2289,6 +2289,22 @@ In dark mode, mixes the base color with black (default 15% black).
   .l-disclosure[data-marker='plus'][open] summary::after {
     rotate: 45deg;
   }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Marker: placement
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure[data-marker-placement='start'] summary {
+    justify-content: flex-start;
+    /* Match the summary's inline padding so the space around the marker is symmetric */
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .l-disclosure[data-marker-placement='start'] summary::after {
+    order: -1;
+  }
 }
 
 /* divider.css */

package/cdn/styles/elements/disclosure.css

@@ -134,4 +134,20 @@
   .l-disclosure[data-marker='plus'][open] summary::after {
     rotate: 45deg;
   }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Marker: placement
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure[data-marker-placement='start'] summary {
+    justify-content: flex-start;
+    /* Match the summary's inline padding so the space around the marker is symmetric */
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .l-disclosure[data-marker-placement='start'] summary::after {
+    order: -1;
+  }
 }

package/dist/css/elements/disclosure.css

@@ -134,4 +134,20 @@
   .l-disclosure[data-marker='plus'][open] summary::after {
     rotate: 45deg;
   }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Marker: placement
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure[data-marker-placement='start'] summary {
+    justify-content: flex-start;
+    /* Match the summary's inline padding so the space around the marker is symmetric */
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .l-disclosure[data-marker-placement='start'] summary::after {
+    order: -1;
+  }
 }

package/dist/custom-elements.json

@@ -2849,6 +2849,10 @@
               "description": "arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.",
               "name": "data-marker"
             },
+            {
+              "description": "start | end — Marker side. Defaults to `end`.",
+              "name": "data-marker-placement"
+            },
             {
               "description": "bordered — Adds border, background, and border-radius.",
               "name": "data-variant"
@@ -2893,6 +2897,14 @@
               ],
               "description": "Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross."
             },
+            {
+              "name": "data-marker-placement",
+              "values": [
+                "start",
+                "end"
+              ],
+              "description": "Marker side. Defaults to `end`."
+            },
             {
               "name": "data-variant",
               "description": "bordered — Adds border, background, and border-radius."
@@ -9215,6 +9227,26 @@
               "description": "The distance in pixels from the target element.",
               "attribute": "distance"
             },
+            {
+              "kind": "field",
+              "name": "showDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately.",
+              "attribute": "show-delay"
+            },
+            {
+              "kind": "field",
+              "name": "hideDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds to wait after the pointer leaves the trigger (and its safe\npolygon) before hiding. Bridges a brief exit-and-return without flicker.\nApplies to `hover` only.",
+              "attribute": "hide-delay"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -9288,6 +9320,24 @@
               "description": "The distance in pixels from the target element.",
               "fieldName": "distance"
             },
+            {
+              "name": "show-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately.",
+              "fieldName": "showDelay"
+            },
+            {
+              "name": "hide-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Milliseconds to wait after the pointer leaves the trigger (and its safe\npolygon) before hiding. Bridges a brief exit-and-return without flicker.\nApplies to `hover` only.",
+              "fieldName": "hideDelay"
+            },
             {
               "name": "open",
               "type": {

package/dist/elements/disclosure/disclosure.meta.d.ts

@@ -7,6 +7,7 @@
  * @attribute open - Native attribute — starts the disclosure expanded.
  * @attribute name - Native attribute — groups disclosures into an exclusive accordion.
  * @attribute data-marker - arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
+ * @attribute data-marker-placement - start | end — Marker side. Defaults to `end`.
  * @attribute data-variant - bordered — Adds border, background, and border-radius.
  * @attribute disabled - Disables interaction (set on `<details>` or `<summary>`).
  *

package/dist/elements/disclosure/disclosure.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/disclosure/disclosure.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,cAAc;CAAG"}
+{"version":3,"file":"disclosure.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/disclosure/disclosure.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,qBAAa,cAAc;CAAG"}

package/dist/elements/disclosure/disclosure.meta.js

@@ -13,6 +13,7 @@
  * @attribute open - Native attribute — starts the disclosure expanded.
  * @attribute name - Native attribute — groups disclosures into an exclusive accordion.
  * @attribute data-marker - arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
+ * @attribute data-marker-placement - start | end — Marker side. Defaults to `end`.
  * @attribute data-variant - bordered — Adds border, background, and border-radius.
  * @attribute disabled - Disables interaction (set on `<details>` or `<summary>`).
  *

package/dist/elements/tooltip/tooltip.d.ts

@@ -28,6 +28,19 @@ export declare class Tooltip extends LuxenElement {
     accessor placement: Placement;
     /** The distance in pixels from the target element. */
     accessor distance: number;
+    /**
+     * Milliseconds the pointer must dwell on the trigger before the tooltip
+     * shows. Applies to `hover` only — focus shows immediately.
+     */
+    accessor showDelay: number;
+    /**
+     * Milliseconds to wait after the pointer leaves the trigger (and its safe
+     * polygon) before hiding. Bridges a brief exit-and-return without flicker.
+     * Applies to `hover` only.
+     */
+    accessor hideDelay: number;
+    private _showTimer?;
+    private _hideTimer?;
     /** Whether or not the tooltip is visible. */
     accessor open: boolean;
     /** Hide the directional arrow. */
@@ -42,12 +55,16 @@ export declare class Tooltip extends LuxenElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: PropertyValues<this>): void;
+    /** Cancel any pending delayed show/hide (trigger gone, `for` changed, disconnect). */
+    private _clearTimers;
     show(): void;
     hide(): void;
     toggle(): void;
     private _handleOpenChange;
     private _onPointerEnter;
     private _onPointerLeave;
+    /** Hide now, or after `hide-delay` if set (cancellable by a pointer return). */
+    private _scheduleHide;
     private _onFocusIn;
     private _onFocusOut;
     private _onClick;

package/dist/elements/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAoBlD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAId;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAS;IAEtC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAiB;IAEjC,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAMjB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IAgC/B,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAoBlD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAId;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAS;IAEtC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB;;;OAGG;IAEH,QAAQ,CAAC,SAAS,SAAK;IAEvB;;;;OAIG;IAEH,QAAQ,CAAC,SAAS,SAAK;IAEvB,OAAO,CAAC,UAAU,CAAC,CAAgC;IACnD,OAAO,CAAC,UAAU,CAAC,CAAgC;IAEnD,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAiB;IAEjC,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAMjB,oBAAoB;IAQpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAY9C,sFAAsF;IACtF,OAAO,CAAC,YAAY;IAOpB,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IAgC/B,OAAO,CAAC,eAAe,CAkBrB;IAEF,OAAO,CAAC,eAAe,CAMrB;IAEF,gFAAgF;IAChF,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,UAAU,CAOhB;IACF,OAAO,CAAC,WAAW,CAOjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}

package/dist/elements/tooltip/tooltip.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Tooltip_for_accessor_storage, _Tooltip_placement_accessor_storage, _Tooltip_distance_accessor_storage, _Tooltip_open_accessor_storage, _Tooltip_withoutArrow_accessor_storage, _Tooltip_trigger_accessor_storage;
+var _Tooltip_for_accessor_storage, _Tooltip_placement_accessor_storage, _Tooltip_distance_accessor_storage, _Tooltip_showDelay_accessor_storage, _Tooltip_hideDelay_accessor_storage, _Tooltip_open_accessor_storage, _Tooltip_withoutArrow_accessor_storage, _Tooltip_trigger_accessor_storage;
 import { html, nothing, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element.js';
 import { property } from 'lit/decorators.js';
@@ -64,6 +64,8 @@ export class Tooltip extends LuxenElement {
         _Tooltip_for_accessor_storage.set(this, '');
         _Tooltip_placement_accessor_storage.set(this, 'top');
         _Tooltip_distance_accessor_storage.set(this, 8);
+        _Tooltip_showDelay_accessor_storage.set(this, 0);
+        _Tooltip_hideDelay_accessor_storage.set(this, 0);
         _Tooltip_open_accessor_storage.set(this, false);
         _Tooltip_withoutArrow_accessor_storage.set(this, false);
         _Tooltip_trigger_accessor_storage.set(this, 'hover focus');
@@ -78,20 +80,40 @@ export class Tooltip extends LuxenElement {
             for (const tooltip of tooltipInstances) {
                 tooltip._floating.cleanupSafePolygon();
             }
-            this.show();
+            // The pointer is back on the trigger: cancel a pending hide (exit-and-return).
+            clearTimeout(this._hideTimer);
+            this._hideTimer = undefined;
+            if (this.showDelay > 0 && !this.open) {
+                clearTimeout(this._showTimer);
+                this._showTimer = setTimeout(() => this.show(), this.showDelay);
+            }
+            else {
+                this.show();
+            }
         };
         this._onPointerLeave = (e) => {
+            // Cancel a still-pending show — the pointer left before the dwell elapsed.
+            clearTimeout(this._showTimer);
+            this._showTimer = undefined;
             if (!this._hasTrigger('hover') || !this.open)
                 return;
-            this._floating.handlePointerLeave(e, () => this.hide());
+            this._floating.handlePointerLeave(e, () => this._scheduleHide());
         };
         this._onFocusIn = () => {
-            if (this._hasTrigger('focus'))
+            // Focus is a discrete affordance — show immediately, ignoring the dwell delay.
+            if (this._hasTrigger('focus')) {
+                clearTimeout(this._hideTimer);
+                this._hideTimer = undefined;
                 this.show();
+            }
         };
         this._onFocusOut = () => {
-            if (this._hasTrigger('focus'))
+            if (this._hasTrigger('focus')) {
+                // A hover may have queued a show; blur must not resurrect it.
+                clearTimeout(this._showTimer);
+                this._showTimer = undefined;
                 this.hide();
+            }
         };
         this._onClick = () => {
             if (this._hasTrigger('click'))
@@ -113,6 +135,19 @@ export class Tooltip extends LuxenElement {
     /** The distance in pixels from the target element. */
     get distance() { return __classPrivateFieldGet(this, _Tooltip_distance_accessor_storage, "f"); }
     set distance(value) { __classPrivateFieldSet(this, _Tooltip_distance_accessor_storage, value, "f"); }
+    /**
+     * Milliseconds the pointer must dwell on the trigger before the tooltip
+     * shows. Applies to `hover` only — focus shows immediately.
+     */
+    get showDelay() { return __classPrivateFieldGet(this, _Tooltip_showDelay_accessor_storage, "f"); }
+    set showDelay(value) { __classPrivateFieldSet(this, _Tooltip_showDelay_accessor_storage, value, "f"); }
+    /**
+     * Milliseconds to wait after the pointer leaves the trigger (and its safe
+     * polygon) before hiding. Bridges a brief exit-and-return without flicker.
+     * Applies to `hover` only.
+     */
+    get hideDelay() { return __classPrivateFieldGet(this, _Tooltip_hideDelay_accessor_storage, "f"); }
+    set hideDelay(value) { __classPrivateFieldSet(this, _Tooltip_hideDelay_accessor_storage, value, "f"); }
     /** Whether or not the tooltip is visible. */
     get open() { return __classPrivateFieldGet(this, _Tooltip_open_accessor_storage, "f"); }
     set open(value) { __classPrivateFieldSet(this, _Tooltip_open_accessor_storage, value, "f"); }
@@ -155,6 +190,7 @@ export class Tooltip extends LuxenElement {
         tooltipInstances.delete(this);
         if (activeTooltip === this)
             activeTooltip = null;
+        this._clearTimers();
         this._removeTriggerListeners();
     }
     updated(changed) {
@@ -162,10 +198,19 @@ export class Tooltip extends LuxenElement {
             void this._handleOpenChange();
         }
         if (changed.has('for')) {
+            // A queued show/hide targets the old trigger — drop it before rewiring.
+            this._clearTimers();
             this._removeTriggerListeners(changed.get('for'));
             this._addTriggerListeners();
         }
     }
+    /** Cancel any pending delayed show/hide (trigger gone, `for` changed, disconnect). */
+    _clearTimers() {
+        clearTimeout(this._showTimer);
+        clearTimeout(this._hideTimer);
+        this._showTimer = undefined;
+        this._hideTimer = undefined;
+    }
     show() {
         if (!this.open)
             this.open = true;
@@ -210,6 +255,16 @@ export class Tooltip extends LuxenElement {
                 popover.hidePopover();
         }
     }
+    /** Hide now, or after `hide-delay` if set (cancellable by a pointer return). */
+    _scheduleHide() {
+        if (this.hideDelay > 0) {
+            clearTimeout(this._hideTimer);
+            this._hideTimer = setTimeout(() => this.hide(), this.hideDelay);
+        }
+        else {
+            this.hide();
+        }
+    }
     _addTriggerListeners() {
         this._floating.addTriggerListeners({
             onPointerEnter: this._onPointerEnter,
@@ -247,7 +302,7 @@ export class Tooltip extends LuxenElement {
     `;
     }
 }
-_Tooltip_for_accessor_storage = new WeakMap(), _Tooltip_placement_accessor_storage = new WeakMap(), _Tooltip_distance_accessor_storage = new WeakMap(), _Tooltip_open_accessor_storage = new WeakMap(), _Tooltip_withoutArrow_accessor_storage = new WeakMap(), _Tooltip_trigger_accessor_storage = new WeakMap();
+_Tooltip_for_accessor_storage = new WeakMap(), _Tooltip_placement_accessor_storage = new WeakMap(), _Tooltip_distance_accessor_storage = new WeakMap(), _Tooltip_showDelay_accessor_storage = new WeakMap(), _Tooltip_hideDelay_accessor_storage = new WeakMap(), _Tooltip_open_accessor_storage = new WeakMap(), _Tooltip_withoutArrow_accessor_storage = new WeakMap(), _Tooltip_trigger_accessor_storage = new WeakMap();
 Tooltip.styles = [hostStyles, styles];
 __decorate([
     property({ reflect: true })
@@ -258,6 +313,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Tooltip.prototype, "distance", null);
+__decorate([
+    property({ type: Number, attribute: 'show-delay' })
+], Tooltip.prototype, "showDelay", null);
+__decorate([
+    property({ type: Number, attribute: 'hide-delay' })
+], Tooltip.prototype, "hideDelay", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "open", null);

package/dist/metadata/disclosure.json

@@ -37,6 +37,15 @@
       ],
       "description": "Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross."
     },
+    {
+      "name": "data-marker-placement",
+      "data": true,
+      "values": [
+        "start",
+        "end"
+      ],
+      "description": "Marker side. Defaults to `end`."
+    },
     {
       "name": "data-variant",
       "data": true,

package/dist/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.0",
+  "version": "0.16.0",
   "elements": [
     {
       "name": "alert",
@@ -1762,6 +1762,15 @@
           ],
           "description": "Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross."
         },
+        {
+          "name": "data-marker-placement",
+          "data": true,
+          "values": [
+            "start",
+            "end"
+          ],
+          "description": "Marker side. Defaults to `end`."
+        },
         {
           "name": "data-variant",
           "data": true,
@@ -5621,6 +5630,22 @@
           "reflects": false,
           "description": "The distance in pixels from the target element."
         },
+        {
+          "name": "showDelay",
+          "attribute": "show-delay",
+          "type": "number",
+          "default": "0",
+          "reflects": false,
+          "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately."
+        },
+        {
+          "name": "hideDelay",
+          "attribute": "hide-delay",
+          "type": "number",
+          "default": "0",
+          "reflects": false,
+          "description": "Milliseconds to wait after the pointer leaves the trigger (and its safe\npolygon) before hiding. Bridges a brief exit-and-return without flicker.\nApplies to `hover` only."
+        },
         {
           "name": "open",
           "attribute": "open",

package/dist/metadata/tooltip.json

@@ -39,6 +39,22 @@
       "reflects": false,
       "description": "The distance in pixels from the target element."
     },
+    {
+      "name": "showDelay",
+      "attribute": "show-delay",
+      "type": "number",
+      "default": "0",
+      "reflects": false,
+      "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately."
+    },
+    {
+      "name": "hideDelay",
+      "attribute": "hide-delay",
+      "type": "number",
+      "default": "0",
+      "reflects": false,
+      "description": "Milliseconds to wait after the pointer leaves the trigger (and its safe\npolygon) before hiding. Bridges a brief exit-and-return without flicker.\nApplies to `hover` only."
+    },
     {
       "name": "open",
       "attribute": "open",

package/dist/templates/elements/disclosure.md

@@ -66,6 +66,33 @@ Add `data-marker="arrow"` or `data-marker="plus"` for an animated icon indicator
 </div>
 ```
 
+### Marker placement
+
+Add `data-marker-placement="start"` to move the marker before the label (defaults to `end`).
+
+```html
+<div class="flex flex-col gap-3">
+  <details
+    class="l-disclosure"
+    data-variant="bordered"
+    data-marker="arrow"
+    data-marker-placement="start"
+  >
+    <summary>Arrow at the start</summary>
+    <div>The marker sits before the label instead of after it.</div>
+  </details>
+  <details
+    class="l-disclosure"
+    data-variant="bordered"
+    data-marker="plus"
+    data-marker-placement="start"
+  >
+    <summary>Plus at the start</summary>
+    <div>Works with any marker icon.</div>
+  </details>
+</div>
+```
+
 ## Examples
 
 ### FAQ
@@ -154,6 +181,7 @@ Use the native `name` attribute to create an exclusive accordion — only one it
 - **open** — Native attribute — starts the disclosure expanded.
 - **name** — Native attribute — groups disclosures into an exclusive accordion.
 - **data-marker**: `arrow | plus` — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
+- **data-marker-placement**: `start | end` — Marker side. Defaults to `end`.
 - **data-variant** — bordered — Adds border, background, and border-radius.
 - **disabled** — Disables interaction (set on `<details>` or `<summary>`).
 

package/dist/templates/elements/tooltip.md

@@ -100,6 +100,35 @@ At most one `hover`/`focus`/`click` tooltip is visible at a time — opening one
 >
 ```
 
+### Delay
+
+Set `show-delay` to require the pointer to dwell before the tooltip shows — filtering out tooltips for controls the pointer merely passes over (toolbars, table action columns, dense grids). Set `hide-delay` to bridge a brief exit-and-return without flicker. Both are in milliseconds and apply to `hover` only; focus always shows immediately.
+
+```html
+<div class="flex gap-3">
+  <button
+    id="tooltip-delay-a"
+    class="l-button"
+  >
+    Immediate
+  </button>
+  <l-tooltip for="tooltip-delay-a">Shows right away</l-tooltip>
+
+  <button
+    id="tooltip-delay-b"
+    class="l-button"
+  >
+    Dwell 400ms
+  </button>
+  <l-tooltip
+    for="tooltip-delay-b"
+    show-delay="400"
+    hide-delay="150"
+    >Only after the pointer rests</l-tooltip
+  >
+</div>
+```
+
 ### Without arrow
 
 Add `without-arrow` to hide the directional arrow.
@@ -378,6 +407,11 @@ import 'luxen-ui/tooltip';
 - **for**: `string` — The HTML id of the element triggering the tooltip.
 - **placement**: `Placement` (default: `'top'`) — The preferred placement of the tooltip.
 - **distance**: `number` (default: `8`) — The distance in pixels from the target element.
+- **show-delay**: `number` (default: `0`) — Milliseconds the pointer must dwell on the trigger before the tooltip
+shows. Applies to `hover` only — focus shows immediately.
+- **hide-delay**: `number` (default: `0`) — Milliseconds to wait after the pointer leaves the trigger (and its safe
+polygon) before hiding. Bridges a brief exit-and-return without flicker.
+Applies to `hover` only.
 - **open**: `boolean` (default: `false`) — Whether or not the tooltip is visible.
 - **without-arrow**: `boolean` (default: `false`) — Hide the directional arrow.
 - **trigger**: `string` (default: `'hover focus'`) — Space-separated list of trigger modes: `hover`, `focus`, `click`, `manual`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",