@helixui/library 1.1.1 → 1.1.2

package/dist/shared/{hx-number-input-CAAibZ8X.js → hx-number-input-CIpL2BEh.js}

@@ -1,5 +1,5 @@
 import { css as f, LitElement as _, html as h, nothing as p } from "lit";
-import { property as n, query as v, state as c, customElement as m } from "lit/decorators.js";
+import { property as l, query as v, state as c, customElement as m } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
 import { ifDefined as o } from "lit/directives/if-defined.js";
 import { live as x } from "lit/directives/live.js";
@@ -251,14 +251,14 @@ const y = f`
     }
   }
 `;
-var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (e, t, r, l) => {
-  for (var a = l > 1 ? void 0 : l ? S(t, r) : t, d = e.length - 1, u; d >= 0; d--)
-    (u = e[d]) && (a = (l ? u(t, r, a) : u(a)) || a);
-  return l && a && w(t, r, a), a;
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (e, t, r, n) => {
+  for (var a = n > 1 ? void 0 : n ? S(t, r) : t, d = e.length - 1, u; d >= 0; d--)
+    (u = e[d]) && (a = (n ? u(t, r, a) : u(a)) || a);
+  return n && a && w(t, r, a), a;
 };
 let $ = 0, i = class extends _ {
   constructor() {
-    super(), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.labelIncrement = "Increment", this.labelDecrement = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = `hx-number-input-${++$}`, this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`, this._internals = this.attachInternals();
+    super(), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.requiredMessage = "This field is required.", this.incrementLabel = "Increment", this.decrementLabel = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = `hx-number-input-${++$}`, this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`, this._internals = this.attachInternals();
   }
   // ─── Slot Tracking ───
   /** @internal */
@@ -319,7 +319,7 @@ let $ = 0, i = class extends _ {
     if (this.required && this.value === null) {
       this._internals.setValidity(
         { valueMissing: !0 },
-        this.error || "This field is required.",
+        this.error || this.requiredMessage,
         this._input ?? void 0
       );
       return;
@@ -341,8 +341,8 @@ let $ = 0, i = class extends _ {
       return;
     }
     if (this.value !== null && this.step && this.step !== 0) {
-      const e = this._finite(this.step) ?? 1, t = this._finite(this.min) ?? 0, r = Math.abs((this.value - t) % e), l = 1e-9;
-      if (r > l && Math.abs(r - e) > l) {
+      const e = this._finite(this.step) ?? 1, t = this._finite(this.min) ?? 0, r = Math.abs((this.value - t) % e), n = 1e-9;
+      if (r > n && Math.abs(r - e) > n) {
         this._internals.setValidity(
           { stepMismatch: !0 },
           `Value must be a multiple of ${e}.`,
@@ -382,8 +382,8 @@ let $ = 0, i = class extends _ {
   /** @internal */
   _clamp(e) {
     let t = e;
-    const r = this._finite(this.min), l = this._finite(this.max);
-    return r !== void 0 && (t = Math.max(r, t)), l !== void 0 && (t = Math.min(l, t)), t;
+    const r = this._finite(this.min), n = this._finite(this.max);
+    return r !== void 0 && (t = Math.max(r, t)), n !== void 0 && (t = Math.min(n, t)), t;
   }
   // ─── Stepper Helpers ───
   /** @internal */
@@ -397,8 +397,8 @@ let $ = 0, i = class extends _ {
   /** @internal */
   _applyStep(e) {
     if (this.disabled || this.readonly) return;
-    const t = this.value ?? 0, r = this._finite(this.step) ?? 1, l = this._clamp(parseFloat((t + e * r).toFixed(10)));
-    l !== this.value && (this.value = l, this.dispatchEvent(
+    const t = this.value ?? 0, r = this._finite(this.step) ?? 1, n = this._clamp(parseFloat((t + e * r).toFixed(10)));
+    n !== this.value && (this.value = n, this.dispatchEvent(
       new CustomEvent("hx-change", {
         bubbles: !0,
         composed: !0,
@@ -502,7 +502,7 @@ let $ = 0, i = class extends _ {
     }, r = [
       e ? this._errorId : null,
       !e && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null
-    ].filter(Boolean).join(" ") || void 0, l = this.value !== null ? String(this.value) : "";
+    ].filter(Boolean).join(" ") || void 0, n = this.value !== null ? String(this.value) : "";
     return h`
       <div part="field" class=${b(t)}>
         <div class="field__label-wrapper">
@@ -526,7 +526,7 @@ let $ = 0, i = class extends _ {
             class="field__input"
             id=${this._inputId}
             type="number"
-            .value=${x(l)}
+            .value=${x(n)}
             min=${o(this.min)}
             max=${o(this.max)}
             step=${this.step}
@@ -557,7 +557,7 @@ let $ = 0, i = class extends _ {
                     part="increment"
                     class="field__stepper-btn"
                     type="button"
-                    aria-label=${this.labelIncrement}
+                    aria-label=${this.incrementLabel}
                     ?disabled=${this.disabled || this.readonly || this._atMax}
                     tabindex="-1"
                     @pointerdown=${(a) => this._handleStepperPointerDown(a, 1)}
@@ -571,7 +571,7 @@ let $ = 0, i = class extends _ {
                     part="decrement"
                     class="field__stepper-btn"
                     type="button"
-                    aria-label=${this.labelDecrement}
+                    aria-label=${this.decrementLabel}
                     ?disabled=${this.disabled || this.readonly || this._atMin}
                     tabindex="-1"
                     @pointerdown=${(a) => this._handleStepperPointerDown(a, -1)}
@@ -608,10 +608,10 @@ let $ = 0, i = class extends _ {
 i.styles = [g, y];
 i.formAssociated = !0;
 s([
-  n({ type: String })
+  l({ type: String })
 ], i.prototype, "name", 2);
 s([
-  n({
+  l({
     type: Number,
     converter: {
       fromAttribute: (e) => {
@@ -624,44 +624,47 @@ s([
   })
 ], i.prototype, "value", 2);
 s([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "required", 2);
 s([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
 s([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "readonly", 2);
 s([
-  n({ type: Number })
+  l({ type: Number })
 ], i.prototype, "min", 2);
 s([
-  n({ type: Number })
+  l({ type: Number })
 ], i.prototype, "max", 2);
 s([
-  n({ type: Number })
+  l({ type: Number })
 ], i.prototype, "step", 2);
 s([
-  n({ type: String })
+  l({ type: String })
 ], i.prototype, "label", 2);
 s([
-  n({ type: String })
+  l({ type: String })
 ], i.prototype, "error", 2);
 s([
-  n({ type: String, attribute: "help-text" })
+  l({ type: String, attribute: "help-text" })
 ], i.prototype, "helpText", 2);
 s([
-  n({ type: String, attribute: "hx-size" })
+  l({ type: String, attribute: "hx-size" })
 ], i.prototype, "size", 2);
 s([
-  n({ type: Boolean, attribute: "no-stepper" })
+  l({ type: Boolean, attribute: "no-stepper" })
 ], i.prototype, "noStepper", 2);
 s([
-  n({ type: String, attribute: "label-increment" })
-], i.prototype, "labelIncrement", 2);
+  l({ attribute: "required-message" })
+], i.prototype, "requiredMessage", 2);
 s([
-  n({ type: String, attribute: "label-decrement" })
-], i.prototype, "labelDecrement", 2);
+  l({ attribute: "increment-label" })
+], i.prototype, "incrementLabel", 2);
+s([
+  l({ attribute: "decrement-label" })
+], i.prototype, "decrementLabel", 2);
 s([
   v(".field__input")
 ], i.prototype, "_input", 2);
@@ -680,4 +683,4 @@ i = s([
 export {
   i as H
 };
-//# sourceMappingURL=hx-number-input-CAAibZ8X.js.map
+//# sourceMappingURL=hx-number-input-CIpL2BEh.js.map

package/dist/shared/hx-number-input-CIpL2BEh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-number-input-CIpL2BEh.js","sources":["../../src/components/hx-number-input/hx-number-input.styles.ts","../../src/components/hx-number-input/hx-number-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNumberInputStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1);\n    font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));\n  }\n\n  /* ─── Label ─── */\n\n  .field__label-wrapper {\n    display: contents;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1);\n    font-size: var(--hx-font-size-sm);\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .field__required-marker {\n    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold);\n  }\n\n  /* ─── Input Wrapper ─── */\n\n  .field__input-wrapper {\n    display: flex;\n    align-items: stretch;\n    border: var(--hx-border-width-thin) solid\n      var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n    border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));\n    transition:\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    overflow: hidden;\n  }\n\n  .field__input-wrapper:focus-within {\n    border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    /* Fallback for Safari < 16.2 (no color-mix support) */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      color-mix(\n        in srgb,\n        var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))\n          calc(var(--hx-focus-ring-opacity) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__input-wrapper {\n    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n  }\n\n  .field--error .field__input-wrapper:focus-within {\n    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n    /* Fallback for Safari < 16.2 (no color-mix support) */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      color-mix(\n        in srgb,\n        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))\n          calc(var(--hx-focus-ring-opacity) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Slots (Prefix / Suffix) ─── */\n\n  .field__prefix,\n  .field__suffix {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--hx-space-3);\n    color: var(--hx-color-neutral-500);\n    flex-shrink: 0;\n  }\n\n  /* ─── Native Input ─── */\n\n  .field__input {\n    flex: 1;\n    border: none;\n    outline: none;\n    background: transparent;\n    font-family: inherit;\n    color: var(--hx-number-input-color, var(--hx-color-neutral-800));\n    line-height: var(--hx-line-height-normal);\n    width: 100%;\n    /* Size: md (default) */\n    padding: var(--hx-space-2) var(--hx-space-3);\n    font-size: var(--hx-font-size-md);\n    min-height: var(--hx-size-10);\n  }\n\n  .field__input::placeholder {\n    color: var(--hx-color-neutral-400);\n  }\n\n  .field__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hide native browser spinners ─── */\n\n  .field__input[type='number']::-webkit-inner-spin-button,\n  .field__input[type='number']::-webkit-outer-spin-button {\n    display: none;\n  }\n\n  .field__input[type='number'] {\n    appearance: textfield;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .field--sm .field__input {\n    padding: var(--hx-space-1) var(--hx-space-2);\n    font-size: var(--hx-font-size-sm);\n    min-height: var(--hx-size-8);\n  }\n\n  .field--lg .field__input {\n    padding: var(--hx-space-3) var(--hx-space-4);\n    font-size: var(--hx-font-size-lg);\n    min-height: var(--hx-size-12);\n  }\n\n  /* ─── Stepper ─── */\n\n  .field__stepper {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    border-left: var(--hx-border-width-thin) solid\n      var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n  }\n\n  .field__stepper-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--hx-color-neutral-600);\n    padding: 0;\n    flex: 1;\n    min-width: var(--hx-size-8);\n    line-height: 1;\n    transition: background-color var(--hx-transition-fast);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .field__stepper-btn:not(:last-child) {\n    border-bottom: var(--hx-border-width-thin) solid\n      var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n  }\n\n  .field__stepper-btn:hover:not(:disabled) {\n    background-color: var(--hx-color-neutral-50);\n    color: var(--hx-color-neutral-800);\n  }\n\n  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */\n  .field__stepper-btn:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .field__stepper-btn:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: -2px;\n  }\n\n  .field__stepper-btn:disabled {\n    opacity: var(--hx-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  .field__stepper-btn svg {\n    pointer-events: none;\n    width: 0.75rem;\n    height: 0.75rem;\n  }\n\n  /* Size sm adjustments for stepper */\n  .field--sm .field__stepper-btn {\n    min-width: var(--hx-size-6);\n  }\n\n  /* Size lg adjustments for stepper */\n  .field--lg .field__stepper-btn {\n    min-width: var(--hx-size-10);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-color-neutral-500);\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field__input-wrapper {\n      transition: none;\n    }\n\n    .field__stepper-btn {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNumberInputStyles } from './hx-number-input.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxNumberInputIdCounter = 0;\n\n/**\n * A numeric input component with stepper controls, label, validation, and\n * full form association. Designed for healthcare data-entry contexts where\n * precise numeric values (dosage, age, measurements) must be captured safely.\n *\n * @summary Form-associated numeric input with stepper buttons, bounds checking,\n *   label, error, and help text.\n *\n * @tag hx-number-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n * @slot prefix - Content rendered before the input (e.g., a unit icon).\n * @slot suffix - Content rendered after the input and before the stepper buttons (e.g., a unit label).\n *\n * @fires {CustomEvent<{value: number | null}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: number | null}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, suffix, and stepper.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n * @csspart stepper - The stepper button group container.\n * @csspart increment - The increment (+) button.\n * @csspart decrement - The decrement (-) button.\n *\n * @cssprop [--hx-number-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-number-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-number-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-number-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-number-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-number-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-number-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-number-input-font-family=var(--hx-font-family-sans)] - Font family.\n */\n@customElement('hx-number-input')\nexport class HelixNumberInput extends LitElement {\n  static override styles = [tokenStyles, helixNumberInputStyles];\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The name of the input, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The current numeric value of the input. Null when the field is empty.\n   * @attr value\n   */\n  @property({\n    type: Number,\n    converter: {\n      fromAttribute: (attr: string | null): number | null => {\n        if (attr === null || attr === '') return null;\n        const n = Number(attr);\n        return isNaN(n) ? null : n;\n      },\n      toAttribute: (val: number | null): string | null => (val === null ? null : String(val)),\n    },\n  })\n  value: number | null = null;\n\n  /**\n   * Whether the input is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the input is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the input is read-only.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Minimum allowed value. When reached, the decrement button is disabled.\n   * @attr min\n   */\n  @property({ type: Number })\n  min: number | undefined = undefined;\n\n  /**\n   * Maximum allowed value. When reached, the increment button is disabled.\n   * @attr max\n   */\n  @property({ type: Number })\n  max: number | undefined = undefined;\n\n  /**\n   * The amount to increment or decrement on each step action.\n   * @attr step\n   */\n  @property({ type: Number })\n  step = 1;\n\n  /**\n   * The visible label text for the input.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the input enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the input for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Size variant controlling input padding and font size.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * When set, hides the +/- stepper buttons.\n   * @attr no-stepper\n   */\n  @property({ type: Boolean, attribute: 'no-stepper' })\n  noStepper = false;\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  /**\n   * Accessible label for the increment (+) stepper button.\n   * @attr increment-label\n   */\n  @property({ attribute: 'increment-label' })\n  incrementLabel = 'Increment';\n\n  /**\n   * Accessible label for the decrement (-) stepper button.\n   * @attr decrement-label\n   */\n  @property({ attribute: 'decrement-label' })\n  decrementLabel = 'Decrement';\n\n  // ─── Internal References ───\n\n  /** @internal */\n  @query('.field__input')\n  declare private _input: HTMLInputElement | null;\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n  /** @internal */\n  @state() private _hasHelpSlot = false;\n\n  /** The value captured at first render, used by formResetCallback. */\n  /** @internal */\n  private _defaultValue: number | null = null;\n\n  /** Timer ID for the long-press initial delay. */\n  /** @internal */\n  private _longPressTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Interval ID for the long-press rapid-repeat phase. */\n  /** @internal */\n  private _repeatInterval: ReturnType<typeof setInterval> | null = null;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _inputId = `hx-number-input-${++_hxNumberInputIdCounter}`;\n  /** @internal */\n  private readonly _helpTextId = `${this._inputId}-help`;\n  /** @internal */\n  private readonly _errorId = `${this._inputId}-error`;\n\n  // ─── Slot Tracking ───\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._inputId}-slotted-label`;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._hasErrorSlot = assigned.length > 0;\n    if (this._hasErrorSlot && assigned[0]) {\n      if (!assigned[0].id) assigned[0].id = this._errorId;\n    }\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    this._defaultValue = this.value;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearLongPress();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('required') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max') ||\n      changedProperties.has('step')\n    ) {\n      this._syncFormValue();\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the input satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _syncFormValue(): void {\n    this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && this.value === null) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._input ?? undefined,\n      );\n      return;\n    }\n\n    if (this.value !== null && this.min !== undefined && this.value < this.min) {\n      this._internals.setValidity(\n        { rangeUnderflow: true },\n        `Value must be at least ${this.min}.`,\n        this._input ?? undefined,\n      );\n      return;\n    }\n\n    if (this.value !== null && this.max !== undefined && this.value > this.max) {\n      this._internals.setValidity(\n        { rangeOverflow: true },\n        `Value must be at most ${this.max}.`,\n        this._input ?? undefined,\n      );\n      return;\n    }\n\n    if (this.value !== null && this.step && this.step !== 0) {\n      const step = this._finite(this.step) ?? 1;\n      const base = this._finite(this.min) ?? 0;\n      const remainder = Math.abs((this.value - base) % step);\n      const epsilon = 1e-9;\n      if (remainder > epsilon && Math.abs(remainder - step) > epsilon) {\n        this._internals.setValidity(\n          { stepMismatch: true },\n          `Value must be a multiple of ${step}.`,\n          this._input ?? undefined,\n        );\n        return;\n      }\n    }\n\n    this._internals.setValidity({});\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    this.value = this._defaultValue;\n    this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      const parsed = Number(state);\n      this.value = isNaN(parsed) ? null : parsed;\n    }\n  }\n\n  /** Called when a parent fieldset is disabled/enabled. */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Value Parsing ───\n\n  /** @internal */\n  private _finite(value: number | undefined): number | undefined {\n    return Number.isFinite(value) ? value : undefined;\n  }\n\n  /** @internal */\n  private _parseInput(raw: string): number | null {\n    if (raw === '' || raw === null) return null;\n    const parsed = parseFloat(raw);\n    return isNaN(parsed) ? null : parsed;\n  }\n\n  /** @internal */\n  private _clamp(v: number): number {\n    let result = v;\n    const min = this._finite(this.min);\n    const max = this._finite(this.max);\n    if (min !== undefined) result = Math.max(min, result);\n    if (max !== undefined) result = Math.min(max, result);\n    return result;\n  }\n\n  // ─── Stepper Helpers ───\n\n  /** @internal */\n  private get _atMin(): boolean {\n    return this.value !== null && this.min !== undefined && this.value <= this.min;\n  }\n\n  /** @internal */\n  private get _atMax(): boolean {\n    return this.value !== null && this.max !== undefined && this.value >= this.max;\n  }\n\n  /** @internal */\n  private _applyStep(delta: number): void {\n    if (this.disabled || this.readonly) return;\n\n    const current = this.value ?? 0;\n    const step = this._finite(this.step) ?? 1;\n    const next = this._clamp(parseFloat((current + delta * step).toFixed(10)));\n\n    if (next === this.value) return;\n    this.value = next;\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number | null }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Long-press ───\n\n  /** @internal */\n  private _clearLongPress(): void {\n    if (this._longPressTimer !== null) {\n      clearTimeout(this._longPressTimer);\n      this._longPressTimer = null;\n    }\n    if (this._repeatInterval !== null) {\n      clearInterval(this._repeatInterval);\n      this._repeatInterval = null;\n    }\n  }\n\n  /** @internal */\n  private _startLongPress(delta: number): void {\n    this._applyStep(delta);\n    this._longPressTimer = setTimeout(() => {\n      this._repeatInterval = setInterval(() => {\n        this._applyStep(delta);\n      }, 100);\n    }, 400);\n  }\n\n  /** @internal */\n  private _handleStepperPointerDown(e: PointerEvent, delta: number): void {\n    if (this.disabled || this.readonly) return;\n    e.preventDefault();\n    this._startLongPress(delta);\n  }\n\n  /** @internal */\n  private _handleStepperPointerUp(): void {\n    this._clearLongPress();\n  }\n\n  // ─── Keyboard ───\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled || this.readonly) return;\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._applyStep(1);\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._applyStep(-1);\n    }\n  }\n\n  // ─── Input Events ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.value = this._parseInput(target.value);\n    this._syncFormValue();\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number | null }>('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    const parsed = this._parseInput(target.value);\n    this.value = parsed !== null ? this._clamp(parsed) : null;\n    this._syncFormValue();\n    this._updateValidity();\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number | null }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the input element. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  /** Selects all text in the input. */\n  select(): void {\n    this._input?.select();\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderIncrementIcon() {\n    return html`<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 12 12\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M6 1v10M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDecrementIcon() {\n    return html`<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 12 12\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n    </svg>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--sm': this.size === 'sm',\n      'field--md': this.size === 'md',\n      'field--lg': this.size === 'lg',\n    };\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        !hasError && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    const displayValue = this.value !== null ? String(this.value) : '';\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n          <span class=\"field__prefix\">\n            <slot name=\"prefix\"></slot>\n          </span>\n\n          <input\n            part=\"input\"\n            class=\"field__input\"\n            id=${this._inputId}\n            type=\"number\"\n            .value=${live(displayValue)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            step=${this.step}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            name=${ifDefined(this.name || undefined)}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-valuenow=${ifDefined(this.value !== null ? this.value : undefined)}\n            aria-valuemin=${ifDefined(this.min)}\n            aria-valuemax=${ifDefined(this.max)}\n            @input=${this._handleInput}\n            @change=${this._handleChange}\n            @keydown=${this._handleKeyDown}\n          />\n\n          <span class=\"field__suffix\">\n            <slot name=\"suffix\"></slot>\n          </span>\n\n          ${this.noStepper\n            ? nothing\n            : html`\n                <div part=\"stepper\" class=\"field__stepper\">\n                  <button\n                    part=\"increment\"\n                    class=\"field__stepper-btn\"\n                    type=\"button\"\n                    aria-label=${this.incrementLabel}\n                    ?disabled=${this.disabled || this.readonly || this._atMax}\n                    tabindex=\"-1\"\n                    @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, 1)}\n                    @pointerup=${this._handleStepperPointerUp}\n                    @pointerleave=${this._handleStepperPointerUp}\n                    @pointercancel=${this._handleStepperPointerUp}\n                  >\n                    ${this._renderIncrementIcon()}\n                  </button>\n                  <button\n                    part=\"decrement\"\n                    class=\"field__stepper-btn\"\n                    type=\"button\"\n                    aria-label=${this.decrementLabel}\n                    ?disabled=${this.disabled || this.readonly || this._atMin}\n                    tabindex=\"-1\"\n                    @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, -1)}\n                    @pointerup=${this._handleStepperPointerUp}\n                    @pointerleave=${this._handleStepperPointerUp}\n                    @pointercancel=${this._handleStepperPointerUp}\n                  >\n                    ${this._renderDecrementIcon()}\n                  </button>\n                </div>\n              `}\n        </div>\n\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${this.error\n            ? html`\n                <div part=\"error-message\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                  ${this.error}\n                </div>\n              `\n            : nothing}\n        </slot>\n\n        <div\n          part=\"help-text\"\n          class=\"field__help-text\"\n          id=${this._helpTextId}\n          ?hidden=${hasError || (!this.helpText && !this._hasHelpSlot)}\n        >\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-number-input': HelixNumberInput;\n  }\n}\n"],"names":["helixNumberInputStyles","css","_hxNumberInputIdCounter","HelixNumberInput","LitElement","slot","slottedLabel","assigned","changedProperties","step","base","remainder","epsilon","state","_mode","parsed","disabled","value","raw","v","result","min","max","delta","current","next","target","options","_a","html","hasError","fieldClasses","describedBy","displayValue","classMap","nothing","live","ifDefined","e","tokenStyles","__decorateClass","property","attr","n","val","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOtC,IAAIC,IAA0B,GAyCjBC,IAAN,cAA+BC,EAAW;AAAA,EAU/C,cAAc;AACZ,UAAA,GAYF,KAAA,OAAO,IAiBP,KAAA,QAAuB,MAOvB,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,MAA0B,QAO1B,KAAA,MAA0B,QAO1B,KAAA,OAAO,GAOP,KAAA,QAAQ,IAOR,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAA2B,MAO3B,KAAA,YAAY,IAOZ,KAAA,kBAAkB,2BAOlB,KAAA,iBAAiB,aAOjB,KAAA,iBAAiB,aAWR,KAAQ,gBAAgB,IAExB,KAAQ,gBAAgB,IAExB,KAAQ,eAAe,IAIhC,KAAQ,gBAA+B,MAIvC,KAAQ,kBAAwD,MAIhE,KAAQ,kBAAyD,MAKjE,KAAiB,WAAW,mBAAmB,EAAEF,CAAuB,IAExE,KAAiB,cAAc,GAAG,KAAK,QAAQ,SAE/C,KAAiB,WAAW,GAAG,KAAK,QAAQ,UAjK1C,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA;AAAA,EAqKQ,uBAAuB,GAAgB;AAC7C,UAAMG,IAAO,EAAE;AAEf,QADA,KAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS,GAClD,KAAK,eAAe;AACtB,YAAMC,IAAeD,EAAK,iBAAA,EAAmB,CAAC;AAC9C,MAAIC,KAAgB,CAACA,EAAa,OAChCA,EAAa,KAAK,GAAG,KAAK,QAAQ;AAAA,IAEtC;AAAA,EACF;AAAA;AAAA,EAGQ,uBAAuB,GAAgB;AAE7C,UAAMC,IADO,EAAE,OACO,iBAAA;AACtB,SAAK,gBAAgBA,EAAS,SAAS,GACnC,KAAK,iBAAiBA,EAAS,CAAC,MAC7BA,EAAS,CAAC,EAAE,OAAIA,EAAS,CAAC,EAAE,KAAK,KAAK;AAAA,EAE/C;AAAA;AAAA,EAGQ,sBAAsB,GAAgB;AAC5C,UAAMF,IAAO,EAAE;AACf,SAAK,eAAeA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACvD;AAAA;AAAA,EAIS,eAAqB;AAC5B,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,gBAAA;AAAA,EACP;AAAA,EAES,QAAQG,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAE7BA,EAAkB,IAAI,OAAO,KAC7BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,KAAK,KAC3BA,EAAkB,IAAI,KAAK,KAC3BA,EAAkB,IAAI,MAAM,OAE5B,KAAK,eAAA,GACL,KAAK,gBAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAyB;AACvB,WAAO,KAAK,WAAW,cAAA;AAAA,EACzB;AAAA;AAAA,EAGA,iBAA0B;AACxB,WAAO,KAAK,WAAW,eAAA;AAAA,EACzB;AAAA;AAAA,EAGQ,iBAAuB;AAC7B,SAAK,WAAW,aAAa,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,EAC9E;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,QAAI,KAAK,YAAY,KAAK,UAAU,MAAM;AACxC,WAAK,WAAW;AAAA,QACd,EAAE,cAAc,GAAA;AAAA,QAChB,KAAK,SAAS,KAAK;AAAA,QACnB,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,QAAQ,KAAK,KAAK;AAC1E,WAAK,WAAW;AAAA,QACd,EAAE,gBAAgB,GAAA;AAAA,QAClB,0BAA0B,KAAK,GAAG;AAAA,QAClC,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,QAAQ,KAAK,KAAK;AAC1E,WAAK,WAAW;AAAA,QACd,EAAE,eAAe,GAAA;AAAA,QACjB,yBAAyB,KAAK,GAAG;AAAA,QACjC,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,KAAK,SAAS,GAAG;AACvD,YAAMC,IAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,GAClCC,IAAO,KAAK,QAAQ,KAAK,GAAG,KAAK,GACjCC,IAAY,KAAK,KAAK,KAAK,QAAQD,KAAQD,CAAI,GAC/CG,IAAU;AAChB,UAAID,IAAYC,KAAW,KAAK,IAAID,IAAYF,CAAI,IAAIG,GAAS;AAC/D,aAAK,WAAW;AAAA,UACd,EAAE,cAAc,GAAA;AAAA,UAChB,+BAA+BH,CAAI;AAAA,UACnC,KAAK,UAAU;AAAA,QAAA;AAEjB;AAAA,MACF;AAAA,IACF;AAEA,SAAK,WAAW,YAAY,EAAE;AAAA,EAChC;AAAA;AAAA,EAGA,oBAA0B;AACxB,SAAK,QAAQ,KAAK,eAClB,KAAK,WAAW,aAAa,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,EAC9E;AAAA;AAAA,EAGA,yBACEI,GACAC,GACM;AACN,QAAI,OAAOD,KAAU,UAAU;AAC7B,YAAME,IAAS,OAAOF,CAAK;AAC3B,WAAK,QAAQ,MAAME,CAAM,IAAI,OAAOA;AAAA,IACtC;AAAA,EACF;AAAA;AAAA,EAGA,qBAAqBC,GAAyB;AAC5C,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,QAAQC,GAA+C;AAC7D,WAAO,OAAO,SAASA,CAAK,IAAIA,IAAQ;AAAA,EAC1C;AAAA;AAAA,EAGQ,YAAYC,GAA4B;AAC9C,QAAIA,MAAQ,MAAMA,MAAQ,KAAM,QAAO;AACvC,UAAMH,IAAS,WAAWG,CAAG;AAC7B,WAAO,MAAMH,CAAM,IAAI,OAAOA;AAAA,EAChC;AAAA;AAAA,EAGQ,OAAOI,GAAmB;AAChC,QAAIC,IAASD;AACb,UAAME,IAAM,KAAK,QAAQ,KAAK,GAAG,GAC3BC,IAAM,KAAK,QAAQ,KAAK,GAAG;AACjC,WAAID,MAAQ,WAAWD,IAAS,KAAK,IAAIC,GAAKD,CAAM,IAChDE,MAAQ,WAAWF,IAAS,KAAK,IAAIE,GAAKF,CAAM,IAC7CA;AAAA,EACT;AAAA;AAAA;AAAA,EAKA,IAAY,SAAkB;AAC5B,WAAO,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA;AAAA,EAGA,IAAY,SAAkB;AAC5B,WAAO,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA;AAAA,EAGQ,WAAWG,GAAqB;AACtC,QAAI,KAAK,YAAY,KAAK,SAAU;AAEpC,UAAMC,IAAU,KAAK,SAAS,GACxBf,IAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,GAClCgB,IAAO,KAAK,OAAO,YAAYD,IAAUD,IAAQd,GAAM,QAAQ,EAAE,CAAC,CAAC;AAEzE,IAAIgB,MAAS,KAAK,UAClB,KAAK,QAAQA,GAEb,KAAK;AAAA,MACH,IAAI,YAAsC,aAAa;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,IAAI,KAAK,oBAAoB,SAC3B,aAAa,KAAK,eAAe,GACjC,KAAK,kBAAkB,OAErB,KAAK,oBAAoB,SAC3B,cAAc,KAAK,eAAe,GAClC,KAAK,kBAAkB;AAAA,EAE3B;AAAA;AAAA,EAGQ,gBAAgBF,GAAqB;AAC3C,SAAK,WAAWA,CAAK,GACrB,KAAK,kBAAkB,WAAW,MAAM;AACtC,WAAK,kBAAkB,YAAY,MAAM;AACvC,aAAK,WAAWA,CAAK;AAAA,MACvB,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAAA;AAAA,EAGQ,0BAA0B,GAAiBA,GAAqB;AACtE,IAAI,KAAK,YAAY,KAAK,aAC1B,EAAE,eAAA,GACF,KAAK,gBAAgBA,CAAK;AAAA,EAC5B;AAAA;AAAA,EAGQ,0BAAgC;AACtC,SAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,eAAe,GAAwB;AAC7C,IAAI,KAAK,YAAY,KAAK,aACtB,EAAE,QAAQ,aACZ,EAAE,eAAA,GACF,KAAK,WAAW,CAAC,KACR,EAAE,QAAQ,gBACnB,EAAE,eAAA,GACF,KAAK,WAAW,EAAE;AAAA,EAEtB;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMG,IAAS,EAAE;AACjB,SAAK,QAAQ,KAAK,YAAYA,EAAO,KAAK,GAC1C,KAAK,eAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAsC,YAAY;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,cAAc,GAAgB;AACpC,UAAMA,IAAS,EAAE,QACXX,IAAS,KAAK,YAAYW,EAAO,KAAK;AAC5C,SAAK,QAAQX,MAAW,OAAO,KAAK,OAAOA,CAAM,IAAI,MACrD,KAAK,eAAA,GACL,KAAK,gBAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAsC,aAAa;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKS,MAAMY,GAA8B;;AAC3C,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa,MAAMD;AAAA,EACrB;AAAA;AAAA,EAGA,SAAe;;AACb,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EACf;AAAA;AAAA;AAAA,EAKQ,uBAAuB;AAC7B,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAAA;AAAA,EAGQ,uBAAuB;AAC7B,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAEhCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBD;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,aAAa,KAAK,SAAS;AAAA,MAC3B,aAAa,KAAK,SAAS;AAAA,MAC3B,aAAa,KAAK,SAAS;AAAA,IAAA,GAGvBE,IACJ;AAAA,MACEF,IAAW,KAAK,WAAW;AAAA,MAC3B,CAACA,MAAa,KAAK,YAAY,KAAK,gBAAgB,KAAK,cAAc;AAAA,IAAA,EAEtE,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,QAEZG,IAAe,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI;AAEhE,WAAOJ;AAAA,gCACqBK,EAASH,CAAY,CAAC;AAAA;AAAA,2CAEX,KAAK,sBAAsB;AAAA,cACxD,KAAK,QACHF;AAAA,iEACiD,KAAK,QAAQ;AAAA,sBACxD,KAAK,KAAK;AAAA,sBACV,KAAK,WACHA,sEACAM,CAAO;AAAA;AAAA,oBAGfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYN,KAAK,QAAQ;AAAA;AAAA,qBAETC,EAAKH,CAAY,CAAC;AAAA,kBACrBI,EAAU,KAAK,GAAG,CAAC;AAAA,kBACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,mBAClB,KAAK,IAAI;AAAA,wBACJ,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,8BACtBA;AAAA,MAChB,KAAK,gBAAgB,GAAG,KAAK,QAAQ,mBAAmB;AAAA,IAAA,CACzD;AAAA,2BACcP,IAAW,SAASK,CAAO;AAAA,+BACvBE,EAAUL,CAAW,CAAC;AAAA,4BACzBK,EAAU,KAAK,UAAU,OAAO,KAAK,QAAQ,MAAS,CAAC;AAAA,4BACvDA,EAAU,KAAK,GAAG,CAAC;AAAA,4BACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,qBAC1B,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA,uBACjB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9B,KAAK,YACHF,IACAN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMmB,KAAK,cAAc;AAAA,gCACpB,KAAK,YAAY,KAAK,YAAY,KAAK,MAAM;AAAA;AAAA,mCAE1C,CAACS,MAAoB,KAAK,0BAA0BA,GAAG,CAAC,CAAC;AAAA,iCAC3D,KAAK,uBAAuB;AAAA,oCACzB,KAAK,uBAAuB;AAAA,qCAC3B,KAAK,uBAAuB;AAAA;AAAA,sBAE3C,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMhB,KAAK,cAAc;AAAA,gCACpB,KAAK,YAAY,KAAK,YAAY,KAAK,MAAM;AAAA;AAAA,mCAE1C,CAACA,MAAoB,KAAK,0BAA0BA,GAAG,EAAE,CAAC;AAAA,iCAC5D,KAAK,uBAAuB;AAAA,oCACzB,KAAK,uBAAuB;AAAA,qCAC3B,KAAK,uBAAuB;AAAA;AAAA,sBAE3C,KAAK,sBAAsB;AAAA;AAAA;AAAA,eAGlC;AAAA;AAAA;AAAA,yCAG0B,KAAK,sBAAsB;AAAA,YACxD,KAAK,QACHT;AAAA,oEACsD,KAAK,QAAQ;AAAA,oBAC7D,KAAK,KAAK;AAAA;AAAA,kBAGhBM,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMN,KAAK,WAAW;AAAA,oBACXL,KAAa,CAAC,KAAK,YAAY,CAAC,KAAK,YAAa;AAAA;AAAA,+CAEvB,KAAK,qBAAqB,IAAI,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIxF;AACF;AApoBa3B,EACK,SAAS,CAACoC,GAAavC,CAAsB;AADlDG,EAKJ,iBAAiB;AAkBxBqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBftC,EAuBX,WAAA,QAAA,CAAA;AAiBAqC,EAAA;AAAA,EAXCC,EAAS;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,MACT,eAAe,CAACC,MAAuC;AACrD,YAAIA,MAAS,QAAQA,MAAS,GAAI,QAAO;AACzC,cAAMC,IAAI,OAAOD,CAAI;AACrB,eAAO,MAAMC,CAAC,IAAI,OAAOA;AAAA,MAC3B;AAAA,MACA,aAAa,CAACC,MAAuCA,MAAQ,OAAO,OAAO,OAAOA,CAAG;AAAA,IAAA;AAAA,EACvF,CACD;AAAA,GAvCUzC,EAwCX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9C/BtC,EA+CX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/BtC,EAsDX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5D/BtC,EA6DX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEftC,EAoEX,WAAA,OAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EftC,EA2EX,WAAA,OAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFftC,EAkFX,WAAA,QAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxFftC,EAyFX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/FftC,EAgGX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtGvCtC,EAuGX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GA7GrCtC,EA8GX,WAAA,QAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GApHzCtC,EAqHX,WAAA,aAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GA3HhCtC,EA4HX,WAAA,mBAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,kBAAA,CAAmB;AAAA,GAlI/BtC,EAmIX,WAAA,kBAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,kBAAA,CAAmB;AAAA,GAzI/BtC,EA0IX,WAAA,kBAAA,CAAA;AAMgBqC,EAAA;AAAA,EADfK,EAAM,eAAe;AAAA,GA/IX1C,EAgJK,WAAA,UAAA,CAAA;AAKCqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GArJIV,EAqJM,WAAA,iBAAA,CAAA;AAEAqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GAvJIV,EAuJM,WAAA,iBAAA,CAAA;AAEAqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GAzJIV,EAyJM,WAAA,gBAAA,CAAA;AAzJNA,IAANqC,EAAA;AAAA,EADNM,EAAc,iBAAiB;AAAA,GACnB3C,CAAA;"}

package/dist/shared/{hx-pagination-DBs-vmSv.js → hx-pagination-Blt-fFqV.js}

@@ -1,5 +1,5 @@
-import { css as x, LitElement as m, nothing as d, html as g } from "lit";
-import { property as l, state as v, customElement as y } from "lit/decorators.js";
+import { css as x, LitElement as m, nothing as d, html as u } from "lit";
+import { property as c, state as v, customElement as y } from "lit/decorators.js";
 import { classMap as P } from "lit/directives/class-map.js";
 import { repeat as w } from "lit/directives/repeat.js";
 import { tokenStyles as $ } from "@helixui/tokens/lit";
@@ -196,13 +196,13 @@ const z = x`
   }
 `;
 var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (i, t, r, a) => {
-  for (var e = a > 1 ? void 0 : a ? k(t, r) : t, c = i.length - 1, p; c >= 0; c--)
-    (p = i[c]) && (e = (a ? p(t, r, e) : p(e)) || e);
+  for (var e = a > 1 ? void 0 : a ? k(t, r) : t, l = i.length - 1, p; l >= 0; l--)
+    (p = i[l]) && (e = (a ? p(t, r, e) : p(e)) || e);
   return a && e && _(t, r, e), e;
 };
 let o = class extends m {
   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.labelRowsPerPage = "Rows per page:", this.labelFirstPage = "First page", this.labelPrevPage = "Previous page", this.labelNextPage = "Next page", this.labelLastPage = "Last page", this.labelPageOf = (i, t) => `Page ${i} of ${t}`, 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.firstPageLabel = "First page", this.previousPageLabel = "Previous page", this.nextPageLabel = "Next page", this.lastPageLabel = "Last page", this._rovingKey = null, this._liveMessage = "", this._pageRangeCache = null;
   }
   // ─── Helpers ───
   /** @internal */
@@ -210,16 +210,16 @@ let o = class extends m {
     var f;
     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), c = this._range(1, Math.min(a, t)), p = this._range(Math.max(t - a + 1, a + 1), t), u = Math.max(
+    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), l = this._range(1, Math.min(a, t)), p = this._range(Math.max(t - a + 1, a + 1), t), g = Math.max(
       Math.min(r - e, t - a - e * 2 - 1),
       a + 2
     ), h = Math.min(
       Math.max(r + e, a + e * 2 + 2),
       p.length > 0 ? (p[0] ?? t) - 2 : t - 1
     ), n = [];
-    for (const b of c) n.push(b);
-    u > a + 2 ? n.push("ellipsis") : a + 1 < u && n.push(a + 1);
-    for (const b of this._range(u, h)) n.push(b);
+    for (const b of l) n.push(b);
+    g > a + 2 ? n.push("ellipsis") : a + 1 < g && n.push(a + 1);
+    for (const b of this._range(g, h)) n.push(b);
     h < t - a - 1 ? n.push("ellipsis") : h < t - a && n.push(t - a);
     for (const b of p) n.push(b);
     return this._pageRangeCache = { key: i, result: n }, n;
@@ -233,7 +233,7 @@ let o = class extends m {
   /** @internal */
   _navigate(i) {
     const t = Math.min(Math.max(1, i), this.totalPages);
-    t !== this.currentPage && (this.currentPage = t, this._rovingKey = null, this._liveMessage = this.labelPageOf(t, this.totalPages), this.dispatchEvent(
+    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 },
         bubbles: !0,
@@ -265,14 +265,14 @@ let o = class extends m {
   }
   /** @internal */
   _handleKeydown(i) {
-    var p, u;
+    var p, g;
     if (i.key !== "ArrowLeft" && i.key !== "ArrowRight") return;
     i.preventDefault();
     const t = (p = this.shadowRoot) == null ? void 0 : p.querySelector(".list");
     if (!t) return;
-    const r = Array.from(t.querySelectorAll("button:not([disabled])")), a = (u = this.shadowRoot) == null ? void 0 : u.activeElement, e = a ? r.indexOf(a) : 0, c = i.key === "ArrowLeft" ? Math.max(0, e - 1) : Math.min(r.length - 1, e + 1);
-    if (c !== e) {
-      const h = r[c];
+    const r = Array.from(t.querySelectorAll("button:not([disabled])")), a = (g = this.shadowRoot) == null ? void 0 : g.activeElement, e = a ? r.indexOf(a) : 0, l = i.key === "ArrowLeft" ? Math.max(0, e - 1) : Math.min(r.length - 1, e + 1);
+    if (l !== e) {
+      const h = r[l];
       if (!h) return;
       const n = h.dataset.rovingKey;
       n !== void 0 && (this._rovingKey = isNaN(Number(n)) ? n : Number(n)), h.focus();
@@ -281,9 +281,9 @@ let o = class extends m {
   // ─── Render ───
   render() {
     const i = this._buildPageRange(), t = this.currentPage <= 1, r = this.currentPage >= this.totalPages, a = this._effectiveRovingKey;
-    return g`
+    return u`
       <div class="pagination-root">
-        ${this.showPageSize ? g`
+        ${this.showPageSize ? u`
               <div part="page-size-wrapper" class="page-size-wrapper">
                 <label part="page-size-label" class="page-size-label">
                   ${this.labelRowsPerPage}
@@ -293,7 +293,7 @@ let o = class extends m {
                     @change=${this._handlePageSizeChange}
                   >
                     ${[10, 25, 50, 100].map(
-      (e) => g`<option value=${e} ?selected=${e === this.pageSize}>${e}</option>`
+      (e) => u`<option value=${e} ?selected=${e === this.pageSize}>${e}</option>`
     )}
                   </select>
                 </label>
@@ -311,7 +311,7 @@ let o = class extends m {
             @keydown=${this._handleKeydown}
             @focusin=${this._handleFocusin}
           >
-            ${this.showFirstLast ? g`
+            ${this.showFirstLast ? u`
                   <li part="item" class="item">
                     <button
                       part="button"
@@ -319,7 +319,7 @@ let o = class extends m {
                       ?disabled=${t}
                       tabindex=${a === "first" ? 0 : -1}
                       data-roving-key="first"
-                      aria-label=${this.labelFirstPage}
+                      aria-label=${this.firstPageLabel}
                       @click=${() => this._navigate(1)}
                     >
                       «
@@ -334,7 +334,7 @@ let o = class extends m {
                 ?disabled=${t}
                 tabindex=${a === "prev" ? 0 : -1}
                 data-roving-key="prev"
-                aria-label=${this.labelPrevPage}
+                aria-label=${this.previousPageLabel}
                 @click=${() => this._navigate(this.currentPage - 1)}
               >
                 ‹
@@ -343,24 +343,24 @@ let o = class extends m {
 
             ${w(
       i,
-      (e, c) => e === "ellipsis" ? `ellipsis-${c}` : `page-${e}`,
+      (e, l) => e === "ellipsis" ? `ellipsis-${l}` : `page-${e}`,
       (e) => {
         if (e === "ellipsis")
-          return g`
+          return u`
                     <li part="item" class="item">
                       <span part="ellipsis" class="ellipsis" aria-hidden="true">…</span>
                     </li>
                   `;
-        const c = e === this.currentPage;
-        return g`
+        const l = e === this.currentPage;
+        return u`
                   <li part="item" class="item">
                     <button
                       part="button"
                       class=${P({ button: !0 })}
-                      aria-disabled=${c ? "true" : d}
+                      aria-disabled=${l ? "true" : d}
                       tabindex=${a === e ? 0 : -1}
                       data-roving-key=${e}
-                      aria-current=${c ? "page" : d}
+                      aria-current=${l ? "page" : d}
                       aria-label=${`Page ${e}`}
                       @click=${() => this._navigate(e)}
                     >
@@ -378,14 +378,14 @@ let o = class extends m {
                 ?disabled=${r}
                 tabindex=${a === "next" ? 0 : -1}
                 data-roving-key="next"
-                aria-label=${this.labelNextPage}
+                aria-label=${this.nextPageLabel}
                 @click=${() => this._navigate(this.currentPage + 1)}
               >
                 ›
               </button>
             </li>
 
-            ${this.showFirstLast ? g`
+            ${this.showFirstLast ? u`
                   <li part="item" class="item">
                     <button
                       part="button"
@@ -393,7 +393,7 @@ let o = class extends m {
                       ?disabled=${r}
                       tabindex=${a === "last" ? 0 : -1}
                       data-roving-key="last"
-                      aria-label=${this.labelLastPage}
+                      aria-label=${this.lastPageLabel}
                       @click=${() => this._navigate(this.totalPages)}
                     >
                       »
@@ -408,47 +408,44 @@ let o = class extends m {
 };
 o.styles = [$, z];
 s([
-  l({ type: Number, attribute: "total-pages", reflect: !0 })
+  c({ type: Number, attribute: "total-pages", reflect: !0 })
 ], o.prototype, "totalPages", 2);
 s([
-  l({ type: Number, attribute: "current-page" })
+  c({ type: Number, attribute: "current-page" })
 ], o.prototype, "currentPage", 2);
 s([
-  l({ type: Number, attribute: "sibling-count", reflect: !0 })
+  c({ type: Number, attribute: "sibling-count", reflect: !0 })
 ], o.prototype, "siblingCount", 2);
 s([
-  l({ type: Number, attribute: "boundary-count", reflect: !0 })
+  c({ type: Number, attribute: "boundary-count", reflect: !0 })
 ], o.prototype, "boundaryCount", 2);
 s([
-  l({ type: Boolean, attribute: "show-first-last", reflect: !0 })
+  c({ type: Boolean, attribute: "show-first-last", reflect: !0 })
 ], o.prototype, "showFirstLast", 2);
 s([
-  l({ type: String, reflect: !0 })
+  c({ type: String, reflect: !0 })
 ], o.prototype, "label", 2);
 s([
-  l({ type: Number, attribute: "page-size", reflect: !0 })
+  c({ type: Number, attribute: "page-size", reflect: !0 })
 ], o.prototype, "pageSize", 2);
 s([
-  l({ type: Boolean, attribute: "show-page-size", reflect: !0 })
+  c({ type: Boolean, attribute: "show-page-size", reflect: !0 })
 ], o.prototype, "showPageSize", 2);
 s([
-  l({ type: String, attribute: "label-rows-per-page" })
+  c({ type: String, attribute: "label-rows-per-page" })
 ], o.prototype, "labelRowsPerPage", 2);
 s([
-  l({ type: String, attribute: "label-first-page" })
-], o.prototype, "labelFirstPage", 2);
+  c({ attribute: "first-page-label" })
+], o.prototype, "firstPageLabel", 2);
 s([
-  l({ type: String, attribute: "label-prev-page" })
-], o.prototype, "labelPrevPage", 2);
+  c({ attribute: "previous-page-label" })
+], o.prototype, "previousPageLabel", 2);
 s([
-  l({ type: String, attribute: "label-next-page" })
-], o.prototype, "labelNextPage", 2);
+  c({ attribute: "next-page-label" })
+], o.prototype, "nextPageLabel", 2);
 s([
-  l({ type: String, attribute: "label-last-page" })
-], o.prototype, "labelLastPage", 2);
-s([
-  l({ attribute: !1 })
-], o.prototype, "labelPageOf", 2);
+  c({ attribute: "last-page-label" })
+], o.prototype, "lastPageLabel", 2);
 s([
   v()
 ], o.prototype, "_rovingKey", 2);
@@ -461,4 +458,4 @@ o = s([
 export {
   o as H
 };
-//# sourceMappingURL=hx-pagination-DBs-vmSv.js.map
+//# sourceMappingURL=hx-pagination-Blt-fFqV.js.map

package/dist/shared/hx-pagination-Blt-fFqV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-pagination-Blt-fFqV.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-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, 2.25rem);\n    height: var(--hx-pagination-button-size, 2.25rem);\n    padding: 0 var(--hx-space-2, 0.5rem);\n    border: 1px solid var(--hx-pagination-border-color, var(--hx-color-neutral-300, #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-neutral-0, #ffffff));\n    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #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-neutral-100, #f3f4f6));\n    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));\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, var(--hx-color-primary-500)));\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-primary-500, #2563eb));\n    border-color: var(\n      --hx-pagination-active-border-color,\n      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))\n    );\n    color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #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-neutral-500, #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-space-2, 0.5rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-color-neutral-500, #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-space-2, 0.5rem);\n    border: 1px solid var(--hx-pagination-border-color, var(--hx-color-neutral-300, #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-neutral-0, #ffffff));\n    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #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: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\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 { 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  /**\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  /** 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 = `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  /** @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') 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=${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=${`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=${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","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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"}