luxen-ui 0.16.1 → 0.17.0

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=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`
+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`)&&this._trigger?.matches(`:focus-visible`)&&(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"

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  /**\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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"}
+{"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    if (!this._hasTrigger('focus')) return;\n    // Keyboard focus only. A pointer click focuses the trigger too, but the\n    // pointer already drives the `hover` trigger — showing on mouse focus would\n    // resurrect the tooltip when a modal (e.g. `l-dialog`) restores focus to\n    // the trigger on close. `:focus-visible` is exactly \"focus that warrants a\n    // visible affordance\", matching the platform's own `title`/APG behaviour.\n    if (!this._trigger?.matches(':focus-visible')) return;\n    // Focus is a discrete affordance — show immediately, ignoring the dwell delay.\n    clearTimeout(this._hideTimer);\n    this._hideTimer = undefined;\n    this.show();\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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"}

package/cdn/registry.d.ts

@@ -1,5 +1,5 @@
 /** Every component base name the library ships. */
-export type ElementBaseName = 'alert' | 'alert-dialog' | 'avatar' | 'badge' | 'button-group' | 'carousel' | 'carousel-item' | 'combobox' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'dropdown-label' | 'form-field' | 'icon' | 'input-group' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'slider' | 'spinner' | 'rating' | 'select' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'tag' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
+export type ElementBaseName = 'alert' | 'alert-dialog' | 'avatar' | 'badge' | 'button-group' | 'carousel' | 'carousel-item' | 'combobox' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'dropdown-label' | 'form-field' | 'icon' | 'input-group' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'slider' | 'spinner' | 'rating' | 'segmented-control' | 'select' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'tag' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
 /** Set the global prefix. Must be called before defining elements. */
 export declare function setPrefix(prefix: {
     element: string;

package/cdn/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,eAAe,GACf,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,aAAa,GACb,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,eAAe,GACf,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,aAAa,GACb,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,mBAAmB,GACnB,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}

package/cdn/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../src/html/registry.ts"],"sourcesContent":["/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":"AAwCA,IAAI,EAAiB,IACjB,EAAa,IACX,EAAc,IAAI,IAcxB,SAAgB,EAAQ,EAAmC,CACzD,MAAO,GAAG,EAAe,GAAG,GAC9B,CAGA,SAAgB,EAAI,EAAsB,CACxC,MAAO,GAAG,EAAW,GAAG,GAC1B,CAGA,IAAI,EAAO,EACX,SAAgB,EAAS,EAAsB,CAC7C,MAAO,GAAG,EAAW,GAAG,EAAK,GAAG,EAAE,GACpC,CAGA,SAAgB,EAAa,EAAoC,CAC/D,OAAO,EAAY,IAAI,CAAQ,CACjC,CAGA,SAAgB,EAAe,EAAiC,CAC9D,EAAY,IAAI,CAAQ,CAC1B"}
+{"version":3,"file":"registry.js","names":[],"sources":["../src/html/registry.ts"],"sourcesContent":["/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":"AAyCA,IAAI,EAAiB,IACjB,EAAa,IACX,EAAc,IAAI,IAcxB,SAAgB,EAAQ,EAAmC,CACzD,MAAO,GAAG,EAAe,GAAG,GAC9B,CAGA,SAAgB,EAAI,EAAsB,CACxC,MAAO,GAAG,EAAW,GAAG,GAC1B,CAGA,IAAI,EAAO,EACX,SAAgB,EAAS,EAAsB,CAC7C,MAAO,GAAG,EAAW,GAAG,EAAK,GAAG,EAAE,GACpC,CAGA,SAAgB,EAAa,EAAoC,CAC/D,OAAO,EAAY,IAAI,CAAQ,CACjC,CAGA,SAAgB,EAAe,EAAiC,CAC9D,EAAY,IAAI,CAAQ,CAC1B"}

package/cdn/standalone.css

@@ -4047,6 +4047,173 @@ In dark mode, mixes the base color with black (default 15% black).
   }
 }
 
+/* segmented-control.css */
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}
+
 /* select.css */
 /* Select — `.l-select` on a native <select> using the customizable
    `base-select` appearance (the Customizable Select API).

package/cdn/standalone.js

@@ -1,68 +1,71 @@
 //#region src/html/elements/alert/index.ts
-define$32("alert", Alert);
+define$33("alert", Alert);
 //#endregion
 //#region src/html/elements/alert-dialog/index.ts
-define$31("alert-dialog", AlertDialog);
+define$32("alert-dialog", AlertDialog);
 //#endregion
 //#region src/html/elements/avatar/index.ts
-define$30("avatar", Avatar);
+define$31("avatar", Avatar);
 //#endregion
 //#region src/html/elements/badge/index.ts
-define$29("badge", Badge);
+define$30("badge", Badge);
 //#endregion
 //#region src/html/elements/button-group/index.ts
-define$28("button-group", ButtonGroup);
+define$29("button-group", ButtonGroup);
 //#endregion
 //#region src/html/elements/carousel/index.ts
-define$27("carousel", Carousel);
+define$28("carousel", Carousel);
 //#endregion
 //#region src/html/elements/carousel-item/index.ts
-define$26("carousel-item", CarouselItem);
+define$27("carousel-item", CarouselItem);
 //#endregion
 //#region src/html/elements/combobox/index.ts
-define$25("combobox", Combobox);
+define$26("combobox", Combobox);
 //#endregion
 //#region src/html/elements/dialog/index.ts
-define$24("dialog", Dialog);
+define$25("dialog", Dialog);
 //#endregion
 //#region src/html/elements/divider/index.ts
-define$23("divider", Divider);
+define$24("divider", Divider);
 //#endregion
 //#region src/html/elements/drawer/index.ts
-define$22("drawer", Drawer);
+define$23("drawer", Drawer);
 //#endregion
 //#region src/html/elements/dropdown/index.ts
-define$21("dropdown", Dropdown);
+define$22("dropdown", Dropdown);
 //#endregion
 //#region src/html/elements/dropdown-item/index.ts
-define$20("dropdown-item", DropdownItem);
+define$21("dropdown-item", DropdownItem);
 //#endregion
 //#region src/html/elements/dropdown-label/index.ts
-define$19("dropdown-label", DropdownLabel);
+define$20("dropdown-label", DropdownLabel);
 //#endregion
 //#region src/html/elements/form-field/index.ts
-define$18("form-field", FormField);
+define$19("form-field", FormField);
 //#endregion
 //#region src/html/elements/icon/index.ts
-define$17("icon", Icon);
+define$18("icon", Icon);
 //#endregion
 //#region src/html/elements/input-group/index.ts
-define$16("input-group", InputGroup);
+define$17("input-group", InputGroup);
 //#endregion
 //#region src/html/elements/input-otp/index.ts
-define$15("input-otp", InputOtp);
+define$16("input-otp", InputOtp);
 //#endregion
 //#region src/html/elements/input-stepper/index.ts
-define$14("input-stepper", InputStepper);
+define$15("input-stepper", InputStepper);
 //#endregion
 //#region src/html/elements/popover/index.ts
-define$13("popover", Popover);
+define$14("popover", Popover);
 //#endregion
 //#region src/html/elements/prose-editor/index.ts
-define$12("prose-editor", ProseEditor);
+define$13("prose-editor", ProseEditor);
 //#endregion
 //#region src/html/elements/rating/index.ts
-define$11("rating", Rating);
+define$12("rating", Rating);
+//#endregion
+//#region src/html/elements/segmented-control/index.ts
+define$11("segmented-control", SegmentedControl);
 //#endregion
 //#region src/html/elements/select/index.ts
 define$10("select", Select);

package/cdn/standalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACqC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}
+{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/segmented-control/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { SegmentedControl } from './segmented-control.js';\nexport * from './segmented-control.js';\ndefine('segmented-control', SegmentedControl);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,qBAAqB,gBAAgB;;;ACA5C,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACsC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}