@helixui/library 3.6.0 → 3.8.0

package/dist/shared/hx-pagination-D726PyTM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-pagination-D726PyTM.js","sources":["../../src/components/hx-pagination/hx-pagination.styles.ts","../../src/components/hx-pagination/hx-pagination.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPaginationStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-pagination-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  .pagination-root {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-4, 1rem);\n    flex-wrap: wrap;\n  }\n\n  nav {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-pagination-gap, var(--hx-space-1, 0.25rem));\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .item {\n    display: flex;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n    padding: 0 var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));\n    border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));\n    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-family: inherit;\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms) ease,\n      border-color var(--hx-transition-fast, 150ms) ease,\n      color var(--hx-transition-fast, 150ms) ease;\n    text-decoration: none;\n    white-space: nowrap;\n  }\n\n  .button:hover:not(:disabled) {\n    background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n    border-color: var(\n      --hx-pagination-hover-border-color,\n      var(--hx-color-action-primary-bg, #0f7078)\n    );\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .button[aria-current='page'] {\n    background: var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078));\n    border-color: var(\n      --hx-pagination-active-border-color,\n      var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078))\n    );\n    color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));\n    font-weight: var(--hx-font-weight-semibold, 600);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:disabled {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n    color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #4a5362));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    user-select: none;\n  }\n\n  .button[aria-disabled='true'] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Page size selector */\n  .page-size-wrapper {\n    display: flex;\n    align-items: center;\n  }\n\n  .page-size-label {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-pagination-page-size-label-color, var(--hx-color-text-muted, #4a5362));\n    white-space: nowrap;\n  }\n\n  .page-size-select {\n    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n    padding: 0 var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));\n    border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));\n    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-family: inherit;\n    cursor: pointer;\n  }\n\n  .page-size-select:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* Visually hidden — used for aria-live status messages */\n  .visually-hidden {\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: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n\n  /* Windows High Contrast / forced-colors support */\n  @media (forced-colors: active) {\n    .button {\n      border: 1px solid ButtonText;\n      color: ButtonText;\n      background: ButtonFace;\n      forced-color-adjust: none;\n    }\n\n    .button:hover:not(:disabled) {\n      border-color: Highlight;\n      color: Highlight;\n    }\n\n    .button:focus-visible {\n      outline-color: Highlight;\n    }\n\n    .button[aria-current='page'] {\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n\n    .button:disabled {\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    .button[aria-disabled='true'] {\n      color: GrayText;\n    }\n\n    .page-size-select {\n      border-color: ButtonText;\n      color: ButtonText;\n      background: ButtonFace;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { html, nothing } 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 { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixPaginationStyles } from './hx-pagination.styles.js';\n\n/** Detail for the hx-page-change event dispatched by hx-pagination. */\nexport interface HxPageChangeDetail {\n  page: number;\n}\n\n/** Detail for the hx-page-size-change event dispatched by hx-pagination. */\nexport interface HxPageSizeChangeDetail {\n  pageSize: number;\n}\n\n/**\n * A pagination component for navigating content listings.\n *\n * @summary Page navigation with page numbers, prev/next, and ellipsis.\n *\n * @tag hx-pagination\n *\n * @csspart nav - The wrapping `<nav>` element.\n * @csspart list - The `<ul>` containing pagination items.\n * @csspart item - Each `<li>` item.\n * @csspart button - Each page button or prev/next control.\n * @csspart ellipsis - The ellipsis (`…`) span between page groups.\n * @csspart page-size-wrapper - The wrapper `<div>` around the page-size selector.\n * @csspart page-size-label - The `<label>` element for the page-size selector.\n * @csspart page-size-select - The `<select>` element for page-size.\n *\n * @cssprop [--hx-pagination-gap=0.25rem] - Gap between pagination buttons. Inherits from --hx-spacing-1.\n * @cssprop [--hx-pagination-button-size=2.25rem] - Minimum width and height of each button.\n * @cssprop [--hx-pagination-border-color] - Border color of buttons. Inherits from --hx-color-border (final fallback: #d1d5db).\n * @cssprop [--hx-pagination-border-radius] - Border radius of buttons. Inherits from --hx-border-radius-md (final fallback: 0.375rem).\n * @cssprop [--hx-pagination-bg] - Background color of buttons. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-color] - Text color of buttons. Inherits from --hx-color-text-primary (final fallback: #111827).\n * @cssprop [--hx-pagination-hover-bg] - Background color of buttons on hover. Inherits from --hx-color-surface-hover (final fallback: #f3f4f6).\n * @cssprop [--hx-pagination-hover-border-color] - Border color of buttons on hover. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-bg] - Background color of the active/current page button. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-color] - Text color of the active/current page button. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-active-border-color] - Border color of the active/current page button. Defaults to --hx-pagination-active-bg.\n * @cssprop [--hx-pagination-ellipsis-color] - Color of ellipsis characters. Inherits from --hx-color-text-secondary (final fallback: #6b7280).\n * @cssprop [--hx-transition-fast=150ms] - Duration used for hover/focus transitions.\n *\n * @fires {CustomEvent<{ page: number }>} hx-page-change - Fired when the user navigates to a new page.\n * @fires {CustomEvent<{ pageSize: number }>} hx-page-size-change - Fired when the user selects a new page size.\n *\n * @example\n * ```html\n * <hx-pagination total-pages=\"10\" current-page=\"1\"></hx-pagination>\n * ```\n *\n * @example Drupal / Twig integration\n * ```twig\n * {#\n *   Drupal's pager uses 0-based page index in the URL (?page=N).\n *   This component is 1-based, so add 1 to the Drupal page value.\n *   Listen to hx-page-change and update the URL query param:\n *     element.addEventListener('hx-page-change', (e) => {\n *       const params = new URLSearchParams(location.search);\n *       params.set('page', e.detail.page - 1); // convert back to 0-based\n *       history.pushState({}, '', '?' + params.toString());\n *     });\n * #}\n * <hx-pagination\n *   total-pages=\"{{ total_pages }}\"\n *   current-page=\"{{ pager.current_page + 1 }}\"\n *   label=\"{{ 'Pagination'|t }}\"\n *   {{ show_first_last ? 'show-first-last' : '' }}\n * ></hx-pagination>\n * ```\n * @cssprop [--hx-pagination-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-pagination-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-pagination')\nexport class HelixPagination extends HelixElement {\n  static override styles = [helixPaginationStyles, forcedColorsInteractive];\n\n  /**\n   * Total number of pages.\n   * @attr total-pages\n   */\n  @property({ type: Number, attribute: 'total-pages', reflect: true })\n  totalPages = 1;\n\n  /**\n   * The currently active page (1-based).\n   * @attr current-page\n   */\n  @property({ type: Number, attribute: 'current-page' })\n  currentPage = 1;\n\n  /**\n   * Number of page buttons shown on each side of the current page.\n   * @attr sibling-count\n   */\n  @property({ type: Number, attribute: 'sibling-count', reflect: true })\n  siblingCount = 1;\n\n  /**\n   * Number of pages always shown at the start and end of the list.\n   * @attr boundary-count\n   */\n  @property({ type: Number, attribute: 'boundary-count', reflect: true })\n  boundaryCount = 1;\n\n  /**\n   * Whether to show First and Last page buttons.\n   * @attr show-first-last\n   */\n  @property({ type: Boolean, attribute: 'show-first-last', reflect: true })\n  showFirstLast = false;\n\n  /**\n   * Accessible label for the `<nav>` element.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Pagination';\n\n  /**\n   * The number of items displayed per page. When set, a page-size selector\n   * `<select>` is rendered. Set `show-page-size` to display the selector.\n   * @attr page-size\n   */\n  @property({ type: Number, attribute: 'page-size', reflect: true })\n  pageSize = 25;\n\n  /**\n   * Whether to show the page-size selector UI.\n   * @attr show-page-size\n   */\n  @property({ type: Boolean, attribute: 'show-page-size', reflect: true })\n  showPageSize = false;\n\n  /**\n   * Label text for the rows-per-page selector.\n   * @attr label-rows-per-page\n   */\n  @property({ type: String, attribute: 'label-rows-per-page' })\n  labelRowsPerPage = 'Rows per page:';\n\n  /**\n   * Accessible label for the \"First page\" navigation button.\n   * @attr first-page-label\n   */\n  @property({ attribute: 'first-page-label' })\n  firstPageLabel = 'First page';\n\n  /**\n   * Accessible label for the \"Previous page\" navigation button.\n   * @attr previous-page-label\n   */\n  @property({ attribute: 'previous-page-label' })\n  previousPageLabel = 'Previous page';\n\n  /**\n   * Accessible label for the \"Next page\" navigation button.\n   * @attr next-page-label\n   */\n  @property({ attribute: 'next-page-label' })\n  nextPageLabel = 'Next page';\n\n  /**\n   * Accessible label for the \"Last page\" navigation button.\n   * @attr last-page-label\n   */\n  @property({ attribute: 'last-page-label' })\n  lastPageLabel = 'Last page';\n\n  /**\n   * Function to format the page navigation announcement. Override for i18n.\n   */\n  @property({ attribute: false })\n  labelPageMessage: (current: number, total: number) => string = (current, total) =>\n    `Page ${current} of ${total}`;\n\n  /**\n   * Function to format page button aria-labels. Override for i18n.\n   */\n  @property({ attribute: false })\n  labelPageButton: (page: number) => string = (page) => `Page ${page}`;\n\n  /** Tracks the roving tabindex target. Null means default to currentPage. */\n  /** @internal */\n  @state() private _rovingKey: number | string | null = null;\n\n  /** Text for the aria-live region, updated on navigation. */\n  /** @internal */\n  @state() private _liveMessage = '';\n\n  /** Memoization cache for _buildPageRange. */\n  /** @internal */\n  private _pageRangeCache: { key: string; result: Array<number | 'ellipsis'> } | null = null;\n\n  // ─── Helpers ───\n\n  /** @internal */\n  private _buildPageRange(): Array<number | 'ellipsis'> {\n    const key = `${this.totalPages}-${this.currentPage}-${this.siblingCount}-${this.boundaryCount}`;\n    if (this._pageRangeCache?.key === key) return this._pageRangeCache.result;\n\n    const total = Math.max(1, this.totalPages);\n    const current = Math.min(Math.max(1, this.currentPage), total);\n    const boundary = Math.max(0, this.boundaryCount);\n    const sibling = Math.max(0, this.siblingCount);\n\n    const startPages = this._range(1, Math.min(boundary, total));\n    const endPages = this._range(Math.max(total - boundary + 1, boundary + 1), total);\n\n    const siblingStart = Math.max(\n      Math.min(current - sibling, total - boundary - sibling * 2 - 1),\n      boundary + 2,\n    );\n    const siblingEnd = Math.min(\n      Math.max(current + sibling, boundary + sibling * 2 + 2),\n      endPages.length > 0 ? (endPages[0] ?? total) - 2 : total - 1,\n    );\n\n    const items: Array<number | 'ellipsis'> = [];\n\n    for (const p of startPages) items.push(p);\n\n    if (siblingStart > boundary + 2) {\n      items.push('ellipsis');\n    } else if (boundary + 1 < siblingStart) {\n      items.push(boundary + 1);\n    }\n\n    for (const p of this._range(siblingStart, siblingEnd)) items.push(p);\n\n    if (siblingEnd < total - boundary - 1) {\n      items.push('ellipsis');\n    } else if (siblingEnd < total - boundary) {\n      items.push(total - boundary);\n    }\n\n    for (const p of endPages) items.push(p);\n\n    this._pageRangeCache = { key, result: items };\n    return items;\n  }\n\n  /** @internal */\n  private _range(start: number, end: number): number[] {\n    const result: number[] = [];\n    for (let i = start; i <= end; i++) result.push(i);\n    return result;\n  }\n\n  /** @internal */\n  private _navigate(page: number): void {\n    const clamped = Math.min(Math.max(1, page), this.totalPages);\n    if (clamped === this.currentPage) return;\n\n    this.currentPage = clamped;\n    this._rovingKey = null; // reset so focus follows the new current page\n    this._liveMessage = this.labelPageMessage(clamped, this.totalPages);\n    this.dispatchEvent(\n      new CustomEvent<{ page: number }>('hx-page-change', {\n        detail: { page: clamped },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    // PAGINATION-005: restore focus to the new current-page button after render\n    void this.updateComplete.then(() => {\n      const btn = this.shadowRoot?.querySelector<HTMLButtonElement>(\n        `button[data-roving-key=\"${clamped}\"]`,\n      );\n      btn?.focus();\n    });\n  }\n\n  /** @internal */\n  private _handlePageSizeChange(e: Event): void {\n    const select = e.target as HTMLSelectElement;\n    const newSize = Number(select.value);\n    if (newSize === this.pageSize) return;\n\n    this.pageSize = newSize;\n    this.dispatchEvent(\n      new CustomEvent<{ pageSize: number }>('hx-page-size-change', {\n        detail: { pageSize: newSize },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal */\n  private get _effectiveRovingKey(): number | string {\n    return this._rovingKey ?? this.currentPage;\n  }\n\n  /** @internal */\n  private _handleFocusin(e: FocusEvent): void {\n    const btn = e.target as HTMLElement;\n    if (btn.tagName !== 'BUTTON') return;\n    const key = btn.dataset['rovingKey'];\n    if (key === undefined) return;\n    this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End')\n      return;\n    e.preventDefault();\n\n    const list = this.shadowRoot?.querySelector('.list');\n    if (!list) return;\n\n    // Collect all non-disabled buttons (disabled prev/next excluded; aria-disabled current page included)\n    const buttons = Array.from(list.querySelectorAll<HTMLButtonElement>('button:not([disabled])'));\n    const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;\n    const currentIdx = focused ? buttons.indexOf(focused) : 0;\n\n    let nextIdx: number;\n    if (e.key === 'Home') {\n      nextIdx = 0;\n    } else if (e.key === 'End') {\n      nextIdx = buttons.length - 1;\n    } else {\n      nextIdx =\n        e.key === 'ArrowLeft'\n          ? Math.max(0, currentIdx - 1)\n          : Math.min(buttons.length - 1, currentIdx + 1);\n    }\n\n    if (nextIdx !== currentIdx || e.key === 'Home' || e.key === 'End') {\n      const nextBtn = buttons[nextIdx];\n      if (!nextBtn) return;\n      const key = nextBtn.dataset['rovingKey'];\n      if (key !== undefined) {\n        this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n      }\n      nextBtn.focus();\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const pages = this._buildPageRange();\n    const isFirst = this.currentPage <= 1;\n    const isLast = this.currentPage >= this.totalPages;\n    const rovingKey = this._effectiveRovingKey;\n\n    return html`\n      <div class=\"pagination-root\">\n        ${this.showPageSize\n          ? html`\n              <div part=\"page-size-wrapper\" class=\"page-size-wrapper\">\n                <label part=\"page-size-label\" class=\"page-size-label\">\n                  ${this.labelRowsPerPage}\n                  <select\n                    part=\"page-size-select\"\n                    class=\"page-size-select\"\n                    @change=${this._handlePageSizeChange}\n                  >\n                    ${[10, 25, 50, 100].map(\n                      (n) =>\n                        html`<option value=${n} ?selected=${n === this.pageSize}>${n}</option>`,\n                    )}\n                  </select>\n                </label>\n              </div>\n            `\n          : nothing}\n\n        <nav part=\"nav\" aria-label=${this.label}>\n          <span class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\"\n            >${this._liveMessage}</span\n          >\n          <ul\n            part=\"list\"\n            class=\"list\"\n            role=\"list\"\n            @keydown=${this._handleKeydown}\n            @focusin=${this._handleFocusin}\n          >\n            ${this.showFirstLast\n              ? html`\n                  <li part=\"item\" class=\"item\">\n                    <button\n                      part=\"button\"\n                      class=\"button\"\n                      ?disabled=${isFirst}\n                      tabindex=${rovingKey === 'first' ? 0 : -1}\n                      data-roving-key=\"first\"\n                      aria-label=${this.firstPageLabel}\n                      @click=${() => this._navigate(1)}\n                    >\n                      «\n                    </button>\n                  </li>\n                `\n              : nothing}\n\n            <li part=\"item\" class=\"item\">\n              <button\n                part=\"button\"\n                class=\"button\"\n                ?disabled=${isFirst}\n                tabindex=${rovingKey === 'prev' ? 0 : -1}\n                data-roving-key=\"prev\"\n                aria-label=${this.previousPageLabel}\n                @click=${() => this._navigate(this.currentPage - 1)}\n              >\n                ‹\n              </button>\n            </li>\n\n            ${repeat(\n              pages,\n              (page, i) => (page === 'ellipsis' ? `ellipsis-${i}` : `page-${page}`),\n              (page) => {\n                if (page === 'ellipsis') {\n                  return html`\n                    <li part=\"item\" class=\"item\">\n                      <span part=\"ellipsis\" class=\"ellipsis\" aria-hidden=\"true\">…</span>\n                    </li>\n                  `;\n                }\n                const isCurrent = page === this.currentPage;\n                return html`\n                  <li part=\"item\" class=\"item\">\n                    <button\n                      part=\"button\"\n                      class=${classMap({ button: true })}\n                      aria-disabled=${isCurrent ? 'true' : nothing}\n                      tabindex=${rovingKey === page ? 0 : -1}\n                      data-roving-key=${page}\n                      aria-current=${isCurrent ? 'page' : nothing}\n                      aria-label=${this.labelPageButton(page)}\n                      @click=${() => this._navigate(page)}\n                    >\n                      ${page}\n                    </button>\n                  </li>\n                `;\n              },\n            )}\n\n            <li part=\"item\" class=\"item\">\n              <button\n                part=\"button\"\n                class=\"button\"\n                ?disabled=${isLast}\n                tabindex=${rovingKey === 'next' ? 0 : -1}\n                data-roving-key=\"next\"\n                aria-label=${this.nextPageLabel}\n                @click=${() => this._navigate(this.currentPage + 1)}\n              >\n                ›\n              </button>\n            </li>\n\n            ${this.showFirstLast\n              ? html`\n                  <li part=\"item\" class=\"item\">\n                    <button\n                      part=\"button\"\n                      class=\"button\"\n                      ?disabled=${isLast}\n                      tabindex=${rovingKey === 'last' ? 0 : -1}\n                      data-roving-key=\"last\"\n                      aria-label=${this.lastPageLabel}\n                      @click=${() => this._navigate(this.totalPages)}\n                    >\n                      »\n                    </button>\n                  </li>\n                `\n              : nothing}\n          </ul>\n        </nav>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-pagination': HelixPagination;\n  }\n}\n\n/** Canonical type alias for HelixPagination. Use this when typing hx-pagination element references. */\nexport type HxPagination = HelixPagination;\n"],"names":["helixPaginationStyles","css","HelixPagination","HelixElement","current","total","page","key","_a","boundary","sibling","startPages","endPages","siblingStart","siblingEnd","items","p","start","end","result","i","clamped","btn","e","select","newSize","list","buttons","focused","_b","currentIdx","nextIdx","nextBtn","pages","isFirst","isLast","rovingKey","html","n","nothing","repeat","isCurrent","classMap","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-popover-BAlAFOH9.js → hx-popover-BjB0nkcq.js}

@@ -1,11 +1,11 @@
-import { css as L, nothing as g, html as x } from "lit";
+import { css as C, nothing as x, html as y } from "lit";
 import { property as d, state as w, customElement as k } from "lit/decorators.js";
 import { a as R } from "./forced-colors-CTEDFRGa.js";
-import { f as O } from "./aria-flatten-DY6v2vah.js";
-import { i as $, r as F } from "./aria-idref-DCuEaknC.js";
-import { H as P } from "./helix-element-BNEYeiys.js";
-import { c as M } from "./id-counter-DuX8vsui.js";
-const D = L`
+import { f as F } from "./aria-flatten-DY6v2vah.js";
+import { i as O, r as $ } from "./aria-idref-DCuEaknC.js";
+import { H as M } from "./helix-element-BNEYeiys.js";
+import { c as P } from "./id-counter-DuX8vsui.js";
+const D = C`
   :host {
     /* P2-05: display:contents lets the trigger-wrapper control layout inline;
        position:relative was vestigial — body uses position:fixed via Floating UI */
@@ -16,6 +16,19 @@ const D = L`
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted
+   * trigger so consumers who slot bare HTML controls inherit the same ring
+   * width as <hx-button>. Token-driven: --hx-focus-ring-width (default 2px).
+   */
+  ::slotted([slot='trigger']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='body'] {
     position: fixed;
     z-index: var(--hx-popover-z-index, 9999);
@@ -81,12 +94,12 @@ const D = L`
   }
 `;
 var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, h = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? I(t, o) : t, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (i = (r ? s(t, o, i) : s(i)) || i);
+  for (var i = r > 1 ? void 0 : r ? I(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && B(t, o, i), i;
 };
-const q = M("hx-popover");
-let l = class extends P {
+const q = P("hx-popover");
+let l = class extends M {
   constructor() {
     super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._resolvedLabel = "", this._consumerLabelledBy = null, this._ariaMirror = null, this._externalRefsObserver = null, this._previousFocus = null, this._popoverId = q(), this._showTimer = null, this._hoverHideTimer = null, this._handleDocumentKeydown = (e) => {
       var t, o, r;
@@ -98,10 +111,10 @@ let l = class extends P {
         if (e.key === "Tab") {
           const i = this._getFocusableElements();
           if (i.length === 0) return;
-          const a = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="body"]'), s = a ? [a, ...i] : i;
+          const n = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="body"]'), s = n ? [n, ...i] : i;
           if (s.length === 0) return;
-          const n = s[0], c = s[s.length - 1];
-          e.shiftKey ? (document.activeElement === n || ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === n) && (e.preventDefault(), c.focus()) : (document.activeElement === c || ((r = this.shadowRoot) == null ? void 0 : r.activeElement) === c) && (e.preventDefault(), n.focus());
+          const a = s[0], c = s[s.length - 1];
+          e.shiftKey ? (document.activeElement === a || ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === a) && (e.preventDefault(), c.focus()) : (document.activeElement === c || ((r = this.shadowRoot) == null ? void 0 : r.activeElement) === c) && (e.preventDefault(), a.focus());
         }
       }
     }, this._handleDocumentClick = (e) => {
@@ -127,7 +140,7 @@ let l = class extends P {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this._syncResolvedLabel(), this._ariaMirror = $(this, () => {
+    super.connectedCallback(), this._syncResolvedLabel(), this._ariaMirror = O(this, () => {
       this._syncResolvedLabel();
     });
   }
@@ -181,11 +194,11 @@ let l = class extends P {
   _syncResolvedLabel() {
     const e = this.getAttribute("aria-labelledby");
     this._consumerLabelledBy = e;
-    const t = F(this, e);
+    const t = $(this, e);
     this._installExternalRefsObserver(t);
-    const o = (n) => n.getAttribute("aria-hidden") !== "true" && !n.hasAttribute("hidden"), r = t.filter(o).map((n) => O(n)).filter((n) => n.length > 0).join(" ").replace(/\s+/g, " ").trim(), i = this.getAttribute("aria-label"), a = i !== null ? i.trim() : "";
+    const o = (a) => a.getAttribute("aria-hidden") !== "true" && !a.hasAttribute("hidden"), r = t.filter(o).map((a) => F(a)).filter((a) => a.length > 0).join(" ").replace(/\s+/g, " ").trim(), i = this.getAttribute("aria-label"), n = i !== null ? i.trim() : "";
     let s = "";
-    r ? s = r : a ? s = a : this.label ? s = this.label : s = "Popover", this._resolvedLabel = s;
+    r ? s = r : n ? s = n : this.label ? s = this.label : s = "Popover", this._resolvedLabel = s;
   }
   // ─── ARIA setup ───
   // HIGH-02: set aria-haspopup="dialog" on firstUpdated and keep aria-expanded in sync
@@ -203,16 +216,16 @@ let l = class extends P {
   /** Return all keyboard-focusable elements inside the popover body's slotted content. */
   /** @internal */
   _getFocusableElements() {
-    var a;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('[part="body"]');
+    var n;
+    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector('[part="body"]');
     if (!e) return [];
     const t = e.querySelector("slot:not([name])");
     if (!t) return [];
     const o = t.assignedElements({ flatten: !0 }), r = 'a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary', i = [];
     for (const s of o) {
       s.matches(r) && i.push(s);
-      const n = s.querySelectorAll(r);
-      i.push(...n);
+      const a = s.querySelectorAll(r);
+      i.push(...a);
     }
     return i;
   }
@@ -244,22 +257,22 @@ let l = class extends P {
     if (!e) return;
     const t = e.assignedElements()[0], o = (b = this.shadowRoot) == null ? void 0 : b.querySelector('[part="body"]'), r = this.arrow ? (m = this.shadowRoot) == null ? void 0 : m.querySelector('[part="arrow"]') : null;
     if (!t || !o) return;
-    const { computePosition: i, flip: a, shift: s, offset: n, arrow: c } = await import("@floating-ui/dom"), p = [
-      n({ mainAxis: this.distance, crossAxis: this.skidding }),
-      a(),
+    const { computePosition: i, flip: n, shift: s, offset: a, arrow: c } = await import("@floating-ui/dom"), p = [
+      a({ mainAxis: this.distance, crossAxis: this.skidding }),
+      n(),
       s({ padding: 8 })
     ];
     r && p.push(c({ element: r }));
-    const { x: E, y: A, placement: S, middlewareData: v } = await i(t, o, {
+    const { x: A, y: E, placement: T, middlewareData: v } = await i(t, o, {
       placement: this.placement,
       strategy: "fixed",
       middleware: p
     });
     if (Object.assign(o.style, {
-      left: `${E}px`,
-      top: `${A}px`
+      left: `${A}px`,
+      top: `${E}px`
     }), r && v.arrow) {
-      const u = v.arrow, _ = S.split("-")[0] ?? "bottom", T = {
+      const u = v.arrow, _ = T.split("-")[0] ?? "bottom", S = {
         top: "bottom",
         right: "left",
         bottom: "top",
@@ -270,18 +283,18 @@ let l = class extends P {
         top: u.y != null ? `${u.y}px` : "",
         right: "",
         bottom: "",
-        [T]: "-5px"
+        [S]: "-5px"
       });
-      const C = ["border-top", "border-right", "border-bottom", "border-left"];
-      for (const H of C)
-        r.style.setProperty(H, "");
-      const y = {
+      const H = ["border-top", "border-right", "border-bottom", "border-left"];
+      for (const L of H)
+        r.style.setProperty(L, "");
+      const g = {
         bottom: ["border-bottom", "border-right"],
         top: ["border-top", "border-left"],
         right: ["border-top", "border-right"],
         left: ["border-bottom", "border-left"]
       }[_] ?? ["border-bottom", "border-right"];
-      r.style.setProperty(y[0], "1px solid transparent"), r.style.setProperty(y[1], "1px solid transparent");
+      r.style.setProperty(g[0], "1px solid transparent"), r.style.setProperty(g[1], "1px solid transparent");
     }
   }
   /**
@@ -308,7 +321,7 @@ let l = class extends P {
   }
   // ─── Render ───
   render() {
-    return x`
+    return y`
       <div
         class="trigger-wrapper"
         @click=${this._handleAnchorClick}
@@ -324,7 +337,7 @@ let l = class extends P {
         id=${this._popoverId}
         role="dialog"
         aria-label=${this._resolvedLabel}
-        aria-hidden=${this._visible ? g : "true"}
+        aria-hidden=${this._visible ? x : "true"}
         tabindex="-1"
         ?inert=${!this._visible}
         class=${this._visible ? "visible" : ""}
@@ -332,7 +345,7 @@ let l = class extends P {
         @mouseleave=${this._handleBodyMouseLeave}
       >
         <slot></slot>
-        ${this.arrow ? x`<div part="arrow"></div>` : g}
+        ${this.arrow ? y`<div part="arrow"></div>` : x}
       </div>
     `;
   }
@@ -371,4 +384,4 @@ l = h([
 export {
   l as H
 };
-//# sourceMappingURL=hx-popover-BAlAFOH9.js.map
+//# sourceMappingURL=hx-popover-BjB0nkcq.js.map

package/dist/shared/hx-popover-BjB0nkcq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-popover-BjB0nkcq.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  /*\n   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted\n   * trigger so consumers who slot bare HTML controls inherit the same ring\n   * width as <hx-button>. Token-driven: --hx-focus-ring-width (default 2px).\n   */\n  ::slotted([slot='trigger']:focus-visible),\n  ::slotted(button:focus-visible),\n  ::slotted(a: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='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';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\nimport {\n  installAriaIdrefMirror,\n  resolveIdrefTokens,\n  type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\n\nconst _nextPopoverId = createIdCounter('hx-popover');\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * ## Architecture Note: Host-Attribute Label Mirror (group-4 round-1)\n *\n * Unlike modal dialogs (`hx-dialog` / `hx-drawer`) where the HOST is the\n * announced surface and `ElementInternals` projects consumer IDREFs across\n * the shadow boundary, `hx-popover`'s announced surface is the inner\n * `[part=\"body\"]` element which carries `role=\"dialog\"`. The host does not\n * claim a role — it is a structural wrapper around an anchor slot and a\n * separate floating panel.\n *\n * IDL element references on `internals.ariaLabelledByElements` therefore\n * cannot help: AT walks the inner body's accessibility node, and IDL refs\n * declared on the host are not visible from a shadow-internal descendant\n * looking up. The viable cross-shadow path is the host-attribute mirror:\n *\n *   1. The host observes `aria-label` / `aria-labelledby` mutations.\n *   2. On every sync, `aria-labelledby` IDREFs are resolved via\n *      `resolveIdrefTokens` (composed-tree walk: host root → ancestor\n *      shadow hosts → owner document) and **text-flattened** via\n *      `flattenAccName` (AccName 1.2 §4.3.10 hidden-aware).\n *   3. The flattened name is written to the inner body's `aria-label`,\n *      overriding the `label` property only when consumer naming is set.\n *\n * Naming precedence (W3C AccName 1.2 §4.3.1):\n *\n *   1. Host `aria-labelledby` (resolved IDREFs, text-flattened)\n *   2. Host `aria-label`\n *   3. `label` property\n *   4. Hard-coded literal `\"Popover\"` (last-resort accessible name)\n *\n * The text-flatten approach forfeits live IDL-ref tracking (mutating a\n * referenced element's text re-fires through the shared root observer; see\n * `installAriaIdrefMirror`). `aria-controls` is intentionally omitted on\n * the trigger — the body lives in shadow DOM and consumer IDREFs cannot\n * resolve cross-root from light-DOM (axe-core flags this as a critical\n * violation if attempted; see line documenting this exception below).\n *\n * Slotted label support (e.g. `<slot name=\"title\">`) is deliberately NOT\n * added in this round — it would expand the public API surface and is\n * tracked as a follow-up enhancement.\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 * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-popover/AAA-AUDIT.md\n * @keyboard-contract dismiss=Escape; trap-focus=true\n * @aria-pattern dialog\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-popover\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\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   * Resolved accessible name for the popover body — the value written to\n   * the inner `[part=\"body\"]` `aria-label`. Recomputed on every sync per\n   * the AccName 1.2 §4.3.1 precedence: host `aria-labelledby` (flattened)\n   * > host `aria-label` > `label` property > literal `\"Popover\"`.\n   *\n   * Stored as state so render reads the current resolution synchronously.\n   * @internal\n   */\n  @state() private _resolvedLabel = '';\n\n  /**\n   * Most recently observed consumer-supplied `aria-labelledby` token list on\n   * the host. Refreshed every sync via `getAttribute()`.\n   * @internal\n   */\n  private _consumerLabelledBy: string | null = null;\n\n  /**\n   * Handle for the shared host attribute / root id observer.\n   * @internal\n   */\n  private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n  /**\n   * Watches in-place text / visibility mutations on consumer light-DOM\n   * elements resolved from the host's `aria-labelledby`. Reinstalled on\n   * every sync against the deduped resolved set so an in-place text change\n   * to `<h2 id=\"x\">Patient</h2>` flows into the inner body's `aria-label`.\n   * @internal\n   */\n  private _externalRefsObserver: MutationObserver | null = null;\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 connectedCallback(): void {\n    super.connectedCallback();\n    // Seed the host-attribute label mirror BEFORE first paint so the\n    // resolved label is in place when render() reads `_resolvedLabel`.\n    // The mirror's initial `sync()` fires synchronously inside\n    // `installAriaIdrefMirror`.\n    this._syncResolvedLabel();\n    this._ariaMirror = installAriaIdrefMirror(this, () => {\n      this._syncResolvedLabel();\n    });\n  }\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    this._ariaMirror?.disconnect();\n    this._ariaMirror = null;\n    this._externalRefsObserver?.disconnect();\n    this._externalRefsObserver = null;\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 willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n    // `label` property changes must flow into the resolved name BEFORE\n    // render so the new fallback is in place on the same paint. Running in\n    // `updated()` would schedule a follow-up cycle (state-from-update is\n    // re-render-triggering), making the cross-component contract: \"one\n    // updateComplete after `el.label = X` reflects the new aria-label\".\n    if (changedProperties.has('label')) {\n      this._syncResolvedLabel();\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  // ─── Host-attribute label mirror ───\n\n  /**\n   * (Re-)installs a `MutationObserver` over the deduped union of\n   * consumer-resolved label elements. Watches `characterData`, `childList`,\n   * `subtree`, and `aria-hidden` / `hidden` attributes so any in-place\n   * mutation on referenced light-DOM nodes triggers a fresh sync — keeping\n   * the flattened `aria-label` aligned with the live consumer text.\n   * @internal\n   */\n  private _installExternalRefsObserver(elements: Element[]): void {\n    if (this._externalRefsObserver) {\n      this._externalRefsObserver.disconnect();\n      this._externalRefsObserver = null;\n    }\n    if (elements.length === 0) return;\n    const unique = new Set<Element>(elements);\n    const observer = new MutationObserver(() => {\n      this._syncResolvedLabel();\n    });\n    for (const el of unique) {\n      observer.observe(el, {\n        characterData: true,\n        subtree: true,\n        childList: true,\n        attributes: true,\n        attributeFilter: ['aria-hidden', 'hidden'],\n      });\n    }\n    this._externalRefsObserver = observer;\n  }\n\n  /**\n   * Resolves the popover body's accessible name from host attributes and\n   * the `label` property, applying AccName 1.2 §4.3.1 precedence. Writes\n   * the result to `_resolvedLabel` (state) so `render()` projects it onto\n   * the inner body's `aria-label` on the next paint. The text-flatten\n   * filters out top-level `aria-hidden=\"true\"` / `[hidden]` subtrees per\n   * AccName 1.2 §4.3.10 — matching the `flattenAccName` contract used by\n   * every other host-canonical hx-* component.\n   * @internal\n   */\n  private _syncResolvedLabel(): void {\n    const liveLabelledBy = this.getAttribute('aria-labelledby');\n    this._consumerLabelledBy = liveLabelledBy;\n    const consumerLabelEls = resolveIdrefTokens(this, liveLabelledBy);\n\n    // Observe in-place mutations on the resolved external IDREF targets so\n    // text rewrites in the consumer's light DOM flow into the body's name.\n    this._installExternalRefsObserver(consumerLabelEls);\n\n    const isVisibleForAccName = (el: Element): boolean =>\n      el.getAttribute('aria-hidden') !== 'true' && !el.hasAttribute('hidden');\n\n    const flattenedFromIdrefs = consumerLabelEls\n      .filter(isVisibleForAccName)\n      .map((el) => flattenAccName(el))\n      .filter((t) => t.length > 0)\n      .join(' ')\n      .replace(/\\s+/g, ' ')\n      .trim();\n\n    const liveAriaLabel = this.getAttribute('aria-label');\n    const hostAriaLabel = liveAriaLabel !== null ? liveAriaLabel.trim() : '';\n\n    let resolved = '';\n    if (flattenedFromIdrefs) {\n      resolved = flattenedFromIdrefs;\n    } else if (hostAriaLabel) {\n      resolved = hostAriaLabel;\n    } else if (this.label) {\n      resolved = this.label;\n    } else {\n      // Last-resort literal — preserves the pre-mirror default so an\n      // unlabeled popover still has SOME announced name.\n      resolved = 'Popover';\n    }\n\n    this._resolvedLabel = resolved;\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._resolvedLabel}\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","installAriaIdrefMirror","changedProperties","elements","unique","observer","el","liveLabelledBy","consumerLabelEls","resolveIdrefTokens","isVisibleForAccName","flattenedFromIdrefs","flattenAccName","t","liveAriaLabel","hostAriaLabel","resolved","expanded","anchorSlot","anchorEl","defaultSlot","assigned","focusableSelector","result","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-COUXXZ9X.js → hx-popup-BiV_2evC.js}

@@ -1,12 +1,26 @@
-import { css as A, nothing as z, html as m } from "lit";
+import { css as S, nothing as z, html as m } from "lit";
 import { property as r, customElement as P } from "lit/decorators.js";
 import { a as U } from "./forced-colors-CTEDFRGa.js";
 import { H as C } from "./helix-element-BNEYeiys.js";
-const E = A`
+const E = S`
   :host {
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on slotted
+   * trigger / anchor controls. hx-popup is a positioning primitive: it
+   * paints no surface itself, but slotted natives (<button>, <a>) must
+   * still meet the AAA ring threshold. Token-driven.
+   */
+  ::slotted([slot='anchor']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-popup-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='popup'] {
     position: fixed;
     z-index: var(--hx-popup-z-index, 9000);
@@ -46,12 +60,12 @@ const E = A`
     }
   }
 `;
-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 && k(i, e, n), n;
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, o, e, s) => {
+  for (var n = s > 1 ? void 0 : s ? $(o, e) : o, p = t.length - 1, l; p >= 0; p--)
+    (l = t[p]) && (n = (s ? l(o, e, n) : l(n)) || n);
+  return s && n && k(o, e, n), n;
 };
-let o = class extends C {
+let i = 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";
   }
@@ -68,8 +82,8 @@ let o = class extends C {
   }
   updated(t) {
     super.updated(t);
-    const i = t.has("active"), e = t.has("placement") || t.has("distance") || t.has("skidding") || t.has("arrow") || t.has("arrowPadding") || t.has("arrowPlacement") || t.has("flip") || t.has("flipFallbackPlacements") || t.has("shift") || t.has("autoSize") || t.has("anchor") || t.has("strategy");
-    i ? this.active ? this._startAutoUpdate() : (this._stopAutoUpdate(), this.autoSize && (this.style.removeProperty("--hx-auto-size-available-width"), this.style.removeProperty("--hx-auto-size-available-height"))) : e && this.active && this._reposition(), t.has("autoSize") && !this.autoSize && (this.style.removeProperty("--hx-auto-size-available-width"), this.style.removeProperty("--hx-auto-size-available-height"));
+    const o = t.has("active"), e = t.has("placement") || t.has("distance") || t.has("skidding") || t.has("arrow") || t.has("arrowPadding") || t.has("arrowPlacement") || t.has("flip") || t.has("flipFallbackPlacements") || t.has("shift") || t.has("autoSize") || t.has("anchor") || t.has("strategy");
+    o ? this.active ? this._startAutoUpdate() : (this._stopAutoUpdate(), this.autoSize && (this.style.removeProperty("--hx-auto-size-available-width"), this.style.removeProperty("--hx-auto-size-available-height"))) : e && this.active && this._reposition(), t.has("autoSize") && !this.autoSize && (this.style.removeProperty("--hx-auto-size-available-width"), this.style.removeProperty("--hx-auto-size-available-height"));
   }
   // ─── Anchor Resolution ───
   /** @internal */
@@ -86,10 +100,10 @@ let o = class extends C {
   async _startAutoUpdate() {
     var s;
     this._stopAutoUpdate();
-    const t = this._getAnchorElement(), i = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[part="popup"]');
-    if (!t || !i) return;
+    const t = this._getAnchorElement(), o = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[part="popup"]');
+    if (!t || !o) return;
     const { autoUpdate: e } = await this._loadFloatingUi();
-    this._cleanupAutoUpdate = e(t, i, () => {
+    this._cleanupAutoUpdate = e(t, o, () => {
       this._reposition();
     });
   }
@@ -101,8 +115,8 @@ let o = class extends C {
   /** @internal */
   async _reposition() {
     var d, f;
-    const t = this._getAnchorElement(), i = (d = this.shadowRoot) == null ? void 0 : d.querySelector('[part="popup"]');
-    if (!t || !i) return;
+    const t = this._getAnchorElement(), o = (d = this.shadowRoot) == null ? void 0 : d.querySelector('[part="popup"]');
+    if (!t || !o) return;
     const e = this.arrow ? ((f = this.shadowRoot) == null ? void 0 : f.querySelector('[part="arrow"]')) ?? null : null, {
       computePosition: s,
       flip: n,
@@ -110,40 +124,40 @@ let o = class extends C {
       offset: l,
       arrow: u,
       size: y,
-      autoPlacement: b
+      autoPlacement: v
     } = await this._loadFloatingUi(), h = [
       l({ mainAxis: this.distance, crossAxis: this.skidding })
     ];
-    this.placement === "auto" ? h.push(b()) : this.flip && h.push(
+    this.placement === "auto" ? h.push(v()) : this.flip && h.push(
       n({
         fallbackPlacements: this.flipFallbackPlacements
       })
     ), this.shift && h.push(p({ padding: 8 })), e && h.push(u({ element: e, padding: this.arrowPadding })), this.autoSize && h.push(
       y({
-        apply: ({ availableWidth: c, availableHeight: S }) => {
-          this.style.setProperty("--hx-auto-size-available-width", `${c}px`), this.style.setProperty("--hx-auto-size-available-height", `${S}px`);
+        apply: ({ availableWidth: c, availableHeight: A }) => {
+          this.style.setProperty("--hx-auto-size-available-width", `${c}px`), this.style.setProperty("--hx-auto-size-available-height", `${A}px`);
         }
       })
     );
-    const v = this.placement === "auto" ? "bottom" : this.placement;
-    i.style.position = this.strategy;
-    const { x: w, y: x, placement: g, middlewareData: _ } = await s(t, i, {
-      placement: v,
+    const b = this.placement === "auto" ? "bottom" : this.placement;
+    o.style.position = this.strategy;
+    const { x: g, y: x, placement: w, middlewareData: _ } = await s(t, o, {
+      placement: b,
       strategy: this.strategy,
       middleware: h
     });
-    if (Object.assign(i.style, {
-      left: `${w}px`,
+    if (Object.assign(o.style, {
+      left: `${g}px`,
       top: `${x}px`
     }), e) {
       const c = _.arrow;
-      this._positionArrow(e, g, c);
+      this._positionArrow(e, w, c);
     }
     this.dispatchEvent(new CustomEvent("hx-reposition", { bubbles: !0, composed: !0 }));
   }
   /** @internal */
-  _positionArrow(t, i, e) {
-    const s = i.split("-")[0], p = {
+  _positionArrow(t, o, e) {
+    const s = o.split("-")[0], p = {
       top: "bottom",
       right: "left",
       bottom: "top",
@@ -174,34 +188,34 @@ let o = class extends C {
     `;
   }
 };
-o.styles = [E, U];
+i.styles = [E, U];
 a([
   r({ attribute: "anchor" })
-], o.prototype, "anchor", 2);
+], i.prototype, "anchor", 2);
 a([
   r({ type: String, reflect: !0 })
-], o.prototype, "placement", 2);
+], i.prototype, "placement", 2);
 a([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "active", 2);
+], i.prototype, "active", 2);
 a([
   r({ type: Number, reflect: !0 })
-], o.prototype, "distance", 2);
+], i.prototype, "distance", 2);
 a([
   r({ type: Number, reflect: !0 })
-], o.prototype, "skidding", 2);
+], i.prototype, "skidding", 2);
 a([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "arrow", 2);
+], i.prototype, "arrow", 2);
 a([
   r({ attribute: "arrow-placement", reflect: !0 })
-], o.prototype, "arrowPlacement", 2);
+], i.prototype, "arrowPlacement", 2);
 a([
   r({ type: Number, attribute: "arrow-padding" })
-], o.prototype, "arrowPadding", 2);
+], i.prototype, "arrowPadding", 2);
 a([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "flip", 2);
+], i.prototype, "flip", 2);
 a([
   r({
     attribute: "flip-fallback-placements",
@@ -219,20 +233,20 @@ a([
       }
     }
   })
-], o.prototype, "flipFallbackPlacements", 2);
+], i.prototype, "flipFallbackPlacements", 2);
 a([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "shift", 2);
+], i.prototype, "shift", 2);
 a([
   r({ type: Boolean, attribute: "auto-size", reflect: !0 })
-], o.prototype, "autoSize", 2);
+], i.prototype, "autoSize", 2);
 a([
   r({ reflect: !0 })
-], o.prototype, "strategy", 2);
-o = a([
+], i.prototype, "strategy", 2);
+i = a([
   P("hx-popup")
-], o);
+], i);
 export {
-  o as H
+  i as H
 };
-//# sourceMappingURL=hx-popup-COUXXZ9X.js.map
+//# sourceMappingURL=hx-popup-BiV_2evC.js.map