@helixui/library 1.0.1 → 1.1.2

package/dist/shared/{hx-carousel-item-Be0bC-7o.js → hx-carousel-item-DgeYyYZJ.js}

@@ -1,8 +1,8 @@
-import { css as g, html as l, LitElement as f, nothing as p } from "lit";
+import { css as g, LitElement as f, nothing as p, html as l } from "lit";
 import { property as n, state as c, customElement as _ } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
+import { classMap as y } from "lit/directives/class-map.js";
 import { tokenStyles as x } from "@helixui/tokens/lit";
-const y = g`
+const m = g`
   :host {
     display: block;
     position: relative;
@@ -214,10 +214,10 @@ const y = g`
     }
   }
 `;
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? w(e, r) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (o = (i ? u(e, r, o) : u(o)) || o);
-  return i && o && b(e, r, o), o;
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? w(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (s = (r ? u(e, i, s) : u(s)) || s);
+  return r && s && b(e, i, s), s;
 };
 const P = l`<svg
   xmlns="http://www.w3.org/2000/svg"
@@ -283,9 +283,9 @@ const P = l`<svg
   <rect x="6" y="4" width="4" height="16"></rect>
   <rect x="14" y="4" width="4" height="16"></rect>
 </svg>`;
-let s = class extends f {
+let o = class extends f {
   constructor() {
-    super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this.labelPrevSlide = "Previous slide", this.labelNextSlide = "Next slide", this.labelPauseAutoplay = "Pause autoplay", this.labelPlayAutoplay = "Play autoplay", this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._livePolite = !0, this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
+    super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this.labelPrevSlide = "Previous slide", this.labelNextSlide = "Next slide", this.labelPauseAutoplay = "Pause autoplay", this.labelPlayAutoplay = "Play autoplay", this.labelSlideOf = (t, e) => `Slide ${t} of ${e}`, this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._livePolite = !0, this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
       this._livePolite = !1, this.loop ? this.goTo(this._currentIndex + this.slidesPerMove) : this._currentIndex < this._maxIndex ? this.goTo(this._currentIndex + this.slidesPerMove) : this.goTo(0);
     }, this._handleMotionChange = (t) => {
       this._reducedMotion = t.matches, this._reducedMotion ? this._stopAutoplay() : this.autoplay && !this._isHovered && !this._isFocused && this._startAutoplay();
@@ -303,7 +303,7 @@ let s = class extends f {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this._mql = window.matchMedia("(prefers-reduced-motion: reduce)"), this._reducedMotion = this._mql.matches, this._mql.addEventListener("change", this._handleMotionChange), this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave), this.addEventListener("focusin", this._handleFocusIn), this.addEventListener("focusout", this._handleFocusOut), this.addEventListener("keydown", this._handleKeydown);
+    super.connectedCallback(), typeof window < "u" && (this._mql = window.matchMedia("(prefers-reduced-motion: reduce)"), this._reducedMotion = this._mql.matches, this._mql.addEventListener("change", this._handleMotionChange)), this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave), this.addEventListener("focusin", this._handleFocusIn), this.addEventListener("focusout", this._handleFocusOut), this.addEventListener("keydown", this._handleKeydown);
   }
   disconnectedCallback() {
     var t;
@@ -313,17 +313,19 @@ let s = class extends f {
     this._syncSlides(), this.autoplay && !this._reducedMotion && this._startAutoplay();
   }
   // ─── Slide Management ───
+  /** @internal */
   _syncSlides() {
-    var r;
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     if (!t) return;
-    const e = t.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-carousel-item");
-    this._slides = e, e.forEach((i, o) => {
-      i.slideIndex = o, i.totalSlides = e.length;
+    const e = t.assignedElements({ flatten: !0 }).filter((r) => r.tagName.toLowerCase() === "hx-carousel-item");
+    this._slides = e, e.forEach((r, s) => {
+      r.slideIndex = s, r.totalSlides = e.length;
       const h = `${100 / this.slidesPerPage}%`;
-      i.style.setProperty("--_hx-carousel-slide-width", h);
+      r.style.setProperty("--_hx-carousel-slide-width", h);
     }), this._currentIndex >= e.length && (this._currentIndex = Math.max(0, e.length - 1));
   }
+  /** @internal */
   _handleSlotChange() {
     this._syncSlides();
   }
@@ -338,13 +340,16 @@ let s = class extends f {
   goTo(t) {
     if (this._slides.length === 0) return;
     let e = t;
-    this.loop ? e = (t % this._slides.length + this._slides.length) % this._slides.length : e = Math.max(0, Math.min(t, this._maxIndex)), e !== this._currentIndex && (this._currentIndex = e, this._liveText = `Slide ${e + 1} of ${this._slides.length}`, this.dispatchEvent(
+    if (this.loop ? e = (t % this._slides.length + this._slides.length) % this._slides.length : e = Math.max(0, Math.min(t, this._maxIndex)), e === this._currentIndex) return;
+    this._currentIndex = e, this._liveText = this.labelSlideOf(e + 1, this._slides.length);
+    const i = this._slides[e];
+    i && this.dispatchEvent(
       new CustomEvent("hx-slide-change", {
         bubbles: !0,
         composed: !0,
-        detail: { index: e, slide: this._slides[e] }
+        detail: { index: e, slide: i }
       })
-    ));
+    );
   }
   next() {
     const t = this._currentIndex + this.slidesPerMove;
@@ -354,55 +359,67 @@ let s = class extends f {
     const t = this._currentIndex - this.slidesPerMove;
     !this.loop && t < 0 || (this._livePolite = !0, this.goTo(t));
   }
+  /** @internal */
   _startAutoplay() {
     this._autoplayTimer === null && (this._isPlaying = !0, this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval));
   }
+  /** @internal */
   _stopAutoplay() {
     this._autoplayTimer !== null && (clearInterval(this._autoplayTimer), this._autoplayTimer = null), this._isPlaying = !1;
   }
+  /** @internal */
   _toggleAutoplay() {
     this._isPlaying ? this._stopAutoplay() : this._reducedMotion || this._startAutoplay();
   }
+  /** @internal */
   _pauseAutoplay() {
     !this._isPlaying || this._autoplayTimer === null || (clearInterval(this._autoplayTimer), this._autoplayTimer = null);
   }
+  /** @internal */
   _resumeAutoplay() {
     !this.autoplay || !this._isPlaying || this._reducedMotion || this._autoplayTimer === null && (this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval));
   }
   // ─── Drag Handlers ───
+  /** @internal */
   _handleDragStart(t) {
     this.mouseDragging && (this._isDragging = !0, this._dragMoved = !1, this._dragStartCoord = this.orientation === "horizontal" ? t.clientX : t.clientY, t.currentTarget.style.cursor = "grabbing", t.preventDefault());
   }
+  /** @internal */
   _handleDragMove(t) {
     if (!this._isDragging) return;
-    const r = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStartCoord;
-    Math.abs(r) > 5 && (this._dragMoved = !0);
+    const i = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStartCoord;
+    Math.abs(i) > 5 && (this._dragMoved = !0);
   }
+  /** @internal */
   _handleDragEnd(t) {
     if (!this._isDragging) return;
-    const r = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStartCoord, i = 50;
-    this._dragMoved && (r > i ? this.previous() : r < -i && this.next()), this._isDragging = !1, this._dragMoved = !1, t.currentTarget.style.cursor = "";
+    const i = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStartCoord, r = 50;
+    this._dragMoved && (i > r ? this.previous() : i < -r && this.next()), this._isDragging = !1, this._dragMoved = !1, t.currentTarget.style.cursor = "";
   }
   // ─── Touch Handlers ───
+  /** @internal */
   _handleTouchStart(t) {
     if (!this.mouseDragging) return;
     const e = t.touches[0];
     e && (this._isDragging = !0, this._touchMoved = !1, this._touchStartCoord = this.orientation === "horizontal" ? e.clientX : e.clientY);
   }
+  /** @internal */
   _handleTouchMove(t) {
     if (!this._isDragging) return;
     const e = t.touches[0];
     if (!e) return;
-    const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord;
-    Math.abs(i) > 5 && (this._touchMoved = !0);
+    const r = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord;
+    Math.abs(r) > 5 && (this._touchMoved = !0);
   }
+  /** @internal */
   _handleTouchEnd(t) {
     if (!this._isDragging) return;
     const e = t.changedTouches[0];
     if (!e) return;
-    const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, o = 50;
-    this._touchMoved && (i > o ? this.previous() : i < -o && this.next()), this._isDragging = !1, this._touchMoved = !1;
+    const r = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, s = 50;
+    this._touchMoved && (r > s ? this.previous() : r < -s && this.next()), this._isDragging = !1, this._touchMoved = !1;
   }
+  /** @internal */
   _goToManual(t) {
     this._livePolite = !0, this.goTo(t);
   }
@@ -430,6 +447,7 @@ let s = class extends f {
     return this.loop || this._currentIndex < this._maxIndex;
   }
   // ─── Render Helpers ───
+  /** @internal */
   _renderNavigation() {
     return l`
       <div class="navigation" part="navigation">
@@ -471,25 +489,26 @@ let s = class extends f {
       </div>
     `;
   }
+  /** @internal */
   _renderPagination() {
     const t = this._slides.length;
     if (t <= 1) return p;
-    const e = Array.from({ length: t }, (r, i) => i);
+    const e = Array.from({ length: t }, (i, r) => r);
     return l`
       <div class="controls">
         <div class="pagination" part="pagination">
           ${e.map(
-      (r) => l`
+      (i) => l`
               <button
-                class=${m({
+                class=${y({
         "pagination-item": !0,
-        "is-active": r === this._currentIndex
+        "is-active": i === this._currentIndex
       })}
                 part="pagination-item"
                 type="button"
-                aria-label="Slide ${r + 1} of ${t}"
-                aria-current=${r === this._currentIndex ? "true" : p}
-                @click=${() => this._goToManual(r)}
+                aria-label=${this.labelSlideOf(i + 1, t)}
+                aria-current=${i === this._currentIndex ? "true" : p}
+                @click=${() => this._goToManual(i)}
               >
                 <span class="pagination-dot"></span>
               </button>
@@ -499,15 +518,19 @@ let s = class extends f {
       </div>
     `;
   }
+  /** @internal */
   _renderPrevIcon() {
     return this.orientation === "horizontal" ? P : k;
   }
+  /** @internal */
   _renderNextIcon() {
     return this.orientation === "horizontal" ? I : M;
   }
+  /** @internal */
   _renderPlayIcon() {
     return S;
   }
+  /** @internal */
   _renderPauseIcon() {
     return $;
   }
@@ -552,65 +575,86 @@ let s = class extends f {
     `;
   }
 };
-s.styles = [x, y];
+o.styles = [x, m];
 a([
   n({ type: String, reflect: !0 })
-], s.prototype, "label", 2);
+], o.prototype, "label", 2);
 a([
   n({ type: Boolean, reflect: !0 })
-], s.prototype, "loop", 2);
+], o.prototype, "loop", 2);
 a([
   n({ type: Boolean, reflect: !0 })
-], s.prototype, "autoplay", 2);
+], o.prototype, "autoplay", 2);
 a([
   n({ type: Number, attribute: "autoplay-interval" })
-], s.prototype, "autoplayInterval", 2);
+], o.prototype, "autoplayInterval", 2);
 a([
   n({ type: Number, attribute: "slides-per-page" })
-], s.prototype, "slidesPerPage", 2);
+], o.prototype, "slidesPerPage", 2);
 a([
   n({ type: Number, attribute: "slides-per-move" })
-], s.prototype, "slidesPerMove", 2);
+], o.prototype, "slidesPerMove", 2);
 a([
   n({ type: String, reflect: !0 })
-], s.prototype, "orientation", 2);
+], o.prototype, "orientation", 2);
 a([
   n({ type: Boolean, attribute: "mouse-dragging", reflect: !0 })
-], s.prototype, "mouseDragging", 2);
+], o.prototype, "mouseDragging", 2);
 a([
   n({ type: String, attribute: "label-prev-slide" })
-], s.prototype, "labelPrevSlide", 2);
+], o.prototype, "labelPrevSlide", 2);
 a([
   n({ type: String, attribute: "label-next-slide" })
-], s.prototype, "labelNextSlide", 2);
+], o.prototype, "labelNextSlide", 2);
 a([
   n({ type: String, attribute: "label-pause-autoplay" })
-], s.prototype, "labelPauseAutoplay", 2);
+], o.prototype, "labelPauseAutoplay", 2);
 a([
   n({ type: String, attribute: "label-play-autoplay" })
-], s.prototype, "labelPlayAutoplay", 2);
+], o.prototype, "labelPlayAutoplay", 2);
+a([
+  n({ attribute: !1 })
+], o.prototype, "labelSlideOf", 2);
 a([
   c()
-], s.prototype, "_currentIndex", 2);
+], o.prototype, "_currentIndex", 2);
 a([
   c()
-], s.prototype, "_slides", 2);
+], o.prototype, "_slides", 2);
 a([
   c()
-], s.prototype, "_isPlaying", 2);
+], o.prototype, "_isPlaying", 2);
 a([
   c()
-], s.prototype, "_liveText", 2);
+], o.prototype, "_liveText", 2);
 a([
   c()
-], s.prototype, "_livePolite", 2);
-s = a([
+], o.prototype, "_livePolite", 2);
+o = a([
   _("hx-carousel")
-], s);
-var C = Object.defineProperty, T = Object.getOwnPropertyDescriptor, v = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? T(e, r) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (o = (i ? u(e, r, o) : u(o)) || o);
-  return i && o && C(e, r, o), o;
+], o);
+const C = g`
+  :host {
+    display: block;
+    flex-shrink: 0;
+    width: var(--_hx-carousel-slide-width, 100%);
+    box-sizing: border-box;
+  }
+
+  .slide-group {
+    height: 100%;
+    outline: none;
+  }
+
+  .slide-group:focus-visible {
+    outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);
+    outline-offset: var(--hx-focus-ring-offset);
+  }
+`;
+var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, v = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? D(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (s = (r ? u(e, i, s) : u(s)) || s);
+  return r && s && T(e, i, s), s;
 };
 let d = class extends f {
   constructor() {
@@ -619,40 +663,13 @@ let d = class extends f {
   render() {
     const t = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;
     return l`
-      <div class="slide-group" role="group" aria-label=${t} tabindex="-1">
+      <div class="slide-group" part="slide" role="group" aria-label=${t} tabindex="-1">
         <slot></slot>
       </div>
     `;
   }
 };
-d.styles = [
-  x,
-  g`
-      :host {
-        display: block;
-        flex-shrink: 0;
-        width: var(--_hx-carousel-slide-width, 100%);
-        box-sizing: border-box;
-      }
-
-      .slide-group {
-        height: 100%;
-        outline: none;
-      }
-
-      /*
-       * Show focus ring for both keyboard-initiated focus (:focus-visible) and
-       * programmatic focus (.focus() calls from JS). tabindex="-1" elements only
-       * receive focus programmatically, so :focus-visible may not trigger in all
-       * browsers — :focus-within on the host ensures the ring is always visible.
-       */
-      .slide-group:focus-visible,
-      .slide-group:focus {
-        outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);
-        outline-offset: var(--hx-focus-ring-offset);
-      }
-    `
-];
+d.styles = [x, C];
 v([
   n({ type: Number, attribute: "slide-index" })
 ], d.prototype, "slideIndex", 2);
@@ -663,7 +680,7 @@ d = v([
   _("hx-carousel-item")
 ], d);
 export {
-  s as H,
+  o as H,
   d as a
 };
-//# sourceMappingURL=hx-carousel-item-Be0bC-7o.js.map
+//# sourceMappingURL=hx-carousel-item-DgeYyYZJ.js.map

package/dist/shared/hx-carousel-item-DgeYyYZJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-carousel-item-DgeYyYZJ.js","sources":["../../src/components/hx-carousel/hx-carousel.styles.ts","../../src/components/hx-carousel/hx-carousel.ts","../../src/components/hx-carousel/hx-carousel-item.styles.ts","../../src/components/hx-carousel/hx-carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCarouselStyles = css`\n  :host {\n    display: block;\n    position: relative;\n  }\n\n  /* ─── Base ─── */\n\n  .base {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-3, 0.75rem);\n  }\n\n  :host([orientation='vertical']) .base {\n    flex-direction: row;\n  }\n\n  /* ─── Navigation ─── */\n\n  .navigation {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  :host([orientation='vertical']) .navigation {\n    flex-direction: column;\n  }\n\n  .nav-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n    height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background: var(--hx-color-neutral-0, #fff);\n    color: var(--hx-color-neutral-700, #374151);\n    cursor: pointer;\n    padding: 0;\n    transition:\n      background-color var(--hx-transition-fast, 0.15s ease),\n      color var(--hx-transition-fast, 0.15s ease),\n      border-color var(--hx-transition-fast, 0.15s ease);\n    flex-shrink: 0;\n  }\n\n  .nav-btn:hover:not([disabled]) {\n    background: var(--hx-color-neutral-50, #f9fafb);\n    border-color: var(--hx-color-neutral-400, #9ca3af);\n  }\n\n  .nav-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-carousel-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  .nav-btn[disabled] {\n    opacity: var(--hx-opacity-disabled, 0.4);\n    cursor: not-allowed;\n  }\n\n  .nav-btn svg {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  /* ─── Play/Pause ─── */\n\n  .play-pause-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    width: var(--hx-touch-target-min, 2.75rem);\n    height: var(--hx-touch-target-min, 2.75rem);\n    border: var(--hx-border-width-thin, 1px) solid transparent;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background: transparent;\n    color: var(--hx-color-neutral-500, #6b7280);\n    cursor: pointer;\n    padding: 0;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    transition: background-color var(--hx-transition-fast, 0.15s ease);\n    flex-shrink: 0;\n  }\n\n  .play-pause-btn:hover {\n    background: var(--hx-color-neutral-100, #f3f4f6);\n  }\n\n  .play-pause-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-carousel-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  /* ─── Scroll Container ─── */\n\n  .scroll-container-wrapper {\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .slide-viewport {\n    overflow: hidden;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n  }\n\n  .track {\n    display: flex;\n    transition: transform var(--hx-transition-base, 0.3s ease);\n  }\n\n  :host([orientation='vertical']) .track {\n    flex-direction: column;\n  }\n\n  /* ─── Pagination ─── */\n\n  .pagination {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    flex-wrap: wrap;\n  }\n\n  :host([orientation='vertical']) .pagination {\n    flex-direction: column;\n  }\n\n  .pagination-item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: 0;\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    border-radius: var(--hx-border-radius-full, 9999px);\n  }\n\n  .pagination-dot {\n    display: block;\n    width: var(--hx-carousel-pagination-dot-size, 0.5rem);\n    height: var(--hx-carousel-pagination-dot-size, 0.5rem);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background: var(--hx-color-neutral-300, #d1d5db);\n    transition:\n      background-color var(--hx-transition-fast, 0.15s ease),\n      transform var(--hx-transition-fast, 0.15s ease);\n  }\n\n  .pagination-item[aria-current='true'] .pagination-dot,\n  .pagination-item.is-active .pagination-dot {\n    background: var(--hx-color-primary-600, #2563eb);\n    transform: scale(1.25);\n  }\n\n  .pagination-item:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-full, 9999px);\n  }\n\n  /* ─── Controls row ─── */\n\n  .controls {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Live Region ─── */\n\n  .live-region {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .track,\n    .nav-btn,\n    .pagination-dot,\n    .play-pause-btn {\n      transition: 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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCarouselStyles } from './hx-carousel.styles.js';\nimport type { HelixCarouselItem } from './hx-carousel-item.js';\n\n// ─── Module-level SVG icon constants ───\n\nconst _svgChevronLeft = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <polyline points=\"15 18 9 12 15 6\"></polyline>\n</svg>`;\n\nconst _svgChevronUp = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <polyline points=\"18 15 12 9 6 15\"></polyline>\n</svg>`;\n\nconst _svgChevronRight = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <polyline points=\"9 18 15 12 9 6\"></polyline>\n</svg>`;\n\nconst _svgChevronDown = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <polyline points=\"6 9 12 15 18 9\"></polyline>\n</svg>`;\n\nconst _svgPlay = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n  width=\"1em\"\n  height=\"1em\"\n>\n  <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\n</svg>`;\n\nconst _svgPause = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n  width=\"1em\"\n  height=\"1em\"\n>\n  <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"></rect>\n  <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"></rect>\n</svg>`;\n\n/**\n * A scrollable carousel/slider for images or content slides.\n *\n * @summary Scrollable carousel with navigation, pagination, autoplay, and an accessible label.\n *\n * @tag hx-carousel\n *\n * @slot - `hx-carousel-item` elements (the slides).\n * @slot next-button - Custom next navigation button.\n * @slot previous-button - Custom previous navigation button.\n *\n * @fires {CustomEvent<{index: number, slide: HelixCarouselItem}>} hx-slide-change - Dispatched when the active slide changes.\n *\n * @csspart base - The outer wrapper element.\n * @csspart slide-viewport - The slide viewport/overflow container.\n * @csspart pagination - The pagination dot container.\n * @csspart pagination-item - Individual pagination dot button.\n * @csspart navigation - The previous/next button wrapper.\n * @csspart prev-btn - The previous navigation button.\n * @csspart next-btn - The next navigation button.\n * @csspart play-pause-btn - The autoplay play/pause toggle button.\n *\n * @cssprop [--hx-carousel-gap=0px] - Gap between slides.\n * @cssprop [--hx-carousel-slide-width=100%] - Width override for each slide.\n * @cssprop [--hx-carousel-nav-btn-size=2.5rem] - Size of previous/next navigation buttons.\n * @cssprop [--hx-carousel-pagination-dot-size=0.5rem] - Size of pagination dots.\n */\n@customElement('hx-carousel')\nexport class HelixCarousel extends LitElement {\n  static override styles = [tokenStyles, helixCarouselStyles];\n\n  /**\n   * Accessible label identifying this carousel to assistive technology.\n   * When multiple carousels appear on the same page, each must have a unique label.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Carousel';\n\n  /**\n   * Whether the carousel wraps around from last to first slide and vice-versa.\n   * @attr loop\n   */\n  @property({ type: Boolean, reflect: true })\n  loop = false;\n\n  /**\n   * Whether the carousel auto-advances slides.\n   * Automatically pauses on hover, focus, and when prefers-reduced-motion is active.\n   * @attr autoplay\n   */\n  @property({ type: Boolean, reflect: true })\n  autoplay = false;\n\n  /**\n   * Milliseconds between auto-advance transitions.\n   * @attr autoplay-interval\n   */\n  @property({ type: Number, attribute: 'autoplay-interval' })\n  autoplayInterval = 3000;\n\n  /**\n   * Number of slides visible at once.\n   * @attr slides-per-page\n   */\n  @property({ type: Number, attribute: 'slides-per-page' })\n  slidesPerPage = 1;\n\n  /**\n   * Number of slides to advance per navigation action.\n   * @attr slides-per-move\n   */\n  @property({ type: Number, attribute: 'slides-per-move' })\n  slidesPerMove = 1;\n\n  /**\n   * Scroll axis of the carousel.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Whether click-drag scrolling is enabled.\n   * @attr mouse-dragging\n   */\n  @property({ type: Boolean, attribute: 'mouse-dragging', reflect: true })\n  mouseDragging = false;\n\n  /**\n   * Accessible label for the previous slide button.\n   * @attr label-prev-slide\n   */\n  @property({ type: String, attribute: 'label-prev-slide' })\n  labelPrevSlide = 'Previous slide';\n\n  /**\n   * Accessible label for the next slide button.\n   * @attr label-next-slide\n   */\n  @property({ type: String, attribute: 'label-next-slide' })\n  labelNextSlide = 'Next slide';\n\n  /**\n   * Accessible label for the autoplay pause button.\n   * @attr label-pause-autoplay\n   */\n  @property({ type: String, attribute: 'label-pause-autoplay' })\n  labelPauseAutoplay = 'Pause autoplay';\n\n  /**\n   * Accessible label for the autoplay play button.\n   * @attr label-play-autoplay\n   */\n  @property({ type: String, attribute: 'label-play-autoplay' })\n  labelPlayAutoplay = 'Play autoplay';\n\n  /**\n   * Generates the live-region text for a slide position.\n   * @param index - 1-based slide index\n   * @param total - total slide count\n   */\n  @property({ attribute: false })\n  labelSlideOf: (index: number, total: number) => string = (index, total) =>\n    `Slide ${index} of ${total}`;\n\n  /**\n   * Index of the currently visible slide.\n   * @internal\n   */\n  @state() private _currentIndex = 0;\n  /**\n   * Array of carousel item elements assigned to the default slot.\n   * @internal\n   */\n  @state() private _slides: HelixCarouselItem[] = [];\n  /**\n   * Whether the autoplay is currently active and advancing slides.\n   * @internal\n   */\n  @state() private _isPlaying = false;\n  /**\n   * Text content for the ARIA live region announcing slide changes.\n   * @internal\n   */\n  @state() private _liveText = '';\n  /** @internal */\n  @state() private _livePolite = true;\n\n  /**\n   * Reference to the active autoplay interval timer, or null when stopped.\n   * @internal\n   */\n  private _autoplayTimer: ReturnType<typeof setInterval> | null = null;\n  /**\n   * Whether the user has requested reduced motion via the OS media preference.\n   * @internal\n   */\n  private _reducedMotion = false;\n  /**\n   * MediaQueryList instance for monitoring the prefers-reduced-motion media feature.\n   * @internal\n   */\n  private _mql: MediaQueryList | null = null;\n  /**\n   * Whether the carousel is currently being hovered, used to pause autoplay on hover.\n   * @internal\n   */\n  private _isHovered = false;\n  /**\n   * Whether a descendant of the carousel currently has focus, used to pause autoplay on focus.\n   * @internal\n   */\n  private _isFocused = false;\n\n  // ─── Drag state ───\n  /**\n   * Pointer coordinate at the start of a mouse drag gesture.\n   * @internal\n   */\n  private _dragStartCoord = 0;\n  /**\n   * Whether a mouse drag gesture is currently in progress.\n   * @internal\n   */\n  private _isDragging = false;\n  /**\n   * Whether the pointer has moved beyond the drag threshold during the current drag gesture.\n   * @internal\n   */\n  private _dragMoved = false;\n  /**\n   * Touch coordinate at the start of a touch swipe gesture.\n   * @internal\n   */\n  private _touchStartCoord = 0;\n  /**\n   * Whether the touch has moved beyond the swipe threshold during the current touch gesture.\n   * @internal\n   */\n  private _touchMoved = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Guard for SSR — window.matchMedia is unavailable server-side\n    if (typeof window !== 'undefined') {\n      this._mql = window.matchMedia('(prefers-reduced-motion: reduce)');\n      this._reducedMotion = this._mql.matches;\n      this._mql.addEventListener('change', this._handleMotionChange);\n    }\n\n    this.addEventListener('mouseenter', this._handleMouseEnter);\n    this.addEventListener('mouseleave', this._handleMouseLeave);\n    this.addEventListener('focusin', this._handleFocusIn);\n    this.addEventListener('focusout', this._handleFocusOut);\n    this.addEventListener('keydown', this._handleKeydown);\n    // Touch events are registered directly on the scroll-container in the template\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._mql?.removeEventListener('change', this._handleMotionChange);\n    this._stopAutoplay();\n    this.removeEventListener('mouseenter', this._handleMouseEnter);\n    this.removeEventListener('mouseleave', this._handleMouseLeave);\n    this.removeEventListener('focusin', this._handleFocusIn);\n    this.removeEventListener('focusout', this._handleFocusOut);\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override firstUpdated(): void {\n    this._syncSlides();\n    if (this.autoplay && !this._reducedMotion) {\n      this._startAutoplay();\n    }\n  }\n\n  // ─── Slide Management ───\n\n  /** @internal */\n  private _syncSlides(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return;\n\n    const items = slot\n      .assignedElements({ flatten: true })\n      .filter((el) => el.tagName.toLowerCase() === 'hx-carousel-item') as HelixCarouselItem[];\n\n    this._slides = items;\n\n    // Update aria labels on each item\n    items.forEach((item, i) => {\n      item.slideIndex = i;\n      item.totalSlides = items.length;\n      const slideWidth = `${100 / this.slidesPerPage}%`;\n      (item as HTMLElement).style.setProperty('--_hx-carousel-slide-width', slideWidth);\n    });\n\n    // Clamp currentIndex if slides changed\n    if (this._currentIndex >= items.length) {\n      this._currentIndex = Math.max(0, items.length - 1);\n    }\n  }\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._syncSlides();\n  }\n\n  // ─── Navigation ───\n\n  /**\n   * Maximum valid slide index accounting for the number of slides visible per page.\n   * @internal\n   */\n  private get _maxIndex(): number {\n    return Math.max(0, this._slides.length - this.slidesPerPage);\n  }\n\n  goTo(index: number): void {\n    if (this._slides.length === 0) return;\n\n    let next = index;\n    if (this.loop) {\n      next = ((index % this._slides.length) + this._slides.length) % this._slides.length;\n    } else {\n      next = Math.max(0, Math.min(index, this._maxIndex));\n    }\n\n    if (next === this._currentIndex) return;\n\n    this._currentIndex = next;\n    this._liveText = this.labelSlideOf(next + 1, this._slides.length);\n    const slide = this._slides[next];\n    if (!slide) return;\n    this.dispatchEvent(\n      new CustomEvent<{ index: number; slide: HelixCarouselItem | undefined }>('hx-slide-change', {\n        bubbles: true,\n        composed: true,\n        detail: { index: next, slide },\n      }),\n    );\n  }\n\n  next(): void {\n    const nextIndex = this._currentIndex + this.slidesPerMove;\n    if (!this.loop && nextIndex > this._maxIndex) {\n      return;\n    }\n    this._livePolite = true;\n    this.goTo(nextIndex);\n  }\n\n  previous(): void {\n    const prevIndex = this._currentIndex - this.slidesPerMove;\n    if (!this.loop && prevIndex < 0) {\n      return;\n    }\n    this._livePolite = true;\n    this.goTo(prevIndex);\n  }\n\n  // ─── Autoplay ───\n\n  /**\n   * Callback invoked on each autoplay interval tick to advance to the next slide.\n   * @internal\n   */\n  private _autoplayTick = (): void => {\n    this._livePolite = false;\n    if (this.loop) {\n      this.goTo(this._currentIndex + this.slidesPerMove);\n    } else if (this._currentIndex < this._maxIndex) {\n      this.goTo(this._currentIndex + this.slidesPerMove);\n    } else {\n      this.goTo(0);\n    }\n  };\n\n  /** @internal */\n  private _startAutoplay(): void {\n    if (this._autoplayTimer !== null) return;\n    this._isPlaying = true;\n    this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n  }\n\n  /** @internal */\n  private _stopAutoplay(): void {\n    if (this._autoplayTimer !== null) {\n      clearInterval(this._autoplayTimer);\n      this._autoplayTimer = null;\n    }\n    this._isPlaying = false;\n  }\n\n  /** @internal */\n  private _toggleAutoplay(): void {\n    if (this._isPlaying) {\n      this._stopAutoplay();\n    } else if (!this._reducedMotion) {\n      this._startAutoplay();\n    }\n  }\n\n  /** @internal */\n  private _pauseAutoplay(): void {\n    if (!this._isPlaying || this._autoplayTimer === null) return;\n    clearInterval(this._autoplayTimer);\n    this._autoplayTimer = null;\n  }\n\n  /** @internal */\n  private _resumeAutoplay(): void {\n    if (!this.autoplay || !this._isPlaying || this._reducedMotion) return;\n    if (this._autoplayTimer !== null) return;\n    this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n  }\n\n  // ─── Event Handlers ───\n\n  /**\n   * Handles changes to the prefers-reduced-motion media query, stopping or resuming autoplay accordingly.\n   * @internal\n   */\n  private _handleMotionChange = (e: MediaQueryListEvent): void => {\n    this._reducedMotion = e.matches;\n    if (this._reducedMotion) {\n      this._stopAutoplay();\n    } else if (this.autoplay && !this._isHovered && !this._isFocused) {\n      this._startAutoplay();\n    }\n  };\n\n  /**\n   * Handles the mouseenter event to pause autoplay while the user hovers over the carousel.\n   * @internal\n   */\n  private _handleMouseEnter = (): void => {\n    this._isHovered = true;\n    this._pauseAutoplay();\n  };\n\n  /**\n   * Handles the mouseleave event to resume autoplay when the user stops hovering.\n   * @internal\n   */\n  private _handleMouseLeave = (): void => {\n    this._isHovered = false;\n    if (!this._isFocused) {\n      this._resumeAutoplay();\n    }\n  };\n\n  /**\n   * Handles the focusin event to pause autoplay while a descendant has focus.\n   * @internal\n   */\n  private _handleFocusIn = (): void => {\n    this._isFocused = true;\n    this._pauseAutoplay();\n  };\n\n  /**\n   * Handles the focusout event to resume autoplay when focus leaves the carousel.\n   * @internal\n   */\n  private _handleFocusOut = (): void => {\n    this._isFocused = false;\n    if (!this._isHovered) {\n      this._resumeAutoplay();\n    }\n  };\n\n  /**\n   * Handles keyboard navigation to move between slides using arrow, Home, and End keys.\n   * @internal\n   */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (this.orientation === 'horizontal') {\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        this.previous();\n      } else if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        this.next();\n      }\n    } else {\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        this.previous();\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        this.next();\n      }\n    }\n\n    if (e.key === 'Home') {\n      e.preventDefault();\n      this.goTo(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      this.goTo(this._slides.length - 1);\n    }\n  };\n\n  // ─── Drag Handlers ───\n\n  /** @internal */\n  private _handleDragStart(e: MouseEvent): void {\n    if (!this.mouseDragging) return;\n    this._isDragging = true;\n    this._dragMoved = false;\n    this._dragStartCoord = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    (e.currentTarget as HTMLElement).style.cursor = 'grabbing';\n    e.preventDefault();\n  }\n\n  /** @internal */\n  private _handleDragMove(e: MouseEvent): void {\n    if (!this._isDragging) return;\n    const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    const diff = current - this._dragStartCoord;\n    if (Math.abs(diff) > 5) {\n      this._dragMoved = true;\n    }\n  }\n\n  /** @internal */\n  private _handleDragEnd(e: MouseEvent): void {\n    if (!this._isDragging) return;\n    const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    const diff = current - this._dragStartCoord;\n    const threshold = 50;\n    if (this._dragMoved) {\n      if (diff > threshold) {\n        this.previous();\n      } else if (diff < -threshold) {\n        this.next();\n      }\n    }\n    this._isDragging = false;\n    this._dragMoved = false;\n    (e.currentTarget as HTMLElement).style.cursor = '';\n  }\n\n  // ─── Touch Handlers ───\n\n  /** @internal */\n  private _handleTouchStart(e: TouchEvent): void {\n    if (!this.mouseDragging) return;\n    const touch = e.touches[0];\n    if (!touch) return;\n    this._isDragging = true;\n    this._touchMoved = false;\n    this._touchStartCoord = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n  }\n\n  /** @internal */\n  private _handleTouchMove(e: TouchEvent): void {\n    if (!this._isDragging) return;\n    const touch = e.touches[0];\n    if (!touch) return;\n    const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n    const diff = current - this._touchStartCoord;\n    if (Math.abs(diff) > 5) {\n      this._touchMoved = true;\n    }\n  }\n\n  /** @internal */\n  private _handleTouchEnd(e: TouchEvent): void {\n    if (!this._isDragging) return;\n    const touch = e.changedTouches[0];\n    if (!touch) return;\n    const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n    const diff = current - this._touchStartCoord;\n    const threshold = 50;\n    if (this._touchMoved) {\n      if (diff > threshold) {\n        this.previous();\n      } else if (diff < -threshold) {\n        this.next();\n      }\n    }\n    this._isDragging = false;\n    this._touchMoved = false;\n  }\n\n  /** @internal */\n  private _goToManual(index: number): void {\n    this._livePolite = true;\n    this.goTo(index);\n  }\n\n  // ─── Computed ───\n\n  /**\n   * CSS transform value applied to the slide track to scroll to the current index.\n   * @internal\n   */\n  private get _trackTransform(): string {\n    const slideSize = 100 / this.slidesPerPage;\n    const offset = this._currentIndex * slideSize;\n    return this.orientation === 'horizontal'\n      ? `translateX(-${offset}%)`\n      : `translateY(-${offset}%)`;\n  }\n\n  /**\n   * Whether the previous navigation button should be enabled.\n   * @internal\n   */\n  private get _canGoPrev(): boolean {\n    return this.loop || this._currentIndex > 0;\n  }\n\n  /**\n   * Whether the next navigation button should be enabled.\n   * @internal\n   */\n  private get _canGoNext(): boolean {\n    return this.loop || this._currentIndex < this._maxIndex;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderNavigation() {\n    return html`\n      <div class=\"navigation\" part=\"navigation\">\n        <slot name=\"previous-button\">\n          <button\n            class=\"nav-btn\"\n            part=\"prev-btn\"\n            type=\"button\"\n            aria-label=${this.labelPrevSlide}\n            ?disabled=${!this._canGoPrev}\n            @click=${() => this.previous()}\n          >\n            ${this._renderPrevIcon()}\n          </button>\n        </slot>\n        ${this.autoplay\n          ? html`\n              <button\n                class=\"play-pause-btn\"\n                part=\"play-pause-btn\"\n                type=\"button\"\n                aria-label=${this._isPlaying ? this.labelPauseAutoplay : this.labelPlayAutoplay}\n                @click=${() => this._toggleAutoplay()}\n              >\n                ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}\n              </button>\n            `\n          : nothing}\n        <slot name=\"next-button\">\n          <button\n            class=\"nav-btn\"\n            part=\"next-btn\"\n            type=\"button\"\n            aria-label=${this.labelNextSlide}\n            ?disabled=${!this._canGoNext}\n            @click=${() => this.next()}\n          >\n            ${this._renderNextIcon()}\n          </button>\n        </slot>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderPagination() {\n    const count = this._slides.length;\n    if (count <= 1) return nothing;\n    const dots = Array.from({ length: count }, (_, i) => i);\n    return html`\n      <div class=\"controls\">\n        <div class=\"pagination\" part=\"pagination\">\n          ${dots.map(\n            (i) => html`\n              <button\n                class=${classMap({\n                  'pagination-item': true,\n                  'is-active': i === this._currentIndex,\n                })}\n                part=\"pagination-item\"\n                type=\"button\"\n                aria-label=${this.labelSlideOf(i + 1, count)}\n                aria-current=${i === this._currentIndex ? 'true' : nothing}\n                @click=${() => this._goToManual(i)}\n              >\n                <span class=\"pagination-dot\"></span>\n              </button>\n            `,\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderPrevIcon() {\n    return this.orientation === 'horizontal' ? _svgChevronLeft : _svgChevronUp;\n  }\n\n  /** @internal */\n  private _renderNextIcon() {\n    return this.orientation === 'horizontal' ? _svgChevronRight : _svgChevronDown;\n  }\n\n  /** @internal */\n  private _renderPlayIcon() {\n    return _svgPlay;\n  }\n\n  /** @internal */\n  private _renderPauseIcon() {\n    return _svgPause;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"base\"\n        part=\"base\"\n        role=\"region\"\n        aria-label=${this.label}\n        aria-roledescription=\"carousel\"\n      >\n        <div\n          class=\"live-region\"\n          role=\"status\"\n          aria-live=${this._livePolite ? 'polite' : 'off'}\n          aria-atomic=\"true\"\n        >\n          ${this._liveText}\n        </div>\n        ${this._renderNavigation()}\n        <div class=\"scroll-container-wrapper\">\n          <div\n            class=\"slide-viewport\"\n            part=\"slide-viewport\"\n            @mousedown=${this._handleDragStart}\n            @mousemove=${this._handleDragMove}\n            @mouseup=${this._handleDragEnd}\n            @mouseleave=${this._handleDragEnd}\n            @touchstart=${this._handleTouchStart}\n            @touchmove=${this._handleTouchMove}\n            @touchend=${this._handleTouchEnd}\n          >\n            <div class=\"track\" style=\"transform: ${this._trackTransform};\">\n              <slot @slotchange=${this._handleSlotChange}></slot>\n            </div>\n          </div>\n        </div>\n        ${this._renderPagination()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-carousel': HelixCarousel;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixCarouselItemStyles = css`\n  :host {\n    display: block;\n    flex-shrink: 0;\n    width: var(--_hx-carousel-slide-width, 100%);\n    box-sizing: border-box;\n  }\n\n  .slide-group {\n    height: 100%;\n    outline: none;\n  }\n\n  .slide-group:focus-visible {\n    outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);\n    outline-offset: var(--hx-focus-ring-offset);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCarouselItemStyles } from './hx-carousel-item.styles.js';\n\n/**\n * A wrapper for individual carousel slides.\n *\n * @summary Individual slide wrapper for use inside hx-carousel.\n *\n * @tag hx-carousel-item\n *\n * @slot - Slide content.\n *\n * @csspart slide - The slide wrapper element.\n */\n@customElement('hx-carousel-item')\nexport class HelixCarouselItem extends LitElement {\n  static override styles = [tokenStyles, helixCarouselItemStyles];\n\n  /**\n   * The 0-based index of this slide within the carousel. Set by hx-carousel.\n   * @attr slide-index\n   */\n  @property({ type: Number, attribute: 'slide-index' })\n  slideIndex = 0;\n\n  /**\n   * Total number of slides in the carousel. Set by hx-carousel.\n   * @attr total-slides\n   */\n  @property({ type: Number, attribute: 'total-slides' })\n  totalSlides = 0;\n\n  override render() {\n    const label = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;\n    return html`\n      <div class=\"slide-group\" part=\"slide\" role=\"group\" aria-label=${label} tabindex=\"-1\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-carousel-item': HelixCarouselItem;\n  }\n}\n"],"names":["helixCarouselStyles","css","_svgChevronLeft","html","_svgChevronUp","_svgChevronRight","_svgChevronDown","_svgPlay","_svgPause","HelixCarousel","LitElement","index","total","e","_a","slot","items","el","item","i","slideWidth","next","slide","nextIndex","prevIndex","diff","threshold","touch","slideSize","offset","nothing","count","dots","_","classMap","tokenStyles","__decorateClass","property","state","customElement","helixCarouselItemStyles","HelixCarouselItem","label"],"mappings":";;;;AAEO,MAAMA,IAAsBC;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;;;;;;ACOnC,MAAMC,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAalBC,IAAgBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}

package/dist/shared/{hx-checkbox-CuaJqEo7.js → hx-checkbox-BvjO-O41.js}

@@ -1,5 +1,5 @@
 import { css as p, LitElement as k, nothing as s, html as d } from "lit";
-import { property as c, query as v, state as _, customElement as u } from "lit/decorators.js";
+import { property as c, query as v, state as u, customElement as _ } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as l } from "lit/directives/if-defined.js";
 import { live as b } from "lit/directives/live.js";
