@helixui/library 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-carousel-item-CymJHv1m.js","sources":["../../src/components/hx-carousel/hx-carousel.styles.ts","../../src/components/hx-carousel/hx-carousel.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    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 var(--hx-focus-ring-color, #2563eb);\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    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\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 var(--hx-focus-ring-color, #2563eb);\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    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 var(--hx-focus-ring-color, #2563eb);\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  @state() private _currentIndex = 0;\n  @state() private _slides: HelixCarouselItem[] = [];\n  @state() private _isPlaying = false;\n  @state() private _liveText = '';\n\n  private _autoplayTimer: ReturnType<typeof setInterval> | null = null;\n  private _reducedMotion = false;\n  private _mql: MediaQueryList | null = null;\n  private _isHovered = false;\n  private _isFocused = false;\n\n  // ─── Drag state ───\n  private _dragStartCoord = 0;\n  private _isDragging = false;\n  private _dragMoved = false;\n  private _touchStartCoord = 0;\n  private _touchMoved = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._mql = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._reducedMotion = this._mql.matches;\n    this._mql.addEventListener('change', this._handleMotionChange);\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  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  private _handleSlotChange(): void {\n    this._syncSlides();\n  }\n\n  // ─── Navigation ───\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 = `Slide ${next + 1} of ${this._slides.length}`;\n    this.dispatchEvent(\n      new CustomEvent('hx-slide-change', {\n        bubbles: true,\n        composed: true,\n        detail: { index: next, slide: this._slides[next] },\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.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.goTo(prevIndex);\n  }\n\n  // ─── Autoplay ───\n\n  private _autoplayTick = (): void => {\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  private _startAutoplay(): void {\n    if (this._autoplayTimer !== null) return;\n    this._isPlaying = true;\n    this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n  }\n\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  private _toggleAutoplay(): void {\n    if (this._isPlaying) {\n      this._stopAutoplay();\n    } else if (!this._reducedMotion) {\n      this._startAutoplay();\n    }\n  }\n\n  private _pauseAutoplay(): void {\n    if (!this._isPlaying || this._autoplayTimer === null) return;\n    clearInterval(this._autoplayTimer);\n    this._autoplayTimer = null;\n  }\n\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  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  private _handleMouseEnter = (): void => {\n    this._isHovered = true;\n    this._pauseAutoplay();\n  };\n\n  private _handleMouseLeave = (): void => {\n    this._isHovered = false;\n    if (!this._isFocused) {\n      this._resumeAutoplay();\n    }\n  };\n\n  private _handleFocusIn = (): void => {\n    this._isFocused = true;\n    this._pauseAutoplay();\n  };\n\n  private _handleFocusOut = (): void => {\n    this._isFocused = false;\n    if (!this._isHovered) {\n      this._resumeAutoplay();\n    }\n  };\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  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  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  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  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  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  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  // ─── Computed ───\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  private get _canGoPrev(): boolean {\n    return this.loop || this._currentIndex > 0;\n  }\n\n  private get _canGoNext(): boolean {\n    return this.loop || this._currentIndex < this._maxIndex;\n  }\n\n  // ─── Render Helpers ───\n\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=\"Previous slide\"\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 ? 'Pause autoplay' : 'Play autoplay'}\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=\"Next slide\"\n            ?disabled=${!this._canGoNext}\n            @click=${() => this.next()}\n          >\n            ${this._renderNextIcon()}\n          </button>\n        </slot>\n      </div>\n    `;\n  }\n\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=\"Slide ${i + 1} of ${count}\"\n                aria-current=${i === this._currentIndex ? 'true' : 'false'}\n                @click=${() => this.goTo(i)}\n              >\n                <span class=\"pagination-dot\"></span>\n              </button>\n            `,\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderPrevIcon() {\n    return this.orientation === 'horizontal' ? _svgChevronLeft : _svgChevronUp;\n  }\n\n  private _renderNextIcon() {\n    return this.orientation === 'horizontal' ? _svgChevronRight : _svgChevronDown;\n  }\n\n  private _renderPlayIcon() {\n    return _svgPlay;\n  }\n\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        tabindex=\"0\"\n      >\n        <div class=\"live-region\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\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 { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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@customElement('hx-carousel-item')\nexport class HelixCarouselItem extends LitElement {\n  static override styles = [\n    tokenStyles,\n    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, 2px) solid var(--hx-focus-ring-color, #2563eb);\n        outline-offset: var(--hx-focus-ring-offset, 2px);\n      }\n    `,\n  ];\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\" 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","e","_a","slot","items","el","item","i","slideWidth","index","next","nextIndex","prevIndex","diff","threshold","touch","slideSize","offset","nothing","count","dots","_","classMap","tokenStyles","__decorateClass","property","state","customElement","HelixCarouselItem","label"],"mappings":"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"}

package/dist/shared/hx-checkbox-CV5c6AE8.js

@@ -0,0 +1,423 @@
+import { css as p, LitElement as k, nothing as x, html as d } from "lit";
+import { property as c, query as v, state as _, customElement as u } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import { live as b } from "lit/directives/live.js";
+import { t as f } from "./lit-Dpo7RLp4.js";
+const g = p`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Control (checkbox + label row) ─── */
+
+  .checkbox__control {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--hx-space-2, 0.5rem);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .checkbox__control {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hidden Native Input ─── */
+
+  .checkbox__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Visual Checkbox ─── */
+
+  .checkbox__box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+    border: var(--hx-border-width-medium, 2px) solid
+      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    margin-top: var(--hx-space-px, 1px);
+  }
+
+  /* ─── Focus Ring ─── */
+
+  .checkbox__input:focus-visible ~ .checkbox__box {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Checked State ─── */
+
+  .checkbox--checked .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* ─── Indeterminate State ─── */
+
+  .checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));
+  }
+
+  /* ─── Error State ─── */
+
+  .checkbox--error .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  .checkbox--error.checkbox--checked .checkbox__box,
+  .checkbox--error.checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  /* ─── Hover ─── */
+
+  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */
+  .checkbox__control:hover .checkbox__box {
+    border-color: var(
+      --hx-checkbox-hover-border-color,
+      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))
+    );
+  }
+
+  .checkbox--checked .checkbox__control:hover .checkbox__box {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .checkbox--error .checkbox__control:hover .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  /* ─── Checkmark Icon ─── */
+
+  .checkbox__icon {
+    display: none;
+    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    fill: none;
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .checkbox--checked .checkbox__icon--check {
+    display: block;
+  }
+
+  .checkbox--indeterminate .checkbox__icon--indeterminate {
+    display: block;
+  }
+
+  /* ─── Label ─── */
+
+  .checkbox__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .checkbox__required-marker {
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .checkbox__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding-left: calc(
+      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
+    );
+  }
+
+  .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding-left: calc(
+      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
+    );
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) {
+    --hx-checkbox-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__help-text,
+  :host([hx-size='sm']) .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    padding-left: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  :host([hx-size='lg']) {
+    --hx-checkbox-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__label {
+    font-size: var(--hx-font-size-base, 1rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__help-text,
+  :host([hx-size='lg']) .checkbox__error {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    padding-left: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));
+  }
+`;
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, t = (e, o, h, a) => {
+  for (var i = a > 1 ? void 0 : a ? z(o, h) : o, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (i = (a ? n(o, h, i) : n(i)) || i);
+  return a && i && y(o, h, i), i;
+};
+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();
+  }
+  // P0-02: observe aria-label on host to forward to inner input
+  static get observedAttributes() {
+    return [...super.observedAttributes ?? [], "aria-label"];
+  }
+  attributeChangedCallback(e, o, h) {
+    super.attributeChangedCallback(e, o, h), e === "aria-label" && this.requestUpdate();
+  }
+  // ─── Slot Handlers ───
+  _handleErrorSlotChange(e) {
+    const o = e.target;
+    this._hasErrorSlot = o.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Lifecycle ───
+  updated(e) {
+    super.updated(e), (e.has("checked") || e.has("value")) && (this._internals.setFormValue(this.checked ? this.value : null), this._updateValidity()), e.has("required") && this._updateValidity();
+  }
+  // ─── Form Integration ───
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  /** Returns the validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Checks whether the checkbox satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  _updateValidity() {
+    this.required && !this.checked ? this._internals.setValidity(
+      { valueMissing: !0 },
+      this.error || "This field is required.",
+      this._inputEl ?? void 0
+    ) : this._internals.setValidity({});
+  }
+  /** Called by the form when it resets. */
+  formResetCallback() {
+    this.checked = !1, this.indeterminate = !1, this._internals.setFormValue(null);
+  }
+  /** Called when the form restores state (e.g., back/forward navigation). */
+  formStateRestoreCallback(e, o) {
+    this.checked = typeof e == "string" && e === this.value;
+  }
+  // ─── Event Handling ───
+  _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", {
+        bubbles: !0,
+        composed: !0,
+        detail: { checked: this.checked, value: this.value }
+      })
+    ));
+  }
+  _handleKeyDown(e) {
+    e.key === " " && (e.preventDefault(), e.stopPropagation(), this._handleChange());
+  }
+  // ─── Public Methods ───
+  /** Moves focus to the checkbox input element. */
+  focus(e) {
+    var o;
+    (o = this._inputEl) == null || o.focus(e);
+  }
+  render() {
+    const e = !!this.error || this._hasErrorSlot, o = {
+      checkbox: !0,
+      "checkbox--checked": this.checked,
+      "checkbox--indeterminate": this.indeterminate,
+      "checkbox--error": e,
+      "checkbox--disabled": this.disabled,
+      "checkbox--required": this.required,
+      "checkbox--sm": this.size === "sm",
+      "checkbox--md": this.size === "md",
+      "checkbox--lg": this.size === "lg"
+    }, h = [e ? this._errorId : null, this.helpText && !e ? this._helpTextId : null].filter(Boolean).join(" ") || void 0, a = this.getAttribute("aria-label") ?? void 0;
+    return d`
+      <div class=${m(o)}>
+        <label part="control" class="checkbox__control" @click=${this._handleChange}>
+          <input
+            class="checkbox__input"
+            type="checkbox"
+            id=${this._id}
+            .checked=${b(this.checked)}
+            .indeterminate=${b(this.indeterminate)}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${s(this.name || void 0)}
+            .value=${this.value}
+            aria-invalid=${e ? "true" : x}
+            aria-describedby=${s(h)}
+            aria-label=${s(a)}
+            aria-labelledby=${s(a ? void 0 : this._labelId)}
+            @keydown=${this._handleKeyDown}
+            @click=${(i) => {
+      i.preventDefault(), i.stopPropagation();
+    }}
+            @change=${(i) => i.stopPropagation()}
+          />
+
+          <span part="checkbox" class="checkbox__box">
+            <svg
+              part="checkmark"
+              class="checkbox__icon checkbox__icon--check"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+            >
+              <polyline points="3.5 8 6.5 11 12.5 5"></polyline>
+            </svg>
+            <svg
+              class="checkbox__icon checkbox__icon--indeterminate"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+            >
+              <line x1="4" y1="8" x2="12" y2="8"></line>
+            </svg>
+          </span>
+
+          <span part="label" class="checkbox__label" id=${this._labelId}>
+            <slot>${this.label}</slot>
+            ${this.required ? d`<span class="checkbox__required-marker" aria-hidden="true">*</span>` : x}
+          </span>
+        </label>
+
+        <!--
+          P0-01: wrapper div always owns _errorId so aria-describedby works regardless
+          of whether error content comes from the .error property or the named slot.
+          P1-02: role="status" (implicit aria-live="polite") replaces role="alert" +
+          aria-live="polite" which was semantically contradictory.
+        -->
+        <div
+          part="error"
+          class="checkbox__error"
+          id=${this._errorId}
+          role="status"
+          ?hidden=${!e}
+        >
+          <slot name="error" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>
+        </div>
+
+        ${this.helpText && !e ? d`
+              <div part="help-text" class="checkbox__help-text" id=${this._helpTextId}>
+                <slot name="help-text">${this.helpText}</slot>
+              </div>
+            ` : x}
+      </div>
+    `;
+  }
+};
+r.styles = [f, g];
+r.formAssociated = !0;
+t([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "checked", 2);
+t([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "indeterminate", 2);
+t([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+t([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+t([
+  c({ type: String })
+], r.prototype, "name", 2);
+t([
+  c({ type: String })
+], r.prototype, "value", 2);
+t([
+  c({ type: String })
+], r.prototype, "label", 2);
+t([
+  c({ type: String })
+], r.prototype, "error", 2);
+t([
+  c({ type: String, attribute: "help-text" })
+], r.prototype, "helpText", 2);
+t([
+  c({ type: String, attribute: "hx-size", reflect: !0 })
+], r.prototype, "size", 2);
+t([
+  v(".checkbox__input")
+], r.prototype, "_inputEl", 2);
+t([
+  _()
+], r.prototype, "_hasErrorSlot", 2);
+r = t([
+  u("hx-checkbox")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-checkbox-CV5c6AE8.js.map

package/dist/shared/hx-checkbox-CV5c6AE8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-checkbox-CV5c6AE8.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .checkbox {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Control (checkbox + label row) ─── */\n\n  .checkbox__control {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--hx-space-2, 0.5rem);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .checkbox__control {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hidden Native Input ─── */\n\n  .checkbox__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Visual Checkbox ─── */\n\n  .checkbox__box {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    border: var(--hx-border-width-medium, 2px) solid\n      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    margin-top: var(--hx-space-px, 1px);\n  }\n\n  /* ─── Focus Ring ─── */\n\n  .checkbox__input:focus-visible ~ .checkbox__box {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Checked State ─── */\n\n  .checkbox--checked .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Indeterminate State ─── */\n\n  .checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* ─── Error State ─── */\n\n  .checkbox--error .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__box,\n  .checkbox--error.checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Hover ─── */\n\n  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n  .checkbox__control:hover .checkbox__box {\n    border-color: var(\n      --hx-checkbox-hover-border-color,\n      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #2563eb))\n    );\n  }\n\n  .checkbox--checked .checkbox__control:hover .checkbox__box {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .checkbox--error .checkbox__control:hover .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  /* ─── Checkmark Icon ─── */\n\n  .checkbox__icon {\n    display: none;\n    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    fill: none;\n    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .checkbox--checked .checkbox__icon--check {\n    display: block;\n  }\n\n  .checkbox--indeterminate .checkbox__icon--indeterminate {\n    display: block;\n  }\n\n  /* ─── Label ─── */\n\n  .checkbox__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .checkbox__required-marker {\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .checkbox__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #6c757d));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-left: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-left: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --hx-checkbox-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__help-text,\n  :host([hx-size='sm']) .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    padding-left: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  :host([hx-size='lg']) {\n    --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__label {\n    font-size: var(--hx-font-size-base, 1rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__help-text,\n  :host([hx-size='lg']) .checkbox__error {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding-left: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n  }\n`;\n","import { LitElement, html, nothing } 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 { helixCheckboxStyles } from './hx-checkbox.styles.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nlet _checkboxCounter = 0;\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #ced4da)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #dc3545)] - Error state color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends LitElement {\n  static override styles = [tokenStyles, helixCheckboxStyles];\n\n  // P0-02: observe aria-label on host to forward to inner input\n  static override get observedAttributes(): string[] {\n    return [...(super.observedAttributes ?? []), 'aria-label'];\n  }\n\n  override attributeChangedCallback(name: string, old: string | null, next: string | null): void {\n    super.attributeChangedCallback(name, old, next);\n    if (name === 'aria-label') this.requestUpdate();\n  }\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * Whether the checkbox is checked.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Whether the checkbox is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the checkbox is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the checkbox, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The value submitted when the checkbox is checked.\n   * @attr value\n   */\n  @property({ type: String })\n  value = 'on';\n\n  /**\n   * The visible label text for the checkbox.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the checkbox enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the checkbox for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * The size of the checkbox.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @query('.checkbox__input')\n  private _inputEl!: HTMLInputElement;\n\n  @state() private _hasErrorSlot = false;\n\n  // ─── Slot Handlers ───\n\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n      this._updateValidity();\n    }\n    if (changedProperties.has('required')) {\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 checkbox 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  private _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._inputEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    this.checked = false;\n    this.indeterminate = false;\n    this._internals.setFormValue(null);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\n  formStateRestoreCallback(state: string | File | FormData | null, _reason: string): void {\n    this.checked = typeof state === 'string' && state === this.value;\n  }\n\n  // ─── Event Handling ───\n\n  private _handleChange(): void {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n    this._updateValidity();\n\n    /**\n     * Dispatched when the checkbox is toggled.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      this._handleChange();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the checkbox input element. */\n  override focus(options?: FocusOptions): void {\n    this._inputEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  // P2-05: monotonic counter — collision-free and deterministic\n  private _id = `hx-checkbox-${++_checkboxCounter}`;\n  private _helpTextId = `${this._id}-help`;\n  private _errorId = `${this._id}-error`;\n  private _labelId = `${this._id}-label`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const containerClasses = {\n      checkbox: true,\n      'checkbox--checked': this.checked,\n      'checkbox--indeterminate': this.indeterminate,\n      'checkbox--error': hasError,\n      'checkbox--disabled': this.disabled,\n      'checkbox--required': this.required,\n      'checkbox--sm': this.size === 'sm',\n      'checkbox--md': this.size === 'md',\n      'checkbox--lg': this.size === 'lg',\n    };\n\n    // P2-06: simplified — hasError already includes _hasErrorSlot\n    const describedBy =\n      [hasError ? this._errorId : null, this.helpText && !hasError ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    // P0-02: forward aria-label from host to inner input\n    const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <label part=\"control\" class=\"checkbox__control\" @click=${this._handleChange}>\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            id=${this._id}\n            .checked=${live(this.checked)}\n            .indeterminate=${live(this.indeterminate)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${ifDefined(this.name || undefined)}\n            .value=${this.value}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-label=${ifDefined(hostAriaLabel)}\n            aria-labelledby=${ifDefined(!hostAriaLabel ? this._labelId : undefined)}\n            @keydown=${this._handleKeyDown}\n            @click=${(e: Event) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            @change=${(e: Event) => e.stopPropagation()}\n          />\n\n          <span part=\"checkbox\" class=\"checkbox__box\">\n            <svg\n              part=\"checkmark\"\n              class=\"checkbox__icon checkbox__icon--check\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n            </svg>\n            <svg\n              class=\"checkbox__icon checkbox__icon--indeterminate\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n            </svg>\n          </span>\n\n          <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n            <slot>${this.label}</slot>\n            ${this.required\n              ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </span>\n        </label>\n\n        <!--\n          P0-01: wrapper div always owns _errorId so aria-describedby works regardless\n          of whether error content comes from the .error property or the named slot.\n          P1-02: role=\"status\" (implicit aria-live=\"polite\") replaces role=\"alert\" +\n          aria-live=\"polite\" which was semantically contradictory.\n        -->\n        <div\n          part=\"error\"\n          class=\"checkbox__error\"\n          id=${this._errorId}\n          role=\"status\"\n          ?hidden=${!hasError}\n        >\n          <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n        </div>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"checkbox__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/** @deprecated Use HelixCheckbox instead. */\nexport type WcCheckbox = HelixCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox': HelixCheckbox;\n  }\n}\n"],"names":["helixCheckboxStyles","css","_checkboxCounter","HelixCheckbox","LitElement","name","old","next","slot","changedProperties","state","_reason","options","_a","hasError","containerClasses","describedBy","hostAriaLabel","html","classMap","live","ifDefined","nothing","e","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}