@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/shared/hx-popover-B-FP3-wW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-popover-B-FP3-wW.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-popover styles.\n *\n * Component-tier tokens with two-level var() fallback:\n *   var(--hx-popover-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n *   neutral-0 = #FFFFFF, neutral-200 = #D6DBD5, neutral-900 = #0D1825,\n *   primary-500 = #429797.\n */\nexport const helixPopoverStyles = css`\n  :host {\n    /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n       position:relative was vestigial — body uses position:fixed via Floating UI */\n    display: contents;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='body'] {\n    position: fixed;\n    z-index: var(--hx-popover-z-index, 9999);\n    max-width: var(--hx-popover-max-width, 320px);\n    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));\n    color: var(--hx-popover-color, var(--hx-color-text-primary, #0d1825));\n    font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #d6dbd5));\n    border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-popover-shadow,\n      var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-popover-transition-duration, 0.2s) ease,\n      visibility var(--hx-popover-transition-duration, 0.2s) ease;\n    word-wrap: break-word;\n  }\n\n  [part='body'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='body']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-popover-arrow-size, 10px);\n    height: var(--hx-popover-arrow-size, 10px);\n    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #d6dbd5));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='body'] {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n  @media (forced-colors: active) {\n    [part='body'] {\n      border-color: CanvasText;\n    }\n\n    [part='arrow'] {\n      border-color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\nconst _nextPopoverId = createIdCounter('hx-popover');\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n * @cssprop [--hx-popover-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color when the popover body receives focus.\n *\n * @fires {CustomEvent} hx-show - Emitted when the popover begins to show.\n * @fires {CustomEvent} hx-after-show - Emitted after the popover is fully visible.\n * @fires {CustomEvent} hx-hide - Emitted when the popover begins to hide.\n * @fires {CustomEvent} hx-after-hide - Emitted after the popover is fully hidden.\n *\n * @example\n * ```html\n * <hx-popover placement=\"bottom\" trigger=\"click\">\n *   <button slot=\"anchor\">Open Popover</button>\n *   <p>Rich popover content here.</p>\n * </hx-popover>\n * ```\n * @cssprop [--hx-popover-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-overlay-black-12] - Overlay color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n\n@customElement('hx-popover')\nexport class HelixPopover extends HelixElement {\n  static override styles = [helixPopoverStyles, forcedColorsSurface];\n\n  /**\n   * Whether the popover is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Preferred placement of the popover relative to the anchor.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom';\n\n  /**\n   * How the popover is triggered.\n   * @attr trigger\n   */\n  @property({ type: String, reflect: true })\n  trigger: 'click' | 'hover' | 'focus' | 'manual' = 'click';\n\n  /**\n   * Distance in pixels between the popover and the anchor.\n   * @attr distance\n   */\n  @property({ type: Number, reflect: true })\n  distance = 8;\n\n  /**\n   * Alignment offset in pixels along the anchor.\n   * @attr skidding\n   */\n  @property({ type: Number, reflect: true })\n  skidding = 0;\n\n  /**\n   * Whether to show an arrow pointing to the anchor.\n   * @attr arrow\n   */\n  @property({ type: Boolean, reflect: true })\n  arrow = false;\n\n  /**\n   * Accessible label for the popover body (sets aria-label on the dialog).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Popover';\n\n  /**\n   * Tracks whether the popover body is currently visible.\n   * @internal\n   */\n  @state() private _visible = false;\n\n  /**\n   * The element that held focus before the popover opened, used to restore focus on close.\n   * @internal\n   */\n  private _previousFocus: HTMLElement | null = null;\n\n  /**\n   * Unique ID assigned to the popover body element.\n   * @internal\n   */\n  private readonly _popoverId = _nextPopoverId();\n\n  /**\n   * Timer ID for the deferred document click listener registration in _show().\n   * Stored so it can be cancelled in disconnectedCallback to prevent leaks.\n   * @internal\n   */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * Timer ID for the hover-triggered hide delay.\n   * WCAG 1.4.13: hoverable content must remain visible while the pointer is\n   * over it. A 150 ms delay allows the pointer to move from the anchor into\n   * the popover body without the content dismissing prematurely.\n   * @internal\n   */\n  private _hoverHideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hoverHideTimer !== null) {\n      clearTimeout(this._hoverHideTimer);\n      this._hoverHideTimer = null;\n    }\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override firstUpdated(): void {\n    // HIGH-02: set aria-haspopup=\"dialog\" once on the anchor so assistive technology\n    // announces the control's popup type before it is ever opened.\n    this._setAnchorAriaAttributes(false);\n    // Sync initial open state\n    if (this.open) {\n      void this._show();\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        void this._show();\n      } else {\n        void this._hide();\n      }\n    }\n  }\n\n  // ─── ARIA setup ───\n\n  // HIGH-02: set aria-haspopup=\"dialog\" on firstUpdated and keep aria-expanded in sync\n  /** @internal */\n  private _setAnchorAriaAttributes(expanded: boolean): void {\n    const anchorSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"anchor\"]',\n    ) as HTMLSlotElement | null;\n    if (!anchorSlot) return;\n    const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n    if (anchorEl) {\n      anchorEl.setAttribute('aria-expanded', String(expanded));\n      anchorEl.setAttribute('aria-haspopup', 'dialog');\n      // aria-controls is omitted: the body lives in Shadow DOM and axe-core\n      // cannot resolve cross-root IDREF values, which causes a critical violation.\n    }\n  }\n\n  // ─── Focus helpers ───\n\n  /** Return all keyboard-focusable elements inside the popover body's slotted content. */\n  /** @internal */\n  private _getFocusableElements(): HTMLElement[] {\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    if (!bodyEl) return [];\n\n    // Gather focusable elements from the default slot's assigned nodes\n    const defaultSlot = bodyEl.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    if (!defaultSlot) return [];\n\n    const assigned = defaultSlot.assignedElements({ flatten: true });\n    const focusableSelector =\n      'a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), details > summary';\n\n    const result: HTMLElement[] = [];\n    for (const el of assigned) {\n      if (el.matches(focusableSelector)) {\n        result.push(el as HTMLElement);\n      }\n      const nested = el.querySelectorAll<HTMLElement>(focusableSelector);\n      result.push(...nested);\n    }\n    return result;\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    if (this._visible) return;\n    // P0-02: save focus target before moving focus into dialog\n    this._previousFocus = document.activeElement as HTMLElement | null;\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n    this._visible = true;\n    this.open = true;\n    this._setAnchorAriaAttributes(true);\n    // P1-03 / HIGH-01: single keydown listener handles both Escape and focus trap.\n    // Registered synchronously before any await so it is in place before the first\n    // await el.updateComplete in tests.\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n    await this.updateComplete;\n    // hx-after-show fires after Lit has rendered the visible state. Dispatching here\n    // (before _updatePosition) ensures it fires in the same microtask as the test's\n    // await-continuation, so tests can rely on a single await el.updateComplete.\n    this.dispatchEvent(new CustomEvent<void>('hx-after-show', { bubbles: true, composed: true }));\n    // WCAG 2.4.3: only move focus into the popover when it contains interactive\n    // content. For non-interactive (informational) popovers, stealing focus from\n    // the trigger is unexpected and disruptive for keyboard users.\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    if (bodyEl) {\n      const hasInteractive = this._getFocusableElements().length > 0;\n      if (hasInteractive) {\n        bodyEl.focus();\n      }\n    }\n    // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n    }\n    this._showTimer = setTimeout(() => {\n      this._showTimer = null;\n      document.addEventListener('click', this._handleDocumentClick);\n    }, 0);\n    await this._updatePosition();\n  }\n\n  // HIGH-03: _hideWithFocusRestore controls whether _previousFocus is restored.\n  // Escape and programmatic close restore focus; click-outside does not.\n  /** @internal */\n  private async _hide(restoreFocus = true): Promise<void> {\n    if (!this._visible) return;\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n    this._visible = false;\n    this.open = false;\n    this._setAnchorAriaAttributes(false);\n    // HIGH-03: only restore focus on Escape / programmatic close\n    if (restoreFocus) {\n      this._previousFocus?.focus();\n    }\n    this._previousFocus = null;\n    await this.updateComplete;\n    this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const anchorSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"anchor\"]',\n    ) as HTMLSlotElement | null;\n    if (!anchorSlot) return;\n    const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    const arrowEl = this.arrow\n      ? (this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null)\n      : null;\n\n    if (!anchorEl || !bodyEl) return;\n\n    const { computePosition, flip, shift, offset, arrow } = await import('@floating-ui/dom');\n\n    const middleware = [\n      offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n      flip(),\n      shift({ padding: 8 }),\n    ];\n\n    if (arrowEl) {\n      middleware.push(arrow({ element: arrowEl }));\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(anchorEl, bodyEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware,\n    });\n\n    Object.assign(bodyEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    if (arrowEl && middlewareData.arrow) {\n      const arrowData = middlewareData.arrow;\n      const basePlacement = placement.split('-')[0] ?? 'bottom';\n      const oppositeSide: Record<string, string> = {\n        top: 'bottom',\n        right: 'left',\n        bottom: 'top',\n        left: 'right',\n      };\n      const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\n      Object.assign(arrowEl.style, {\n        left: arrowData.x != null ? `${arrowData.x}px` : '',\n        top: arrowData.y != null ? `${arrowData.y}px` : '',\n        right: '',\n        bottom: '',\n        [staticSide]: '-5px',\n      });\n\n      // P2-02: hide the two border sides facing the popover body so only\n      // the outward-facing corner is visible (avoids the inner border line).\n      // Reset all four sides first, then make the two inner-facing ones transparent.\n      const borderSides = ['border-top', 'border-right', 'border-bottom', 'border-left'] as const;\n      for (const side of borderSides) {\n        arrowEl.style.setProperty(side, '');\n      }\n      // Maps base placement → the two sides that face inward toward the popover body\n      const innerBorderMap: Record<string, readonly [string, string]> = {\n        bottom: ['border-bottom', 'border-right'],\n        top: ['border-top', 'border-left'],\n        right: ['border-top', 'border-right'],\n        left: ['border-bottom', 'border-left'],\n      };\n      const innerSides = innerBorderMap[basePlacement] ?? ['border-bottom', 'border-right'];\n      arrowEl.style.setProperty(innerSides[0], '1px solid transparent');\n      arrowEl.style.setProperty(innerSides[1], '1px solid transparent');\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  // P1-03 / P0-01 / HIGH-01: single document-level keydown handler while popover is open.\n  // Handles Escape (close) and Tab (focus trap) in one listener to reduce overhead.\n  /**\n   * Handles Escape to close the popover and Tab/Shift+Tab to trap focus within it.\n   * @internal\n   */\n  private _handleDocumentKeydown = (e: KeyboardEvent): void => {\n    if (!this._visible) return;\n\n    if (e.key === 'Escape') {\n      // HIGH-03: Escape always restores focus to the prior element\n      void this._hide(true);\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      // HIGH-01: trap Tab/Shift+Tab focus within the popover body\n      const focusable = this._getFocusableElements();\n      if (focusable.length === 0) return;\n\n      const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n      const allFocusable = bodyEl ? [bodyEl, ...focusable] : focusable;\n      if (allFocusable.length === 0) return;\n\n      const first = allFocusable[0] as HTMLElement;\n      const last = allFocusable[allFocusable.length - 1] as HTMLElement;\n\n      if (e.shiftKey) {\n        if (document.activeElement === first || this.shadowRoot?.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last || this.shadowRoot?.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    }\n  };\n\n  // P0-01: close when click target is outside this component\n  /**\n   * Closes the popover when a click occurs outside the component boundary.\n   * @internal\n   */\n  private _handleDocumentClick = (e: Event): void => {\n    // Shadow DOM retargets events from within to the host at document level,\n    // so a click on the trigger wrapper appears as e.target === this.\n    if (e.target !== this && !this.contains(e.target as Node)) {\n      // HIGH-03: click-outside does NOT restore focus — let browser handle naturally\n      void this._hide(false);\n    }\n  };\n\n  /**\n   * Toggles the popover open/closed when the anchor is clicked in click trigger mode.\n   * @internal\n   */\n  private _handleAnchorClick = (): void => {\n    if (this.trigger !== 'click') return;\n    if (this._visible) {\n      void this._hide(true);\n    } else {\n      void this._show();\n    }\n  };\n\n  /**\n   * Opens the popover when the anchor receives a mouseenter event in hover trigger mode.\n   * @internal\n   */\n  private _handleAnchorMouseEnter = (): void => {\n    if (this.trigger !== 'hover') return;\n    void this._show();\n  };\n\n  /**\n   * Closes the popover when the anchor receives a mouseleave event in hover trigger mode.\n   * WCAG 1.4.13: applies a 150 ms delay so the pointer can move from anchor\n   * into the popover body without the content dismissing prematurely.\n   * @internal\n   */\n  private _handleAnchorMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n    this._scheduleHoverHide();\n  };\n\n  // CRITICAL-02: body hover handlers so moving the pointer from anchor into\n  // the popover content does not trigger a hide.\n  /** @internal */\n  private _handleBodyMouseEnter = (): void => {\n    // Cancel a pending hide that would have fired from the anchor's mouseleave.\n    if (this.trigger !== 'hover') return;\n    this._cancelHoverHide();\n  };\n\n  /** @internal */\n  private _handleBodyMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n    this._scheduleHoverHide();\n  };\n\n  /**\n   * Schedules a hide with a 150 ms delay for hover-triggered dismissal.\n   * WCAG 1.4.13: the delay allows the pointer to travel between the anchor\n   * and the popover body without the content disappearing.\n   * @internal\n   */\n  private _scheduleHoverHide(): void {\n    this._cancelHoverHide();\n    this._hoverHideTimer = setTimeout(() => {\n      this._hoverHideTimer = null;\n      void this._hide(false);\n    }, 150);\n  }\n\n  /**\n   * Cancels any pending hover-triggered hide.\n   * @internal\n   */\n  private _cancelHoverHide(): void {\n    if (this._hoverHideTimer !== null) {\n      clearTimeout(this._hoverHideTimer);\n      this._hoverHideTimer = null;\n    }\n  }\n\n  /** @internal */\n  private _handleAnchorFocusIn = (): void => {\n    // CRITICAL-02: keyboard users trigger hover-mode popovers via focusin\n    if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n    void this._show();\n  };\n\n  /** @internal */\n  private _handleAnchorFocusOut = (e: FocusEvent): void => {\n    // CRITICAL-02: for hover mode, only hide when focus leaves both the anchor\n    // and the popover body (i.e. relatedTarget is outside the component).\n    if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n    const related = e.relatedTarget as Node | null;\n    // If focus is moving into the shadow root (body element), keep popover open\n    if (related && (this.contains(related) || this.shadowRoot?.contains(related))) return;\n    void this._hide(true);\n  };\n\n  /** @internal */\n  private _handleAnchorSlotChange(): void {\n    this._setAnchorAriaAttributes(this._visible);\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @click=${this._handleAnchorClick}\n        @mouseenter=${this._handleAnchorMouseEnter}\n        @mouseleave=${this._handleAnchorMouseLeave}\n        @focusin=${this._handleAnchorFocusIn}\n        @focusout=${this._handleAnchorFocusOut}\n      >\n        <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n      </div>\n      <div\n        part=\"body\"\n        id=${this._popoverId}\n        role=\"dialog\"\n        aria-label=${this.label}\n        aria-hidden=${!this._visible ? 'true' : nothing}\n        tabindex=\"-1\"\n        ?inert=${!this._visible}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._handleBodyMouseEnter}\n        @mouseleave=${this._handleBodyMouseLeave}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popover': HelixPopover;\n  }\n}\n"],"names":["helixPopoverStyles","css","_nextPopoverId","createIdCounter","HelixPopover","HelixElement","focusable","bodyEl","_a","allFocusable","first","last","_b","_c","related","changedProperties","expanded","anchorSlot","anchorEl","defaultSlot","assigned","focusableSelector","result","el","nested","restoreFocus","arrowEl","computePosition","flip","shift","offset","arrow","middleware","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-popup-DZXpsJ1R.js → hx-popup-COUXXZ9X.js}

@@ -1,6 +1,7 @@
 import { css as A, nothing as z, html as m } from "lit";
 import { property as r, customElement as P } from "lit/decorators.js";
-import { H as U } from "./helix-element-BNEYeiys.js";
+import { a as U } from "./forced-colors-CTEDFRGa.js";
+import { H as C } from "./helix-element-BNEYeiys.js";
 const E = A`
   :host {
     display: inline-block;
@@ -45,12 +46,12 @@ const E = A`
     }
   }
 `;
-var C = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (t, i, e, s) => {
-  for (var n = s > 1 ? void 0 : s ? k(i, e) : i, p = t.length - 1, l; p >= 0; p--)
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, i, e, s) => {
+  for (var n = s > 1 ? void 0 : s ? $(i, e) : i, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (n = (s ? l(i, e, n) : l(n)) || n);
-  return s && n && C(i, e, n), n;
+  return s && n && k(i, e, n), n;
 };
-let o = class extends U {
+let o = class extends C {
   constructor() {
     super(...arguments), this._anchorSlotEl = null, this._cleanupAutoUpdate = null, this._floatingUi = null, this.anchor = null, this.placement = "bottom", this.active = !1, this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = null, this.arrowPadding = 10, this.flip = !1, this.flipFallbackPlacements = [], this.shift = !1, this.autoSize = !1, this.strategy = "fixed";
   }
@@ -173,7 +174,7 @@ let o = class extends U {
     `;
   }
 };