@@ -228,7 +228,7 @@ var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, t = (e, o, h
 };
 let w = 0, r = class extends k {
   constructor() {
-    super(), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.error = "", this.helpText = "", this.size = "md", this._hasErrorSlot = !1, this._id = `hx-checkbox-${++w}`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`, this._internals = this.attachInternals();
+    super(), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this.size = "md", this._hasErrorSlot = !1, this._id = `hx-checkbox-${++w}`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`, this._internals = this.attachInternals();
   }
   // P0-02: observe aria-label on host to forward to inner input
   static get observedAttributes() {
@@ -238,6 +238,7 @@ let w = 0, r = class extends k {
     super.attributeChangedCallback(e, o, h), e === "aria-label" && this.requestUpdate();
   }
   // ─── Slot Handlers ───
+  /** @internal */
   _handleErrorSlotChange(e) {
     const o = e.target;
     this._hasErrorSlot = o.assignedNodes({ flatten: !0 }).length > 0;
@@ -267,10 +268,11 @@ let w = 0, r = class extends k {
   reportValidity() {
     return this._internals.reportValidity();
   }
+  /** @internal */
   _updateValidity() {
     this.required && !this.checked ? this._internals.setValidity(
       { valueMissing: !0 },
-      this.error || "This field is required.",
+      this.error || this.requiredMessage,
       this._inputEl ?? void 0
     ) : this._internals.setValidity({});
   }
@@ -287,6 +289,7 @@ let w = 0, r = class extends k {
     this.disabled = e;
   }
   // ─── Event Handling ───
+  /** @internal */
   _handleChange() {
     this.disabled || (this.indeterminate = !1, this.checked = !this.checked, this._internals.setFormValue(this.checked ? this.value : null), this._updateValidity(), this.dispatchEvent(
       new CustomEvent("hx-change", {
@@ -296,6 +299,7 @@ let w = 0, r = class extends k {
       })
     ));
   }
+  /** @internal */
   _handleKeyDown(e) {
     e.key === " " && (e.preventDefault(), e.stopPropagation(), this._handleChange());
   }
@@ -420,6 +424,9 @@ t([
 t([
   c({ type: String, attribute: "help-text" })
 ], r.prototype, "helpText", 2);
+t([
+  c({ attribute: "required-message" })
+], r.prototype, "requiredMessage", 2);
 t([
   c({ type: String, attribute: "hx-size", reflect: !0 })
 ], r.prototype, "size", 2);
@@ -427,12 +434,12 @@ t([
   v(".checkbox__input")
 ], r.prototype, "_inputEl", 2);
 t([
-  _()
+  u()
 ], r.prototype, "_hasErrorSlot", 2);
 r = t([
-  u("hx-checkbox")
+  _("hx-checkbox")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-checkbox-CuaJqEo7.js.map
+//# sourceMappingURL=hx-checkbox-BvjO-O41.js.map