@expressivecss/expressive 0.16.0 → 0.17.0

package/dist/js/chunks/chunk-R7A7JRC5.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/tooltip.ts"],
+  "sourcesContent": ["import { Utils, restoreAttribute } from '../core/utils';\nimport { Component, BaseOptions } from '../core/component';\n\nexport type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';\n\n\n// CSS anchor positioning, where the browser has it: the tooltip follows its\n// trigger through scrolling and flips at the viewport edge without script\n// measuring anything. Elsewhere the coordinate path below still runs.\nconst anchorSupported = typeof CSS !== 'undefined' && !!CSS.supports?.('anchor-name: --a');\n\n// Per position: the position-area and the self-alignment that centers the\n// tooltip on its trigger.\nconst ANCHOR_PLACEMENT: Record<string, [string, string]> = {\n  top: ['top', 'justify-self'],\n  right: ['right', 'align-self'],\n  left: ['left', 'align-self'],\n  bottom: ['bottom', 'justify-self'],\n};\n\n/**\n * On touch, a press held this long shows the tooltip, as Android's long\n * press does, and the tooltip stays this long after the finger lifts.\n */\nconst LONG_PRESS = 500;\nconst TOUCH_LINGER = 1500;\n// After a touch the browser fires mouse events for compatibility; within\n// this long of one they are the touch again, not a mouse.\nconst TOUCH_ECHO = 800;\n// A long press that showed the tooltip was asking about the control, so the\n// click its release sends, within this long, does not activate it.\nconst PRESS_CLICK = 400;\n// A tooltip that opens while a tooltip is closing, or this long after that\n// one's exitDelay ends, shows without enterDelay, as tooltips along a toolbar\n// do. The window is shared by every tooltip; a clock earlier than its start,\n// after the system clock went back, is outside it.\nconst SKIP_DELAY_WINDOW = 300;\nlet skipDelayFrom = -Infinity;\nlet skipDelayUntil = -Infinity;\n\nconst skippingDelay = (now: number) => now >= skipDelayFrom && now < skipDelayUntil;\n\n/** A showing tooltip is closing: open the window, or extend it while an earlier one is still closing. */\nfunction startSkipDelay(exitDelay: number) {\n  const now = Date.now();\n  const end = now + exitDelay + SKIP_DELAY_WINDOW;\n  skipDelayUntil = skippingDelay(now) ? Math.max(skipDelayUntil, end) : end;\n  skipDelayFrom = now;\n}\n\nexport interface TooltipOptions extends BaseOptions {\n  /**\n   * Delay time before tooltip disappears.\n   * @default 200\n   */\n  exitDelay: number;\n  /**\n   * Delay time before tooltip appears. Skipped while a tooltip is closing\n   * and for 300ms after its exitDelay ends.\n   * @default 0\n   */\n  enterDelay: number;\n  /**\n   * Element Id for the tooltip.\n   * @default \"\"\n   */\n  tooltipId?: string;\n  /**\n   * Text string for the tooltip.\n   * @default \"\"\n   */\n  text: string;\n  /**\n   * Set distance tooltip appears away from its activator\n   * excluding transitionMovement.\n   * @default 4\n   */\n  margin: number;\n  /**\n   * Enter transition duration.\n   * @default 300\n   */\n  inDuration: number;\n  /**\n   * Opacity of the tooltip.\n   * @default 1\n   */\n  opacity: number;\n  /**\n   * Exit transition duration.\n   * @default 250\n   */\n  outDuration: number;\n  /**\n   * Set the direction of the tooltip.\n   * @default 'bottom'\n   */\n  position: TooltipPosition;\n  /**\n   * Amount in px that the tooltip moves during its transition.\n   * @default 10\n   */\n  transitionMovement: number;\n  /**\n   * Open on a click instead of hover and focus. A second click, Escape, a\n   * click elsewhere or focus on another element closes it. On touch a tap\n   * is the click, so the long press is off.\n   * @default false\n   */\n  openOnClick: boolean;\n}\n\nconst _defaults: TooltipOptions = {\n  exitDelay: 200,\n  enterDelay: 0,\n  text: '',\n  margin: 4,\n  inDuration: 250,\n  outDuration: 200,\n  position: 'bottom',\n  transitionMovement: 10,\n  opacity: 1,\n  openOnClick: false\n};\n\nexport class Tooltip extends Component<TooltipOptions> {\n  /**\n   * If tooltip is open.\n   */\n  isOpen: boolean;\n  /**\n   * If tooltip is hovered.\n   */\n  isHovered: boolean;\n  /**\n   * If tooltip is focused.\n   */\n  isFocused: boolean;\n  tooltipEl: HTMLElement;\n  private _exitDelayTimeout: ReturnType<typeof setTimeout>;\n  private _enterDelayTimeout: ReturnType<typeof setTimeout>;\n  private _animationTimeout: ReturnType<typeof setTimeout>;\n  private _pressTimeout: ReturnType<typeof setTimeout>;\n  private _lingerTimeout: ReturnType<typeof setTimeout>;\n  private _outsideTimeout: ReturnType<typeof setTimeout>;\n  /** The last click on the trigger or inside the tooltip, which the document listener leaves alone. */\n  private _insideClick: Event | null = null;\n  /** When the last touch began or ended, to tell its mouse events from a mouse. */\n  private _lastTouch = -Infinity;\n  /** Whether a long press showed the tooltip, until it closes or a mouse hovers. */\n  private _touchShown = false;\n  /** Until when a click is the release of a long press, not a tap. */\n  private _swallowClickUntil = -Infinity;\n  // Whether the last animation showed the tooltip, so each change is reported once.\n  private _shown = false;\n  private _originalContent: {\n    el: HTMLElement;\n    marker: Comment;\n    display: string;\n    priority: string;\n    hidden: string | null;\n    contentClass: boolean;\n  };\n  xMovement: number;\n  yMovement: number;\n\n  constructor(el: HTMLElement, options: Partial<TooltipOptions>) {\n    super(el, options);\n\n    // The data-* options win over the defaults and the options, as open()\n    // has them win each time it reads them again. Init used to put the\n    // options last, so a tooltip changed side or text on its first open.\n    this.options = { ...this.options, ...this._getAttributeOptions() };\n\n    this.isOpen = false;\n    this.isHovered = false;\n    this.isFocused = false;\n    this._appendTooltipEl();\n    this._setupEventHandlers();\n  }\n\n  static get defaults(): TooltipOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Tooltip';\n\n  destroy() {\n    clearTimeout(this._enterDelayTimeout);\n    clearTimeout(this._exitDelayTimeout);\n    clearTimeout(this._animationTimeout);\n    clearTimeout(this._pressTimeout);\n    clearTimeout(this._lingerTimeout);\n    clearTimeout(this._outsideTimeout);\n    this.isOpen = false;\n    this.isHovered = false;\n    this.isFocused = false;\n    const descriptions = this.el.getAttribute('aria-describedby')?.split(/\\s+/);\n    if (descriptions?.includes(this.tooltipEl.id)) {\n      const remaining = descriptions.filter(id => id && id !== this.tooltipEl.id).join(' ');\n      if (remaining) this.el.setAttribute('aria-describedby', remaining);\n      else this.el.removeAttribute('aria-describedby');\n    }\n    if (this._originalContent) {\n      const { el, marker, display, priority, hidden, contentClass } = this._originalContent;\n      el.style.setProperty('display', display, priority);\n      restoreAttribute(el, 'hidden', hidden);\n      el.classList.toggle('tooltip-content', contentClass);\n      if (!el.className) el.removeAttribute('class');\n      marker.replaceWith(el);\n      this._originalContent = null;\n    }\n    this.tooltipEl.remove();\n    Utils.setAnchorName(this.el, `--${this.tooltipEl.id}`, false);\n    super.destroy();\n  }\n\n  _appendTooltipEl() {\n    this.tooltipEl = document.createElement('div');\n    this.tooltipEl.classList.add('tooltip');\n    this.tooltipEl.id = `tooltip-${Utils.guid()}`;\n    this.tooltipEl.setAttribute('role', 'tooltip');\n    this.el.setAttribute('aria-describedby', [this.el.getAttribute('aria-describedby'), this.tooltipEl.id].filter(Boolean).join(' '));\n\n    const richContentEl = this.options.tooltipId\n      ? Utils.getElementById(this.el, this.options.tooltipId)\n      : null;\n    if (this.options.tooltipId && !richContentEl) {\n      console.error(`Tooltip: no element with id \"${this.options.tooltipId}\"; showing the text tooltip instead.`);\n    }\n    const tooltipContentEl = richContentEl ?? document.createElement('div');\n    if (richContentEl) {\n      this.tooltipEl.classList.add('rich');\n      const marker = document.createComment('');\n      tooltipContentEl.before(marker);\n      this._originalContent = {\n        el: tooltipContentEl, marker,\n        display: tooltipContentEl.style.display,\n        priority: tooltipContentEl.style.getPropertyPriority('display'),\n        hidden: tooltipContentEl.getAttribute('hidden'),\n        contentClass: tooltipContentEl.classList.contains('tooltip-content')\n      };\n      tooltipContentEl.removeAttribute('hidden');\n    }\n    tooltipContentEl.style.display = '';\n    tooltipContentEl.classList.add('tooltip-content');\n    this._setTooltipContent(tooltipContentEl);\n    this.tooltipEl.appendChild(tooltipContentEl);\n    Utils.portalRoot(this.el).appendChild(this.tooltipEl);\n  }\n\n  _setTooltipContent(tooltipContentEl: HTMLElement) {\n    if (this._originalContent) return;\n    tooltipContentEl.innerText = this.options.text;\n  }\n\n  _updateTooltipContent() {\n    this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content'));\n  }\n\n  _setupEventHandlers() {\n    const { signal } = this._events;\n    const capture = { capture: true, signal };\n    for (const el of [this.el, this.tooltipEl]) {\n      el.addEventListener('mouseenter', this._handleMouseEnter, { signal });\n      el.addEventListener('mouseleave', this._handleMouseLeave, { signal });\n      el.addEventListener('focus', this._handleFocus, capture);\n      el.addEventListener('blur', this._handleBlur, capture);\n    }\n    this.el.addEventListener('pointerenter', this._handlePointerEnter, { signal });\n    this.el.addEventListener('pointerdown', this._handlePointerDown, { signal });\n    this.el.addEventListener('pointerup', this._handlePointerEnd, { signal });\n    this.el.addEventListener('pointercancel', this._handlePointerCancel, { signal });\n    this.el.addEventListener('click', this._handleClick, capture);\n    this.tooltipEl.addEventListener('click', this._handleTooltipClick, capture);\n  }\n\n  /**\n   * Show tooltip.\n   */\n  open = (isManual: boolean = true) => {\n    if (this.isOpen) return;\n    clearTimeout(this._exitDelayTimeout);\n    clearTimeout(this._animationTimeout);\n    this.isOpen = true;\n    // Escape and outside clicks are only listened for while open. close()\n    // removes them, and destroy() through the signal.\n    const { signal } = this._events;\n    this.el.ownerDocument.addEventListener('keydown', this._handleKeydown, { capture: true, signal });\n    // A task later, so the click that opened it, on the trigger or on a page\n    // button that called open(), does not reach the listener and close it.\n    if (this.options.openOnClick) {\n      this._outsideTimeout = setTimeout(() => this.el.ownerDocument.addEventListener('click', this._handleDocumentClick, { signal }));\n    }\n    // Update tooltip content with HTML attribute options\n    this.options = { ...this.options, ...this._getAttributeOptions() };\n    this._updateTooltipContent();\n    this._setEnterDelayTimeout(isManual);\n  };\n\n  /**\n   * Hide tooltip.\n   */\n  close = () => {\n    // A press or linger from an earlier touch has no say over a later opening.\n    clearTimeout(this._pressTimeout);\n    clearTimeout(this._lingerTimeout);\n    this._touchShown = false;\n    if (!this.isOpen) return;\n    if (this._shown) startSkipDelay(this.options.exitDelay);\n    this.isHovered = false;\n    this.isFocused = false;\n    this.isOpen = false;\n    this.el.ownerDocument.removeEventListener('keydown', this._handleKeydown, true);\n    clearTimeout(this._outsideTimeout);\n    this.el.ownerDocument.removeEventListener('click', this._handleDocumentClick);\n    clearTimeout(this._enterDelayTimeout);\n    this._setExitDelayTimeout();\n  };\n\n  /** Show at once, without enterDelay, for a request that is its own delay: a long press or a click. */\n  private _showNow() {\n    this.open();\n    clearTimeout(this._enterDelayTimeout);\n    this._animateIn();\n  }\n\n  /** Hide at once, without exitDelay, for an explicit dismissal. */\n  private _hideNow() {\n    this.close();\n    clearTimeout(this._exitDelayTimeout);\n    this._animateOut();\n  }\n\n  _setExitDelayTimeout() {\n    clearTimeout(this._exitDelayTimeout);\n    this._exitDelayTimeout = setTimeout(() => {\n      if (this.isHovered || this.isFocused) return;\n      this._animateOut();\n    }, this.options.exitDelay);\n  }\n\n  _setEnterDelayTimeout(isManual: boolean): void {\n    clearTimeout(this._enterDelayTimeout);\n    const skipDelay = skippingDelay(Date.now());\n    this._enterDelayTimeout = setTimeout(() => {\n      if (!this.isHovered && !this.isFocused && !isManual) return;\n      this._animateIn();\n    }, skipDelay ? 0 : this.options.enterDelay);\n  }\n\n  _positionTooltip() {\n    const tooltip: HTMLElement = this.tooltipEl;\n    const origin = this.el,\n      originHeight = origin.offsetHeight,\n      originWidth = origin.offsetWidth,\n      tooltipHeight = tooltip.offsetHeight,\n      tooltipWidth = tooltip.offsetWidth,\n      margin = this.options.margin;\n\n    this.xMovement = 0;\n    this.yMovement = 0;\n\n    const originRect = origin.getBoundingClientRect();\n    let targetTop = originRect.top + window.scrollY;\n    let targetLeft = originRect.left + window.scrollX;\n    if (this.options.position === 'top') {\n      targetTop += -tooltipHeight - margin;\n      targetLeft += originWidth / 2 - tooltipWidth / 2;\n      this.yMovement = -this.options.transitionMovement;\n    } else if (this.options.position === 'right') {\n      targetTop += originHeight / 2 - tooltipHeight / 2;\n      targetLeft += originWidth + margin;\n      this.xMovement = this.options.transitionMovement;\n    } else if (this.options.position === 'left') {\n      targetTop += originHeight / 2 - tooltipHeight / 2;\n      targetLeft += -tooltipWidth - margin;\n      this.xMovement = -this.options.transitionMovement;\n    } else {\n      targetTop += originHeight + margin;\n      targetLeft += originWidth / 2 - tooltipWidth / 2;\n      this.yMovement = this.options.transitionMovement;\n    }\n\n    const newCoordinates = Utils._repositionWithinScreen(\n      targetLeft, targetTop, tooltipWidth, tooltipHeight, margin, this.options.transitionMovement, 'center'\n    );\n\n    tooltip.style.setProperty('--md-comp-tooltip-anchor-gap', `${Math.max(0, margin) + Math.abs(this.options.transitionMovement)}px`);\n    Utils._placeInOffsetParent(tooltip, newCoordinates);\n  }\n\n  _place() {\n    if (anchorSupported) this._anchorTooltip();\n    else this._positionTooltip();\n  }\n\n  // Anchored to the trigger in CSS: position-area places the tooltip on the\n  // chosen side, centered, and position-try-fallbacks flips it to the other\n  // side when that one would leave the viewport. Script cannot tell which\n  // side won, so an anchored tooltip fades in without sliding, and the\n  // slide's distance joins the gap instead.\n  _anchorTooltip() {\n    const [area, alignment] = ANCHOR_PLACEMENT[this.options.position] ?? ANCHOR_PLACEMENT.bottom;\n    const name = `--${this.tooltipEl.id}`;\n    this.xMovement = 0;\n    this.yMovement = 0;\n    Utils.setAnchorName(this.el, name, true);\n    const style = this.tooltipEl.style;\n    style.position = 'fixed';\n    style.inset = 'auto';\n    style.margin = `${Math.max(0, this.options.margin) + Math.abs(this.options.transitionMovement)}px`;\n    style.setProperty('position-anchor', name);\n    style.setProperty('position-area', area);\n    style.setProperty(alignment, 'anchor-center');\n    style.setProperty('position-try-fallbacks', 'flip-block, flip-inline');\n  }\n\n  _animateIn() { this._animate(true); }\n\n  _animateOut() { this._animate(false); }\n\n  _animate(show: boolean) {\n    const style = this.tooltipEl.style;\n    const reduce = this.el.ownerDocument.defaultView.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    const duration = reduce ? 0 : show ? this.options.inDuration : this.options.outDuration;\n    if (show) {\n      this._place();\n      style.visibility = 'visible';\n      style.overflow = 'visible';\n    }\n    style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;\n    clearTimeout(this._animationTimeout);\n    this._animationTimeout = setTimeout(() => {\n      style.transform = show && !reduce ? `translateX(${this.xMovement}px) translateY(${this.yMovement}px)` : 'none';\n      style.opacity = show ? (this.options.opacity || 1).toString() : '0';\n      if (!show) this._animationTimeout = setTimeout(() => {\n        style.visibility = 'hidden';\n        style.overflow = '';\n      }, duration);\n    }, 1);\n    this._reportShown(show);\n  }\n\n  private _reportShown(show: boolean) {\n    if (show === this._shown) return;\n    this._shown = show;\n    this._notify(show ? 'open' : 'close');\n  }\n\n  _handleMouseEnter = () => {\n    // A tap's mouse events are not a hover; touch shows the tooltip on a long press.\n    if (this.options.openOnClick || performance.now() - this._lastTouch < TOUCH_ECHO) return;\n    this._touchShown = false;\n    this.isHovered = true;\n    this.open(false);\n  };\n\n  /** Whether an event is a touch, noting when, so the mouse events that echo it are ignored. */\n  private _touched(e: PointerEvent) {\n    if (e.pointerType !== 'touch') return false;\n    this._lastTouch = performance.now();\n    return true;\n  }\n\n  /** Whether an event is a touch for the long press, which a click tooltip does without. */\n  private _longPress(e: PointerEvent) {\n    return !this.options.openOnClick && this._touched(e);\n  }\n\n  // pointerenter comes before any compatibility mouseenter, in whatever order\n  // a browser sends those, so the touch is known before its mouse events.\n  _handlePointerEnter = (e: PointerEvent) => {\n    this._touched(e);\n  };\n\n  /** A touch held for LONG_PRESS shows the tooltip, unless it turns into a scroll first. */\n  _handlePointerDown = (e: PointerEvent) => {\n    if (!this._longPress(e)) return;\n    clearTimeout(this._lingerTimeout);\n    clearTimeout(this._pressTimeout);\n    // The long press is the delay, so it shows at once rather than after\n    // enterDelay, and the linger after the finger lifts always follows a\n    // tooltip that is showing.\n    this._pressTimeout = setTimeout(() => {\n      this.isHovered = true;\n      this._showNow();\n      this._touchShown = true;\n    }, LONG_PRESS);\n  };\n\n  /** The finger lifted: a press too short stays a tap, and a tooltip it showed lingers for TOUCH_LINGER. */\n  _handlePointerEnd = (e: PointerEvent) => {\n    if (!this._longPress(e)) return;\n    clearTimeout(this._pressTimeout);\n    if (this._touchShown) this._swallowClickUntil = performance.now() + PRESS_CLICK;\n    // Any release while it shows, even a second tap during the linger, starts the linger again.\n    if (!this.isOpen) return;\n    this.isHovered = false;\n    // A mouse that hovers in the meantime keeps it, as focus does.\n    this._lingerTimeout = setTimeout(() => this.isHovered || this.isFocused || this.close(), TOUCH_LINGER);\n  };\n\n  /**\n   * A click tooltip toggles. Otherwise the click a long press's release sends\n   * would press the button or follow the link, so it is consumed.\n   */\n  _handleClick = (e: MouseEvent) => {\n    if (this.options.openOnClick) return this._toggle(e);\n    if (performance.now() > this._swallowClickUntil) return;\n    this._swallowClickUntil = -Infinity;\n    e.preventDefault();\n    e.stopImmediatePropagation();\n  };\n\n  /** A click tooltip toggles on what shows: one open() still holds back for enterDelay shows at once. */\n  private _toggle(e: MouseEvent) {\n    this._insideClick = e;\n    if (this._shown) this._hideNow();\n    else this._showNow();\n  }\n\n  // Marked rather than found on the composed path, which a document listener\n  // cannot see into when the tooltip sits in a closed shadow root.\n  _handleTooltipClick = (e: MouseEvent) => {\n    this._insideClick = e;\n  };\n\n  _handleDocumentClick = (e: MouseEvent) => {\n    if (e !== this._insideClick) this._hideNow();\n  };\n\n  /**\n   * The browser took the touch to scroll: no tooltip opens, not even one\n   * waiting out enterDelay, and one the touch showed closes at once.\n   */\n  _handlePointerCancel = (e: PointerEvent) => {\n    if (!this._longPress(e)) return;\n    clearTimeout(this._pressTimeout);\n    // Lingering after an earlier press too; a mouse hover or focus keeps it.\n    if (!this._touchShown) return;\n    this.isHovered = false;\n    if (!this.isFocused) this.close();\n  };\n\n  /** Whether a node is the trigger or the tooltip, or inside either. */\n  private _holds(node: Node | null) {\n    return !!node && (this.el.contains(node) || this.tooltipEl.contains(node));\n  }\n\n  _handleMouseLeave = (event: MouseEvent) => {\n    if (this.options.openOnClick || this._holds(event.relatedTarget as Node | null)) return;\n    this.isHovered = false;\n    if (!this.isFocused) this.close();\n  };\n\n  _handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape' || !this.isOpen) return;\n    // Escape always dismisses the tooltip, but it is only the tooltip's key\n    // when focus is on its trigger. A tooltip left open by hover must not\n    // swallow the Escape meant for the dialog or menu that has focus.\n    if (Utils.focusIsIn(this.el, this.tooltipEl)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n    this._hideNow();\n  };\n\n  // Focus opens the tooltip only when it arrived by keyboard: a pointer press\n  // on the trigger also focuses it, and _handleMouseEnter already covers that.\n  _handleFocus = (event: FocusEvent) => {\n    // A click tooltip opens on the click that Enter or Space sends instead.\n    if (!this.options.openOnClick && (event.target as HTMLElement).matches(':focus-visible')) {\n      this.isFocused = true;\n      this.open(false);\n    }\n  };\n\n  _handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget as Node | null;\n    if (this._holds(next)) return;\n    if (this.options.openOnClick) return this._blurClickTooltip(next);\n    this.isFocused = false;\n    if (!this.isHovered) this.close();\n  };\n\n  // A press on a rich tooltip's text blurs to nothing, so only focus that\n  // lands on another element closes a click tooltip.\n  private _blurClickTooltip(next: Node | null) {\n    if (next && (this.isOpen || this._shown)) this._hideNow();\n  }\n\n  _getAttributeOptions(): Partial<TooltipOptions> {\n    const attributeOptions: Partial<TooltipOptions> = {};\n    const tooltipTextOption = this.el.getAttribute('data-tooltip');\n    const tooltipId = this.el.getAttribute('data-tooltip-id');\n    const positionOption = this.el.getAttribute('data-position');\n    if (tooltipTextOption) {\n      attributeOptions.text = tooltipTextOption;\n    }\n    if (positionOption) {\n      attributeOptions.position = positionOption as TooltipPosition;\n    }\n    if (tooltipId) {\n      attributeOptions.tooltipId = tooltipId;\n    }\n\n    return attributeOptions;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AASA,IAAM,kBAAkB,OAAO,QAAQ,eAAe,CAAC,CAAC,IAAI,WAAW,kBAAkB;AAIzF,IAAM,mBAAqD;AAAA,EACzD,KAAK,CAAC,OAAO,cAAc;AAAA,EAC3B,OAAO,CAAC,SAAS,YAAY;AAAA,EAC7B,MAAM,CAAC,QAAQ,YAAY;AAAA,EAC3B,QAAQ,CAAC,UAAU,cAAc;AACnC;AAMA,IAAM,aAAa;AACnB,IAAM,eAAe;AAGrB,IAAM,aAAa;AAGnB,IAAM,cAAc;AAKpB,IAAM,oBAAoB;AAC1B,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;AAErB,IAAM,gBAAgB,CAAC,QAAgB,OAAO,iBAAiB,MAAM;AAGrE,SAAS,eAAe,WAAmB;AACzC,QAAM,MAAM,KAAK,IAAI;AACrB,QAAM,MAAM,MAAM,YAAY;AAC9B,mBAAiB,cAAc,GAAG,IAAI,KAAK,IAAI,gBAAgB,GAAG,IAAI;AACtE,kBAAgB;AAClB;AAgEA,IAAM,YAA4B;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,aAAa;AACf;AAEO,IAAM,UAAN,cAAsB,UAA0B;AAAA,EAyCrD,YAAY,IAAiB,SAAkC;AAC7D,UAAM,IAAI,OAAO;AArBnB;AAAA,SAAQ,eAA6B;AAErC;AAAA,SAAQ,aAAa;AAErB;AAAA,SAAQ,cAAc;AAEtB;AAAA,SAAQ,qBAAqB;AAE7B;AAAA,SAAQ,SAAS;AA8HjB;AAAA;AAAA;AAAA,gBAAO,CAAC,WAAoB,SAAS;AACnC,UAAI,KAAK,OAAQ;AACjB,mBAAa,KAAK,iBAAiB;AACnC,mBAAa,KAAK,iBAAiB;AACnC,WAAK,SAAS;AAGd,YAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAK,GAAG,cAAc,iBAAiB,WAAW,KAAK,gBAAgB,EAAE,SAAS,MAAM,OAAO,CAAC;AAGhG,UAAI,KAAK,QAAQ,aAAa;AAC5B,aAAK,kBAAkB,WAAW,MAAM,KAAK,GAAG,cAAc,iBAAiB,SAAS,KAAK,sBAAsB,EAAE,OAAO,CAAC,CAAC;AAAA,MAChI;AAEA,WAAK,UAAU,EAAE,GAAG,KAAK,SAAS,GAAG,KAAK,qBAAqB,EAAE;AACjE,WAAK,sBAAsB;AAC3B,WAAK,sBAAsB,QAAQ;AAAA,IACrC;AAKA;AAAA;AAAA;AAAA,iBAAQ,MAAM;AAEZ,mBAAa,KAAK,aAAa;AAC/B,mBAAa,KAAK,cAAc;AAChC,WAAK,cAAc;AACnB,UAAI,CAAC,KAAK,OAAQ;AAClB,UAAI,KAAK,OAAQ,gBAAe,KAAK,QAAQ,SAAS;AACtD,WAAK,YAAY;AACjB,WAAK,YAAY;AACjB,WAAK,SAAS;AACd,WAAK,GAAG,cAAc,oBAAoB,WAAW,KAAK,gBAAgB,IAAI;AAC9E,mBAAa,KAAK,eAAe;AACjC,WAAK,GAAG,cAAc,oBAAoB,SAAS,KAAK,oBAAoB;AAC5E,mBAAa,KAAK,kBAAkB;AACpC,WAAK,qBAAqB;AAAA,IAC5B;AAoIA,6BAAoB,MAAM;AAExB,UAAI,KAAK,QAAQ,eAAe,YAAY,IAAI,IAAI,KAAK,aAAa,WAAY;AAClF,WAAK,cAAc;AACnB,WAAK,YAAY;AACjB,WAAK,KAAK,KAAK;AAAA,IACjB;AAgBA;AAAA;AAAA,+BAAsB,CAAC,MAAoB;AACzC,WAAK,SAAS,CAAC;AAAA,IACjB;AAGA;AAAA,8BAAqB,CAAC,MAAoB;AACxC,UAAI,CAAC,KAAK,WAAW,CAAC,EAAG;AACzB,mBAAa,KAAK,cAAc;AAChC,mBAAa,KAAK,aAAa;AAI/B,WAAK,gBAAgB,WAAW,MAAM;AACpC,aAAK,YAAY;AACjB,aAAK,SAAS;AACd,aAAK,cAAc;AAAA,MACrB,GAAG,UAAU;AAAA,IACf;AAGA;AAAA,6BAAoB,CAAC,MAAoB;AACvC,UAAI,CAAC,KAAK,WAAW,CAAC,EAAG;AACzB,mBAAa,KAAK,aAAa;AAC/B,UAAI,KAAK,YAAa,MAAK,qBAAqB,YAAY,IAAI,IAAI;AAEpE,UAAI,CAAC,KAAK,OAAQ;AAClB,WAAK,YAAY;AAEjB,WAAK,iBAAiB,WAAW,MAAM,KAAK,aAAa,KAAK,aAAa,KAAK,MAAM,GAAG,YAAY;AAAA,IACvG;AAMA;AAAA;AAAA;AAAA;AAAA,wBAAe,CAAC,MAAkB;AAChC,UAAI,KAAK,QAAQ,YAAa,QAAO,KAAK,QAAQ,CAAC;AACnD,UAAI,YAAY,IAAI,IAAI,KAAK,mBAAoB;AACjD,WAAK,qBAAqB;AAC1B,QAAE,eAAe;AACjB,QAAE,yBAAyB;AAAA,IAC7B;AAWA;AAAA;AAAA,+BAAsB,CAAC,MAAkB;AACvC,WAAK,eAAe;AAAA,IACtB;AAEA,gCAAuB,CAAC,MAAkB;AACxC,UAAI,MAAM,KAAK,aAAc,MAAK,SAAS;AAAA,IAC7C;AAMA;AAAA;AAAA;AAAA;AAAA,gCAAuB,CAAC,MAAoB;AAC1C,UAAI,CAAC,KAAK,WAAW,CAAC,EAAG;AACzB,mBAAa,KAAK,aAAa;AAE/B,UAAI,CAAC,KAAK,YAAa;AACvB,WAAK,YAAY;AACjB,UAAI,CAAC,KAAK,UAAW,MAAK,MAAM;AAAA,IAClC;AAOA,6BAAoB,CAAC,UAAsB;AACzC,UAAI,KAAK,QAAQ,eAAe,KAAK,OAAO,MAAM,aAA4B,EAAG;AACjF,WAAK,YAAY;AACjB,UAAI,CAAC,KAAK,UAAW,MAAK,MAAM;AAAA,IAClC;AAEA,0BAAiB,CAAC,UAAyB;AACzC,UAAI,MAAM,QAAQ,YAAY,CAAC,KAAK,OAAQ;AAI5C,UAAI,MAAM,UAAU,KAAK,IAAI,KAAK,SAAS,GAAG;AAC5C,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB;AACA,WAAK,SAAS;AAAA,IAChB;AAIA;AAAA;AAAA,wBAAe,CAAC,UAAsB;AAEpC,UAAI,CAAC,KAAK,QAAQ,eAAgB,MAAM,OAAuB,QAAQ,gBAAgB,GAAG;AACxF,aAAK,YAAY;AACjB,aAAK,KAAK,KAAK;AAAA,MACjB;AAAA,IACF;AAEA,uBAAc,CAAC,UAAsB;AACnC,YAAM,OAAO,MAAM;AACnB,UAAI,KAAK,OAAO,IAAI,EAAG;AACvB,UAAI,KAAK,QAAQ,YAAa,QAAO,KAAK,kBAAkB,IAAI;AAChE,WAAK,YAAY;AACjB,UAAI,CAAC,KAAK,UAAW,MAAK,MAAM;AAAA,IAClC;AA5ZE,SAAK,UAAU,EAAE,GAAG,KAAK,SAAS,GAAG,KAAK,qBAAqB,EAAE;AAEjE,SAAK,SAAS;AACd,SAAK,YAAY;AACjB,SAAK,YAAY;AACjB,SAAK,iBAAiB;AACtB,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,WAAW,WAA2B;AACpC,WAAO;AAAA,EACT;AAAA,EAIA,UAAU;AACR,iBAAa,KAAK,kBAAkB;AACpC,iBAAa,KAAK,iBAAiB;AACnC,iBAAa,KAAK,iBAAiB;AACnC,iBAAa,KAAK,aAAa;AAC/B,iBAAa,KAAK,cAAc;AAChC,iBAAa,KAAK,eAAe;AACjC,SAAK,SAAS;AACd,SAAK,YAAY;AACjB,SAAK,YAAY;AACjB,UAAM,eAAe,KAAK,GAAG,aAAa,kBAAkB,GAAG,MAAM,KAAK;AAC1E,QAAI,cAAc,SAAS,KAAK,UAAU,EAAE,GAAG;AAC7C,YAAM,YAAY,aAAa,OAAO,QAAM,MAAM,OAAO,KAAK,UAAU,EAAE,EAAE,KAAK,GAAG;AACpF,UAAI,UAAW,MAAK,GAAG,aAAa,oBAAoB,SAAS;AAAA,UAC5D,MAAK,GAAG,gBAAgB,kBAAkB;AAAA,IACjD;AACA,QAAI,KAAK,kBAAkB;AACzB,YAAM,EAAE,IAAI,QAAQ,SAAS,UAAU,QAAQ,aAAa,IAAI,KAAK;AACrE,SAAG,MAAM,YAAY,WAAW,SAAS,QAAQ;AACjD,uBAAiB,IAAI,UAAU,MAAM;AACrC,SAAG,UAAU,OAAO,mBAAmB,YAAY;AACnD,UAAI,CAAC,GAAG,UAAW,IAAG,gBAAgB,OAAO;AAC7C,aAAO,YAAY,EAAE;AACrB,WAAK,mBAAmB;AAAA,IAC1B;AACA,SAAK,UAAU,OAAO;AACtB,UAAM,cAAc,KAAK,IAAI,KAAK,KAAK,UAAU,EAAE,IAAI,KAAK;AAC5D,UAAM,QAAQ;AAAA,EAChB;AAAA,EAEA,mBAAmB;AACjB,SAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,SAAK,UAAU,UAAU,IAAI,SAAS;AACtC,SAAK,UAAU,KAAK,WAAW,MAAM,KAAK,CAAC;AAC3C,SAAK,UAAU,aAAa,QAAQ,SAAS;AAC7C,SAAK,GAAG,aAAa,oBAAoB,CAAC,KAAK,GAAG,aAAa,kBAAkB,GAAG,KAAK,UAAU,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC;AAEhI,UAAM,gBAAgB,KAAK,QAAQ,YAC/B,MAAM,eAAe,KAAK,IAAI,KAAK,QAAQ,SAAS,IACpD;AACJ,QAAI,KAAK,QAAQ,aAAa,CAAC,eAAe;AAC5C,cAAQ,MAAM,gCAAgC,KAAK,QAAQ,SAAS,sCAAsC;AAAA,IAC5G;AACA,UAAM,mBAAmB,iBAAiB,SAAS,cAAc,KAAK;AACtE,QAAI,eAAe;AACjB,WAAK,UAAU,UAAU,IAAI,MAAM;AACnC,YAAM,SAAS,SAAS,cAAc,EAAE;AACxC,uBAAiB,OAAO,MAAM;AAC9B,WAAK,mBAAmB;AAAA,QACtB,IAAI;AAAA,QAAkB;AAAA,QACtB,SAAS,iBAAiB,MAAM;AAAA,QAChC,UAAU,iBAAiB,MAAM,oBAAoB,SAAS;AAAA,QAC9D,QAAQ,iBAAiB,aAAa,QAAQ;AAAA,QAC9C,cAAc,iBAAiB,UAAU,SAAS,iBAAiB;AAAA,MACrE;AACA,uBAAiB,gBAAgB,QAAQ;AAAA,IAC3C;AACA,qBAAiB,MAAM,UAAU;AACjC,qBAAiB,UAAU,IAAI,iBAAiB;AAChD,SAAK,mBAAmB,gBAAgB;AACxC,SAAK,UAAU,YAAY,gBAAgB;AAC3C,UAAM,WAAW,KAAK,EAAE,EAAE,YAAY,KAAK,SAAS;AAAA,EACtD;AAAA,EAEA,mBAAmB,kBAA+B;AAChD,QAAI,KAAK,iBAAkB;AAC3B,qBAAiB,YAAY,KAAK,QAAQ;AAAA,EAC5C;AAAA,EAEA,wBAAwB;AACtB,SAAK,mBAAmB,KAAK,UAAU,cAAc,kBAAkB,CAAC;AAAA,EAC1E;AAAA,EAEA,sBAAsB;AACpB,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,UAAM,UAAU,EAAE,SAAS,MAAM,OAAO;AACxC,eAAW,MAAM,CAAC,KAAK,IAAI,KAAK,SAAS,GAAG;AAC1C,SAAG,iBAAiB,cAAc,KAAK,mBAAmB,EAAE,OAAO,CAAC;AACpE,SAAG,iBAAiB,cAAc,KAAK,mBAAmB,EAAE,OAAO,CAAC;AACpE,SAAG,iBAAiB,SAAS,KAAK,cAAc,OAAO;AACvD,SAAG,iBAAiB,QAAQ,KAAK,aAAa,OAAO;AAAA,IACvD;AACA,SAAK,GAAG,iBAAiB,gBAAgB,KAAK,qBAAqB,EAAE,OAAO,CAAC;AAC7E,SAAK,GAAG,iBAAiB,eAAe,KAAK,oBAAoB,EAAE,OAAO,CAAC;AAC3E,SAAK,GAAG,iBAAiB,aAAa,KAAK,mBAAmB,EAAE,OAAO,CAAC;AACxE,SAAK,GAAG,iBAAiB,iBAAiB,KAAK,sBAAsB,EAAE,OAAO,CAAC;AAC/E,SAAK,GAAG,iBAAiB,SAAS,KAAK,cAAc,OAAO;AAC5D,SAAK,UAAU,iBAAiB,SAAS,KAAK,qBAAqB,OAAO;AAAA,EAC5E;AAAA;AAAA,EA8CQ,WAAW;AACjB,SAAK,KAAK;AACV,iBAAa,KAAK,kBAAkB;AACpC,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA,EAGQ,WAAW;AACjB,SAAK,MAAM;AACX,iBAAa,KAAK,iBAAiB;AACnC,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,uBAAuB;AACrB,iBAAa,KAAK,iBAAiB;AACnC,SAAK,oBAAoB,WAAW,MAAM;AACxC,UAAI,KAAK,aAAa,KAAK,UAAW;AACtC,WAAK,YAAY;AAAA,IACnB,GAAG,KAAK,QAAQ,SAAS;AAAA,EAC3B;AAAA,EAEA,sBAAsB,UAAyB;AAC7C,iBAAa,KAAK,kBAAkB;AACpC,UAAM,YAAY,cAAc,KAAK,IAAI,CAAC;AAC1C,SAAK,qBAAqB,WAAW,MAAM;AACzC,UAAI,CAAC,KAAK,aAAa,CAAC,KAAK,aAAa,CAAC,SAAU;AACrD,WAAK,WAAW;AAAA,IAClB,GAAG,YAAY,IAAI,KAAK,QAAQ,UAAU;AAAA,EAC5C;AAAA,EAEA,mBAAmB;AACjB,UAAM,UAAuB,KAAK;AAClC,UAAM,SAAS,KAAK,IAClB,eAAe,OAAO,cACtB,cAAc,OAAO,aACrB,gBAAgB,QAAQ,cACxB,eAAe,QAAQ,aACvB,SAAS,KAAK,QAAQ;AAExB,SAAK,YAAY;AACjB,SAAK,YAAY;AAEjB,UAAM,aAAa,OAAO,sBAAsB;AAChD,QAAI,YAAY,WAAW,MAAM,OAAO;AACxC,QAAI,aAAa,WAAW,OAAO,OAAO;AAC1C,QAAI,KAAK,QAAQ,aAAa,OAAO;AACnC,mBAAa,CAAC,gBAAgB;AAC9B,oBAAc,cAAc,IAAI,eAAe;AAC/C,WAAK,YAAY,CAAC,KAAK,QAAQ;AAAA,IACjC,WAAW,KAAK,QAAQ,aAAa,SAAS;AAC5C,mBAAa,eAAe,IAAI,gBAAgB;AAChD,oBAAc,cAAc;AAC5B,WAAK,YAAY,KAAK,QAAQ;AAAA,IAChC,WAAW,KAAK,QAAQ,aAAa,QAAQ;AAC3C,mBAAa,eAAe,IAAI,gBAAgB;AAChD,oBAAc,CAAC,eAAe;AAC9B,WAAK,YAAY,CAAC,KAAK,QAAQ;AAAA,IACjC,OAAO;AACL,mBAAa,eAAe;AAC5B,oBAAc,cAAc,IAAI,eAAe;AAC/C,WAAK,YAAY,KAAK,QAAQ;AAAA,IAChC;AAEA,UAAM,iBAAiB,MAAM;AAAA,MAC3B;AAAA,MAAY;AAAA,MAAW;AAAA,MAAc;AAAA,MAAe;AAAA,MAAQ,KAAK,QAAQ;AAAA,MAAoB;AAAA,IAC/F;AAEA,YAAQ,MAAM,YAAY,gCAAgC,GAAG,KAAK,IAAI,GAAG,MAAM,IAAI,KAAK,IAAI,KAAK,QAAQ,kBAAkB,CAAC,IAAI;AAChI,UAAM,qBAAqB,SAAS,cAAc;AAAA,EACpD;AAAA,EAEA,SAAS;AACP,QAAI,gBAAiB,MAAK,eAAe;AAAA,QACpC,MAAK,iBAAiB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,iBAAiB;AACf,UAAM,CAAC,MAAM,SAAS,IAAI,iBAAiB,KAAK,QAAQ,QAAQ,KAAK,iBAAiB;AACtF,UAAM,OAAO,KAAK,KAAK,UAAU,EAAE;AACnC,SAAK,YAAY;AACjB,SAAK,YAAY;AACjB,UAAM,cAAc,KAAK,IAAI,MAAM,IAAI;AACvC,UAAM,QAAQ,KAAK,UAAU;AAC7B,UAAM,WAAW;AACjB,UAAM,QAAQ;AACd,UAAM,SAAS,GAAG,KAAK,IAAI,GAAG,KAAK,QAAQ,MAAM,IAAI,KAAK,IAAI,KAAK,QAAQ,kBAAkB,CAAC;AAC9F,UAAM,YAAY,mBAAmB,IAAI;AACzC,UAAM,YAAY,iBAAiB,IAAI;AACvC,UAAM,YAAY,WAAW,eAAe;AAC5C,UAAM,YAAY,0BAA0B,yBAAyB;AAAA,EACvE;AAAA,EAEA,aAAa;AAAE,SAAK,SAAS,IAAI;AAAA,EAAG;AAAA,EAEpC,cAAc;AAAE,SAAK,SAAS,KAAK;AAAA,EAAG;AAAA,EAEtC,SAAS,MAAe;AACtB,UAAM,QAAQ,KAAK,UAAU;AAC7B,UAAM,SAAS,KAAK,GAAG,cAAc,YAAY,WAAW,kCAAkC,EAAE;AAChG,UAAM,WAAW,SAAS,IAAI,OAAO,KAAK,QAAQ,aAAa,KAAK,QAAQ;AAC5E,QAAI,MAAM;AACR,WAAK,OAAO;AACZ,YAAM,aAAa;AACnB,YAAM,WAAW;AAAA,IACnB;AACA,UAAM,aAAa,aAAa,QAAQ,wBAAwB,QAAQ;AACxE,iBAAa,KAAK,iBAAiB;AACnC,SAAK,oBAAoB,WAAW,MAAM;AACxC,YAAM,YAAY,QAAQ,CAAC,SAAS,cAAc,KAAK,SAAS,kBAAkB,KAAK,SAAS,QAAQ;AACxG,YAAM,UAAU,QAAQ,KAAK,QAAQ,WAAW,GAAG,SAAS,IAAI;AAChE,UAAI,CAAC,KAAM,MAAK,oBAAoB,WAAW,MAAM;AACnD,cAAM,aAAa;AACnB,cAAM,WAAW;AAAA,MACnB,GAAG,QAAQ;AAAA,IACb,GAAG,CAAC;AACJ,SAAK,aAAa,IAAI;AAAA,EACxB;AAAA,EAEQ,aAAa,MAAe;AAClC,QAAI,SAAS,KAAK,OAAQ;AAC1B,SAAK,SAAS;AACd,SAAK,QAAQ,OAAO,SAAS,OAAO;AAAA,EACtC;AAAA;AAAA,EAWQ,SAAS,GAAiB;AAChC,QAAI,EAAE,gBAAgB,QAAS,QAAO;AACtC,SAAK,aAAa,YAAY,IAAI;AAClC,WAAO;AAAA,EACT;AAAA;AAAA,EAGQ,WAAW,GAAiB;AAClC,WAAO,CAAC,KAAK,QAAQ,eAAe,KAAK,SAAS,CAAC;AAAA,EACrD;AAAA;AAAA,EAgDQ,QAAQ,GAAe;AAC7B,SAAK,eAAe;AACpB,QAAI,KAAK,OAAQ,MAAK,SAAS;AAAA,QAC1B,MAAK,SAAS;AAAA,EACrB;AAAA;AAAA,EA0BQ,OAAO,MAAmB;AAChC,WAAO,CAAC,CAAC,SAAS,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,UAAU,SAAS,IAAI;AAAA,EAC1E;AAAA;AAAA;AAAA,EAwCQ,kBAAkB,MAAmB;AAC3C,QAAI,SAAS,KAAK,UAAU,KAAK,QAAS,MAAK,SAAS;AAAA,EAC1D;AAAA,EAEA,uBAAgD;AAC9C,UAAM,mBAA4C,CAAC;AACnD,UAAM,oBAAoB,KAAK,GAAG,aAAa,cAAc;AAC7D,UAAM,YAAY,KAAK,GAAG,aAAa,iBAAiB;AACxD,UAAM,iBAAiB,KAAK,GAAG,aAAa,eAAe;AAC3D,QAAI,mBAAmB;AACrB,uBAAiB,OAAO;AAAA,IAC1B;AACA,QAAI,gBAAgB;AAClB,uBAAiB,WAAW;AAAA,IAC9B;AACA,QAAI,WAAW;AACb,uBAAiB,YAAY;AAAA,IAC/B;AAEA,WAAO;AAAA,EACT;AACF;AApea,QA4DJ,MAAM;",
+  "names": []
+}