-o.styles = [E];
+o.styles = [E, U];
 a([
   r({ attribute: "anchor" })
 ], o.prototype, "anchor", 2);
@@ -234,4 +235,4 @@ o = a([
 export {
   o as H
 };
-//# sourceMappingURL=hx-popup-DZXpsJ1R.js.map
+//# sourceMappingURL=hx-popup-COUXXZ9X.js.map

package/dist/shared/hx-popup-COUXXZ9X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-popup-COUXXZ9X.js","sources":["../../src/components/hx-popup/hx-popup.styles.ts","../../src/components/hx-popup/hx-popup.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-popup styles.\n *\n * Positioning primitive — does NOT paint a surface of its own. Per the 3.2.0\n * surfaces & containers plan we apply restraint here: no coverage-gap fill,\n * since there is no real surface. Forced-colors mixin is still applied so\n * that any consumer that DOES style the popup body via tokens still meets\n * the OS-level affordance contract.\n */\nexport const helixPopupStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  [part='popup'] {\n    position: fixed;\n    z-index: var(--hx-popup-z-index, 9000);\n    inset: 0 auto auto 0;\n    box-sizing: border-box;\n    transition: var(--hx-popup-transition, none);\n  }\n\n  :host(:not([active])) [part='popup'] {\n    display: none;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-arrow-size, 8px);\n    height: var(--hx-arrow-size, 8px);\n    background: var(--hx-arrow-color, var(--hx-color-neutral-0, #ffffff));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='popup'] {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    [part='popup'] {\n      border: 1px solid CanvasText;\n    }\n\n    [part='arrow'] {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport type { Placement, Middleware } from '@floating-ui/dom';\nimport { helixPopupStyles } from './hx-popup.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\ntype PopupPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'auto';\n\n// More precise type matching @floating-ui/dom's arrow middleware data structure\ntype ArrowData = { x?: number; y?: number; centerOffset: number };\n\n/**\n * A low-level positioning primitive that anchors a floating panel to a reference element.\n * This is the base that hx-tooltip, hx-dropdown, and hx-popover build upon.\n *\n * @summary Low-level popup positioning utility.\n *\n * @tag hx-popup\n *\n * @slot anchor - The reference element the popup is anchored to.\n * @slot - Default slot for popup content.\n *\n * @csspart popup - The popup container element.\n * @csspart arrow - The arrow indicator element (only present when `arrow` is true).\n *\n * @cssprop [--hx-popup-z-index=9000] - Z-index of the popup container.\n * @cssprop [--hx-popup-transition=none] - Transition applied to the popup element.\n *   Consumers who need enter/exit animations can set this property AND override the\n *   default `display: none` hide mechanism via `::part(popup)`. Example:\n *   ```css\n *   hx-popup { --hx-popup-transition: opacity 0.2s ease; }\n *   hx-popup:not([active])::part(popup) { display: block; opacity: 0; pointer-events: none; }\n *   hx-popup[active]::part(popup) { opacity: 1; }\n *   ```\n * @cssprop [--hx-arrow-size=8px] - Size of the arrow element.\n * @cssprop [--hx-arrow-color=var(--hx-color-surface-overlay, #ffffff)] - Color of the arrow element.\n * @cssprop --hx-auto-size-available-width - Available width set by auto-size middleware (on :host).\n * @cssprop --hx-auto-size-available-height - Available height set by auto-size middleware (on :host).\n *\n * @fires {CustomEvent} hx-reposition - Emitted after the popup is repositioned.\n *\n * ## Accessibility Contract\n *\n * `hx-popup` is a **positioning utility**, not an interactive widget. It does not provide\n * ARIA semantics. Consumers are responsible for all accessibility:\n *\n * - **Popup role**: Add `role=\"tooltip\"`, `role=\"dialog\"`, `role=\"listbox\"`, etc. to the\n *   slotted popup content depending on its purpose.\n * - **Trigger state**: The element that triggers the popup MUST set `aria-expanded=\"true/false\"`.\n * - **Association**: Use `aria-controls` on the trigger to reference the popup content element,\n *   and `aria-labelledby` / `aria-describedby` as appropriate.\n * - **Focus management**: `hx-popup` does NOT trap focus. Consumers building dialogs or menus\n *   MUST implement focus trapping and keyboard dismiss (Escape key) themselves.\n * - **Visibility**: The popup is hidden via `display: none` (CSS) and the `inert` attribute\n *   when inactive. Both are reliable accessibility-tree hiding mechanisms.\n *\n * @example\n * ```html\n * <!-- Tooltip pattern -->\n * <hx-popup id=\"my-tooltip\" placement=\"bottom\" distance=\"8\">\n *   <button\n *     slot=\"anchor\"\n *     aria-describedby=\"tooltip-content\"\n *     aria-expanded=\"false\"\n *     aria-controls=\"my-tooltip\"\n *   >\n *     Trigger\n *   </button>\n *   <div id=\"tooltip-content\" role=\"tooltip\">Tooltip text</div>\n * </hx-popup>\n * ```\n *\n * ## Drupal Integration\n *\n * `hx-popup` is a JS utility — Twig provides markup only. No Drupal behavior file is\n * required for basic usage, since the `anchor` slot and `active` attribute are sufficient.\n *\n * ```twig\n * {# Basic Twig usage — prefer anchor slot in server-rendered contexts #}\n * <hx-popup id=\"my-popup\" placement=\"bottom\" distance=\"8\">\n *   <button\n *     slot=\"anchor\"\n *     aria-expanded=\"false\"\n *     aria-controls=\"popup-content\"\n *   >Open</button>\n *   <div id=\"popup-content\" role=\"dialog\" aria-label=\"Popup content\">...</div>\n * </hx-popup>\n * ```\n *\n * ```js\n * // Drupal behavior for toggle interaction\n * Drupal.behaviors.helixPopup = {\n *   attach(context) {\n *     context.querySelectorAll('hx-popup').forEach((popup) => {\n *       const trigger = popup.querySelector('[slot=\"anchor\"]');\n *       if (!trigger) return;\n *       trigger.addEventListener('click', () => {\n *         popup.active = !popup.active;\n *         trigger.setAttribute('aria-expanded', String(popup.active));\n *       });\n *     });\n *   },\n * };\n * ```\n *\n * For Drupal-generated dynamic IDs, prefer the anchor **slot** over the `anchor` CSS selector\n * attribute, since slot-based anchoring does not require knowing the element's ID at render time.\n * If you must use the CSS selector form with dynamic IDs, pass the ID via a Twig variable:\n * ```twig\n * <hx-popup anchor=\"#{{ element['#id'] }}\" placement=\"bottom\">...</hx-popup>\n * ```\n * @cssprop [--hx-color-neutral-0] - Color.\n */\n@customElement('hx-popup')\nexport class HelixPopup extends HelixElement {\n  static override styles = [helixPopupStyles, forcedColorsSurface];\n\n  /** @internal */\n  private _anchorSlotEl: Element | null = null;\n  /** @internal */\n  private _cleanupAutoUpdate: (() => void) | null = null;\n  /** @internal */\n  private _floatingUi: typeof import('@floating-ui/dom') | null = null;\n\n  /** @internal */\n  private async _loadFloatingUi() {\n    if (!this._floatingUi) {\n      this._floatingUi = await import('@floating-ui/dom');\n    }\n    return this._floatingUi;\n  }\n\n  /**\n   * The reference element to anchor the popup to.\n   *\n   * - **Attribute form** (`anchor=\"#selector\"`): Accepts a CSS selector string resolved via\n   *   `querySelector` from the component's root node. Use this in HTML/Twig markup.\n   * - **Property form** (`el.anchor = element`): Accepts an `Element` reference directly.\n   *   Setting an Element via JS property does NOT reflect to the attribute.\n   *\n   * If not set, the element in the `anchor` slot is used.\n   *\n   * @attr anchor\n   */\n  @property({ attribute: 'anchor' })\n  anchor: string | Element | null = null;\n\n  /**\n   * Preferred placement of the popup relative to the anchor.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'auto' = 'bottom';\n\n  /**\n   * Whether the popup is visible.\n   * @attr active\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Gap in pixels between the popup and the anchor element.\n   * @attr distance\n   */\n  @property({ type: Number, reflect: true })\n  distance = 0;\n\n  /**\n   * Offset in pixels along the anchor element's axis.\n   * @attr skidding\n   */\n  @property({ type: Number, reflect: true })\n  skidding = 0;\n\n  /**\n   * Whether to show an arrow pointing to the anchor element.\n   * @attr arrow\n   */\n  @property({ type: Boolean, reflect: true })\n  arrow = false;\n\n  /**\n   * Manual placement of the arrow along the popup edge.\n   * When not set, floating-ui calculates the optimal position.\n   * @attr arrow-placement\n   */\n  @property({ attribute: 'arrow-placement', reflect: true })\n  arrowPlacement: 'start' | 'center' | 'end' | null = null;\n\n  /**\n   * Minimum padding in pixels from the popup edge to the arrow.\n   * @attr arrow-padding\n   */\n  @property({ type: Number, attribute: 'arrow-padding' })\n  arrowPadding = 10;\n\n  /**\n   * When true, flips the popup to the opposite side to avoid overflow.\n   * @attr flip\n   */\n  @property({ type: Boolean, reflect: true })\n  flip = false;\n\n  /**\n   * Fallback placements to try when flipping. Accepts a JSON array string.\n   *\n   * @example\n   * ```html\n   * <!-- Try \"top\" then \"left\" before giving up -->\n   * <hx-popup flip flip-fallback-placements='[\"top\",\"left\"]'>...</hx-popup>\n   * ```\n   *\n   * @attr flip-fallback-placements\n   */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute(value: string | null): PopupPlacement[] {\n        if (!value) return [];\n        try {\n          return JSON.parse(value) as PopupPlacement[];\n        } catch {\n          return [];\n        }\n      },\n      toAttribute(value: PopupPlacement[]): string {\n        return JSON.stringify(value);\n      },\n    },\n  })\n  flipFallbackPlacements: (\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'auto'\n  )[] = [];\n\n  /**\n   * When true, shifts the popup along the axis to remain in the viewport.\n   * @attr shift\n   */\n  @property({ type: Boolean, reflect: true })\n  shift = false;\n\n  /**\n   * When true, resizes the popup to fit within the viewport.\n   * Sets --hx-auto-size-available-width and --hx-auto-size-available-height CSS custom\n   * properties on `:host` so they cascade into shadow DOM and are readable from light DOM.\n   * @attr auto-size\n   */\n  @property({ type: Boolean, attribute: 'auto-size', reflect: true })\n  autoSize = false;\n\n  /**\n   * Positioning strategy passed to floating-ui's `computePosition`.\n   *\n   * - `'fixed'` (default): works for most cases; positions relative to the viewport.\n   * - `'absolute'`: use inside `overflow: hidden` / scroll containers where the popup is\n   *   positioned relative to the nearest positioned ancestor instead of the viewport.\n   *\n   * @attr strategy\n   */\n  @property({ reflect: true })\n  strategy: 'fixed' | 'absolute' = 'fixed';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.active) {\n      void this.updateComplete.then(() => this._startAutoUpdate());\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._stopAutoUpdate();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    const activeChanged = changedProperties.has('active');\n    const positioningChanged =\n      changedProperties.has('placement') ||\n      changedProperties.has('distance') ||\n      changedProperties.has('skidding') ||\n      changedProperties.has('arrow') ||\n      changedProperties.has('arrowPadding') ||\n      changedProperties.has('arrowPlacement') ||\n      changedProperties.has('flip') ||\n      changedProperties.has('flipFallbackPlacements') ||\n      changedProperties.has('shift') ||\n      changedProperties.has('autoSize') ||\n      changedProperties.has('anchor') ||\n      changedProperties.has('strategy');\n\n    if (activeChanged) {\n      if (this.active) {\n        void this._startAutoUpdate();\n      } else {\n        this._stopAutoUpdate();\n        // Clean up autoSize custom properties when popup goes inactive\n        if (this.autoSize) {\n          this.style.removeProperty('--hx-auto-size-available-width');\n          this.style.removeProperty('--hx-auto-size-available-height');\n        }\n      }\n    } else if (positioningChanged && this.active) {\n      void this._reposition();\n    }\n\n    // Remove stale autoSize properties when autoSize is disabled\n    if (changedProperties.has('autoSize') && !this.autoSize) {\n      this.style.removeProperty('--hx-auto-size-available-width');\n      this.style.removeProperty('--hx-auto-size-available-height');\n    }\n  }\n\n  // ─── Anchor Resolution ───\n\n  /** @internal */\n  private _getAnchorElement(): Element | null {\n    if (this.anchor instanceof Element) {\n      return this.anchor;\n    }\n    if (typeof this.anchor === 'string') {\n      return (this.getRootNode() as Document | ShadowRoot).querySelector(this.anchor);\n    }\n    return this._anchorSlotEl;\n  }\n\n  /** @internal */\n  private _handleAnchorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._anchorSlotEl = assigned[0] ?? null;\n    if (this.active) {\n      void this._reposition();\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _startAutoUpdate(): Promise<void> {\n    this._stopAutoUpdate();\n    const anchorEl = this._getAnchorElement();\n    const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n    if (!anchorEl || !popupEl) return;\n\n    const { autoUpdate } = await this._loadFloatingUi();\n    this._cleanupAutoUpdate = autoUpdate(anchorEl, popupEl, () => {\n      void this._reposition();\n    });\n  }\n\n  /** @internal */\n  private _stopAutoUpdate(): void {\n    this._cleanupAutoUpdate?.();\n    this._cleanupAutoUpdate = null;\n  }\n\n  /** @internal */\n  private async _reposition(): Promise<void> {\n    const anchorEl = this._getAnchorElement();\n    const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n    if (!anchorEl || !popupEl) return;\n\n    const arrowEl = this.arrow\n      ? (this.shadowRoot?.querySelector<HTMLElement>('[part=\"arrow\"]') ?? null)\n      : null;\n\n    const {\n      computePosition,\n      flip: flipMiddleware,\n      shift: shiftMiddleware,\n      offset: offsetMiddleware,\n      arrow: arrowMiddleware,\n      size: sizeMiddleware,\n      autoPlacement: autoPlacementMiddleware,\n    } = await this._loadFloatingUi();\n\n    const middleware: Middleware[] = [\n      offsetMiddleware({ mainAxis: this.distance, crossAxis: this.skidding }),\n    ];\n\n    if (this.placement === 'auto') {\n      middleware.push(autoPlacementMiddleware());\n    } else if (this.flip) {\n      middleware.push(\n        flipMiddleware({\n          fallbackPlacements: this.flipFallbackPlacements as Placement[],\n        }),\n      );\n    }\n\n    if (this.shift) {\n      middleware.push(shiftMiddleware({ padding: 8 }));\n    }\n\n    if (arrowEl) {\n      middleware.push(arrowMiddleware({ element: arrowEl, padding: this.arrowPadding }));\n    }\n\n    if (this.autoSize) {\n      middleware.push(\n        sizeMiddleware({\n          apply: ({ availableWidth, availableHeight }) => {\n            this.style.setProperty('--hx-auto-size-available-width', `${availableWidth}px`);\n            this.style.setProperty('--hx-auto-size-available-height', `${availableHeight}px`);\n          },\n        }),\n      );\n    }\n\n    const effectivePlacement: Placement =\n      this.placement === 'auto' ? 'bottom' : (this.placement as Placement);\n\n    popupEl.style.position = this.strategy;\n\n    const { x, y, placement, middlewareData } = await computePosition(anchorEl, popupEl, {\n      placement: effectivePlacement,\n      strategy: this.strategy,\n      middleware,\n    });\n\n    Object.assign(popupEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    if (arrowEl) {\n      const arrowData = middlewareData.arrow as ArrowData | undefined;\n      this._positionArrow(arrowEl, placement, arrowData);\n    }\n\n    this.dispatchEvent(new CustomEvent<void>('hx-reposition', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _positionArrow(\n    arrowEl: HTMLElement,\n    placement: Placement,\n    arrowData: ArrowData | undefined,\n  ): void {\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n    const staticSides = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    } as const;\n    const staticSide = staticSides[basePlacement];\n\n    const arrowStyle: Record<string, string> = {\n      left: '',\n      top: '',\n      right: '',\n      bottom: '',\n    };\n\n    if (this.arrowPlacement === 'start' || this.arrowPlacement === 'end') {\n      const isVertical = basePlacement === 'top' || basePlacement === 'bottom';\n      if (isVertical) {\n        arrowStyle[this.arrowPlacement === 'start' ? 'left' : 'right'] = `${this.arrowPadding}px`;\n      } else {\n        arrowStyle[this.arrowPlacement === 'start' ? 'top' : 'bottom'] = `${this.arrowPadding}px`;\n      }\n    } else {\n      // 'center' or null: use floating-ui computed position\n      if (arrowData?.x != null) arrowStyle.left = `${arrowData.x}px`;\n      if (arrowData?.y != null) arrowStyle.top = `${arrowData.y}px`;\n    }\n\n    arrowStyle[staticSide] = '-4px';\n    arrowEl.setAttribute('data-placement', basePlacement);\n    Object.assign(arrowEl.style, arrowStyle);\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Forces the popup to recalculate its position.\n   */\n  async reposition(): Promise<void> {\n    await this._reposition();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n      <div part=\"popup\" ?inert=${!this.active}>\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popup': HelixPopup;\n  }\n}\n"],"names":["helixPopupStyles","css","HelixPopup","HelixElement","changedProperties","activeChanged","positioningChanged","e","assigned","anchorEl","popupEl","_a","autoUpdate","arrowEl","_b","computePosition","flipMiddleware","shiftMiddleware","offsetMiddleware","arrowMiddleware","sizeMiddleware","autoPlacementMiddleware","middleware","availableWidth","availableHeight","effectivePlacement","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","arrowStyle","html","nothing","forcedColorsSurface","__decorateClass","property","value","customElement"],"mappings":"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"}

package/dist/shared/{hx-progress-bar-KjEkEJLy.js → hx-progress-bar-Bn3JEPUf.js}

@@ -1,10 +1,11 @@
-import { css as m, nothing as g, html as p } from "lit";
-import { property as o, state as c, customElement as u } from "lit/decorators.js";
+import { css as m, nothing as b, html as p } from "lit";
+import { property as o, state as g, customElement as u } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { a as f } from "./forced-colors-CTEDFRGa.js";
 import { H as _ } from "./helix-element-BNEYeiys.js";
-import { c as f } from "./id-counter-DuX8vsui.js";
-const x = m`
+import { c as x } from "./id-counter-DuX8vsui.js";
+const y = m`
   :host {
     display: block;
   }
@@ -31,7 +32,7 @@ const x = m`
     font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-tight, 1.25);
   }
 
@@ -39,7 +40,7 @@ const x = m`
     position: relative;
     overflow: hidden;
     border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
-    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken, #ebeee9));
     width: 100%;
   }
 
@@ -61,7 +62,7 @@ const x = m`
     height: 100%;
     width: 100%;
     border-radius: inherit;
-    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));
     transform-origin: left center;
     transform: scaleX(var(--_value-ratio, 0));
     transition: transform var(--hx-transition-fast, 150ms ease);
@@ -76,19 +77,19 @@ const x = m`
   /* ─── Variant Colors ─── */
 
   .progress-bar--default .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);
   }
 
   .progress-bar--success .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);
   }
 
   .progress-bar--warning .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);
   }
 
   .progress-bar--danger .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Indeterminate Animation ─── */
