@helixui/library 0.3.4 → 1.0.0

package/dist/shared/{hx-pagination-DNFgXQm3.js → hx-pagination-BQ0cLTuB.js}

@@ -1,9 +1,9 @@
 import { css as m, LitElement as x, nothing as b, html as u } from "lit";
 import { property as h, state as v, customElement as y } from "lit/decorators.js";
-import { classMap as $ } from "lit/directives/class-map.js";
+import { classMap as P } from "lit/directives/class-map.js";
 import { repeat as w } from "lit/directives/repeat.js";
-import { tokenStyles as z } from "@helixui/tokens/lit";
-const P = m`
+import { tokenStyles as $ } from "@helixui/tokens/lit";
+const z = m`
   :host {
     display: block;
     font-family: var(--hx-font-family-sans, sans-serif);
@@ -193,41 +193,41 @@ const P = m`
     }
   }
 `;
-var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (r, t, i, a) => {
-  for (var e = a > 1 ? void 0 : a ? k(t, i) : t, s = r.length - 1, c; s >= 0; s--)
-    (c = r[s]) && (e = (a ? c(t, i, e) : c(e)) || e);
-  return a && e && _(t, i, e), e;
+var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (i, t, r, a) => {
+  for (var e = a > 1 ? void 0 : a ? k(t, r) : t, n = i.length - 1, c; n >= 0; n--)
+    (c = i[n]) && (e = (a ? c(t, r, e) : c(e)) || e);
+  return a && e && _(t, r, e), e;
 };
-let n = class extends x {
+let s = class extends x {
   constructor() {
-    super(...arguments), this.totalPages = 1, this.currentPage = 1, this.siblingCount = 1, this.boundaryCount = 1, this.showFirstLast = !1, this.label = "Pagination", this.pageSize = 25, this.showPageSize = !1, this._rovingKey = null, this._liveMessage = "", this._pageRangeCache = null;
+    super(...arguments), this.totalPages = 1, this.currentPage = 1, this.siblingCount = 1, this.boundaryCount = 1, this.showFirstLast = !1, this.label = "Pagination", this.pageSize = 25, this.showPageSize = !1, this.labelRowsPerPage = "Rows per page:", this._rovingKey = null, this._liveMessage = "", this._pageRangeCache = null;
   }
   // ─── Helpers ───
   _buildPageRange() {
     var f;
-    const r = `${this.totalPages}-${this.currentPage}-${this.siblingCount}-${this.boundaryCount}`;
-    if (((f = this._pageRangeCache) == null ? void 0 : f.key) === r) return this._pageRangeCache.result;
-    const t = Math.max(1, this.totalPages), i = Math.min(Math.max(1, this.currentPage), t), a = Math.max(0, this.boundaryCount), e = Math.max(0, this.siblingCount), s = this._range(1, Math.min(a, t)), c = this._range(Math.max(t - a + 1, a + 1), t), g = Math.max(
-      Math.min(i - e, t - a - e * 2 - 1),
+    const i = `${this.totalPages}-${this.currentPage}-${this.siblingCount}-${this.boundaryCount}`;
+    if (((f = this._pageRangeCache) == null ? void 0 : f.key) === i) return this._pageRangeCache.result;
+    const t = Math.max(1, this.totalPages), r = Math.min(Math.max(1, this.currentPage), t), a = Math.max(0, this.boundaryCount), e = Math.max(0, this.siblingCount), n = this._range(1, Math.min(a, t)), c = this._range(Math.max(t - a + 1, a + 1), t), g = Math.max(
+      Math.min(r - e, t - a - e * 2 - 1),
       a + 2
     ), p = Math.min(
-      Math.max(i + e, a + e * 2 + 2),
-      c.length > 0 ? c[0] - 2 : t - 1
+      Math.max(r + e, a + e * 2 + 2),
+      c.length > 0 ? (c[0] ?? t) - 2 : t - 1
     ), o = [];
-    for (const d of s) o.push(d);
+    for (const d of n) o.push(d);
     g > a + 2 ? o.push("ellipsis") : a + 1 < g && o.push(a + 1);
     for (const d of this._range(g, p)) o.push(d);
     p < t - a - 1 ? o.push("ellipsis") : p < t - a && o.push(t - a);
     for (const d of c) o.push(d);
-    return this._pageRangeCache = { key: r, result: o }, o;
+    return this._pageRangeCache = { key: i, result: o }, o;
   }
-  _range(r, t) {
-    const i = [];
-    for (let a = r; a <= t; a++) i.push(a);
-    return i;
+  _range(i, t) {
+    const r = [];
+    for (let a = i; a <= t; a++) r.push(a);
+    return r;
   }
-  _navigate(r) {
-    const t = Math.min(Math.max(1, r), this.totalPages);
+  _navigate(i) {
+    const t = Math.min(Math.max(1, i), this.totalPages);
     t !== this.currentPage && (this.currentPage = t, this._rovingKey = null, this._liveMessage = `Page ${t} of ${this.totalPages}`, this.dispatchEvent(
       new CustomEvent("hx-page-change", {
         detail: { page: t },
@@ -236,11 +236,11 @@ let n = class extends x {
       })
     ));
   }
-  _handlePageSizeChange(r) {
-    const t = r.target, i = Number(t.value);
-    i !== this.pageSize && (this.pageSize = i, this.dispatchEvent(
+  _handlePageSizeChange(i) {
+    const t = i.target, r = Number(t.value);
+    r !== this.pageSize && (this.pageSize = r, this.dispatchEvent(
       new CustomEvent("hx-page-size-change", {
-        detail: { pageSize: i },
+        detail: { pageSize: r },
         bubbles: !0,
         composed: !0
       })
@@ -249,21 +249,21 @@ let n = class extends x {
   get _effectiveRovingKey() {
     return this._rovingKey ?? this.currentPage;
   }
-  _handleFocusin(r) {
-    const t = r.target;
+  _handleFocusin(i) {
+    const t = i.target;
     if (t.tagName !== "BUTTON") return;
-    const i = t.dataset.rovingKey;
-    i !== void 0 && (this._rovingKey = isNaN(Number(i)) ? i : Number(i));
+    const r = t.dataset.rovingKey;
+    r !== void 0 && (this._rovingKey = isNaN(Number(r)) ? r : Number(r));
   }
-  _handleKeydown(r) {
+  _handleKeydown(i) {
     var c, g;
-    if (r.key !== "ArrowLeft" && r.key !== "ArrowRight") return;
-    r.preventDefault();
+    if (i.key !== "ArrowLeft" && i.key !== "ArrowRight") return;
+    i.preventDefault();
     const t = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".list");
     if (!t) return;
-    const i = Array.from(t.querySelectorAll("button:not([disabled])")), a = (g = this.shadowRoot) == null ? void 0 : g.activeElement, e = a ? i.indexOf(a) : 0, s = r.key === "ArrowLeft" ? Math.max(0, e - 1) : Math.min(i.length - 1, e + 1);
-    if (s !== e) {
-      const p = i[s];
+    const r = Array.from(t.querySelectorAll("button:not([disabled])")), a = (g = this.shadowRoot) == null ? void 0 : g.activeElement, e = a ? r.indexOf(a) : 0, n = i.key === "ArrowLeft" ? Math.max(0, e - 1) : Math.min(r.length - 1, e + 1);
+    if (n !== e) {
+      const p = r[n];
       if (!p) return;
       const o = p.dataset.rovingKey;
       o !== void 0 && (this._rovingKey = isNaN(Number(o)) ? o : Number(o)), p.focus();
@@ -271,13 +271,13 @@ let n = class extends x {
   }
   // ─── Render ───
   render() {
-    const r = this._buildPageRange(), t = this.currentPage <= 1, i = this.currentPage >= this.totalPages, a = this._effectiveRovingKey;
+    const i = this._buildPageRange(), t = this.currentPage <= 1, r = this.currentPage >= this.totalPages, a = this._effectiveRovingKey;
     return u`
       <div class="pagination-root">
         ${this.showPageSize ? u`
               <div part="page-size-wrapper" class="page-size-wrapper">
                 <label part="page-size-label" class="page-size-label">
-                  Rows per page:
+                  ${this.labelRowsPerPage}
                   <select
                     part="page-size-select"
                     class="page-size-select"
@@ -333,8 +333,8 @@ let n = class extends x {
             </li>
 
             ${w(
-      r,
-      (e, s) => e === "ellipsis" ? `ellipsis-${s}` : `page-${e}`,
+      i,
+      (e, n) => e === "ellipsis" ? `ellipsis-${n}` : `page-${e}`,
       (e) => {
         if (e === "ellipsis")
           return u`
@@ -342,16 +342,16 @@ let n = class extends x {
                       <span part="ellipsis" class="ellipsis" aria-hidden="true">…</span>
                     </li>
                   `;
-        const s = e === this.currentPage;
+        const n = e === this.currentPage;
         return u`
                   <li part="item" class="item">
                     <button
                       part="button"
-                      class=${$({ button: !0 })}
-                      aria-disabled=${s ? "true" : b}
+                      class=${P({ button: !0 })}
+                      aria-disabled=${n ? "true" : b}
                       tabindex=${a === e ? 0 : -1}
                       data-roving-key=${e}
-                      aria-current=${s ? "page" : b}
+                      aria-current=${n ? "page" : b}
                       aria-label=${`Page ${e}`}
                       @click=${() => this._navigate(e)}
                     >
@@ -366,7 +366,7 @@ let n = class extends x {
               <button
                 part="button"
                 class="button"
-                ?disabled=${i}
+                ?disabled=${r}
                 tabindex=${a === "next" ? 0 : -1}
                 data-roving-key="next"
                 aria-label="Next page"
@@ -381,7 +381,7 @@ let n = class extends x {
                     <button
                       part="button"
                       class="button"
-                      ?disabled=${i}
+                      ?disabled=${r}
                       tabindex=${a === "last" ? 0 : -1}
                       data-roving-key="last"
                       aria-label="Last page"
@@ -397,41 +397,44 @@ let n = class extends x {
     `;
   }
 };
-n.styles = [z, P];
+s.styles = [$, z];
 l([
   h({ type: Number, attribute: "total-pages", reflect: !0 })
-], n.prototype, "totalPages", 2);
+], s.prototype, "totalPages", 2);
 l([
   h({ type: Number, attribute: "current-page" })
-], n.prototype, "currentPage", 2);
+], s.prototype, "currentPage", 2);
 l([
   h({ type: Number, attribute: "sibling-count", reflect: !0 })
-], n.prototype, "siblingCount", 2);
+], s.prototype, "siblingCount", 2);
 l([
   h({ type: Number, attribute: "boundary-count", reflect: !0 })
-], n.prototype, "boundaryCount", 2);
+], s.prototype, "boundaryCount", 2);
 l([
   h({ type: Boolean, attribute: "show-first-last", reflect: !0 })
-], n.prototype, "showFirstLast", 2);
+], s.prototype, "showFirstLast", 2);
 l([
   h({ type: String, reflect: !0 })
-], n.prototype, "label", 2);
+], s.prototype, "label", 2);
 l([
   h({ type: Number, attribute: "page-size", reflect: !0 })
-], n.prototype, "pageSize", 2);
+], s.prototype, "pageSize", 2);
 l([
   h({ type: Boolean, attribute: "show-page-size", reflect: !0 })
-], n.prototype, "showPageSize", 2);
+], s.prototype, "showPageSize", 2);
+l([
+  h({ type: String, attribute: "label-rows-per-page" })
+], s.prototype, "labelRowsPerPage", 2);
 l([
   v()
-], n.prototype, "_rovingKey", 2);
+], s.prototype, "_rovingKey", 2);
 l([
   v()
-], n.prototype, "_liveMessage", 2);
-n = l([
+], s.prototype, "_liveMessage", 2);
+s = l([
   y("hx-pagination")
-], n);
+], s);
 export {
-  n as H
+  s as H
 };
-//# sourceMappingURL=hx-pagination-DNFgXQm3.js.map
+//# sourceMappingURL=hx-pagination-BQ0cLTuB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-pagination-BQ0cLTuB.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-font-family-sans, sans-serif);\n  }\n\n  .pagination-root {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-spacing-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-spacing-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, 2.25rem);\n    height: var(--hx-pagination-button-size, 2.25rem);\n    padding: 0 var(--hx-spacing-2, 0.5rem);\n    border: 1px solid var(--hx-pagination-border-color, var(--hx-color-border, #d1d5db));\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, #ffffff));\n    color: var(--hx-pagination-color, var(--hx-color-text-primary, #111827));\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-hover, #f3f4f6));\n    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary, #2563eb));\n  }\n\n  .button:focus-visible {\n    outline: 2px solid var(--hx-color-focus, var(--hx-color-primary, #2563eb));\n    outline-offset: 2px;\n  }\n\n  .button[aria-current='page'] {\n    background: var(--hx-pagination-active-bg, var(--hx-color-primary, #2563eb));\n    border-color: var(\n      --hx-pagination-active-border-color,\n      var(--hx-pagination-active-bg, var(--hx-color-primary, #2563eb))\n    );\n    color: var(--hx-pagination-active-color, var(--hx-color-surface, #ffffff));\n    font-weight: var(--hx-font-weight-semibold, 600);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:disabled {\n    opacity: 0.4;\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, 2.25rem);\n    height: var(--hx-pagination-button-size, 2.25rem);\n    color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-secondary, #6b7280));\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-spacing-2, 0.5rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-color-text-secondary, #6b7280);\n    white-space: nowrap;\n  }\n\n  .page-size-select {\n    height: var(--hx-pagination-button-size, 2.25rem);\n    padding: 0 var(--hx-spacing-2, 0.5rem);\n    border: 1px solid var(--hx-pagination-border-color, var(--hx-color-border, #d1d5db));\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, #ffffff));\n    color: var(--hx-pagination-color, var(--hx-color-text-primary, #111827));\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: 2px solid var(--hx-color-focus, var(--hx-color-primary, #2563eb));\n    outline-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 { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixPaginationStyles } from './hx-pagination.styles.js';\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 */\n@customElement('hx-pagination')\nexport class HelixPagination extends LitElement {\n  static override styles = [tokenStyles, helixPaginationStyles];\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  /** Tracks the roving tabindex target. Null means default to currentPage. */\n  @state() private _rovingKey: number | string | null = null;\n\n  /** Text for the aria-live region, updated on navigation. */\n  @state() private _liveMessage = '';\n\n  /** Memoization cache for _buildPageRange. */\n  private _pageRangeCache: { key: string; result: Array<number | 'ellipsis'> } | null = null;\n\n  // ─── Helpers ───\n\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  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  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 = `Page ${clamped} of ${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\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  private get _effectiveRovingKey(): number | string {\n    return this._rovingKey ?? this.currentPage;\n  }\n\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  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') 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    const nextIdx =\n      e.key === 'ArrowLeft'\n        ? Math.max(0, currentIdx - 1)\n        : Math.min(buttons.length - 1, currentIdx + 1);\n\n    if (nextIdx !== currentIdx) {\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=\"First page\"\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=\"Previous page\"\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=${`Page ${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=\"Next page\"\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=\"Last page\"\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","LitElement","key","_a","total","current","boundary","sibling","startPages","endPages","siblingStart","siblingEnd","items","p","start","end","result","i","page","clamped","e","select","newSize","btn","list","buttons","focused","_b","currentIdx","nextIdx","nextBtn","pages","isFirst","isLast","rovingKey","html","n","nothing","repeat","isCurrent","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-popover-BjAyLbzp.js → hx-popover-BQsgrJCW.js}

@@ -1,7 +1,7 @@
 import { css as w, LitElement as E, html as m } from "lit";
 import { property as a, state as A, customElement as k } from "lit/decorators.js";
-import { tokenStyles as S } from "@helixui/tokens/lit";
-import { offset as C, flip as $, shift as P, arrow as D, computePosition as F } from "@floating-ui/dom";
+import { tokenStyles as C } from "@helixui/tokens/lit";
+import { offset as S, flip as $, shift as P, arrow as D, computePosition as F } from "@floating-ui/dom";
 const L = w`
   :host {
     /* P2-05: display:contents lets the trigger-wrapper control layout inline;
@@ -63,9 +63,9 @@ var O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, o, i
     (d = e[h]) && (s = (t ? d(o, i, s) : d(s)) || s);
   return t && s && O(o, i, s), s;
 };
-let r = class extends E {
+let M = 0, r = class extends E {
   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._previousFocus = null, this._popoverId = `hx-popover-${crypto.randomUUID()}`, this._handleDocumentKeydown = (e) => {
+    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._previousFocus = null, this._popoverId = `hx-popover-${++M}`, this._handleDocumentKeydown = (e) => {
       e.key === "Escape" && this._visible && this._hide();
     }, this._handleDocumentClick = (e) => {
       e.target !== this && !this.contains(e.target) && this._hide();
@@ -126,7 +126,7 @@ let r = class extends E {
     const o = e.assignedElements()[0], i = (u = this.shadowRoot) == null ? void 0 : u.querySelector('[part="body"]'), t = this.arrow ? (v = this.shadowRoot) == null ? void 0 : v.querySelector('[part="arrow"]') : null;
     if (!o || !i) return;
     const s = [
-      C({ mainAxis: this.distance, crossAxis: this.skidding }),
+      S({ mainAxis: this.distance, crossAxis: this.skidding }),
       $(),
       P({ padding: 8 })
     ];
@@ -192,7 +192,7 @@ let r = class extends E {
     `;
   }
 };