package/dist/js/chunks/{chunk-S23RJ3XY.mjs → chunk-RKG2CBFE.mjs}

@@ -1,7 +1,7 @@
 import {
   LineChart,
-  numberFormat
-} from "./chunk-ZM3XBHWV.mjs";
+  percentLabel
+} from "./chunk-IQOTGGHX.mjs";
 
 // src/ts/components/funnelChart.ts
 function widths(values) {
@@ -34,17 +34,6 @@ var FunnelChart = class extends LineChart {
     super._read();
     for (const series of this.series) series.color = "1";
   }
-  show(index) {
-    if (!this._tooltip || index === this.activeIndex) return;
-    super.show(index);
-    this._addShare(index);
-  }
-  /** Writes a row's share after its first value in the tooltip. */
-  _addShare(index) {
-    const share = this._share(index);
-    const text = this._tooltip.querySelector("span:nth-of-type(2)");
-    if (share && text) text.textContent += ` (${share})`;
-  }
   /**
    * A row's value as a percentage of the first row's, in whole percentages
    * with a tenth below 10%, or '' when either row has no stage.
@@ -53,8 +42,7 @@ var FunnelChart = class extends LineChart {
     const values = this.series[0].values;
     const [first, value] = [values[0], values[index]];
     if (!(first > 0 && value > 0)) return "";
-    const share = value / first;
-    return numberFormat(this.el, { style: "percent", maximumFractionDigits: share < 0.1 ? 1 : 0 }).format(share);
+    return percentLabel(this.el, value / first);
   }
   /** A funnel has one series of stages, so it has no legend. */
   _legend() {
@@ -83,4 +71,4 @@ FunnelChart.key = "Expressive_FunnelChart";
 export {
   FunnelChart
 };
-//# sourceMappingURL=chunk-S23RJ3XY.mjs.map
+//# sourceMappingURL=chunk-RKG2CBFE.mjs.map

package/dist/js/chunks/chunk-RKG2CBFE.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/funnelChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, percentLabel } from './lineChart';\n\nexport type FunnelChartOptions = LineChartOptions;\n\n/**\n * Each value's stage width as a percentage of the largest value, or null\n * for a row with no stage: a gap, zero or a negative value.\n */\nfunction widths(values: (number | null)[]): (number | null)[] {\n  const largest = values.reduce<number>((max, value) => Math.max(max, value ?? 0), 0);\n  return values.map((value) => (value! > 0 ? (value! / largest) * 100 : null));\n}\n\n/** A stage `width` percent of the plot wide, which grows from `from` percent. */\nfunction stage(width: number, from: number | null | undefined) {\n  const span = document.createElement('span');\n  span.dataset.series = '1';\n  span.style.setProperty('--width', String(width));\n  if (from != null) span.style.setProperty('--from-width', String(from));\n  return span;\n}\n\n/**\n * Funnel chart. It reads its <table> like LineChart, but draws each row of\n * the first value column as a stage, top to bottom in table order, as wide\n * as its value against the largest one and centered on the plot. Further\n * columns show in the tooltip, which also gives each stage's value as a\n * percentage of the first row's. The up and down arrows move the tooltip\n * between rows.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class FunnelChart extends LineChart {\n  protected get _type() {\n    return 'funnel-chart';\n  }\n\n  protected get _horizontal() {\n    return true;\n  }\n\n  /** A funnel has no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  static key = 'Expressive_FunnelChart';\n\n  /** Every stage is the first series' color, so the tooltip's swatches all match it. */\n  protected _read() {\n    super._read();\n    for (const series of this.series) series.color = '1';\n  }\n\n  /**\n   * A row's value as a percentage of the first row's, in whole percentages\n   * with a tenth below 10%, or '' when either row has no stage.\n   */\n  protected _share(index: number) {\n    const values = this.series[0].values;\n    const [first, value] = [values[0], values[index]];\n    if (!(first! > 0 && value! > 0)) return '';\n    return percentLabel(this.el, value! / first!);\n  }\n\n  /** A funnel has one series of stages, so it has no legend. */\n  protected _legend(): Element[] {\n    return [];\n  }\n\n  /**\n   * A row per table row, holding its stage. After update(), each stage\n   * starts from its old width, which CSS reads as --from-width.\n   */\n  protected _draw(): Element {\n    const stages = document.createElement('div');\n    stages.className = 'funnel-chart-stages';\n    stages.setAttribute('aria-hidden', 'true');\n    this._plot.style.setProperty('--rows', String(this.labels.length));\n    const was = widths(this._before[0]?.values ?? []);\n    widths(this.series[0].values).forEach((width, i) => {\n      const row = document.createElement('div');\n      if (width !== null) row.append(stage(width, was[i]));\n      stages.append(row);\n    });\n    return stages;\n  }\n}\n"],
+  "mappings": ";;;;;;AAQA,SAAS,OAAO,QAA8C;AAC5D,QAAM,UAAU,OAAO,OAAe,CAAC,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,CAAC,GAAG,CAAC;AAClF,SAAO,OAAO,IAAI,CAAC,UAAW,QAAS,IAAK,QAAS,UAAW,MAAM,IAAK;AAC7E;AAGA,SAAS,MAAM,OAAe,MAAiC;AAC7D,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,QAAQ,SAAS;AACtB,OAAK,MAAM,YAAY,WAAW,OAAO,KAAK,CAAC;AAC/C,MAAI,QAAQ,KAAM,MAAK,MAAM,YAAY,gBAAgB,OAAO,IAAI,CAAC;AACrE,SAAO;AACT;AAaO,IAAM,cAAN,cAA0B,UAAU;AAAA,EACzC,IAAc,QAAQ;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,cAAc;AAC1B,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,IAAc,QAAQ;AACpB,WAAO;AAAA,EACT;AAAA,EAEA,IAAc,UAAU;AACtB,WAAO;AAAA,EACT;AAAA;AAAA,EAKU,QAAQ;AAChB,UAAM,MAAM;AACZ,eAAW,UAAU,KAAK,OAAQ,QAAO,QAAQ;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMU,OAAO,OAAe;AAC9B,UAAM,SAAS,KAAK,OAAO,CAAC,EAAE;AAC9B,UAAM,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,OAAO,KAAK,CAAC;AAChD,QAAI,EAAE,QAAS,KAAK,QAAS,GAAI,QAAO;AACxC,WAAO,aAAa,KAAK,IAAI,QAAS,KAAM;AAAA,EAC9C;AAAA;AAAA,EAGU,UAAqB;AAC7B,WAAO,CAAC;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMU,QAAiB;AACzB,UAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,WAAO,YAAY;AACnB,WAAO,aAAa,eAAe,MAAM;AACzC,SAAK,MAAM,MAAM,YAAY,UAAU,OAAO,KAAK,OAAO,MAAM,CAAC;AACjE,UAAM,MAAM,OAAO,KAAK,QAAQ,CAAC,GAAG,UAAU,CAAC,CAAC;AAChD,WAAO,KAAK,OAAO,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,OAAO,MAAM;AAClD,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,UAAU,KAAM,KAAI,OAAO,MAAM,OAAO,IAAI,CAAC,CAAC,CAAC;AACnD,aAAO,OAAO,GAAG;AAAA,IACnB,CAAC;AACD,WAAO;AAAA,EACT;AACF;AA3Da,YAkBJ,MAAM;",
+  "names": []
+}