@@ -138,15 +139,15 @@ const x = m`
     }
   }
 `;
-var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (r, t, n, l) => {
-  for (var s = l > 1 ? void 0 : l ? $(t, n) : t, i = r.length - 1, h; i >= 0; i--)
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (r, t, n, l) => {
+  for (var s = l > 1 ? void 0 : l ? w(t, n) : t, i = r.length - 1, h; i >= 0; i--)
     (h = r[i]) && (s = (l ? h(t, n, s) : h(s)) || s);
-  return l && s && y(t, n, s), s;
+  return l && s && $(t, n, s), s;
 };
-const w = f("hx-progress-bar");
+const C = x("hx-progress-bar");
 let e = class extends _ {
   constructor() {
-    super(...arguments), this.value = null, this.min = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.description = "", this.size = "md", this.variant = "default", this._liveMessage = "", this._hasLabelSlotContent = !1, this._warnedAboutLabel = !1, this._uid = w();
+    super(...arguments), this.value = null, this.min = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.description = "", this.size = "md", this.variant = "default", this._liveMessage = "", this._hasLabelSlotContent = !1, this._warnedAboutLabel = !1, this._uid = C();
   }
   /** @internal */
   get _isIndeterminate() {
@@ -191,28 +192,28 @@ let e = class extends _ {
         ${n || this.label ? p`<span id=${r} part="label" class="progress-bar__label">
               <slot name="label" @slotchange=${this._onLabelSlotChange}></slot>
             </span>` : p`<slot name="label" @slotchange=${this._onLabelSlotChange} hidden></slot>`}
-        ${this.description ? p`<span id=${t} class="sr-only">${this.description}</span>` : g}
+        ${this.description ? p`<span id=${t} class="sr-only">${this.description}</span>` : b}
         <div
           part="track"
           class="progress-bar__track"
           role="progressbar"
-          aria-valuenow=${b(s)}
+          aria-valuenow=${c(s)}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
           aria-valuetext=${d}
-          aria-label=${b(!n && this.label ? this.label : void 0)}
-          aria-labelledby=${b(n ? r : void 0)}
-          aria-describedby=${b(t)}
+          aria-label=${c(!n && this.label ? this.label : void 0)}
+          aria-labelledby=${c(n ? r : void 0)}
+          aria-describedby=${c(t)}
         >
           <div part="fill" class="progress-bar__fill"></div>
         </div>
-        ${i ? p`<span class="sr-only progress-bar__variant-label">${i}</span>` : g}
+        ${i ? p`<span class="sr-only progress-bar__variant-label">${i}</span>` : b}
         <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveMessage}</div>
       </div>
     `;
   }
 };
-e.styles = [x];
+e.styles = [y, f];
 e._VARIANT_LABELS = {
   success: "Success",
   warning: "Warning",
@@ -243,10 +244,10 @@ a([
   o({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 a([
-  c()
+  g()
 ], e.prototype, "_liveMessage", 2);
 a([
-  c()
+  g()
 ], e.prototype, "_hasLabelSlotContent", 2);
 e = a([
   u("hx-progress-bar")
@@ -254,4 +255,4 @@ e = a([
 export {
   e as H
 };
-//# sourceMappingURL=hx-progress-bar-KjEkEJLy.js.map
+//# sourceMappingURL=hx-progress-bar-Bn3JEPUf.js.map

package/dist/shared/hx-progress-bar-Bn3JEPUf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-progress-bar-Bn3JEPUf.js","sources":["../../src/components/hx-progress-bar/hx-progress-bar.styles.ts","../../src/components/hx-progress-bar/hx-progress-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  .progress-bar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  .progress-bar__label {\n    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong, #202b39));\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .progress-bar__track {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));\n    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken, #ebeee9));\n    width: 100%;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .progress-bar--sm .progress-bar__track {\n    height: var(--hx-progress-bar-height-sm, var(--hx-space-1, 0.25rem));\n  }\n\n  .progress-bar--md .progress-bar__track {\n    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));\n  }\n\n  .progress-bar--lg .progress-bar__track {\n    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));\n  }\n\n  .progress-bar__fill {\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));\n    transform-origin: left center;\n    transform: scaleX(var(--_value-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar__fill {\n      transition: none;\n    }\n  }\n\n  /* ─── Variant Colors ─── */\n\n  .progress-bar--default .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);\n  }\n\n  .progress-bar--success .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);\n  }\n\n  .progress-bar--warning .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);\n  }\n\n  .progress-bar--danger .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  @keyframes hx-progress-indeterminate {\n    0% {\n      transform: translateX(-100%) scaleX(0.4);\n    }\n    50% {\n      transform: translateX(50%) scaleX(0.6);\n    }\n    100% {\n      transform: translateX(250%) scaleX(0.4);\n    }\n  }\n\n  .progress-bar--indeterminate .progress-bar__fill {\n    transform: translateX(-100%) scaleX(0.4);\n    transform-origin: left center;\n    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)\n      ease-in-out infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar__fill {\n      transition: none;\n    }\n\n    .progress-bar--indeterminate .progress-bar__fill {\n      animation: none;\n      transform: scaleX(1);\n      opacity: var(--hx-opacity-disabled, 0.5);\n    }\n  }\n\n  /* ─── High Contrast Mode ─── */\n\n  @media (forced-colors: active) {\n    .progress-bar__track {\n      border: 1px solid ButtonText;\n      background-color: Canvas;\n    }\n\n    .progress-bar__fill {\n      background-color: Highlight;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextProgressBarId = createIdCounter('hx-progress-bar');\n\n/**\n * A linear progress indicator for determinate and indeterminate states.\n *\n * @summary Displays task completion progress or an indeterminate loading state.\n *\n * @tag hx-progress-bar\n *\n * @slot label - Visible label text rendered above the progress bar track.\n *\n * @csspart track - The outer track container element.\n * @csspart fill - The filled portion indicating progress.\n * @csspart label - The label slot wrapper element.\n *\n * @cssprop [--hx-progress-bar-track-bg=var(--hx-color-neutral-100)] - Track background color.\n * @cssprop [--hx-progress-bar-indicator-bg=var(--hx-color-primary-500)] - Indicator fill color.\n * @cssprop [--hx-progress-bar-border-radius=var(--hx-border-radius-full)] - Track border radius.\n * @cssprop [--hx-progress-bar-height-sm=var(--hx-size-1)] - Track height for size=\"sm\".\n * @cssprop [--hx-progress-bar-height-md=var(--hx-size-2)] - Track height for size=\"md\".\n * @cssprop [--hx-progress-bar-height-lg=var(--hx-size-3)] - Track height for size=\"lg\".\n * @cssprop [--hx-progress-bar-label-font-family=var(--hx-font-family-sans)] - Label font family.\n * @cssprop [--hx-progress-bar-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-progress-bar-label-font-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-progress-bar-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-border-radius-full] - Border radius.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-success-700] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-progress-bar-indeterminate-duration=1.5s] - Animation duration for indeterminate state.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n *\n * @fires {CustomEvent} hx-complete - Emitted when progress reaches 100%.\n */\n@customElement('hx-progress-bar')\nexport class HelixProgressBar extends HelixElement {\n  static override styles = [helixProgressBarStyles, forcedColorsSurface];\n\n  /**\n   * Current progress value (min–max). Set to null for indeterminate state.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Minimum value for the progress bar.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value for the progress bar.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * When true, displays an animated indeterminate loading state regardless of value.\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Accessible label for the progress bar (maps to aria-label when no label slot content is used).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Additional description for the progress operation, linked via aria-describedby.\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /**\n   * Size of the progress bar track.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the indicator color.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  /** @internal */\n  @state() private _liveMessage = '';\n  /** @internal */\n  @state() private _hasLabelSlotContent = false;\n  /** @internal */\n  private _warnedAboutLabel = false;\n\n  /** @internal */\n  private _uid = _nextProgressBarId();\n\n  /** @internal */\n  private get _isIndeterminate(): boolean {\n    return this.indeterminate || this.value === null;\n  }\n\n  /** @internal */\n  private get _percentage(): number {\n    if (this._isIndeterminate) return 0;\n    if (this.value !== null && isNaN(this.value)) {\n      devWarn('hx-progress-bar', 'Invalid value: NaN. Defaulting to 0.');\n      return 0;\n    }\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    const clamped = Math.max(this.min, Math.min(this.value ?? this.min, this.max));\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  /** @internal */\n  private get _isComplete(): boolean {\n    return !this._isIndeterminate && this.value !== null && this.value >= this.max;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if ((changedProps.has('value') || changedProps.has('max')) && this._isComplete) {\n      this._liveMessage = 'Complete';\n      this.dispatchEvent(new CustomEvent<void>('hx-complete', { bubbles: true, composed: true }));\n    } else if (changedProps.has('value') && !this._isComplete) {\n      this._liveMessage = '';\n    }\n\n    if (\n      changedProps.has('value') ||\n      changedProps.has('min') ||\n      changedProps.has('max') ||\n      changedProps.has('indeterminate')\n    ) {\n      const ratio = this._isIndeterminate ? 0 : this._percentage / 100;\n      this.style.setProperty('--_value-ratio', String(Math.max(0, Math.min(1, ratio))));\n    }\n\n    if (!this.label && !this._warnedAboutLabel) {\n      this._warnedAboutLabel = true;\n      devWarn(\n        'hx-progress-bar',\n        'No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  /** @internal */\n  private _onLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── WCAG 1.4.1: Variant label map ───\n  // Semantic variants (success/warning/danger) must not rely on color alone.\n  // The variant label is included in aria-valuetext for AT users and rendered\n  // as visually-hidden text for users in high contrast or color-blind contexts.\n\n  /** @internal */\n  private static readonly _VARIANT_LABELS: Partial<Record<HelixProgressBar['variant'], string>> = {\n    success: 'Success',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  /** @internal */\n  private get _variantLabel(): string {\n    return HelixProgressBar._VARIANT_LABELS[this.variant] ?? '';\n  }\n\n  override render() {\n    const labelId = `${this._uid}-label`;\n    const descId = this.description ? `${this._uid}-desc` : undefined;\n    const hasVisibleLabel = this._hasLabelSlotContent;\n\n    const classes = {\n      'progress-bar': true,\n      [`progress-bar--${this.size}`]: true,\n      [`progress-bar--${this.variant}`]: true,\n      'progress-bar--indeterminate': this._isIndeterminate,\n    };\n\n    const ariaValueNow = this._isIndeterminate ? undefined : (this.value ?? this.min);\n    const variantLabel = this._variantLabel;\n\n    // WCAG 1.4.1: Include variant label in aria-valuetext so AT users receive\n    // the semantic state (success/warning/danger) without relying on fill color.\n    const percentageText = this._isIndeterminate\n      ? 'In progress'\n      : `${Math.round(this._percentage)}%`;\n    const ariaValuetext = variantLabel ? `${percentageText} — ${variantLabel}` : percentageText;\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${hasVisibleLabel || this.label\n          ? html`<span id=${labelId} part=\"label\" class=\"progress-bar__label\">\n              <slot name=\"label\" @slotchange=${this._onLabelSlotChange}></slot>\n            </span>`\n          : html`<slot name=\"label\" @slotchange=${this._onLabelSlotChange} hidden></slot>`}\n        ${this.description\n          ? html`<span id=${descId} class=\"sr-only\">${this.description}</span>`\n          : nothing}\n        <div\n          part=\"track\"\n          class=\"progress-bar__track\"\n          role=\"progressbar\"\n          aria-valuenow=${ifDefined(ariaValueNow)}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-valuetext=${ariaValuetext}\n          aria-label=${ifDefined(!hasVisibleLabel && this.label ? this.label : undefined)}\n          aria-labelledby=${ifDefined(hasVisibleLabel ? labelId : undefined)}\n          aria-describedby=${ifDefined(descId)}\n        >\n          <div part=\"fill\" class=\"progress-bar__fill\"></div>\n        </div>\n        ${variantLabel\n          ? html`<span class=\"sr-only progress-bar__variant-label\">${variantLabel}</span>`\n          : nothing}\n        <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-bar': HelixProgressBar;\n  }\n}\n"],"names":["helixProgressBarStyles","css","_nextProgressBarId","createIdCounter","HelixProgressBar","HelixElement","range","changedProps","ratio","e","slot","labelId","descId","hasVisibleLabel","classes","ariaValueNow","variantLabel","percentageText","ariaValuetext","html","classMap","nothing","ifDefined","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-progress-ring-3zMwvrwD.js → hx-progress-ring-TwHyXeEp.js}

@@ -1,7 +1,8 @@
 import { css as c, svg as g, html as d } from "lit";
 import { property as o, customElement as p } from "lit/decorators.js";
-import { H as u } from "./helix-element-BNEYeiys.js";
-const m = c`
+import { a as u } from "./forced-colors-CTEDFRGa.js";
+import { H as m } from "./helix-element-BNEYeiys.js";
+const f = c`
   :host {
     display: inline-flex;
     align-items: center;
@@ -28,14 +29,14 @@ const m = c`
 
   .progress-ring__track {
     fill: none;
-    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── Indicator ─── */
 
   .progress-ring__indicator {
     fill: none;
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #429797));
     stroke-linecap: round;
     transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);
   }
@@ -43,15 +44,15 @@ const m = c`
   /* ─── Variant Colors ─── */
 
   :host([variant='success']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([variant='warning']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([variant='danger']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── Indeterminate Animation ─── */
@@ -140,7 +141,7 @@ const m = c`
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-family: var(--hx-progress-ring-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0d1825));
     pointer-events: none;
   }
 
@@ -166,12 +167,12 @@ const m = c`
     }
   }
 `;
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (e, n, a, t) => {
-  for (var s = t > 1 ? void 0 : t ? v(n, a) : n, l = e.length - 1, h; l >= 0; l--)
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (e, n, a, t) => {
+  for (var s = t > 1 ? void 0 : t ? _(n, a) : n, l = e.length - 1, h; l >= 0; l--)
     (h = e[l]) && (s = (t ? h(n, a, s) : h(s)) || s);
-  return t && s && f(n, a, s), s;
+  return t && s && v(n, a, s), s;
 };
-let r = class extends u {
+let r = class extends m {
   constructor() {
     super(...arguments), this.value = null, this.max = 100, this.size = "md", this.strokeWidth = 4, this.variant = "default", this.label = "", this._labelWarned = !1;
   }
@@ -248,7 +249,7 @@ let r = class extends u {
     `;
   }
 };
-r.styles = [m];
+r.styles = [f, u];
 i([
   o({ type: Number, reflect: !0 })
 ], r.prototype, "value", 2);
@@ -273,4 +274,4 @@ r = i([
 export {
   r as H
 };
-//# sourceMappingURL=hx-progress-ring-3zMwvrwD.js.map
+//# sourceMappingURL=hx-progress-ring-TwHyXeEp.js.map

package/dist/shared/hx-progress-ring-TwHyXeEp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-progress-ring-TwHyXeEp.js","sources":["../../src/components/hx-progress-ring/hx-progress-ring.styles.ts","../../src/components/hx-progress-ring/hx-progress-ring.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressRingStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* ─── Base Container ─── */\n\n  .progress-ring {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* ─── SVG ─── */\n\n  .progress-ring__svg {\n    transform: rotate(-90deg);\n    overflow: visible;\n  }\n\n  /* ─── Track ─── */\n\n  .progress-ring__track {\n    fill: none;\n    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #d6dbd5));\n  }\n\n  /* ─── Indicator ─── */\n\n  .progress-ring__indicator {\n    fill: none;\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #429797));\n    stroke-linecap: round;\n    transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);\n  }\n\n  /* ─── Variant Colors ─── */\n\n  :host([variant='success']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #3b9e58));\n  }\n\n  :host([variant='warning']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #c2711c));\n  }\n\n  :host([variant='danger']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  :host([indeterminate]) .progress-ring__svg {\n    animation: hx-progress-ring-rotate var(--hx-duration-spinner, 1400ms) linear infinite;\n  }\n\n  :host([indeterminate]) .progress-ring__indicator {\n    animation: hx-progress-ring-dash var(--hx-duration-spinner, 1400ms) ease-in-out infinite;\n    transition: none;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  @keyframes hx-progress-ring-rotate {\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  /*\n   * Indeterminate spinner keyframes — values are tuned for default strokeWidth=4\n   * (radius ≈ 48, circumference ≈ 301). The gap value 200 is intentionally smaller\n   * than the full circumference; the repeating pattern is a standard CSS spinner\n   * technique that produces an arc of ~35% coverage. At non-default strokeWidths\n   * the arc coverage will vary slightly but remains visually acceptable.\n   */\n  @keyframes hx-progress-ring-dash {\n    0% {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -124;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([indeterminate]) .progress-ring__svg {\n      animation: none;\n    }\n\n    :host([indeterminate]) .progress-ring__indicator {\n      animation: none;\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n\n    .progress-ring__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) .progress-ring {\n    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\n  }\n\n  :host([hx-size='md']) .progress-ring,\n  .progress-ring {\n    width: var(--hx-size-12, 3rem);\n    height: var(--hx-size-12, 3rem);\n  }\n\n  :host([hx-size='lg']) .progress-ring {\n    width: var(--hx-size-16, 4rem);\n    height: var(--hx-size-16, 4rem);\n  }\n\n  /* ─── Label (center slot wrapper) ─── */\n\n  .progress-ring__label {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-family: var(--hx-progress-ring-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0d1825));\n    pointer-events: none;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /*\n     * SVG stroke colors are suppressed in forced-colors mode. Use system color\n     * keywords so progress state remains distinguishable.\n     */\n    .progress-ring__track {\n      stroke: GrayText;\n    }\n\n    .progress-ring__indicator {\n      stroke: Highlight;\n    }\n\n    :host([variant='success']) .progress-ring__indicator,\n    :host([variant='warning']) .progress-ring__indicator,\n    :host([variant='danger']) .progress-ring__indicator {\n      stroke: Highlight;\n    }\n  }\n`;\n","import { html, svg, TemplateResult, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixProgressRingStyles } from './hx-progress-ring.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * SVG-based circular progress indicator. Supports determinate and indeterminate modes,\n * multiple size variants, semantic color variants, and a center content slot.\n *\n * @summary Circular progress ring for indicating operation progress or loading state.\n *\n * @tag hx-progress-ring\n *\n * @slot - Default slot for center content (percentage text, icon, etc.).\n *\n * @csspart base - The SVG element.\n * @csspart track - The background circle track.\n * @csspart indicator - The progress arc indicator.\n * @csspart label - The center slot wrapper div.\n *\n * @cssprop [--hx-progress-ring-track-color=var(--hx-color-neutral-200)] - Track stroke color.\n * @cssprop [--hx-progress-ring-indicator-color=var(--hx-color-primary-500)] - Indicator stroke color.\n * @cssprop [--hx-progress-ring-label-color=var(--hx-color-neutral-900)] - Center label text color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-base] - Transition timing.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-duration-spinner] - Animation duration.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-size-16] - Size token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-progress-ring-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-color-neutral-900] - Color.\n */\n@customElement('hx-progress-ring')\nexport class HelixProgressRing extends HelixElement {\n  static override styles = [helixProgressRingStyles, forcedColorsSurface];\n\n  // ─── Public Properties ───\n\n  /**\n   * Current progress value (0–max). When null, renders in indeterminate mode.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Maximum value for the progress range. Defaults to 100. Used for aria-valuemax.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Size of the ring. Controls SVG diameter.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Stroke width of the ring circles in SVG user units.\n   * @attr stroke-width\n   */\n  @property({ type: Number, attribute: 'stroke-width', reflect: true })\n  strokeWidth = 4;\n\n  /**\n   * Semantic color variant.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Accessible label for the progressbar. Exposed as aria-label.\n   * Set this attribute to satisfy WCAG 4.1.2. When absent, aria-busy reflects\n   * indeterminate state and a console warning is emitted.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private get _isIndeterminate(): boolean {\n    return this.value === null;\n  }\n\n  /** @internal */\n  private get _clampedValue(): number {\n    if (this.value === null) return 0;\n    return Math.min(this.max, Math.max(0, this.value));\n  }\n\n  /**\n   * SVG viewBox is 100x100. Radius leaves room for the stroke.\n   */\n  /** @internal */\n  private get _radius(): number {\n    return (100 - this.strokeWidth) / 2;\n  }\n\n  /** @internal */\n  private get _circumference(): number {\n    return 2 * Math.PI * this._radius;\n  }\n\n  /** @internal */\n  private get _strokeDashoffset(): number {\n    return this._circumference * (1 - this._clampedValue / this.max);\n  }\n\n  /** @internal */\n  private _labelWarned = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-progress-ring', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as 'sm' | 'md' | 'lg';\n    }\n    this.setAttribute('role', 'progressbar');\n    this.setAttribute('aria-valuemin', '0');\n  }\n\n  protected override willUpdate(_changed: PropertyValues<this>): void {\n    // Sync all dynamic ARIA attributes before render\n    this.setAttribute('aria-valuemax', String(this.max));\n\n    if (this._isIndeterminate) {\n      this.setAttribute('indeterminate', '');\n      this.setAttribute('aria-busy', 'true');\n      this.removeAttribute('aria-valuenow');\n      this.removeAttribute('aria-valuetext');\n    } else {\n      this.removeAttribute('indeterminate');\n      this.removeAttribute('aria-busy');\n      this.setAttribute('aria-valuenow', String(this._clampedValue));\n      this.setAttribute('aria-valuetext', `${this._clampedValue}% complete`);\n    }\n\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else {\n      this.removeAttribute('aria-label');\n      if (!this._labelWarned) {\n        this._labelWarned = true;\n        devWarn(\n          'hx-progress-ring',\n          'Missing accessible label. Set the `label` attribute for WCAG 4.1.2 compliance.',\n        );\n      }\n    }\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult {\n    const cx = 50;\n    const cy = 50;\n    const r = this._radius;\n    const circumference = this._circumference;\n\n    return html`\n      <div class=\"progress-ring\">\n        <svg\n          class=\"progress-ring__svg\"\n          part=\"base\"\n          viewBox=\"0 0 100 100\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          ${svg`\n            <circle\n              class=\"progress-ring__track\"\n              part=\"track\"\n              cx=${cx}\n              cy=${cy}\n              r=${r}\n              stroke-width=${this.strokeWidth}\n            />\n            <circle\n              class=\"progress-ring__indicator\"\n              part=\"indicator\"\n              cx=${cx}\n              cy=${cy}\n              r=${r}\n              stroke-width=${this.strokeWidth}\n              stroke-dasharray=${\n                this._isIndeterminate ? '1 200' : `${circumference} ${circumference}`\n              }\n              stroke-dashoffset=${this._isIndeterminate ? '0' : this._strokeDashoffset}\n            />\n          `}\n        </svg>\n        <div class=\"progress-ring__label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-ring': HelixProgressRing;\n  }\n}\n"],"names":["helixProgressRingStyles","css","HelixProgressRing","HelixElement","legacySize","_changed","r","circumference","html","svg","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":"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"}