-r.styles = [S, L];
+r.styles = [C, L];
 n([
   a({ type: Boolean, reflect: !0 })
 ], r.prototype, "open", 2);
@@ -223,4 +223,4 @@ r = n([
 export {
   r as H
 };
-//# sourceMappingURL=hx-popover-BjAyLbzp.js.map
+//# sourceMappingURL=hx-popover-BQsgrJCW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-popover-BQsgrJCW.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopoverStyles = css`\n  :host {\n    /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n       position:relative was vestigial — body uses position:fixed via Floating UI */\n    display: contents;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='body'] {\n    position: fixed;\n    z-index: var(--hx-popover-z-index, 9999);\n    max-width: var(--hx-popover-max-width, 320px);\n    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));\n    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-neutral-200, #e5e7eb));\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='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-neutral-0, #ffffff));\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\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","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\ntype PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\ntype TriggerMode = 'click' | 'hover' | 'focus' | 'manual';\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n *\n * @fires hx-show - Dispatched when the popover begins to show.\n * @fires hx-after-show - Dispatched after the popover is fully visible.\n * @fires hx-hide - Dispatched when the popover begins to hide.\n * @fires hx-after-hide - Dispatched 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 */\nlet _popoverCounter = 0;\n\n@customElement('hx-popover')\nexport class HelixPopover extends LitElement {\n  static override styles = [tokenStyles, helixPopoverStyles];\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: PopoverPlacement = 'bottom';\n\n  /**\n   * How the popover is triggered.\n   * @attr trigger\n   */\n  @property({ type: String, reflect: true })\n  trigger: TriggerMode = '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  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _previousFocus: HTMLElement | null = null;\n\n  /** @internal */\n  private readonly _popoverId = `hx-popover-${++_popoverCounter}`;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override firstUpdated(): void {\n    this._setAnchorAriaExpanded(false);\n    // Sync initial open state\n    if (this.open) {\n      void this._show();\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        void this._show();\n      } else {\n        void this._hide();\n      }\n    }\n  }\n\n  // ─── ARIA setup ───\n\n  // P2-03: collapsed _setupAnchorAria + _updateAnchorAriaExpanded into one method\n  private _setAnchorAriaExpanded(value: 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(value));\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  // ─── Show/Hide ───\n\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('hx-show', { bubbles: true, composed: true }));\n    this._visible = true;\n    this.open = true;\n    this._setAnchorAriaExpanded(true);\n    // P1-03: add Escape listener synchronously before any await so it is registered\n    // by the time the test fires an Escape keydown after a single await el.updateComplete.\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('hx-after-show', { bubbles: true, composed: true }));\n    // P0-02: move focus into dialog body\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    if (bodyEl) bodyEl.focus();\n    // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n    setTimeout(() => {\n      document.addEventListener('click', this._handleDocumentClick);\n    }, 0);\n    await this._updatePosition();\n  }\n\n  private async _hide(): Promise<void> {\n    if (!this._visible) return;\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n    this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n    this._visible = false;\n    this.open = false;\n    this._setAnchorAriaExpanded(false);\n    // P0-02: return focus to the element that was focused before the popover opened\n    this._previousFocus?.focus();\n    this._previousFocus = null;\n    await this.updateComplete;\n    this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n  }\n\n  // ─── Positioning ───\n\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 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 staticSide =\n        ({ top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as Record<string, string>)[\n          basePlacement\n        ] ?? '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: document-level handlers active only while popover is open\n  /** @internal */\n  private _handleDocumentKeydown = (e: Event): void => {\n    if ((e as KeyboardEvent).key === 'Escape' && this._visible) {\n      void this._hide();\n    }\n  };\n\n  // P0-01: close when click target is outside this component\n  /** @internal */\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      void this._hide();\n    }\n  };\n\n  /** @internal */\n  private _handleAnchorClick = (): void => {\n    if (this.trigger !== 'click') return;\n    if (this._visible) {\n      void this._hide();\n    } else {\n      void this._show();\n    }\n  };\n\n  /** @internal */\n  private _handleAnchorMouseEnter = (): void => {\n    if (this.trigger !== 'hover') return;\n    void this._show();\n  };\n\n  /** @internal */\n  private _handleAnchorMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n    void this._hide();\n  };\n\n  /** @internal */\n  private _handleAnchorFocusIn = (): void => {\n    if (this.trigger !== 'focus') return;\n    void this._show();\n  };\n\n  /** @internal */\n  private _handleAnchorFocusOut = (): void => {\n    if (this.trigger !== 'focus') return;\n    void this._hide();\n  };\n\n  private _handleAnchorSlotChange(): void {\n    this._setAnchorAriaExpanded(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=\"region\"\n        aria-label=${this.label}\n        aria-hidden=\"${!this._visible ? 'true' : 'false'}\"\n        tabindex=\"-1\"\n        ?inert=${!this._visible}\n        class=${this._visible ? 'visible' : ''}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popover': HelixPopover;\n  }\n}\n"],"names":["helixPopoverStyles","css","_popoverCounter","HelixPopover","LitElement","changedProperties","value","anchorSlot","_a","anchorEl","bodyEl","_b","arrowEl","_c","middleware","offset","flip","shift","arrow","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-progress-bar-b3_m1hna.js → hx-progress-bar-C_mdPVF-.js}

@@ -1,9 +1,9 @@
-import { css as g, LitElement as c, nothing as h, html as d } from "lit";
-import { property as i, state as m, customElement as u } from "lit/decorators.js";
+import { css as c, LitElement as m, nothing as d, html as g } from "lit";
+import { property as i, state as b, customElement as u } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const x = g`
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { tokenStyles as _ } from "@helixui/tokens/lit";
+const f = c`
   :host {
     display: block;
   }
@@ -124,94 +124,103 @@ const x = g`
     }
   }
 `;
-var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (r, a, l, o) => {
-  for (var t = o > 1 ? void 0 : o ? y(a, l) : a, n = r.length - 1, p; n >= 0; n--)
-    (p = r[n]) && (t = (o ? p(a, l, t) : p(t)) || t);
-  return o && t && _(a, l, t), t;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (e, s, o, l) => {
+  for (var a = l > 1 ? void 0 : l ? y(s, o) : s, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (a = (l ? p(s, o, a) : p(a)) || a);
+  return l && a && x(s, o, a), a;
 };
-let e = class extends c {
+let r = class extends m {
   constructor() {
-    super(...arguments), this.value = null, this.min = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.description = "", this.size = "md", this.variant = "default", this._liveMessage = "";
+    super(...arguments), this.value = null, this.min = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.description = "", this.size = "md", this.variant = "default", this._liveMessage = "", this._hasLabelSlotContent = !1, this._uid = `hx-pb-${++r._counter}`;
   }
+  /** @internal */
   get _isIndeterminate() {
     return this.indeterminate || this.value === null;
   }
+  /** @internal */
   get _percentage() {
     if (this._isIndeterminate) return 0;
-    const r = this.max - this.min;
-    return r <= 0 ? 0 : (Math.max(this.min, Math.min(this.value ?? this.min, this.max)) - this.min) / r * 100;
+    const e = this.max - this.min;
+    return e <= 0 ? 0 : (Math.max(this.min, Math.min(this.value ?? this.min, this.max)) - this.min) / e * 100;
   }
+  /** @internal */
   get _isComplete() {
     return !this._isIndeterminate && this.value !== null && this.value >= this.max;
   }
-  updated(r) {
-    (r.has("value") || r.has("max")) && this._isComplete ? (this._liveMessage = "Complete", this.dispatchEvent(new CustomEvent("hx-complete", { bubbles: !0, composed: !0 }))) : r.has("value") && !this._isComplete && (this._liveMessage = ""), this.label || console.warn(
-      "[hx-progress-bar] No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value)."
-    );
+  updated(e) {
+    (e.has("value") || e.has("max")) && this._isComplete ? (this._liveMessage = "Complete", this.dispatchEvent(new CustomEvent("hx-complete", { bubbles: !0, composed: !0 }))) : e.has("value") && !this._isComplete && (this._liveMessage = ""), this.label;
+  }
+  _onLabelSlotChange(e) {
+    const s = e.target;
+    this._hasLabelSlotContent = s.assignedNodes({ flatten: !0 }).length > 0;
   }
   render() {
-    const r = `${this.id || "hx-pb"}-label`, a = this.description ? `${this.id || "hx-pb"}-desc` : void 0, l = {
+    const e = `${this._uid}-label`, s = this.description ? `${this._uid}-desc` : void 0, o = this._hasLabelSlotContent, l = {
       "progress-bar": !0,
       [`progress-bar--${this.size}`]: !0,
       [`progress-bar--${this.variant}`]: !0,
       "progress-bar--indeterminate": this._isIndeterminate
-    }, o = this._isIndeterminate ? "" : `width: ${this._percentage}%`, t = this._isIndeterminate ? void 0 : this.value ?? this.min;
-    return d`
+    }, a = this._isIndeterminate ? "" : `width: ${this._percentage}%`, n = this._isIndeterminate ? void 0 : this.value ?? this.min;
+    return g`
       <div class=${v(l)}>
-        <span id=${r} part="label" class="progress-bar__label">
-          <slot name="label"></slot>
+        <span id=${e} part="label" class="progress-bar__label">
+          <slot name="label" @slotchange=${this._onLabelSlotChange}></slot>
         </span>
-        ${this.description ? d`<span id=${a} class="sr-only">${this.description}</span>` : h}
+        ${this.description ? g`<span id=${s} class="sr-only">${this.description}</span>` : d}
         <div
           part="track"
           class="progress-bar__track"
           role="progressbar"
-          aria-valuenow=${b(t)}
+          aria-valuenow=${h(n)}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
-          aria-label=${this.label || h}
-          aria-labelledby=${r}
-          aria-describedby=${b(a)}
+          aria-label=${h(!o && this.label ? this.label : void 0)}
+          aria-labelledby=${h(o ? e : void 0)}
+          aria-describedby=${h(s)}
         >
-          <div part="fill" class="progress-bar__fill" style=${o || h}></div>
+          <div part="fill" class="progress-bar__fill" style=${a || d}></div>
         </div>
         <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveMessage}</div>
       </div>
     `;
   }
 };
-e.styles = [f, x];
-s([
+r.styles = [_, f];
+r._counter = 0;
+t([
   i({ type: Number, reflect: !0 })
-], e.prototype, "value", 2);
-s([
+], r.prototype, "value", 2);
+t([
   i({ type: Number, reflect: !0 })
-], e.prototype, "min", 2);
-s([
+], r.prototype, "min", 2);
+t([
   i({ type: Number, reflect: !0 })
-], e.prototype, "max", 2);
-s([
+], r.prototype, "max", 2);
+t([
   i({ type: Boolean, reflect: !0 })
-], e.prototype, "indeterminate", 2);
-s([
+], r.prototype, "indeterminate", 2);
+t([
   i({ type: String, reflect: !0 })
-], e.prototype, "label", 2);
-s([
+], r.prototype, "label", 2);
+t([
   i({ type: String, reflect: !0 })
-], e.prototype, "description", 2);
-s([
+], r.prototype, "description", 2);
+t([
   i({ type: String, reflect: !0, attribute: "hx-size" })
-], e.prototype, "size", 2);
-s([
+], r.prototype, "size", 2);
+t([
   i({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
-s([
-  m()
-], e.prototype, "_liveMessage", 2);
-e = s([
+], r.prototype, "variant", 2);
+t([
+  b()
+], r.prototype, "_liveMessage", 2);
+t([
+  b()
+], r.prototype, "_hasLabelSlotContent", 2);
+r = t([
   u("hx-progress-bar")
-], e);
+], r);
 export {
-  e as H
+  r as H
 };
-//# sourceMappingURL=hx-progress-bar-b3_m1hna.js.map
+//# sourceMappingURL=hx-progress-bar-C_mdPVF-.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-progress-bar-C_mdPVF-.js","sources":["../../src/components/hx-progress-bar/hx-progress-bar.styles.ts","../../src/components/hx-progress-bar/hx-progress-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  .progress-bar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  .progress-bar__label {\n    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .progress-bar__track {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));\n    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));\n    width: 100%;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .progress-bar--sm .progress-bar__track {\n    height: var(--hx-progress-bar-height-sm, var(--hx-size-1, 0.25rem));\n  }\n\n  .progress-bar--md .progress-bar__track {\n    height: var(--hx-progress-bar-height-md, var(--hx-size-2, 0.5rem));\n  }\n\n  .progress-bar--lg .progress-bar__track {\n    height: var(--hx-progress-bar-height-lg, var(--hx-size-3, 0.75rem));\n  }\n\n  .progress-bar__fill {\n    height: 100%;\n    border-radius: inherit;\n    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));\n    transition: width 0.2s ease;\n  }\n\n  /* ─── Variant Colors ─── */\n\n  .progress-bar--default .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);\n  }\n\n  .progress-bar--success .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);\n  }\n\n  .progress-bar--warning .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);\n  }\n\n  .progress-bar--danger .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  @keyframes hx-progress-indeterminate {\n    0% {\n      transform: translateX(-100%);\n      width: 40%;\n    }\n    50% {\n      width: 60%;\n    }\n    100% {\n      transform: translateX(250%);\n      width: 40%;\n    }\n  }\n\n  .progress-bar--indeterminate .progress-bar__fill {\n    width: 40%;\n    animation: hx-progress-indeterminate 1.5s ease-in-out infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar--indeterminate .progress-bar__fill {\n      animation: none;\n      width: 100%;\n      opacity: 0.4;\n    }\n  }\n\n  /* ─── High Contrast Mode ─── */\n\n  @media (forced-colors: active) {\n    .progress-bar__track {\n      border: 1px solid ButtonText;\n      background-color: Canvas;\n    }\n\n    .progress-bar__fill {\n      background-color: Highlight;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A linear progress indicator for determinate and indeterminate states.\n *\n * @summary Displays task completion progress or an indeterminate loading state.\n *\n * @tag hx-progress-bar\n *\n * @slot label - Visible label text rendered above the progress bar track.\n *\n * @csspart track - The outer track container element.\n * @csspart fill - The filled portion indicating progress.\n * @csspart label - The label slot wrapper element.\n *\n * @cssprop [--hx-progress-bar-track-bg=var(--hx-color-neutral-100)] - Track background color.\n * @cssprop [--hx-progress-bar-indicator-bg=var(--hx-color-primary-500)] - Indicator fill color.\n * @cssprop [--hx-progress-bar-border-radius=var(--hx-border-radius-full)] - Track border radius.\n * @cssprop [--hx-progress-bar-height-sm=var(--hx-size-1)] - Track height for size=\"sm\".\n * @cssprop [--hx-progress-bar-height-md=var(--hx-size-2)] - Track height for size=\"md\".\n * @cssprop [--hx-progress-bar-height-lg=var(--hx-size-3)] - Track height for size=\"lg\".\n * @cssprop [--hx-progress-bar-label-font-family=var(--hx-font-family-sans)] - Label font family.\n * @cssprop [--hx-progress-bar-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-progress-bar-label-font-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-progress-bar-label-color=var(--hx-color-neutral-700)] - Label text color.\n *\n * @fires {CustomEvent} hx-complete - Emitted when progress reaches 100%.\n */\n@customElement('hx-progress-bar')\nexport class HelixProgressBar extends LitElement {\n  static override styles = [tokenStyles, helixProgressBarStyles];\n\n  /**\n   * Current progress value (min–max). Set to null for indeterminate state.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Minimum value for the progress bar.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value for the progress bar.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * When true, displays an animated indeterminate loading state regardless of value.\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Accessible label for the progress bar (maps to aria-label when no label slot content is used).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Additional description for the progress operation, linked via aria-describedby.\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /**\n   * Size of the progress bar track.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the indicator color.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  /** @internal */\n  @state() private _liveMessage = '';\n  @state() private _hasLabelSlotContent = false;\n\n  private static _counter = 0;\n  private _uid = `hx-pb-${++HelixProgressBar._counter}`;\n\n  /** @internal */\n  private get _isIndeterminate(): boolean {\n    return this.indeterminate || this.value === null;\n  }\n\n  /** @internal */\n  private get _percentage(): number {\n    if (this._isIndeterminate) return 0;\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    const clamped = Math.max(this.min, Math.min(this.value ?? this.min, this.max));\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  /** @internal */\n  private get _isComplete(): boolean {\n    return !this._isIndeterminate && this.value !== null && this.value >= this.max;\n  }\n\n  override updated(changedProps: Map<string, unknown>): void {\n    if ((changedProps.has('value') || changedProps.has('max')) && this._isComplete) {\n      this._liveMessage = 'Complete';\n      this.dispatchEvent(new CustomEvent('hx-complete', { bubbles: true, composed: true }));\n    } else if (changedProps.has('value') && !this._isComplete) {\n      this._liveMessage = '';\n    }\n\n    if (!this.label) {\n      devWarn(\n        'hx-progress-bar',\n        'No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  private _onLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    const labelId = `${this._uid}-label`;\n    const descId = this.description ? `${this._uid}-desc` : undefined;\n    const hasVisibleLabel = this._hasLabelSlotContent;\n\n    const classes = {\n      'progress-bar': true,\n      [`progress-bar--${this.size}`]: true,\n      [`progress-bar--${this.variant}`]: true,\n      'progress-bar--indeterminate': this._isIndeterminate,\n    };\n\n    const indicatorStyle = this._isIndeterminate ? '' : `width: ${this._percentage}%`;\n    const ariaValueNow = this._isIndeterminate ? undefined : (this.value ?? this.min);\n\n    return html`\n      <div class=${classMap(classes)}>\n        <span id=${labelId} part=\"label\" class=\"progress-bar__label\">\n          <slot name=\"label\" @slotchange=${this._onLabelSlotChange}></slot>\n        </span>\n        ${this.description\n          ? html`<span id=${descId} class=\"sr-only\">${this.description}</span>`\n          : nothing}\n        <div\n          part=\"track\"\n          class=\"progress-bar__track\"\n          role=\"progressbar\"\n          aria-valuenow=${ifDefined(ariaValueNow)}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-label=${ifDefined(!hasVisibleLabel && this.label ? this.label : undefined)}\n          aria-labelledby=${ifDefined(hasVisibleLabel ? labelId : undefined)}\n          aria-describedby=${ifDefined(descId)}\n        >\n          <div part=\"fill\" class=\"progress-bar__fill\" style=${indicatorStyle || nothing}></div>\n        </div>\n        <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-bar': HelixProgressBar;\n  }\n}\n"],"names":["helixProgressBarStyles","css","HelixProgressBar","LitElement","range","changedProps","slot","labelId","descId","hasVisibleLabel","classes","indicatorStyle","ariaValueNow","html","classMap","nothing","ifDefined","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}