@helixui/library 3.5.0 → 3.7.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-radio-C7eTj5YI.js → hx-radio-CY4kQfZw.js}

@@ -116,18 +116,18 @@ const N = O`
     }
   }
 `;
-var K = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? P(t, i) : t, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (s = (r ? a(t, i, s) : a(s)) || s);
-  return r && s && K(t, i, s), s;
+var K = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? P(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (i = (r ? a(t, s, i) : a(i)) || i);
+  return r && i && K(t, s, i), i;
 };
 const U = z("hx-radio-group");
 function H(e) {
   const t = e.querySelector("slot");
   if (t) {
-    const i = t.assignedNodes({ flatten: !0 });
-    if (i.length > 0)
-      return i.map((r) => r.textContent ?? "").join("").trim();
+    const s = t.assignedNodes({ flatten: !0 });
+    if (s.length > 0)
+      return s.map((r) => r.textContent ?? "").join("").trim();
   }
   return (e.textContent ?? "").trim();
 }
@@ -168,9 +168,9 @@ let l = class extends G($) {
         );
         return;
       }
-      const r = (b = (c = e.target) == null ? void 0 : c.closest) == null ? void 0 : b.call(c, "hx-radio"), s = r ? t.indexOf(r) : t.findIndex((h) => h.checked);
+      const r = (b = (c = e.target) == null ? void 0 : c.closest) == null ? void 0 : b.call(c, "hx-radio"), i = r ? t.indexOf(r) : t.findIndex((h) => h.checked);
       let o;