package/dist/js/chunks/{chunk-6FSEUFVW.mjs → chunk-RSNS5OYS.mjs}

@@ -1,16 +1,16 @@
 import {
   LineChart,
-  polarPoint
-} from "./chunk-ZM3XBHWV.mjs";
+  polarPoint,
+  splitRuns
+} from "./chunk-IQOTGGHX.mjs";
 import {
   svgNode
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/radarChart.ts
 var RINGS = 4;
 function runs(values) {
-  const list = [[]];
-  values.forEach((value, i) => value === null ? list.push([]) : list[list.length - 1].push(i));
+  const list = splitRuns(values);
   if (list.length > 1) list[0] = [...list.pop(), ...list[0]];
   return list.filter((run) => run.length);
 }
@@ -113,4 +113,4 @@ RadarChart.key = "Expressive_RadarChart";
 export {
   RadarChart
 };
-//# sourceMappingURL=chunk-6FSEUFVW.mjs.map
+//# sourceMappingURL=chunk-RSNS5OYS.mjs.map

package/dist/js/chunks/chunk-RSNS5OYS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/radarChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, polarPoint, Series, splitRuns } from './lineChart';\nimport { svgNode as node } from '../core/utils';\n\nexport type RadarChartOptions = LineChartOptions;\n\n/** Grid rings, evenly spaced from the middle to the rim. */\nconst RINGS = 4;\n\n/**\n * A series' rows split at its gaps into runs, the last carrying on round\n * past the top spoke into the first.\n */\nfunction runs(values: (number | null)[]) {\n  const list = splitRuns(values);\n  if (list.length > 1) list[0] = [...list.pop()!, ...list[0]];\n  return list.filter((run) => run.length);\n}\n\n// A run of corners as a path: closed round a whole shape; open where a gap\n// breaks it, a dot for a lone corner; and filled as a wedge from the middle.\nconst closed = (corners: string[]) => `M${corners.join('L')}Z`;\nconst open = (corners: string[]) => `M${corners.join('L')}${corners.length > 1 ? '' : 'h0'}`;\nconst wedge = (corners: string[]) => `M0,0L${corners.join('L')}Z`;\n\n/**\n * Radar chart. It reads its <table> like LineChart, but each row is a spoke,\n * clockwise from the top, and each value column is a series drawn as a\n * shape joining its values on the spokes, from zero in the middle to the\n * scale's top at the rim. The row labels sit round the rim.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class RadarChart extends LineChart {\n  protected get _type() {\n    return 'radar-chart';\n  }\n\n  /** The scale starts at zero, the middle, so shapes compare by size. */\n  protected get _fromZero() {\n    return true;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  static key = 'Expressive_RadarChart';\n\n  /**\n   * The cursor is a spoke turned by --turn, and the tooltip sits past its\n   * tip. LineChart's points on the spoke keep their top, a share of the\n   * radius, which stops at the rim and the middle like the shapes.\n   */\n  protected _place(index: number) {\n    for (const dot of this._cursor.children as HTMLCollectionOf<HTMLElement>) {\n      dot.style.top = `${Math.min(100, Math.max(0, parseFloat(dot.style.top)))}%`;\n    }\n    const turn = this._turn(index);\n    this._cursor.style.setProperty('--turn', String(turn));\n    this._tooltip.style.setProperty('--turn', String(turn));\n    // On the right half it opens leftwards, over the chart.\n    this._tooltip.classList.toggle('end', turn > 0 && turn < 0.5);\n  }\n\n  /** A row's spoke as a fraction of a turn clockwise from the top. */\n  private _turn(index: number) {\n    return index / this.labels.length;\n  }\n\n  /** Only the legend; the labels go round the rim in _draw. */\n  protected _guides(): Element[] {\n    return this._legend();\n  }\n\n  /** The nearest spoke to the pointer, by its angle from the middle. */\n  protected _indexAt(e: PointerEvent) {\n    const [turn] = this._polarAt(e);\n    return Math.round(turn * this.labels.length) % this.labels.length;\n  }\n\n  /** The grid rings' shares of the radius: one per .axis label above zero, or quarters. */\n  private _rings(share: (value: number) => number) {\n    if (!this._axis) return Array.from({ length: RINGS }, (_, r) => (r + 1) / RINGS);\n    return this.series[0].scale.ticks.filter((tick) => tick > 0).map(share);\n  }\n\n  /**\n   * One series' group: its outline, broken at a gap like a line chart's,\n   * its .area fill and its .points.\n   */\n  private _series(series: Series, corner: (index: number) => string) {\n    const group = node('g', {\n      class: `radar-chart-series ${series.className}`.trim(),\n      'data-series': series.color\n    });\n    const lines = runs(series.values).map((run) => run.map(corner));\n    const [outline, fill] = series.values.includes(null) ? [open, wedge] : [closed, closed];\n    group.append(node('path', { class: 'radar-chart-shape', d: lines.map(outline).join('') }));\n    const list = this.el.classList;\n    if (list.contains('area')) group.append(node('path', { class: 'radar-chart-area', d: lines.map(fill).join('') }));\n    // Round caps on zero-length lines, so CSS sizes the points in pixels.\n    if (list.contains('points')) group.append(node('path', { class: 'radar-chart-points', d: lines.flat().map((c) => `M${c}h0`).join('') }));\n    return group;\n  }\n\n  /**\n   * An SVG in a -50 to 50 box: the rings and spokes of the grid, then each\n   * series' shape, with its points for .points. The rim is the box's edge;\n   * the labels round it are HTML.\n   */\n  protected _draw(): Element {\n    const at = (index: number, share: number) => polarPoint(this._turn(index), 50 * share);\n    // The rim is the scale's top, so _y is the distance in from the rim.\n    const share = (value: number) => Math.min(1, Math.max(0, 1 - this._y(value) / 100));\n    const rows = this.labels.map((_, i) => i);\n    const ring = (r: number) => `M${rows.map((i) => at(i, r)).join('L')}Z`;\n\n    const svg = node('svg', { viewBox: '-50 -50 100 100', 'aria-hidden': 'true', focusable: 'false' });\n    svg.append(node('path', {\n      class: 'radar-chart-grid',\n      d: this._rings(share).map(ring).join('')\n        + rows.map((i) => `M0,0L${at(i, 1)}`).join('')\n    }));\n    this.series.forEach((series) => svg.append(this._series(series, (i) => at(i, share(series.values[i]!)))));\n\n    const labels = document.createElement('ol');\n    labels.className = 'radar-chart-axes';\n    labels.setAttribute('aria-hidden', 'true');\n    this.labels.forEach((text, i) => {\n      const li = document.createElement('li');\n      li.textContent = text;\n      li.style.setProperty('--turn', String(this._turn(i)));\n      labels.append(li);\n    });\n\n    const web = document.createElement('div');\n    web.className = 'radar-chart-web';\n    web.append(svg, labels);\n    return web;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["share"]
+}

