luxen-ui 0.16.0 → 0.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/elements/tooltip/tooltip.d.ts.map +1 -1
- package/cdn/elements/tooltip/tooltip.js +1 -1
- package/cdn/elements/tooltip/tooltip.js.map +1 -1
- package/cdn/shared/controllers/popover.d.ts +1 -1
- package/cdn/shared/controllers/popover.d.ts.map +1 -1
- package/cdn/shared/controllers/popover.js +1 -1
- package/cdn/shared/controllers/popover.js.map +1 -1
- package/dist/elements/tooltip/tooltip.d.ts.map +1 -1
- package/dist/elements/tooltip/tooltip.js +20 -4
- package/dist/metadata/index.json +1 -1
- package/dist/shared/controllers/popover.d.ts +1 -1
- package/dist/shared/controllers/popover.d.ts.map +1 -1
- package/dist/shared/controllers/popover.js +44 -8
- package/dist/templates/elements/tooltip.md +58 -0
- package/package.json +1 -1
|
@@ -1 +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;;;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,
|
|
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;;;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,CAwBrB;IAEF,OAAO,CAAC,eAAe,CAarB;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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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,()
|
|
1
|
+
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`)){this._floating.cleanupSafePolygon();for(let e of u)e===this||e._hasTrigger(`manual`)||(e._floating.cleanupSafePolygon(),e.hide());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,e=>{e===`settled`?this.hide():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`
|
|
2
2
|
<div
|
|
3
3
|
id=${this._tooltipId}
|
|
4
4
|
popover="manual"
|
|
@@ -1 +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 /**\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":"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"}
|
|
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 /**\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. Drop\n // our own stale polygon, and close every peer now: invalidating a peer's\n // polygon without hiding it leaves the peer stuck open, because its only\n // remaining close path was eviction when *this* tooltip opens — and with\n // `show-delay` that can be much later, or never if the pointer moves on\n // before the dwell elapses (a fast sweep across a button group).\n this._floating.cleanupSafePolygon();\n for (const tooltip of tooltipInstances) {\n if (tooltip === this || tooltip._hasTrigger('manual')) continue;\n tooltip._floating.cleanupSafePolygon();\n tooltip.hide();\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 // `exit` — the pointer actively moved off the trigger/bubble: honour\n // `hide-delay` so a brief exit-and-return doesn't flicker. `settled` — the\n // pointer left and sat motionless in the corridor: there is no in-flight\n // gesture to bridge, so hide at once (never stack the delay on top).\n this._floating.handlePointerLeave(e, (reason) => {\n if (reason === 'settled') this.hide();\n else this._scheduleHide();\n });\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":"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"}
|
|
@@ -38,7 +38,7 @@ export declare class PopoverController implements ReactiveController {
|
|
|
38
38
|
updatePosition(options: PositionOptions): Promise<void>;
|
|
39
39
|
startPositioning(options: PositionOptions): void;
|
|
40
40
|
stopPositioning(): void;
|
|
41
|
-
handlePointerLeave(e: PointerEvent, onHide: () => void): void;
|
|
41
|
+
handlePointerLeave(e: PointerEvent, onHide: (reason: 'exit' | 'settled') => void): void;
|
|
42
42
|
cleanupSafePolygon(): void;
|
|
43
43
|
addTriggerListeners(handlers: TriggerHandlers): void;
|
|
44
44
|
removeTriggerListeners(triggerOverride?: HTMLElement | null): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AA+N1B,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,sGAAsG;IACtG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,qBAAa,iBAAkB,YAAW,kBAAkB;IAC1D,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,iBAAiB,CAAM;gBAEnB,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,MAAM,EAAE,uBAAuB;IAMvF,aAAa;IAEb,gBAAgB;IAMhB,IAAI,gBAAgB,WAEnB;IAIK,cAAc,CAAC,OAAO,EAAE,eAAe;IAuD7C,gBAAgB,CAAC,OAAO,EAAE,eAAe;IASzC,eAAe;IAOf,kBAAkB,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI;IAkFhF,kBAAkB;IAOlB,mBAAmB,CAAC,QAAQ,EAAE,eAAe;IAoB7C,sBAAsB,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI;IAyBrD,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;IAYrE,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;CAW5E"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e,i as t,n,o as r,r as i,s as a,t as o}from"../../chunks/floating-ui.dom.js";function
|
|
1
|
+
import{a as e,i as t,n,o as r,r as i,s as a,t as o}from"../../chunks/floating-ui.dom.js";var s=200;function c([e,t],n){let r=!1;for(let i=0,a=n.length-1;i<n.length;a=i++){let[o,s]=n[i],[c,l]=n[a];s>=t!=l>=t&&e<=(c-o)*(t-s)/(l-s)+o&&(r=!r)}return r}function l([e,t],n){return e>=n.left&&e<=n.right&&t>=n.top&&t<=n.bottom}function u(e,t,n,r,i){let a=i.split(`-`)[0],o=n.width>r.width,s=n.height>r.height,c=e>n.right-n.width/2,l=t>n.bottom-n.height/2;switch(a){case`top`:return[[o?e+2/2:c?e+8:e-8,t+2+1],[o?e-2/2:c?e+8:e-8,t+2+1],[n.left,c||o?n.bottom-2:n.top],[n.right,c?o?n.bottom-2:n.top:n.bottom-2]];case`bottom`:return[[o?e+2/2:c?e+8:e-8,t-2],[o?e-2/2:c?e+8:e-8,t-2],[n.left,c||o?n.top+2:n.bottom],[n.right,c?o?n.top+2:n.bottom:n.top+2]];case`left`:{let r=[e+2+1,s?t+2/2:l?t+8:t-8],i=[e+2+1,s?t-2/2:l?t+8:t-8];return[[l||s?n.right-2:n.left,n.top],[l?s?n.right-2:n.left:n.right-2,n.bottom],r,i]}case`right`:{let r=[e-2,s?t+2/2:l?t+8:t-8],i=[e-2,s?t-2/2:l?t+8:t-8];return[[l||s?n.left+2:n.right,n.top],[l?s?n.left+2:n.right:n.left+2,n.bottom],r,i]}default:return[]}}var d={top:`bottom`,right:`left`,bottom:`top`,left:`right`},f=typeof window<`u`?window.matchMedia(`(prefers-reduced-motion: reduce)`):void 0,p=class{constructor(e,t){this._currentPlacement=``,this._host=e,this._config=t,e.addController(this)}hostConnected(){}hostDisconnected(){this.stopPositioning(),this.cleanupSafePolygon(),this.removeTriggerListeners()}get currentPlacement(){return this._currentPlacement}async updatePosition(n){let s=this._config.getTriggerElement(),c=this._config.getFloatingElement(),l=this._config.getArrowElement();if(!s||!c)return;let u=[e({mainAxis:n.distance,crossAxis:n.skidding??0}),...n.minWidth===`trigger`?[a({apply({rects:e,elements:t}){t.floating.style.minWidth=`${e.reference.width}px`}})]:[],t(),r(),...l?[o({element:l,padding:8})]:[]],{x:f,y:p,placement:m,middlewareData:h}=await i(s,c,{placement:n.placement,strategy:`fixed`,middleware:u});if(Object.assign(c.style,{position:`fixed`,left:n.fullWidth?`0px`:`${f}px`,top:`${p}px`,width:n.fullWidth?`100vw`:``}),n.minWidth!==`trigger`&&(c.style.minWidth=``),m!==this._currentPlacement&&(this._currentPlacement=m,this._config.onPlacementChange?.(m)),h.arrow&&l){let{x:e,y:t}=h.arrow,n=d[m.split(`-`)[0]];Object.assign(l.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`,[n]:`${-l.offsetWidth/2}px`})}}startPositioning(e){let t=this._config.getTriggerElement(),r=this._config.getFloatingElement();!t||!r||(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=n(t,r,()=>this.updatePosition(e)))}stopPositioning(){this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0}handlePointerLeave(e,t){let n=this._config.getFloatingElement(),r=this._config.getTriggerElement();if(!n||!r){t(`exit`);return}let i=e.clientX,a=e.clientY,o,d=e=>{h(),t(e)},f=()=>clearTimeout(o),p=()=>{clearTimeout(o),o=setTimeout(()=>d(`settled`),s)},m=e=>{let{clientX:t,clientY:o}=e,s=[t,o],m=n.getBoundingClientRect(),h=r.getBoundingClientRect(),g=this._currentPlacement.split(`-`)[0];if(l(s,m)){f();return}if(l(s,h)){f();return}if(g===`top`&&a>=h.bottom-1||g===`bottom`&&a<=h.top+1||g===`left`&&i>=h.right-1||g===`right`&&i<=h.left+1){d(`exit`);return}if(c(s,u(i,a,m,h,this._currentPlacement))){p();return}d(`exit`)},h=()=>{clearTimeout(o),document.removeEventListener(`pointermove`,m)};document.addEventListener(`pointermove`,m),p(),this._cleanupSafePolygon?.(),this._cleanupSafePolygon=h}cleanupSafePolygon(){this._cleanupSafePolygon?.(),this._cleanupSafePolygon=void 0}addTriggerListeners(e){let t=this._config.getTriggerElement();t&&(this._handlers=e,this._triggerElement=t,e.onPointerEnter&&t.addEventListener(`pointerenter`,e.onPointerEnter),e.onPointerLeave&&t.addEventListener(`pointerleave`,e.onPointerLeave),e.onFocusIn&&t.addEventListener(`focusin`,e.onFocusIn),e.onFocusOut&&t.addEventListener(`focusout`,e.onFocusOut),e.onClick&&t.addEventListener(`click`,e.onClick),e.onKeyDown&&t.addEventListener(`keydown`,e.onKeyDown))}removeTriggerListeners(e){let t=e??this._triggerElement,n=this._handlers;!t||!n||(n.onPointerEnter&&t.removeEventListener(`pointerenter`,n.onPointerEnter),n.onPointerLeave&&t.removeEventListener(`pointerleave`,n.onPointerLeave),n.onFocusIn&&t.removeEventListener(`focusin`,n.onFocusIn),n.onFocusOut&&t.removeEventListener(`focusout`,n.onFocusOut),n.onClick&&t.removeEventListener(`click`,n.onClick),n.onKeyDown&&t.removeEventListener(`keydown`,n.onKeyDown),e||(this._handlers=void 0,this._triggerElement=void 0))}async animateShow(e,t,n){let r=f?.matches?0:t;e.getAnimations().forEach(e=>e.cancel()),e.animate(n??[{opacity:0,scale:.96},{opacity:1,scale:1}],{duration:r,fill:`forwards`})}async animateHide(e,t,n){let r=f?.matches?0:t;await e.animate(n??[{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:r,fill:`forwards`}).finished}};export{p as PopoverController};
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/html/shared/controllers/popover.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport {\n computePosition,\n autoUpdate,\n offset,\n flip,\n shift,\n arrow,\n size,\n type Placement,\n} from '@floating-ui/dom';\n\n// --- Pure geometry helpers ---\n\ntype Point = [number, number];\n\n/** Check if a point is inside a polygon using ray-casting. */\nfunction isPointInPolygon([px, py]: Point, polygon: Point[]) {\n let inside = false;\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n const [xi, yi] = polygon[i];\n const [xj, yj] = polygon[j];\n if (yi >= py !== yj >= py && px <= ((xj - xi) * (py - yi)) / (yj - yi) + xi) {\n inside = !inside;\n }\n }\n return inside;\n}\n\n/** Check if a point is inside a rect. */\nfunction isPointInRect([px, py]: Point, rect: DOMRect) {\n return px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom;\n}\n\n/**\n * Build a safe polygon (triangle/quadrilateral) from cursor to floating element edges.\n * Adapted from floating-ui/safePolygon.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/safePolygon.ts\n */\nfunction getSafePolygon(\n cursorX: number,\n cursorY: number,\n rect: DOMRect,\n refRect: DOMRect,\n placement: string,\n): Point[] {\n const side = placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';\n const buffer = 2;\n\n const isFloatingWider = rect.width > refRect.width;\n const isFloatingTaller = rect.height > refRect.height;\n\n const cursorLeaveFromRight = cursorX > rect.right - rect.width / 2;\n const cursorLeaveFromBottom = cursorY > rect.bottom - rect.height / 2;\n\n switch (side) {\n case 'top': {\n const c1: Point = [\n isFloatingWider\n ? cursorX + buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY + buffer + 1,\n ];\n const c2: Point = [\n isFloatingWider\n ? cursorX - buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY + buffer + 1,\n ];\n return [\n c1,\n c2,\n [\n rect.left,\n cursorLeaveFromRight\n ? rect.bottom - buffer\n : isFloatingWider\n ? rect.bottom - buffer\n : rect.top,\n ],\n [\n rect.right,\n cursorLeaveFromRight\n ? isFloatingWider\n ? rect.bottom - buffer\n : rect.top\n : rect.bottom - buffer,\n ],\n ];\n }\n case 'bottom': {\n const c1: Point = [\n isFloatingWider\n ? cursorX + buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY - buffer,\n ];\n const c2: Point = [\n isFloatingWider\n ? cursorX - buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY - buffer,\n ];\n return [\n c1,\n c2,\n [\n rect.left,\n cursorLeaveFromRight\n ? rect.top + buffer\n : isFloatingWider\n ? rect.top + buffer\n : rect.bottom,\n ],\n [\n rect.right,\n cursorLeaveFromRight\n ? isFloatingWider\n ? rect.top + buffer\n : rect.bottom\n : rect.top + buffer,\n ],\n ];\n }\n case 'left': {\n const c1: Point = [\n cursorX + buffer + 1,\n isFloatingTaller\n ? cursorY + buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n const c2: Point = [\n cursorX + buffer + 1,\n isFloatingTaller\n ? cursorY - buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n return [\n [\n cursorLeaveFromBottom\n ? rect.right - buffer\n : isFloatingTaller\n ? rect.right - buffer\n : rect.left,\n rect.top,\n ],\n [\n cursorLeaveFromBottom\n ? isFloatingTaller\n ? rect.right - buffer\n : rect.left\n : rect.right - buffer,\n rect.bottom,\n ],\n c1,\n c2,\n ];\n }\n case 'right': {\n const c1: Point = [\n cursorX - buffer,\n isFloatingTaller\n ? cursorY + buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n const c2: Point = [\n cursorX - buffer,\n isFloatingTaller\n ? cursorY - buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n return [\n [\n cursorLeaveFromBottom\n ? rect.left + buffer\n : isFloatingTaller\n ? rect.left + buffer\n : rect.right,\n rect.top,\n ],\n [\n cursorLeaveFromBottom\n ? isFloatingTaller\n ? rect.left + buffer\n : rect.right\n : rect.left + buffer,\n rect.bottom,\n ],\n c1,\n c2,\n ];\n }\n default:\n return [];\n }\n}\n\n// --- Constants ---\n\nconst STATIC_SIDE = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as const;\n\nconst reducedMotion =\n typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined;\n\n// --- Controller ---\n\nexport interface PopoverControllerConfig {\n getTriggerElement: () => HTMLElement | null;\n getFloatingElement: () => HTMLElement | null;\n getArrowElement: () => HTMLElement | null;\n onPlacementChange?: (placement: string) => void;\n}\n\nexport interface PositionOptions {\n placement: Placement;\n distance: number;\n /** Offset along the cross axis, in pixels (e.g. to align a submenu's first item with its trigger). */\n skidding?: number;\n fullWidth?: boolean;\n /** Floor the floating element's width at the trigger's width (`'trigger'`). */\n minWidth?: 'trigger';\n}\n\ntype TriggerHandlers = {\n onPointerEnter?: (e: PointerEvent) => void;\n onPointerLeave?: (e: PointerEvent) => void;\n onFocusIn?: (e: FocusEvent) => void;\n onFocusOut?: (e: FocusEvent) => void;\n onClick?: (e: MouseEvent) => void;\n onKeyDown?: (e: KeyboardEvent) => void;\n};\n\nexport class PopoverController implements ReactiveController {\n private _host: ReactiveControllerHost & HTMLElement;\n private _config: PopoverControllerConfig;\n private _cleanupAutoUpdate?: () => void;\n private _cleanupSafePolygon?: () => void;\n private _handlers?: TriggerHandlers;\n private _triggerElement?: HTMLElement | null;\n private _currentPlacement = '';\n\n constructor(host: ReactiveControllerHost & HTMLElement, config: PopoverControllerConfig) {\n this._host = host;\n this._config = config;\n host.addController(this);\n }\n\n hostConnected() {}\n\n hostDisconnected() {\n this.stopPositioning();\n this.cleanupSafePolygon();\n this.removeTriggerListeners();\n }\n\n get currentPlacement() {\n return this._currentPlacement;\n }\n\n // --- Positioning ---\n\n async updatePosition(options: PositionOptions) {\n const trigger = this._config.getTriggerElement();\n const floating = this._config.getFloatingElement();\n const arrowEl = this._config.getArrowElement();\n if (!trigger || !floating) return;\n\n const middleware = [\n offset({ mainAxis: options.distance, crossAxis: options.skidding ?? 0 }),\n // Size before flip/shift so the adopted floor feeds collision detection.\n ...(options.minWidth === 'trigger'\n ? [\n size({\n apply({ rects, elements }) {\n elements.floating.style.minWidth = `${rects.reference.width}px`;\n },\n }),\n ]\n : []),\n flip(),\n shift(),\n ...(arrowEl ? [arrow({ element: arrowEl, padding: 8 })] : []),\n ];\n\n const { x, y, placement, middlewareData } = await computePosition(trigger, floating, {\n placement: options.placement,\n strategy: 'fixed',\n middleware,\n });\n\n Object.assign(floating.style, {\n position: 'fixed',\n left: options.fullWidth ? '0px' : `${x}px`,\n top: `${y}px`,\n width: options.fullWidth ? '100vw' : '',\n });\n\n // The `size` middleware (above) sets minWidth when syncing; clear it otherwise.\n if (options.minWidth !== 'trigger') floating.style.minWidth = '';\n\n if (placement !== this._currentPlacement) {\n this._currentPlacement = placement;\n this._config.onPlacementChange?.(placement);\n }\n\n if (middlewareData.arrow && arrowEl) {\n const { x: ax, y: ay } = middlewareData.arrow;\n const side = STATIC_SIDE[placement.split('-')[0] as keyof typeof STATIC_SIDE];\n Object.assign(arrowEl.style, {\n left: ax != null ? `${ax}px` : '',\n top: ay != null ? `${ay}px` : '',\n [side]: `${-arrowEl.offsetWidth / 2}px`,\n });\n }\n }\n\n startPositioning(options: PositionOptions) {\n const trigger = this._config.getTriggerElement();\n const floating = this._config.getFloatingElement();\n if (!trigger || !floating) return;\n\n this._cleanupAutoUpdate?.();\n this._cleanupAutoUpdate = autoUpdate(trigger, floating, () => this.updatePosition(options));\n }\n\n stopPositioning() {\n this._cleanupAutoUpdate?.();\n this._cleanupAutoUpdate = undefined;\n }\n\n // --- Safe polygon ---\n\n handlePointerLeave(e: PointerEvent, onHide: () => void) {\n const floating = this._config.getFloatingElement();\n const trigger = this._config.getTriggerElement();\n if (!floating || !trigger) {\n onHide();\n return;\n }\n\n const cursorX = e.clientX;\n const cursorY = e.clientY;\n\n const onMove = (moveEvent: PointerEvent) => {\n const { clientX: mx, clientY: my } = moveEvent;\n const cursor: Point = [mx, my];\n const rect = floating.getBoundingClientRect();\n const refRect = trigger.getBoundingClientRect();\n const side = this._currentPlacement.split('-')[0];\n\n if (isPointInRect(cursor, rect)) return;\n if (isPointInRect(cursor, refRect)) return;\n\n if (\n (side === 'top' && cursorY >= refRect.bottom - 1) ||\n (side === 'bottom' && cursorY <= refRect.top + 1) ||\n (side === 'left' && cursorX >= refRect.right - 1) ||\n (side === 'right' && cursorX <= refRect.left + 1)\n ) {\n cleanup();\n onHide();\n return;\n }\n\n const polygon = getSafePolygon(cursorX, cursorY, rect, refRect, this._currentPlacement);\n if (isPointInPolygon(cursor, polygon)) return;\n\n cleanup();\n onHide();\n };\n\n const cleanup = () => {\n document.removeEventListener('pointermove', onMove);\n };\n\n document.addEventListener('pointermove', onMove);\n\n this._cleanupSafePolygon?.();\n this._cleanupSafePolygon = cleanup;\n }\n\n cleanupSafePolygon() {\n this._cleanupSafePolygon?.();\n this._cleanupSafePolygon = undefined;\n }\n\n // --- Trigger listener management ---\n\n addTriggerListeners(handlers: TriggerHandlers) {\n const trigger = this._config.getTriggerElement();\n if (!trigger) return;\n\n this._handlers = handlers;\n this._triggerElement = trigger;\n\n if (handlers.onPointerEnter)\n trigger.addEventListener('pointerenter', handlers.onPointerEnter as EventListener);\n if (handlers.onPointerLeave)\n trigger.addEventListener('pointerleave', handlers.onPointerLeave as EventListener);\n if (handlers.onFocusIn)\n trigger.addEventListener('focusin', handlers.onFocusIn as EventListener);\n if (handlers.onFocusOut)\n trigger.addEventListener('focusout', handlers.onFocusOut as EventListener);\n if (handlers.onClick) trigger.addEventListener('click', handlers.onClick as EventListener);\n if (handlers.onKeyDown)\n trigger.addEventListener('keydown', handlers.onKeyDown as EventListener);\n }\n\n removeTriggerListeners(triggerOverride?: HTMLElement | null) {\n const trigger = triggerOverride ?? this._triggerElement;\n const handlers = this._handlers;\n if (!trigger || !handlers) return;\n\n if (handlers.onPointerEnter)\n trigger.removeEventListener('pointerenter', handlers.onPointerEnter as EventListener);\n if (handlers.onPointerLeave)\n trigger.removeEventListener('pointerleave', handlers.onPointerLeave as EventListener);\n if (handlers.onFocusIn)\n trigger.removeEventListener('focusin', handlers.onFocusIn as EventListener);\n if (handlers.onFocusOut)\n trigger.removeEventListener('focusout', handlers.onFocusOut as EventListener);\n if (handlers.onClick) trigger.removeEventListener('click', handlers.onClick as EventListener);\n if (handlers.onKeyDown)\n trigger.removeEventListener('keydown', handlers.onKeyDown as EventListener);\n\n if (!triggerOverride) {\n this._handlers = undefined;\n this._triggerElement = undefined;\n }\n }\n\n // --- Animation ---\n\n async animateShow(el: HTMLElement, duration: number, keyframes?: Keyframe[]) {\n const d = reducedMotion?.matches ? 0 : duration;\n el.getAnimations().forEach((a) => a.cancel());\n el.animate(\n keyframes ?? [\n { opacity: 0, scale: 0.96 },\n { opacity: 1, scale: 1 },\n ],\n { duration: d, fill: 'forwards' },\n );\n }\n\n async animateHide(el: HTMLElement, duration: number, keyframes?: Keyframe[]) {\n const d = reducedMotion?.matches ? 0 : duration;\n const anim = el.animate(\n keyframes ?? [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.96 },\n ],\n { duration: d, fill: 'forwards' },\n );\n await anim.finished;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/html/shared/controllers/popover.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport {\n computePosition,\n autoUpdate,\n offset,\n flip,\n shift,\n arrow,\n size,\n type Placement,\n} from '@floating-ui/dom';\n\n// --- Pure geometry helpers ---\n\ntype Point = [number, number];\n\n/**\n * How long the pointer may rest, in the corridor between the trigger and the\n * bubble, before the safe polygon gives up and hides. The polygon is only\n * re-evaluated on `pointermove`, so a pointer that leaves and immediately stops\n * emits no further event to close on — this fallback guarantees the tooltip\n * still hides. Kept short so a genuine pause while travelling toward the bubble\n * re-arms it without a visible flicker. It is *not* armed while the pointer sits\n * on the bubble or the trigger themselves — those are stable \"stay open\" states.\n */\nconst SAFE_POLYGON_REST_HIDE_MS = 200;\n\n/** Check if a point is inside a polygon using ray-casting. */\nfunction isPointInPolygon([px, py]: Point, polygon: Point[]) {\n let inside = false;\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n const [xi, yi] = polygon[i];\n const [xj, yj] = polygon[j];\n if (yi >= py !== yj >= py && px <= ((xj - xi) * (py - yi)) / (yj - yi) + xi) {\n inside = !inside;\n }\n }\n return inside;\n}\n\n/** Check if a point is inside a rect. */\nfunction isPointInRect([px, py]: Point, rect: DOMRect) {\n return px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom;\n}\n\n/**\n * Build a safe polygon (triangle/quadrilateral) from cursor to floating element edges.\n * Adapted from floating-ui/safePolygon.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/safePolygon.ts\n */\nfunction getSafePolygon(\n cursorX: number,\n cursorY: number,\n rect: DOMRect,\n refRect: DOMRect,\n placement: string,\n): Point[] {\n const side = placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';\n const buffer = 2;\n\n const isFloatingWider = rect.width > refRect.width;\n const isFloatingTaller = rect.height > refRect.height;\n\n const cursorLeaveFromRight = cursorX > rect.right - rect.width / 2;\n const cursorLeaveFromBottom = cursorY > rect.bottom - rect.height / 2;\n\n switch (side) {\n case 'top': {\n const c1: Point = [\n isFloatingWider\n ? cursorX + buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY + buffer + 1,\n ];\n const c2: Point = [\n isFloatingWider\n ? cursorX - buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY + buffer + 1,\n ];\n return [\n c1,\n c2,\n [\n rect.left,\n cursorLeaveFromRight\n ? rect.bottom - buffer\n : isFloatingWider\n ? rect.bottom - buffer\n : rect.top,\n ],\n [\n rect.right,\n cursorLeaveFromRight\n ? isFloatingWider\n ? rect.bottom - buffer\n : rect.top\n : rect.bottom - buffer,\n ],\n ];\n }\n case 'bottom': {\n const c1: Point = [\n isFloatingWider\n ? cursorX + buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY - buffer,\n ];\n const c2: Point = [\n isFloatingWider\n ? cursorX - buffer / 2\n : cursorLeaveFromRight\n ? cursorX + buffer * 4\n : cursorX - buffer * 4,\n cursorY - buffer,\n ];\n return [\n c1,\n c2,\n [\n rect.left,\n cursorLeaveFromRight\n ? rect.top + buffer\n : isFloatingWider\n ? rect.top + buffer\n : rect.bottom,\n ],\n [\n rect.right,\n cursorLeaveFromRight\n ? isFloatingWider\n ? rect.top + buffer\n : rect.bottom\n : rect.top + buffer,\n ],\n ];\n }\n case 'left': {\n const c1: Point = [\n cursorX + buffer + 1,\n isFloatingTaller\n ? cursorY + buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n const c2: Point = [\n cursorX + buffer + 1,\n isFloatingTaller\n ? cursorY - buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n return [\n [\n cursorLeaveFromBottom\n ? rect.right - buffer\n : isFloatingTaller\n ? rect.right - buffer\n : rect.left,\n rect.top,\n ],\n [\n cursorLeaveFromBottom\n ? isFloatingTaller\n ? rect.right - buffer\n : rect.left\n : rect.right - buffer,\n rect.bottom,\n ],\n c1,\n c2,\n ];\n }\n case 'right': {\n const c1: Point = [\n cursorX - buffer,\n isFloatingTaller\n ? cursorY + buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n const c2: Point = [\n cursorX - buffer,\n isFloatingTaller\n ? cursorY - buffer / 2\n : cursorLeaveFromBottom\n ? cursorY + buffer * 4\n : cursorY - buffer * 4,\n ];\n return [\n [\n cursorLeaveFromBottom\n ? rect.left + buffer\n : isFloatingTaller\n ? rect.left + buffer\n : rect.right,\n rect.top,\n ],\n [\n cursorLeaveFromBottom\n ? isFloatingTaller\n ? rect.left + buffer\n : rect.right\n : rect.left + buffer,\n rect.bottom,\n ],\n c1,\n c2,\n ];\n }\n default:\n return [];\n }\n}\n\n// --- Constants ---\n\nconst STATIC_SIDE = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as const;\n\nconst reducedMotion =\n typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined;\n\n// --- Controller ---\n\nexport interface PopoverControllerConfig {\n getTriggerElement: () => HTMLElement | null;\n getFloatingElement: () => HTMLElement | null;\n getArrowElement: () => HTMLElement | null;\n onPlacementChange?: (placement: string) => void;\n}\n\nexport interface PositionOptions {\n placement: Placement;\n distance: number;\n /** Offset along the cross axis, in pixels (e.g. to align a submenu's first item with its trigger). */\n skidding?: number;\n fullWidth?: boolean;\n /** Floor the floating element's width at the trigger's width (`'trigger'`). */\n minWidth?: 'trigger';\n}\n\ntype TriggerHandlers = {\n onPointerEnter?: (e: PointerEvent) => void;\n onPointerLeave?: (e: PointerEvent) => void;\n onFocusIn?: (e: FocusEvent) => void;\n onFocusOut?: (e: FocusEvent) => void;\n onClick?: (e: MouseEvent) => void;\n onKeyDown?: (e: KeyboardEvent) => void;\n};\n\nexport class PopoverController implements ReactiveController {\n private _host: ReactiveControllerHost & HTMLElement;\n private _config: PopoverControllerConfig;\n private _cleanupAutoUpdate?: () => void;\n private _cleanupSafePolygon?: () => void;\n private _handlers?: TriggerHandlers;\n private _triggerElement?: HTMLElement | null;\n private _currentPlacement = '';\n\n constructor(host: ReactiveControllerHost & HTMLElement, config: PopoverControllerConfig) {\n this._host = host;\n this._config = config;\n host.addController(this);\n }\n\n hostConnected() {}\n\n hostDisconnected() {\n this.stopPositioning();\n this.cleanupSafePolygon();\n this.removeTriggerListeners();\n }\n\n get currentPlacement() {\n return this._currentPlacement;\n }\n\n // --- Positioning ---\n\n async updatePosition(options: PositionOptions) {\n const trigger = this._config.getTriggerElement();\n const floating = this._config.getFloatingElement();\n const arrowEl = this._config.getArrowElement();\n if (!trigger || !floating) return;\n\n const middleware = [\n offset({ mainAxis: options.distance, crossAxis: options.skidding ?? 0 }),\n // Size before flip/shift so the adopted floor feeds collision detection.\n ...(options.minWidth === 'trigger'\n ? [\n size({\n apply({ rects, elements }) {\n elements.floating.style.minWidth = `${rects.reference.width}px`;\n },\n }),\n ]\n : []),\n flip(),\n shift(),\n ...(arrowEl ? [arrow({ element: arrowEl, padding: 8 })] : []),\n ];\n\n const { x, y, placement, middlewareData } = await computePosition(trigger, floating, {\n placement: options.placement,\n strategy: 'fixed',\n middleware,\n });\n\n Object.assign(floating.style, {\n position: 'fixed',\n left: options.fullWidth ? '0px' : `${x}px`,\n top: `${y}px`,\n width: options.fullWidth ? '100vw' : '',\n });\n\n // The `size` middleware (above) sets minWidth when syncing; clear it otherwise.\n if (options.minWidth !== 'trigger') floating.style.minWidth = '';\n\n if (placement !== this._currentPlacement) {\n this._currentPlacement = placement;\n this._config.onPlacementChange?.(placement);\n }\n\n if (middlewareData.arrow && arrowEl) {\n const { x: ax, y: ay } = middlewareData.arrow;\n const side = STATIC_SIDE[placement.split('-')[0] as keyof typeof STATIC_SIDE];\n Object.assign(arrowEl.style, {\n left: ax != null ? `${ax}px` : '',\n top: ay != null ? `${ay}px` : '',\n [side]: `${-arrowEl.offsetWidth / 2}px`,\n });\n }\n }\n\n startPositioning(options: PositionOptions) {\n const trigger = this._config.getTriggerElement();\n const floating = this._config.getFloatingElement();\n if (!trigger || !floating) return;\n\n this._cleanupAutoUpdate?.();\n this._cleanupAutoUpdate = autoUpdate(trigger, floating, () => this.updatePosition(options));\n }\n\n stopPositioning() {\n this._cleanupAutoUpdate?.();\n this._cleanupAutoUpdate = undefined;\n }\n\n // --- Safe polygon ---\n\n handlePointerLeave(e: PointerEvent, onHide: (reason: 'exit' | 'settled') => void) {\n const floating = this._config.getFloatingElement();\n const trigger = this._config.getTriggerElement();\n if (!floating || !trigger) {\n onHide('exit');\n return;\n }\n\n const cursorX = e.clientX;\n const cursorY = e.clientY;\n\n // Armed only while the pointer sits in the corridor between the trigger and\n // the bubble: there we cannot tell \"paused mid-travel\" from \"gone\" without\n // waiting, so if no further `pointermove` re-evaluates the polygon the\n // pointer has settled and we hide. On the bubble or the trigger themselves\n // the answer is unambiguous — stay open — so the timer is cleared, never\n // armed (otherwise a pointer resting on the bubble to read it would hide).\n let fallback: ReturnType<typeof setTimeout> | undefined;\n\n const hide = (reason: 'exit' | 'settled') => {\n cleanup();\n onHide(reason);\n };\n\n // Stable \"stay open\" surface (bubble or trigger): cancel any pending rest-hide.\n const stayOpen = () => clearTimeout(fallback);\n\n // Transient corridor: keep open, but hide if the pointer comes to rest here.\n const armRestHide = () => {\n clearTimeout(fallback);\n fallback = setTimeout(() => hide('settled'), SAFE_POLYGON_REST_HIDE_MS);\n };\n\n const onMove = (moveEvent: PointerEvent) => {\n const { clientX: mx, clientY: my } = moveEvent;\n const cursor: Point = [mx, my];\n const rect = floating.getBoundingClientRect();\n const refRect = trigger.getBoundingClientRect();\n const side = this._currentPlacement.split('-')[0];\n\n if (isPointInRect(cursor, rect)) {\n stayOpen();\n return;\n }\n if (isPointInRect(cursor, refRect)) {\n stayOpen();\n return;\n }\n\n if (\n (side === 'top' && cursorY >= refRect.bottom - 1) ||\n (side === 'bottom' && cursorY <= refRect.top + 1) ||\n (side === 'left' && cursorX >= refRect.right - 1) ||\n (side === 'right' && cursorX <= refRect.left + 1)\n ) {\n hide('exit');\n return;\n }\n\n const polygon = getSafePolygon(cursorX, cursorY, rect, refRect, this._currentPlacement);\n if (isPointInPolygon(cursor, polygon)) {\n armRestHide();\n return;\n }\n\n hide('exit');\n };\n\n const cleanup = () => {\n clearTimeout(fallback);\n document.removeEventListener('pointermove', onMove);\n };\n\n document.addEventListener('pointermove', onMove);\n // Arm immediately: a leave with no subsequent move (flick-and-stop) lands in\n // the corridor and must still hide once the pointer has settled.\n armRestHide();\n\n this._cleanupSafePolygon?.();\n this._cleanupSafePolygon = cleanup;\n }\n\n cleanupSafePolygon() {\n this._cleanupSafePolygon?.();\n this._cleanupSafePolygon = undefined;\n }\n\n // --- Trigger listener management ---\n\n addTriggerListeners(handlers: TriggerHandlers) {\n const trigger = this._config.getTriggerElement();\n if (!trigger) return;\n\n this._handlers = handlers;\n this._triggerElement = trigger;\n\n if (handlers.onPointerEnter)\n trigger.addEventListener('pointerenter', handlers.onPointerEnter as EventListener);\n if (handlers.onPointerLeave)\n trigger.addEventListener('pointerleave', handlers.onPointerLeave as EventListener);\n if (handlers.onFocusIn)\n trigger.addEventListener('focusin', handlers.onFocusIn as EventListener);\n if (handlers.onFocusOut)\n trigger.addEventListener('focusout', handlers.onFocusOut as EventListener);\n if (handlers.onClick) trigger.addEventListener('click', handlers.onClick as EventListener);\n if (handlers.onKeyDown)\n trigger.addEventListener('keydown', handlers.onKeyDown as EventListener);\n }\n\n removeTriggerListeners(triggerOverride?: HTMLElement | null) {\n const trigger = triggerOverride ?? this._triggerElement;\n const handlers = this._handlers;\n if (!trigger || !handlers) return;\n\n if (handlers.onPointerEnter)\n trigger.removeEventListener('pointerenter', handlers.onPointerEnter as EventListener);\n if (handlers.onPointerLeave)\n trigger.removeEventListener('pointerleave', handlers.onPointerLeave as EventListener);\n if (handlers.onFocusIn)\n trigger.removeEventListener('focusin', handlers.onFocusIn as EventListener);\n if (handlers.onFocusOut)\n trigger.removeEventListener('focusout', handlers.onFocusOut as EventListener);\n if (handlers.onClick) trigger.removeEventListener('click', handlers.onClick as EventListener);\n if (handlers.onKeyDown)\n trigger.removeEventListener('keydown', handlers.onKeyDown as EventListener);\n\n if (!triggerOverride) {\n this._handlers = undefined;\n this._triggerElement = undefined;\n }\n }\n\n // --- Animation ---\n\n async animateShow(el: HTMLElement, duration: number, keyframes?: Keyframe[]) {\n const d = reducedMotion?.matches ? 0 : duration;\n el.getAnimations().forEach((a) => a.cancel());\n el.animate(\n keyframes ?? [\n { opacity: 0, scale: 0.96 },\n { opacity: 1, scale: 1 },\n ],\n { duration: d, fill: 'forwards' },\n );\n }\n\n async animateHide(el: HTMLElement, duration: number, keyframes?: Keyframe[]) {\n const d = reducedMotion?.matches ? 0 : duration;\n const anim = el.animate(\n keyframes ?? [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.96 },\n ],\n { duration: d, fill: 'forwards' },\n );\n await anim.finished;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +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;;;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,
|
|
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;;;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,CAwBrB;IAEF,OAAO,CAAC,eAAe,CAarB;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"}
|
|
@@ -74,11 +74,18 @@ export class Tooltip extends LuxenElement {
|
|
|
74
74
|
if (!this._hasTrigger('hover'))
|
|
75
75
|
return;
|
|
76
76
|
// The safe polygon means "the pointer is travelling toward the bubble" —
|
|
77
|
-
// provably false once the pointer enters another tooltip's trigger
|
|
78
|
-
//
|
|
79
|
-
//
|
|
77
|
+
// provably false once the pointer enters another tooltip's trigger. Drop
|
|
78
|
+
// our own stale polygon, and close every peer now: invalidating a peer's
|
|
79
|
+
// polygon without hiding it leaves the peer stuck open, because its only
|
|
80
|
+
// remaining close path was eviction when *this* tooltip opens — and with
|
|
81
|
+
// `show-delay` that can be much later, or never if the pointer moves on
|
|
82
|
+
// before the dwell elapses (a fast sweep across a button group).
|
|
83
|
+
this._floating.cleanupSafePolygon();
|
|
80
84
|
for (const tooltip of tooltipInstances) {
|
|
85
|
+
if (tooltip === this || tooltip._hasTrigger('manual'))
|
|
86
|
+
continue;
|
|
81
87
|
tooltip._floating.cleanupSafePolygon();
|
|
88
|
+
tooltip.hide();
|
|
82
89
|
}
|
|
83
90
|
// The pointer is back on the trigger: cancel a pending hide (exit-and-return).
|
|
84
91
|
clearTimeout(this._hideTimer);
|
|
@@ -97,7 +104,16 @@ export class Tooltip extends LuxenElement {
|
|
|
97
104
|
this._showTimer = undefined;
|
|
98
105
|
if (!this._hasTrigger('hover') || !this.open)
|
|
99
106
|
return;
|
|
100
|
-
|
|
107
|
+
// `exit` — the pointer actively moved off the trigger/bubble: honour
|
|
108
|
+
// `hide-delay` so a brief exit-and-return doesn't flicker. `settled` — the
|
|
109
|
+
// pointer left and sat motionless in the corridor: there is no in-flight
|
|
110
|
+
// gesture to bridge, so hide at once (never stack the delay on top).
|
|
111
|
+
this._floating.handlePointerLeave(e, (reason) => {
|
|
112
|
+
if (reason === 'settled')
|
|
113
|
+
this.hide();
|
|
114
|
+
else
|
|
115
|
+
this._scheduleHide();
|
|
116
|
+
});
|
|
101
117
|
};
|
|
102
118
|
this._onFocusIn = () => {
|
|
103
119
|
// Focus is a discrete affordance — show immediately, ignoring the dwell delay.
|
package/dist/metadata/index.json
CHANGED
|
@@ -38,7 +38,7 @@ export declare class PopoverController implements ReactiveController {
|
|
|
38
38
|
updatePosition(options: PositionOptions): Promise<void>;
|
|
39
39
|
startPositioning(options: PositionOptions): void;
|
|
40
40
|
stopPositioning(): void;
|
|
41
|
-
handlePointerLeave(e: PointerEvent, onHide: () => void): void;
|
|
41
|
+
handlePointerLeave(e: PointerEvent, onHide: (reason: 'exit' | 'settled') => void): void;
|
|
42
42
|
cleanupSafePolygon(): void;
|
|
43
43
|
addTriggerListeners(handlers: TriggerHandlers): void;
|
|
44
44
|
removeTriggerListeners(triggerOverride?: HTMLElement | null): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AA+N1B,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,sGAAsG;IACtG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,qBAAa,iBAAkB,YAAW,kBAAkB;IAC1D,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,iBAAiB,CAAM;gBAEnB,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,MAAM,EAAE,uBAAuB;IAMvF,aAAa;IAEb,gBAAgB;IAMhB,IAAI,gBAAgB,WAEnB;IAIK,cAAc,CAAC,OAAO,EAAE,eAAe;IAuD7C,gBAAgB,CAAC,OAAO,EAAE,eAAe;IASzC,eAAe;IAOf,kBAAkB,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI;IAkFhF,kBAAkB;IAOlB,mBAAmB,CAAC,QAAQ,EAAE,eAAe;IAoB7C,sBAAsB,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI;IAyBrD,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;IAYrE,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;CAW5E"}
|
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
import { computePosition, autoUpdate, offset, flip, shift, arrow, size, } from '@floating-ui/dom';
|
|
2
|
+
/**
|
|
3
|
+
* How long the pointer may rest, in the corridor between the trigger and the
|
|
4
|
+
* bubble, before the safe polygon gives up and hides. The polygon is only
|
|
5
|
+
* re-evaluated on `pointermove`, so a pointer that leaves and immediately stops
|
|
6
|
+
* emits no further event to close on — this fallback guarantees the tooltip
|
|
7
|
+
* still hides. Kept short so a genuine pause while travelling toward the bubble
|
|
8
|
+
* re-arms it without a visible flicker. It is *not* armed while the pointer sits
|
|
9
|
+
* on the bubble or the trigger themselves — those are stable "stay open" states.
|
|
10
|
+
*/
|
|
11
|
+
const SAFE_POLYGON_REST_HIDE_MS = 200;
|
|
2
12
|
/** Check if a point is inside a polygon using ray-casting. */
|
|
3
13
|
function isPointInPolygon([px, py], polygon) {
|
|
4
14
|
let inside = false;
|
|
@@ -271,39 +281,65 @@ export class PopoverController {
|
|
|
271
281
|
const floating = this._config.getFloatingElement();
|
|
272
282
|
const trigger = this._config.getTriggerElement();
|
|
273
283
|
if (!floating || !trigger) {
|
|
274
|
-
onHide();
|
|
284
|
+
onHide('exit');
|
|
275
285
|
return;
|
|
276
286
|
}
|
|
277
287
|
const cursorX = e.clientX;
|
|
278
288
|
const cursorY = e.clientY;
|
|
289
|
+
// Armed only while the pointer sits in the corridor between the trigger and
|
|
290
|
+
// the bubble: there we cannot tell "paused mid-travel" from "gone" without
|
|
291
|
+
// waiting, so if no further `pointermove` re-evaluates the polygon the
|
|
292
|
+
// pointer has settled and we hide. On the bubble or the trigger themselves
|
|
293
|
+
// the answer is unambiguous — stay open — so the timer is cleared, never
|
|
294
|
+
// armed (otherwise a pointer resting on the bubble to read it would hide).
|
|
295
|
+
let fallback;
|
|
296
|
+
const hide = (reason) => {
|
|
297
|
+
cleanup();
|
|
298
|
+
onHide(reason);
|
|
299
|
+
};
|
|
300
|
+
// Stable "stay open" surface (bubble or trigger): cancel any pending rest-hide.
|
|
301
|
+
const stayOpen = () => clearTimeout(fallback);
|
|
302
|
+
// Transient corridor: keep open, but hide if the pointer comes to rest here.
|
|
303
|
+
const armRestHide = () => {
|
|
304
|
+
clearTimeout(fallback);
|
|
305
|
+
fallback = setTimeout(() => hide('settled'), SAFE_POLYGON_REST_HIDE_MS);
|
|
306
|
+
};
|
|
279
307
|
const onMove = (moveEvent) => {
|
|
280
308
|
const { clientX: mx, clientY: my } = moveEvent;
|
|
281
309
|
const cursor = [mx, my];
|
|
282
310
|
const rect = floating.getBoundingClientRect();
|
|
283
311
|
const refRect = trigger.getBoundingClientRect();
|
|
284
312
|
const side = this._currentPlacement.split('-')[0];
|
|
285
|
-
if (isPointInRect(cursor, rect))
|
|
313
|
+
if (isPointInRect(cursor, rect)) {
|
|
314
|
+
stayOpen();
|
|
286
315
|
return;
|
|
287
|
-
|
|
316
|
+
}
|
|
317
|
+
if (isPointInRect(cursor, refRect)) {
|
|
318
|
+
stayOpen();
|
|
288
319
|
return;
|
|
320
|
+
}
|
|
289
321
|
if ((side === 'top' && cursorY >= refRect.bottom - 1) ||
|
|
290
322
|
(side === 'bottom' && cursorY <= refRect.top + 1) ||
|
|
291
323
|
(side === 'left' && cursorX >= refRect.right - 1) ||
|
|
292
324
|
(side === 'right' && cursorX <= refRect.left + 1)) {
|
|
293
|
-
|
|
294
|
-
onHide();
|
|
325
|
+
hide('exit');
|
|
295
326
|
return;
|
|
296
327
|
}
|
|
297
328
|
const polygon = getSafePolygon(cursorX, cursorY, rect, refRect, this._currentPlacement);
|
|
298
|
-
if (isPointInPolygon(cursor, polygon))
|
|
329
|
+
if (isPointInPolygon(cursor, polygon)) {
|
|
330
|
+
armRestHide();
|
|
299
331
|
return;
|
|
300
|
-
|
|
301
|
-
|
|
332
|
+
}
|
|
333
|
+
hide('exit');
|
|
302
334
|
};
|
|
303
335
|
const cleanup = () => {
|
|
336
|
+
clearTimeout(fallback);
|
|
304
337
|
document.removeEventListener('pointermove', onMove);
|
|
305
338
|
};
|
|
306
339
|
document.addEventListener('pointermove', onMove);
|
|
340
|
+
// Arm immediately: a leave with no subsequent move (flick-and-stop) lands in
|
|
341
|
+
// the corridor and must still hide once the pointer has settled.
|
|
342
|
+
armRestHide();
|
|
307
343
|
this._cleanupSafePolygon?.();
|
|
308
344
|
this._cleanupSafePolygon = cleanup;
|
|
309
345
|
}
|
|
@@ -196,6 +196,64 @@ Set `--background-color` to a base color. Text color is auto-derived from its lu
|
|
|
196
196
|
|
|
197
197
|
## Examples
|
|
198
198
|
|
|
199
|
+
### Icon toolbar
|
|
200
|
+
|
|
201
|
+
Give each icon button its own tooltip and a `show-delay` so sweeping across the group doesn't flash a tooltip on every control the pointer passes over — only the one the pointer rests on opens. Keep an `aria-label` on each button: the tooltip supplements the accessible name, it doesn't replace it.
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<l-button-group label="Text formatting">
|
|
205
|
+
<button
|
|
206
|
+
id="tooltip-tb-bold"
|
|
207
|
+
class="l-button"
|
|
208
|
+
aria-label="Bold"
|
|
209
|
+
>
|
|
210
|
+
<iconify-icon icon="lucide:bold"></iconify-icon>
|
|
211
|
+
</button>
|
|
212
|
+
<button
|
|
213
|
+
id="tooltip-tb-italic"
|
|
214
|
+
class="l-button"
|
|
215
|
+
aria-label="Italic"
|
|
216
|
+
>
|
|
217
|
+
<iconify-icon icon="lucide:italic"></iconify-icon>
|
|
218
|
+
</button>
|
|
219
|
+
<button
|
|
220
|
+
id="tooltip-tb-underline"
|
|
221
|
+
class="l-button"
|
|
222
|
+
aria-label="Underline"
|
|
223
|
+
>
|
|
224
|
+
<iconify-icon icon="lucide:underline"></iconify-icon>
|
|
225
|
+
</button>
|
|
226
|
+
<button
|
|
227
|
+
id="tooltip-tb-link"
|
|
228
|
+
class="l-button"
|
|
229
|
+
aria-label="Insert link"
|
|
230
|
+
>
|
|
231
|
+
<iconify-icon icon="lucide:link"></iconify-icon>
|
|
232
|
+
</button>
|
|
233
|
+
</l-button-group>
|
|
234
|
+
|
|
235
|
+
<l-tooltip
|
|
236
|
+
for="tooltip-tb-bold"
|
|
237
|
+
show-delay="400"
|
|
238
|
+
>Bold</l-tooltip
|
|
239
|
+
>
|
|
240
|
+
<l-tooltip
|
|
241
|
+
for="tooltip-tb-italic"
|
|
242
|
+
show-delay="400"
|
|
243
|
+
>Italic</l-tooltip
|
|
244
|
+
>
|
|
245
|
+
<l-tooltip
|
|
246
|
+
for="tooltip-tb-underline"
|
|
247
|
+
show-delay="400"
|
|
248
|
+
>Underline</l-tooltip
|
|
249
|
+
>
|
|
250
|
+
<l-tooltip
|
|
251
|
+
for="tooltip-tb-link"
|
|
252
|
+
show-delay="400"
|
|
253
|
+
>Insert link</l-tooltip
|
|
254
|
+
>
|
|
255
|
+
```
|
|
256
|
+
|
|
199
257
|
### All placements
|
|
200
258
|
|
|
201
259
|
All 12 placement options with aligned variants (`-start`, `-end`).
|
package/package.json
CHANGED