-      e.key === "Home" ? o = 0 : e.key === "End" ? o = t.length - 1 : e.key === "ArrowDown" || e.key === "ArrowRight" ? o = s === -1 ? 0 : (s + 1) % t.length : o = s <= 0 ? t.length - 1 : s - 1;
+      e.key === "Home" ? o = 0 : e.key === "End" ? o = t.length - 1 : e.key === "ArrowDown" || e.key === "ArrowRight" ? o = i === -1 ? 0 : (i + 1) % t.length : o = i <= 0 ? t.length - 1 : i - 1;
       const a = t[o];
       a && (a.focus(), a.dispatchEvent(
         new CustomEvent("hx-radio-select", {
@@ -213,8 +213,8 @@ let l = class extends G($) {
    * @internal
    */
   _installHelpSlotTextObserver(e) {
-    var i;
-    if ((i = this._helpSlotTextObserver) == null || i.disconnect(), !e) {
+    var s;
+    if ((s = this._helpSlotTextObserver) == null || s.disconnect(), !e) {
       this._helpSlotTextObserver = null;
       return;
     }
@@ -235,8 +235,8 @@ let l = class extends G($) {
    * @internal
    */
   _installErrorSlotTextObserver(e) {
-    var i;
-    if ((i = this._errorSlotTextObserver) == null || i.disconnect(), !e) {
+    var s;
+    if ((s = this._errorSlotTextObserver) == null || s.disconnect(), !e) {
       this._errorSlotTextObserver = null;
       return;
     }
@@ -262,9 +262,9 @@ let l = class extends G($) {
     }), this._previousRadios = e);
   }
   disconnectedCallback() {
-    var e, t, i, r;
-    super.disconnectedCallback(), this.removeEventListener("hx-radio-select", this._handleRadioSelect), this.removeEventListener("keydown", this._handleKeydown), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._childDisabledObserver) == null || t.disconnect(), this._childDisabledObserver = null, (i = this._helpSlotTextObserver) == null || i.disconnect(), this._helpSlotTextObserver = null, (r = this._errorSlotTextObserver) == null || r.disconnect(), this._errorSlotTextObserver = null, this._previousRadios.forEach((s) => {
-      this._suppressedChildren.has(s) && (s._groupedSuppress = !1, this._suppressedChildren.delete(s));
+    var e, t, s, r;
+    super.disconnectedCallback(), this.removeEventListener("hx-radio-select", this._handleRadioSelect), this.removeEventListener("keydown", this._handleKeydown), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null, (t = this._childDisabledObserver) == null || t.disconnect(), this._childDisabledObserver = null, (s = this._helpSlotTextObserver) == null || s.disconnect(), this._helpSlotTextObserver = null, (r = this._errorSlotTextObserver) == null || r.disconnect(), this._errorSlotTextObserver = null, this._previousRadios.forEach((i) => {
+      this._suppressedChildren.has(i) && (i._groupedSuppress = !1, this._suppressedChildren.delete(i));
     }), this._previousRadios = [];
   }
   updated(e) {
@@ -284,14 +284,14 @@ let l = class extends G($) {
     var E, w, k, C;
     const e = this._internals;
     e.role = "radiogroup", e.ariaRequired = this.required ? "true" : "false", e.ariaInvalid = e.validity.valid ? "false" : "true", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaOrientation = this.orientation === "horizontal" ? "horizontal" : "vertical";
-    const t = ((E = this.getAttribute("aria-label")) == null ? void 0 : E.trim()) || "", i = (w = this.shadowRoot) == null ? void 0 : w.getElementById(`${this._groupId}-legend`), r = (k = this.shadowRoot) == null ? void 0 : k.getElementById(this._helpTextId), s = (C = this.shadowRoot) == null ? void 0 : C.getElementById(this._errorId), o = this.getAttribute("aria-labelledby");
+    const t = ((E = this.getAttribute("aria-label")) == null ? void 0 : E.trim()) || "", s = (w = this.shadowRoot) == null ? void 0 : w.getElementById(`${this._groupId}-legend`), r = (k = this.shadowRoot) == null ? void 0 : k.getElementById(this._helpTextId), i = (C = this.shadowRoot) == null ? void 0 : C.getElementById(this._errorId), o = this.getAttribute("aria-labelledby");
     o !== this._lastWrittenLabelledBy && (this._consumerLabelledBy = o);
     const a = this.getAttribute("aria-describedby");
     a !== this._lastWrittenDescribedBy && (this._consumerDescribedBy = a);
     const u = this._consumerLabelledBy, p = this._consumerDescribedBy, c = T(this, u), b = c.length > 0;
-    t ? e.ariaLabel = t : b ? e.ariaLabel = null : e.ariaLabel = this.label || null, c.length === 0 && !t && this.label && i && c.push(i);
+    t ? e.ariaLabel = t : b ? e.ariaLabel = null : e.ariaLabel = this.label || null, c.length === 0 && !t && this.label && s && c.push(s);
     const h = T(this, p), v = !!(this.error || this._hasErrorSlot);
-    if (r && !v && (this.helpText || this._hasHelpSlot) && h.push(r), s && v && h.push(s), this._supportsIdrefRefs) {
+    if (r && !v && (this.helpText || this._hasHelpSlot) && h.push(r), i && v && h.push(i), this._supportsIdrefRefs) {
       const g = e;
       g.ariaLabelledByElements = c.length > 0 ? c : null, g.ariaDescribedByElements = h.length > 0 ? h : null, e.ariaDescription = null;
     } else {
@@ -299,7 +299,7 @@ let l = class extends G($) {
       x ? (I !== x && this.setAttribute("aria-labelledby", x), this._lastWrittenLabelledBy = x) : I !== null && (this.removeAttribute("aria-labelledby"), this._lastWrittenLabelledBy = null);
       const m = [...M].filter(Boolean).join(" ") || "", D = this.getAttribute("aria-describedby");
       m ? (D !== m && this.setAttribute("aria-describedby", m), this._lastWrittenDescribedBy = m) : D !== null && this._lastWrittenDescribedBy !== null && (this.removeAttribute("aria-describedby"), this._lastWrittenDescribedBy = null);
-      const F = r && !v && (this.helpText || this._hasHelpSlot) ? H(r) : "", q = s && v ? H(s) : "", W = [F, q].filter(Boolean).join(" ");
+      const F = r && !v && (this.helpText || this._hasHelpSlot) ? H(r) : "", q = i && v ? H(i) : "", W = [F, q].filter(Boolean).join(" ");
       e.ariaDescription = W || null;
     }
   }
@@ -328,19 +328,19 @@ let l = class extends G($) {
     const e = this._getRadios(), t = this._getEnabledRadios();
     e.forEach((r) => {
       r._groupedSuppress = !0, this._suppressedChildren.add(r);
-      const s = r.value === this.value && this.value !== "";
-      if (r.checked = s, this.disabled)
+      const i = r.value === this.value && this.value !== "";
+      if (r.checked = i, this.disabled)
         this._individualDisabledStates.has(r) || this._individualDisabledStates.set(r, r.disabled), r.disabled = !0;
       else {
         const o = this._individualDisabledStates.get(r);
         o !== void 0 && (r.disabled = o, this._individualDisabledStates.delete(r));
       }
     });
-    const i = t.find((r) => r.checked);
+    const s = t.find((r) => r.checked);
     if (e.forEach((r) => {
       r.tabIndex = -1;
-    }), i)
-      i.tabIndex = 0;
+    }), s)
+      s.tabIndex = 0;
     else if (t.length > 0) {
       const r = t[0];
       r && (r.tabIndex = 0);
@@ -377,17 +377,17 @@ let l = class extends G($) {
    * @internal
    */
   _reconcileChildren() {
-    const e = this._previousRadios, t = this._getRadios().filter((s) => s.checked && !s.disabled), i = t.find((s) => s.value !== this.value) ?? t[0];
-    if (i && i.value !== this.value && (this.value = i.value), this._syncRadios(), this.disabled) {
-      const s = this._getRadios().map((o) => o.value);
-      this.value && !s.includes(this.value) && (this.value = ""), this._updateValidity();
+    const e = this._previousRadios, t = this._getRadios().filter((i) => i.checked && !i.disabled), s = t.find((i) => i.value !== this.value) ?? t[0];
+    if (s && s.value !== this.value && (this.value = s.value), this._syncRadios(), this.disabled) {
+      const i = this._getRadios().map((o) => o.value);
+      this.value && !i.includes(this.value) && (this.value = ""), this._updateValidity();
     } else {
-      const s = this._getRadios().find((a) => a.checked && !a.disabled), o = (s == null ? void 0 : s.value) ?? "";
+      const i = this._getRadios().find((a) => a.checked && !a.disabled), o = (i == null ? void 0 : i.value) ?? "";
       o !== this.value && (this.value = o), this._internals.setFormValue(this.value || null), this._updateValidity();
     }
     const r = new Set(this._getRadios());
-    e.forEach((s) => {
-      !r.has(s) && this._suppressedChildren.has(s) && (s._groupedSuppress = !1, this._suppressedChildren.delete(s));
+    e.forEach((i) => {
+      !r.has(i) && this._suppressedChildren.has(i) && (i._groupedSuppress = !1, this._suppressedChildren.delete(i));
     }), this._previousRadios = this._getRadios();
   }
   /**
@@ -398,15 +398,15 @@ let l = class extends G($) {
    * @internal
    */
   _installChildDisabledObservers() {
-    var i;
-    (i = this._childDisabledObserver) == null || i.disconnect();
+    var s;
+    (s = this._childDisabledObserver) == null || s.disconnect();
     const e = this._getRadios();
     if (e.length === 0) {
       this._childDisabledObserver = null;
       return;
     }
     const t = new MutationObserver((r) => {
-      r.some((s) => s.attributeName === "disabled") && this._reconcileChildren();
+      r.some((i) => i.attributeName === "disabled") && this._reconcileChildren();
     });
     e.forEach((r) => {
       t.observe(r, {
@@ -446,7 +446,7 @@ let l = class extends G($) {
   }
   // ─── Render ───
   render() {
-    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpSlot, i = `${this._groupId}-legend`, r = {
+    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpSlot, s = `${this._groupId}-legend`, r = {
       fieldset: !0,
       "fieldset--error": e,
       "fieldset--disabled": this.disabled,
@@ -460,7 +460,7 @@ let l = class extends G($) {
         aria-orientation=${this.orientation === "horizontal" ? "horizontal" : R}
       >
         ${this.label ? y`
-              <legend part="legend" class="fieldset__legend" id=${i}>
+              <legend part="legend" class="fieldset__legend" id=${s}>
                 ${this.label}
                 ${this.required ? y`<span class="fieldset__required-marker" aria-hidden="true">*</span>` : R}
               </legend>
@@ -622,8 +622,8 @@ const J = O`
   /* ─── Checked State ─── */
 
   .radio--checked .radio__control {
-    border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #429797));
-    background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #429797));
+    border-color: var(--hx-radio-checked-border-color, var(--hx-color-action-primary-bg, #0f7078));
+    background-color: var(--hx-radio-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
   }
 
   .radio--checked .radio__dot {
@@ -709,10 +709,10 @@ const J = O`
     }
   }
 `;
-var Q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, f = (e, t, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? X(t, i) : t, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (s = (r ? a(t, i, s) : a(s)) || s);
-  return r && s && Q(t, i, s), s;
+var Q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, f = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? X(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (i = (r ? a(t, s, i) : a(i)) || i);
+  return r && i && Q(t, s, i), i;
 };
 const Y = z("hx-radio");
 let _ = class extends $ {
@@ -819,4 +819,4 @@ export {
   _ as H,
   l as a
 };
-//# sourceMappingURL=hx-radio-C7eTj5YI.js.map
+//# sourceMappingURL=hx-radio-CY4kQfZw.js.map