package/dist/js/chunks/{chunk-ROH2HDB4.mjs → chunk-RUDYMEJ3.mjs}

@@ -1,6 +1,6 @@
 import {
   installSheetDrag
-} from "./chunk-JUKBBN6P.mjs";
+} from "./chunk-YLZOJLDI.mjs";
 
 // src/ts/behaviors/sideSheets.ts
 var startDocked = (dialog) => dialog.classList.contains("start");
@@ -26,4 +26,4 @@ var SideSheets = class {
 export {
   SideSheets
 };
-//# sourceMappingURL=chunk-ROH2HDB4.mjs.map
+//# sourceMappingURL=chunk-RUDYMEJ3.mjs.map

package/dist/js/chunks/{chunk-BIGU5RCJ.mjs → chunk-STJR62SU.mjs}

@@ -1,9 +1,9 @@
 import {
   Component
-} from "./chunk-CMGXGYUC.mjs";
+} from "./chunk-EB2V4OKL.mjs";
 import {
   Utils
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/hoverCard.ts
 var _defaults = {
@@ -57,7 +57,14 @@ var HoverCard = class extends Component {
     this._handleLinkFocus = () => {
       if (this.el.matches(":focus-visible")) this._hold("focus");
     };
-    this._handleCardFocus = () => this._hold("focus");
+    // Links can share a card, and each listens on it. Only the link showing the
+    // card is held by it; the others would take the card away after enterDelay.
+    this._handleCardEnter = (e) => {
+      if (this._shown) this._handlePointerEnter(e);
+    };
+    this._handleCardFocus = () => {
+      if (this._shown) this._hold("focus");
+    };
     this._handleFocusOut = (e) => {
       const next = e.relatedTarget;
       if (!next || !(this.el.contains(next) || this.cardEl.contains(next))) this._release("focus");
@@ -84,10 +91,11 @@ var HoverCard = class extends Component {
     const { signal } = this._events;
     this.cardEl.addEventListener("toggle", this._handleToggle, { signal });
     for (const target of [this.el, this.cardEl]) {
-      target.addEventListener("pointerenter", this._handlePointerEnter, { signal });
       target.addEventListener("pointerleave", this._handlePointerLeave, { signal });
       target.addEventListener("focusout", this._handleFocusOut, { signal });
     }
+    this.el.addEventListener("pointerenter", this._handlePointerEnter, { signal });
+    this.cardEl.addEventListener("pointerenter", this._handleCardEnter, { signal });
     this.el.addEventListener("focus", this._handleLinkFocus, { signal });
     this.cardEl.addEventListener("focusin", this._handleCardFocus, { signal });
   }
@@ -150,4 +158,4 @@ HoverCard.key = "Expressive_HoverCard";
 export {
   HoverCard
 };
-//# sourceMappingURL=chunk-BIGU5RCJ.mjs.map
+//# sourceMappingURL=chunk-STJR62SU.mjs.map

package/dist/js/chunks/chunk-STJR62SU.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/hoverCard.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions } from '../core/component';\n\nexport interface HoverCardOptions extends BaseOptions {\n  /**\n   * How long the pointer or keyboard focus rests on the link before the card shows.\n   * @default 500\n   */\n  enterDelay: number;\n  /**\n   * How long the card stays after the pointer and focus leave the link and the card.\n   * @default 300\n   */\n  exitDelay: number;\n}\n\nconst _defaults: HoverCardOptions = {\n  enterDelay: 500,\n  exitDelay: 300\n};\n\n// Links can share one card, such as a name mentioned twice; the link that\n// last showed it owns it, and the next one takes it over.\nconst owners = new WeakMap<HTMLElement, HoverCard>();\n\n/**\n * Hover card. A `.hover-card-trigger` link names its card, a `.popover` with\n * `popover=\"hint\"`, in `aria-details`. The card shows against the link after\n * `enterDelay` and stays while the pointer or focus is on either.\n */\nexport class HoverCard extends Component<HoverCardOptions> {\n  /** The card the link's `aria-details` names, or null when it names none. */\n  cardEl: HTMLElement | null;\n  /** Whether the instance has the card showing. */\n  private _shown = false;\n  /** What keeps the card wanted: the pointer, keyboard focus, or both. */\n  private _holds = new Set<'pointer' | 'focus'>();\n  private _timeout: ReturnType<typeof setTimeout>;\n  /** The anchor name the card is placed against while this link shows it. */\n  private _anchorName = `--hover-card-${Utils.guid()}`;\n\n  constructor(el: HTMLElement, options: Partial<HoverCardOptions>) {\n    super(el, options);\n    this.cardEl = Utils.getElementById(el, el.getAttribute('aria-details') ?? '');\n    if (!this.cardEl) {\n      console.error(`HoverCard: aria-details names no element; the link shows no card.`);\n      return;\n    }\n    // The browser hides a hint card itself on a click elsewhere, on Escape\n    // and when another hint opens.\n    const { signal } = this._events;\n    this.cardEl.addEventListener('toggle', this._handleToggle, { signal });\n    for (const target of [this.el, this.cardEl]) {\n      target.addEventListener('pointerleave', this._handlePointerLeave, { signal });\n      target.addEventListener('focusout', this._handleFocusOut, { signal });\n    }\n    this.el.addEventListener('pointerenter', this._handlePointerEnter, { signal });\n    this.cardEl.addEventListener('pointerenter', this._handleCardEnter, { signal });\n    this.el.addEventListener('focus', this._handleLinkFocus, { signal });\n    this.cardEl.addEventListener('focusin', this._handleCardFocus, { signal });\n  }\n\n  static get defaults(): HoverCardOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_HoverCard';\n\n  destroy() {\n    clearTimeout(this._timeout);\n    if (this._shown) {\n      this.cardEl.hidePopover();\n      this._hidden();\n    }\n    super.destroy();\n  }\n\n  /**\n   * Show the card now, without enterDelay.\n   */\n  open = () => {\n    clearTimeout(this._timeout);\n    if (!this.cardEl || this._shown) return;\n    owners.get(this.cardEl)?.close();\n    // `source` makes the link the card's anchor and invoker, so Tab moves from\n    // the link into the card. It throws for a card without the popover\n    // attribute, before any state changes.\n    (this.cardEl.showPopover as (options?: { source?: Element }) => void).call(this.cardEl, { source: this.el });\n    owners.set(this.cardEl, this);\n    this._shown = true;\n    this._listenForEscape(true);\n    this._anchor(true);\n    this._notify('open');\n  };\n\n  /**\n   * Hide the card now, without exitDelay.\n   */\n  close = () => {\n    clearTimeout(this._timeout);\n    if (!this._shown) return;\n    this.cardEl.hidePopover();\n    this._hidden();\n    this._notify('close');\n  };\n\n  private _hidden() {\n    this._shown = false;\n    this._listenForEscape(false);\n    this._anchor(false);\n  }\n\n  // `source` anchors the card too, but Firefox keeps the first source's\n  // anchor for good, so a card two links share would stay at the first. A\n  // named anchor, set only while the card shows, follows the link that shows it.\n  private _anchor(on: boolean) {\n    Utils.setAnchorName(this.el, this._anchorName, on);\n    if (on) this.cardEl.style.setProperty('position-anchor', this._anchorName);\n    else this.cardEl.style.removeProperty('position-anchor');\n    for (const el of [this.el, this.cardEl]) if (!el.getAttribute('style')) el.removeAttribute('style');\n  }\n\n  /** Wanted cards show after enterDelay; once nothing holds the card, it hides after exitDelay. */\n  private _schedule() {\n    clearTimeout(this._timeout);\n    const wanted = this._holds.size > 0;\n    if (wanted === this._shown) return;\n    const [change, delay] = wanted ? [this.open, this.options.enterDelay] as const : [this.close, this.options.exitDelay] as const;\n    this._timeout = setTimeout(change, delay);\n  }\n\n  private _hold(by: 'pointer' | 'focus') {\n    this._holds.add(by);\n    this._schedule();\n  }\n\n  private _release(by: 'pointer' | 'focus') {\n    this._holds.delete(by);\n    this._schedule();\n  }\n\n  // A touch is a tap that follows the link, never a hover; pointer events\n  // say so, and the mouse events a tap sends afterwards are not listened to.\n  private _handlePointerEnter = (e: PointerEvent) => {\n    if (e.pointerType !== 'touch') this._hold('pointer');\n  };\n\n  private _handlePointerLeave = (e: PointerEvent) => {\n    if (e.pointerType !== 'touch') this._release('pointer');\n  };\n\n  // A pointer press also focuses the link, and the hover already covers it,\n  // so only keyboard focus holds the card from the link.\n  private _handleLinkFocus = () => {\n    if (this.el.matches(':focus-visible')) this._hold('focus');\n  };\n\n  // Links can share a card, and each listens on it. Only the link showing the\n  // card is held by it; the others would take the card away after enterDelay.\n  private _handleCardEnter = (e: PointerEvent) => {\n    if (this._shown) this._handlePointerEnter(e);\n  };\n\n  private _handleCardFocus = () => {\n    if (this._shown) this._hold('focus');\n  };\n\n  private _handleFocusOut = (e: FocusEvent) => {\n    const next = e.relatedTarget as Node | null;\n    if (!next || !(this.el.contains(next) || this.cardEl.contains(next))) this._release('focus');\n  };\n\n  /** Escape is listened for only while the card shows. close() removes it, and destroy() through the signal. */\n  private _listenForEscape(on: boolean) {\n    const doc = this.el.ownerDocument;\n    if (on) doc.addEventListener('keydown', this._handleKeydown, { capture: true, signal: this._events.signal });\n    else doc.removeEventListener('keydown', this._handleKeydown, true);\n  }\n\n  // Escape always hides the card, but it is only the card's key when focus is\n  // on the link or in the card; otherwise it still reaches the dialog or menu\n  // that has focus. An engine that does not know popover=\"hint\" treats the\n  // card as manual, which Escape would not close.\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key !== 'Escape' || Utils.isComposing(e)) return;\n    if (Utils.focusIsIn(this.el, this.cardEl)) this._takeEscape(e);\n    this.close();\n  };\n\n  /** Keeps Escape from the page and, when focus is in the card, takes it back to the link before the card hides. */\n  private _takeEscape(e: KeyboardEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    if (Utils.focusIsIn(this.cardEl)) this.el.focus();\n  }\n\n  private _handleToggle = (e: Event) => {\n    if ((e as ToggleEvent).newState !== 'closed' || !this._shown) return;\n    this._hidden();\n    this._notify('close');\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-752ADW4M.mjs → chunk-SUSD4UTN.mjs}

@@ -2,19 +2,21 @@ import {
   LineChart,
   affix,
   cellValue,
+  linearKey,
   morph,
-  numberFormat,
   pace,
+  textSpan,
+  tickAxis,
+  tickFormat,
   tickText
-} from "./chunk-ZM3XBHWV.mjs";
+} from "./chunk-IQOTGGHX.mjs";
 import {
   svgNode
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/scatterChart.ts
 var dots = (marks) => marks.map(({ x, y }) => `M${x},${y}h0`).join("");
 var place = ({ row, series }) => `${row} ${series.column}`;
-var span = (text) => Object.assign(document.createElement("span"), { textContent: text });
 var ms = (time) => parseFloat(time) * (time.trim().endsWith("ms") ? 1 : 1e3);
 function sized(path, size, was, timing) {
   path.style.setProperty("--scatter-chart-size", `${size}`);
@@ -77,37 +79,41 @@ var ScatterChart = class extends LineChart {
     this._cursor.style.setProperty("--scatter-chart-size", `${size}`);
     for (const part of [this._cursor, this._tooltip]) Object.assign(part.style, { left: `${x}%`, top: `${y}%` });
     this._tooltip.classList.toggle("end", x > 50);
-    const [title, name] = [document.createElement("strong"), span(series.name)];
+    const [title, name] = [document.createElement("strong"), textSpan(series.name)];
     title.textContent = this.labels[row];
     name.dataset.series = series.color;
     const sizeText = this._bubble ? this._cellText(row, this._header.length - 1) : [];
-    this._tooltip.replaceChildren(title, ...this._cellText(row, 1), name, span(series.text[row]), ...sizeText);
+    this._tooltip.replaceChildren(title, ...this._cellText(row, 1), name, textSpan(series.text[row]), ...sizeText);
   }
   /** A column's header, without a swatch since it names no series, and the row's text in it. */
   _cellText(row, column) {
-    const header = span(this._header[column].textContent.trim());
+    const header = textSpan(this._header[column].textContent.trim());
     header.className = "x";
-    return [header, span(this._rows[row].cells[column]?.textContent.trim() ?? "")];
+    return [header, textSpan(this._rows[row].cells[column]?.textContent.trim() ?? "")];
   }
   /** The point nearest the pointer, or -1 with none. */
   _indexAt(e) {
     const [plot, box] = [this._plot, this._plot.getBoundingClientRect()];
-    const away = ({ x, y }) => Math.hypot(
-      box.left + plot.clientLeft + x / 100 * plot.clientWidth - e.clientX,
-      box.top + plot.clientTop + y / 100 * plot.clientHeight - e.clientY
-    );
-    return this._marks.reduce((nearest, mark, i) => nearest < 0 || away(mark) < away(this._marks[nearest]) ? i : nearest, -1);
+    const left = box.left + plot.clientLeft;
+    const top = box.top + plot.clientTop;
+    const [width, height] = [plot.clientWidth, plot.clientHeight];
+    let nearest = -1;
+    let distance = Infinity;
+    this._marks.forEach(({ x, y }, i) => {
+      const away = Math.hypot(left + x / 100 * width - e.clientX, top + y / 100 * height - e.clientY);
+      if (nearest < 0 || away < distance) {
+        nearest = i;
+        distance = away;
+      }
+    });
+    return nearest;
   }
   /**
    * Steps through the points in table order. The arrows keep their meaning
    * in a right-to-left chart, since table order is no direction on screen.
    */
   _keyTarget(key) {
-    if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
-    const last = this._marks.length - 1;
-    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[key];
-    if (step) return Math.min(last, Math.max(0, this.activeIndex + step));
-    return { Home: 0, End: last }[key];
+    return linearKey(key, this.activeIndex, this._marks.length - 1);
   }
   _read() {
     [this._drawn, this._marks] = [this._marks ?? [], []];
@@ -198,19 +204,8 @@ var ScatterChart = class extends LineChart {
     return this._axis ? [...super._axes(), this._xAxis()] : [];
   }
   _xAxis() {
-    const axis = document.createElement("ol");
-    axis.className = "scatter-chart-axis x";
-    axis.setAttribute("aria-hidden", "true");
-    const number = numberFormat(this.el, { notation: "compact", maximumSignificantDigits: 3 });
-    for (const tick of this._xFit.ticks) {
-      const li = document.createElement("li");
-      const label = document.createElement("span");
-      label.textContent = tickText(number, tick, this._xAffix);
-      li.style.setProperty("--at", `${this._xAt(tick)}%`);
-      li.append(label);
-      axis.append(li);
-    }
-    return axis;
+    const number = tickFormat(this.el, this._xFit.ticks);
+    return tickAxis("scatter-chart-axis x", this._xFit.ticks, (tick) => tickText(number, tick, this._xAffix), (tick) => this._xAt(tick));
   }
   /** The legend only: the rows have no labels along an axis. */
   _guides() {
@@ -222,4 +217,4 @@ ScatterChart.key = "Expressive_ScatterChart";
 export {
   ScatterChart
 };
-//# sourceMappingURL=chunk-752ADW4M.mjs.map
+//# sourceMappingURL=chunk-SUSD4UTN.mjs.map

package/dist/js/chunks/chunk-SUSD4UTN.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/scatterChart.ts"],
+  "sourcesContent": ["import { svgNode } from '../core/utils';\nimport { LineChart, LineChartOptions, ChartScale, Series, affix, cellValue, linearKey, morph, tickFormat, pace, textSpan as span, tickAxis, tickText } from './lineChart';\n\nexport interface ScatterChartOptions extends LineChartOptions {\n  /**\n   * Lowest value on the x axis. Defaults to the data minimum less 10% of\n   * the range. Overridden by `data-x-min` on the chart.\n   */\n  xMin: number | null;\n  /**\n   * Highest value on the x axis. Defaults to the data maximum plus 10% of\n   * the range. Overridden by `data-x-max` on the chart.\n   */\n  xMax: number | null;\n}\n\n/**\n * A drawn point: its row and series, where it sits in the plot, in percent,\n * and its diameter as a share of the largest bubble's.\n */\ninterface Mark {\n  row: number;\n  series: Series;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/** Points as path data: round caps on zero-length lines. */\nconst dots = (marks: Mark[]) => marks.map(({ x, y }) => `M${x},${y}h0`).join('');\n\n/** A point's row and series column, which update() matches old and new points by. */\nconst place = ({ row, series }: Mark) => `${row} ${series.column}`;\n\n/** A CSS time, such as 400ms or 0.4s, in milliseconds. */\nconst ms = (time: string) => parseFloat(time) * (time.trim().endsWith('ms') ? 1 : 1000);\n\n/**\n * Sizes a bubble, and with motion timing grows or shrinks it from its old\n * point's size. The Web Animations API, since SVG animation cannot reach a\n * size that CSS computes from a token.\n */\nfunction sized(path: SVGElement, size: number, was: Mark | undefined, timing: ReturnType<typeof pace>) {\n  path.style.setProperty('--scatter-chart-size', `${size}`);\n  if (!timing || !was || was.size === size) return;\n  path.animate({ '--scatter-chart-size': [`${was.size}`, `${size}`] }, { duration: ms(timing.dur), easing: `cubic-bezier(${timing.keySplines})` });\n}\n\n/**\n * Scatter chart. It reads its <table> like LineChart, but the first value\n * column is the x axis: each row draws one point per later column, at the\n * row's x value and that column's y value. A row without an x value, or a\n * cell without a y value, draws no point.\n *\n * With `.bubble`, the last column sizes each row's points, so their areas\n * follow its values, and a row without a positive size draws no point.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class ScatterChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's x value, or null. */\n  private _xs: (number | null)[];\n  /** Each row's size: 1 without .bubble, or the last cell's value, null unless positive. */\n  private _sizes: (number | null)[];\n  /** The x scale. */\n  private _xFit: ChartScale;\n  /** The signs around the x column's numbers, which its axis labels repeat. */\n  private _xAffix: [string, string];\n  /** The drawn points, row by row and within a row by series. */\n  private _marks: Mark[];\n  /** During update(), the points drawn before it, which the new ones move from. */\n  private _drawn: Mark[];\n\n  protected get _type() {\n    return 'scatter-chart';\n  }\n\n  protected get _seriesFrom() {\n    return 2;\n  }\n\n  protected get _seriesTo() {\n    return this._bubble ? -1 : undefined;\n  }\n\n  private get _bubble() {\n    return this.el.classList.contains('bubble');\n  }\n\n  static get defaults(): ScatterChartOptions {\n    return { ...LineChart.defaults, xMin: null, xMax: null };\n  }\n\n  static key = 'Expressive_ScatterChart';\n\n  /**\n   * Reads each row's x value into `_xs` and its size into `_sizes`, which\n   * the scales and the points use, and leaves out the values of rows\n   * without either, so they neither draw nor stretch a scale. Nothing stacks.\n   */\n  protected _arrange(series: Series[]) {\n    const xs = (this._xs = this._rows.map((row) => cellValue(row.cells[1])));\n    const sizes = (this._sizes = this._rows.map((row) => this._size(row)));\n    for (const each of series) {\n      each.values = each.tops = each.values.map((value, row) => (xs[row] === null || sizes[row] === null ? null : value));\n    }\n  }\n\n  /** A row's size: 1 without .bubble, or its last cell's value, null unless positive. */\n  private _size(row: HTMLTableRowElement) {\n    if (!this._bubble) return 1;\n    const size = cellValue(row.cells[this._header.length - 1]) ?? 0;\n    return size > 0 ? size : null;\n  }\n\n  protected get _count() {\n    return this._marks?.length ?? 0;\n  }\n\n  /** Highlights one point, numbered as `_marks` lists them. Pass -1 to hide the tooltip. */\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    this.activeIndex = index;\n    const mark = this._marks[index];\n    this._cursor.hidden = this._tooltip.hidden = !mark;\n    if (mark) this._fill(mark);\n  }\n\n  /**\n   * Puts the marker on a point, at a bubble's size, and fills the tooltip\n   * beside it: the row, its x header and text, the series and its text, and\n   * with .bubble the size header and text, as the author wrote them. Past\n   * the middle the tooltip opens back over the plot.\n   */\n  private _fill({ row, series, x, y, size }: Mark) {\n    this._cursor.dataset.series = series.color;\n    this._cursor.style.setProperty('--scatter-chart-size', `${size}`);\n    for (const part of [this._cursor, this._tooltip]) Object.assign(part.style, { left: `${x}%`, top: `${y}%` });\n    this._tooltip.classList.toggle('end', x > 50);\n    const [title, name] = [document.createElement('strong'), span(series.name)];\n    title.textContent = this.labels[row];\n    name.dataset.series = series.color;\n    const sizeText = this._bubble ? this._cellText(row, this._header.length - 1) : [];\n    this._tooltip.replaceChildren(title, ...this._cellText(row, 1), name, span(series.text[row]), ...sizeText);\n  }\n\n  /** A column's header, without a swatch since it names no series, and the row's text in it. */\n  private _cellText(row: number, column: number) {\n    const header = span(this._header[column].textContent.trim());\n    header.className = 'x';\n    return [header, span(this._rows[row].cells[column]?.textContent.trim() ?? '')];\n  }\n\n  /** The point nearest the pointer, or -1 with none. */\n  protected _indexAt(e: PointerEvent) {\n    const [plot, box] = [this._plot, this._plot.getBoundingClientRect()];\n    const left = box.left + plot.clientLeft;\n    const top = box.top + plot.clientTop;\n    const [width, height] = [plot.clientWidth, plot.clientHeight];\n    let nearest = -1;\n    let distance = Infinity;\n    this._marks.forEach(({ x, y }, i) => {\n      const away = Math.hypot(left + (x / 100) * width - e.clientX, top + (y / 100) * height - e.clientY);\n      if (nearest < 0 || away < distance) {\n        nearest = i;\n        distance = away;\n      }\n    });\n    return nearest;\n  }\n\n  /**\n   * Steps through the points in table order. The arrows keep their meaning\n   * in a right-to-left chart, since table order is no direction on screen.\n   */\n  protected _keyTarget(key: string): number | undefined {\n    return linearKey(key, this.activeIndex, this._marks.length - 1);\n  }\n\n  protected _read() {\n    [this._drawn, this._marks] = [this._marks ?? [], []];\n    super._read();\n    if (!this.series.length) return;\n    this._xFit = this._xScale();\n    this._xAffix = affix(this._rows.map((row) => row.cells[1]));\n  }\n\n  /** The x scale over the rows with a point, between `xMin` and `xMax` where they are set. */\n  private _xScale(): ChartScale {\n    const [low, high] = this._xRange();\n    const [min, max] = [this._xEnd('xMin'), this._xEnd('xMax')];\n    return this._fit(min ?? low, max ?? high, [min !== null, max !== null]);\n  }\n\n  /** The x values of the rows with a point, with 10% of their span to spare each side. */\n  private _xRange(): [number, number] {\n    const xs = this._xs.filter((_, row) => this._hasPoint(row)) as number[];\n    if (!xs.length) return [-1, 1];\n    const [low, high] = [xs.reduce((a, b) => Math.min(a, b)), xs.reduce((a, b) => Math.max(a, b))];\n    const pad = (high - low) * 0.1 || 1;\n    return [low - pad, high + pad];\n  }\n\n  /** An x scale end from its data attribute or option, or null. */\n  private _xEnd(name: 'xMin' | 'xMax') {\n    return this._number(name) ?? (this.options as Partial<ScatterChartOptions>)[name] ?? null;\n  }\n\n  /** A value's distance across the plot from its inline start, in percent. */\n  private _xAt(value: number) {\n    const { min, max } = this._xFit;\n    const x = ((value - min) / (max - min || 1)) * 100;\n    return this._reversed ? 100 - x : x;\n  }\n\n  /** Whether any series shown draws a point in a row. */\n  private _hasPoint(row: number) {\n    return this.series.some((series) => series.values[row] !== null);\n  }\n\n  /** The points, each diameter the square root of its row's share of the largest size drawn, so areas follow sizes. */\n  private _layout(): Mark[] {\n    const largest = this._sizes.reduce<number>((most, size, row) => (this._hasPoint(row) ? Math.max(most, size!) : most), 0);\n    return this.labels.flatMap((_, row) => this.series\n      .filter((series) => series.values[row] !== null)\n      .map((series) => ({\n        row,\n        series,\n        x: this._xAt(this._xs[row]!),\n        y: series.y(series.values[row]!),\n        size: Math.sqrt(this._sizes[row]! / largest)\n      })));\n  }\n\n  /** One group per series, its points round caps on zero-length lines, so CSS sizes them in pixels. */\n  protected _draw(): Element {\n    this._marks = this._layout();\n    const svg = svgNode('svg', {\n      viewBox: '0 0 100 100',\n      preserveAspectRatio: 'none',\n      'aria-hidden': 'true',\n      focusable: 'false'\n    });\n    const timing = this._before.length ? pace(this.el) : null;\n    const was = new Map(this._drawn.map((old) => [place(old), old]));\n    svg.append(...this.series.map((series) => this._group(series, timing, was)));\n    return svg;\n  }\n\n  /**\n   * A series' points, in one path, or with .bubble one path each, largest\n   * first so smaller bubbles stay on top.\n   */\n  private _group(series: Series, timing: ReturnType<typeof pace>, was: Map<string, Mark>) {\n    const group = svgNode('g', {\n      class: `scatter-chart-series ${series.className}`.trim(),\n      'data-series': series.color\n    });\n    const marks = this._marks.filter((mark) => mark.series === series);\n    const sets = this._bubble ? marks.sort((a, b) => b.size - a.size).map((mark) => [mark]) : [marks];\n    group.append(...sets.map((set) => this._pointPath(set, timing, was)));\n    return group;\n  }\n\n  /**\n   * A path of points. After update() each moves from where its row's point\n   * in the same column was drawn, or appears where it is.\n   */\n  private _pointPath(marks: Mark[], timing: ReturnType<typeof pace>, was: Map<string, Mark>) {\n    const path = svgNode('path', { class: 'scatter-chart-points', d: dots(marks) });\n    if (timing) morph(path, dots(marks.map((mark) => was.get(place(mark)) ?? mark)), timing);\n    if (this._bubble) sized(path, marks[0].size, was.get(place(marks[0])), timing);\n    return path;\n  }\n\n  /** With .axis, the y scale's labels, and the x scale's below the plot with a grid line at each. */\n  protected _axes(): Element[] {\n    return this._axis ? [...super._axes(), this._xAxis()] : [];\n  }\n\n  private _xAxis() {\n    const number = tickFormat(this.el, this._xFit.ticks);\n    return tickAxis('scatter-chart-axis x', this._xFit.ticks, (tick) => tickText(number, tick, this._xAffix), (tick) => this._xAt(tick));\n  }\n\n  /** The legend only: the rows have no labels along an axis. */\n  protected _guides(): Element[] {\n    return this._legend();\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-B7DQFHA5.mjs → chunk-SYBOA5HC.mjs}

@@ -1,9 +1,10 @@
 import {
   Component
-} from "./chunk-CMGXGYUC.mjs";
+} from "./chunk-EB2V4OKL.mjs";
 import {
-  Utils
-} from "./chunk-ZVLOUDIJ.mjs";
+  Utils,
+  afterFormReset
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/slider.ts
 var _defaults = {};
@@ -12,12 +13,6 @@ var _Slider = class _Slider extends Component {
   constructor(el, options) {
     super(el, options);
     this._resizeObserver = null;
-    // The reset event fires before the browser restores the values.
-    this._handleFormReset = () => {
-      setTimeout(() => {
-        if (_Slider.getInstance(this.el) === this) this._sync();
-      });
-    };
     this._handleRangeChange = () => {
       this._clampDual();
       this._sync();
@@ -67,7 +62,7 @@ var _Slider = class _Slider extends Component {
       for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);
       _authored.delete(el);
     }
-    host?.querySelectorAll('input[type="range"]').forEach((el) => el["Expressive_Slider"]?._sync());
+    host?.querySelectorAll('input[type="range"]').forEach((el) => _Slider.getInstance(el)?._sync());
   }
   _set(el, name, value) {
     const authored = _authored.get(el) ?? {};
@@ -87,7 +82,7 @@ var _Slider = class _Slider extends Component {
     this.el.addEventListener("pointercancel", this._handleRangePointerUp, { signal });
     this.el.addEventListener("blur", this._handleRangeRelease, { signal });
     this.el.addEventListener("mouseout", this._handleRangeRelease, { signal });
-    this.el.form?.addEventListener("reset", this._handleFormReset, { signal });
+    afterFormReset(this.el, () => this._sync(), signal);
   }
   _setupThumb() {
     this.thumb = document.createElement("span");
@@ -184,4 +179,4 @@ var Slider = _Slider;
 export {
   Slider
 };
-//# sourceMappingURL=chunk-B7DQFHA5.mjs.map
+//# sourceMappingURL=chunk-SYBOA5HC.mjs.map

package/dist/js/chunks/chunk-SYBOA5HC.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/slider.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, afterFormReset } from '../core/utils';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface SliderOptions extends BaseOptions {}\n\nconst _defaults: SliderOptions = {};\n\n// Inline values _set() replaced, per element, so destroy() can put back what\n// an author wrote. Per element, not per instance: both handles of a range\n// write the same host properties.\nconst _authored = new WeakMap<HTMLElement, Record<string, string>>();\n\nexport class Slider extends Component<SliderOptions> {\n  declare el: HTMLInputElement;\n  private _pointerDown: boolean;\n  private _resizeObserver: ResizeObserver | null = null;\n  value: HTMLElement;\n  thumb: HTMLElement;\n\n  constructor(el: HTMLInputElement, options: Partial<SliderOptions>) {\n    super(el, options);\n\n    this._pointerDown = false;\n    this._setupThumb();\n    this._sync();\n    this._setupEventHandlers();\n    this._resizeObserver = new ResizeObserver(() => this._sync());\n    this._resizeObserver.observe(this.el);\n    // The bubble and stop row are placed from the input's offsets, which\n    // move when the host resizes around an input that keeps its size.\n    if (this.el.parentElement) this._resizeObserver.observe(this.el.parentElement);\n  }\n\n  static get defaults(): SliderOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Slider';\n\n  destroy() {\n    this._resizeObserver?.disconnect();\n    this._removeThumb();\n    super.destroy();\n    const host = this._host();\n    for (const el of [this.el, host]) {\n      for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);\n      _authored.delete(el);\n    }\n    // The other handle of a range writes the shared host properties again.\n    host?.querySelectorAll('input[type=\"range\"]').forEach((el) => Slider.getInstance(el)?._sync());\n  }\n\n  _set(el: HTMLElement, name: string, value: string) {\n    const authored = _authored.get(el) ?? {};\n    _authored.set(el, authored);\n    authored[name] ??= el.style.getPropertyValue(name);\n    el.style.setProperty(name, value);\n  }\n\n  // Eleven listeners used to cover four stages, because each one was written\n  // twice - once for mouse, once for touch. One of the touch spellings,\n  // `touchleave`, was never implemented by any browser at all.\n  _setupEventHandlers() {\n    const { signal } = this._events;\n    this.el.addEventListener('change', this._handleRangeChange, { signal });\n    this.el.addEventListener('pointerdown', this._handleRangePointerDown, { signal });\n    // `input` alone tracks a drag. A `pointermove` sync used to run as well,\n    // twice per frame, and before the browser had moved the value.\n    this.el.addEventListener('input', this._handleRangeInput, { signal });\n    this.el.addEventListener('pointerup', this._handleRangePointerUp, { signal });\n    this.el.addEventListener('pointercancel', this._handleRangePointerUp, { signal });\n    this.el.addEventListener('blur', this._handleRangeRelease, { signal });\n    // `mouseout`, not `pointerout`: this used to be a `mouseout`/`touchleave`\n    // pair, and `touchleave` was never implemented by any browser, so the\n    // handler has only ever run for a mouse. `pointerout` also fires when a\n    // touch lifts, which would clear the thumb's active state at a moment\n    // nothing cleared it before.\n    this.el.addEventListener('mouseout', this._handleRangeRelease, { signal });\n    // A form reset restores the value without an input event.\n    afterFormReset(this.el, () => this._sync(), signal);\n  }\n\n  _handleRangeChange = () => {\n    this._clampDual();\n    this._sync();\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangePointerDown = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    if (e.pointerType === 'mouse' && e.button !== 0) return;\n    this._pointerDown = true;\n    this.el.classList.add('active');\n    this._clampDual();\n    this._sync();\n    // An `e.type !== 'input'` guard used to sit here. This handler is only ever\n    // bound to a press, so it was never anything but true.\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangeInput = () => {\n    this._clampDual();\n    this._sync();\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangePointerUp = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    this._pointerDown = false;\n    this.el.classList.remove('active');\n  };\n\n  _handleRangeRelease = () => {\n    if (!this._pointerDown) {\n      this.thumb.classList.remove('active');\n    }\n  };\n\n  _setupThumb() {\n    this.thumb = document.createElement('span');\n    this.value = document.createElement('span');\n    this.thumb.classList.add('thumb');\n    this.value.classList.add('value');\n    this.thumb.append(this.value);\n    this.el.after(this.thumb);\n  }\n\n  _removeThumb() {\n    this.thumb.remove();\n  }\n\n  _isVertical(): boolean {\n    return !!this.el.closest('.vertical');\n  }\n\n  _host(): HTMLElement | null {\n    // `.slider` is the documented host now; without it here a dual-handle\n    // control could not find its wrapper, so the handles never clamped and the\n    // shared start/end fractions never tracked the interval.\n    return this.el.closest('.slider, label');\n  }\n\n  _clampDual() {\n    const host = this._host();\n    const peers = host?.querySelectorAll('input[type=\"range\"]');\n    if (!peers || peers.length !== 2) return;\n    const start = peers[0] as HTMLInputElement;\n    const end = peers[1] as HTMLInputElement;\n    if (this.el === start && +start.value > +end.value) start.value = end.value;\n    if (this.el === end && +end.value < +start.value) end.value = start.value;\n  }\n\n  /** The input's range, defaulting like the browser does: 0 to 100. */\n  private _bounds(el: HTMLInputElement) {\n    const parsedMax = parseFloat(el.max);\n    return { max: Number.isNaN(parsedMax) ? 100 : parsedMax, min: parseFloat(el.min) || 0 };\n  }\n\n  _fraction(el: HTMLInputElement): number {\n    const { max, min } = this._bounds(el);\n    const val = parseFloat(el.value) || 0;\n    return max === min ? 0 : (val - min) / (max - min);\n  }\n\n  _sync() {\n    const percent = this._fraction(this.el);\n    const fraction = `${percent * 100}%`;\n\n    // Read before writing. This runs on every pointer move during a drag, and\n    // setting the custom property first made each of the four offset reads\n    // below flush a fresh layout.\n    const left = this.el.offsetLeft;\n    const top = this.el.offsetTop;\n    const width = this.el.offsetWidth;\n    const height = this.el.offsetHeight;\n    const style = getComputedStyle(this.el);\n    const rtl = style.direction === 'rtl';\n    const vertical = this._isVertical();\n    const handle = parseFloat(style.getPropertyValue('--md-comp-slider-handle-width')) || 4;\n    const length = vertical ? height : width;\n    const position = handle / 2 + percent * (length - handle);\n\n    this._set(this.el, '--md-comp-slider-active-fraction', fraction);\n    this._set(this.el, '--md-comp-slider-active-position', `${position}px`);\n\n    const host = this._host();\n    const peers = host?.querySelectorAll('input[type=\"range\"]');\n    if (host && peers && peers.length === 2) {\n      const nums = Array.from(peers).map((el) => this._fraction(el as HTMLInputElement));\n      this._set(host, '--md-comp-slider-start-fraction', `${Math.min(...nums) * 100}%`);\n      this._set(host, '--md-comp-slider-end-fraction', `${Math.max(...nums) * 100}%`);\n      this._set(host, '--md-comp-slider-start-position', `${handle / 2 + Math.min(...nums) * (length - handle)}px`);\n      this._set(host, '--md-comp-slider-end-position', `${handle / 2 + Math.max(...nums) * (length - handle)}px`);\n    }\n    if (host?.classList.contains('stops')) {\n      const { max, min } = this._bounds(this.el);\n      const step = parseFloat(this.el.step);\n      // Stops sit at min + k * step up to max, so a step that does not divide\n      // the range ends short of max. No step, `any`, zero or a negative step\n      // clears the spacing, and the host paints no dots.\n      const stops = step > 0 && Number.isFinite(step) && max > min;\n      this._set(host, '--md-comp-slider-stop-count', stops ? String(Math.floor((max - min) / step + 1e-9) + 1) : '');\n      this._set(host, '--md-comp-slider-stop-spacing', stops ? `${((length - handle) * step) / (max - min)}px` : '');\n      // The tick row is the host's ::after, which cannot read the input's\n      // properties. A dual host has no single position.\n      if (peers?.length === 1) {\n        this._set(host, '--md-comp-slider-active-position', `${position}px`);\n        this._set(host, '--md-comp-slider-track-center', `${top + height / 2}px`);\n      }\n    }\n\n    this.value.textContent = this.el.value;\n    if (vertical) {\n      this.thumb.style.left = `${left + width / 2}px`;\n      this.thumb.style.top = `${top + height - position}px`;\n    } else {\n      this.thumb.style.left = `${left + (rtl ? width - position : position)}px`;\n      this.thumb.style.top = `${top}px`;\n    }\n  }\n\n  /**\n   * Initializes every range input in the current document.\n   */\n  static Init() {\n    // Deferred like every other Init(): this ran at import time, so a bundle\n    // loaded in <head> found no inputs at all.\n    Utils.onDocumentReady(() => {\n      // An image compare's range is invisible and drawn by its container; a\n      // color picker's hue range paints its own track.\n      Slider.init(document.querySelectorAll<HTMLInputElement>('input[type=range]:not(.image-compare > input, .color-picker-hue)'));\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-TFABTUAZ.mjs → chunk-T4MOBP3J.mjs}

@@ -1,7 +1,7 @@
 import {
   Utils,
   controllerFor
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/behaviors/sortable.ts
 var itemSelector = ".sortable > li";
@@ -105,4 +105,4 @@ var Sortable = _Sortable;
 export {
   Sortable
 };
-//# sourceMappingURL=chunk-TFABTUAZ.mjs.map
+//# sourceMappingURL=chunk-T4MOBP3J.mjs.map

package/dist/js/chunks/{chunk-GCWWEZKO.mjs → chunk-TM7HPGTV.mjs}

@@ -1,9 +1,9 @@
 import {
   FormSelect
-} from "./chunk-EVCVFEV3.mjs";
+} from "./chunk-XJPMW5SP.mjs";
 import {
   Utils
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/treeSelect.ts
 function optionTree(options) {
@@ -339,4 +339,4 @@ export {
   optionTree,
   TreeSelect
 };
-//# sourceMappingURL=chunk-GCWWEZKO.mjs.map
+//# sourceMappingURL=chunk-TM7HPGTV.mjs.map