@vielzeug/refine 1.1.1

package/dist/carousel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport { warn } from '../../_dev';\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../headless';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /**\n   * Whether the carousel loops from the last slide back to the first. Defaults to `true`.\n   *\n   * > **Note for `marquee` variant:** `loop=\"false\"` runs the scroll animation once then stops,\n   * > rather than controlling navigation wrap-around (marquee navigation always loops).\n   * > If you intend to stop wrapping navigation in another variant, use `loop` there as expected.\n   */\n  loop?: boolean;\n  /**\n   * Duration in seconds for one full marquee loop cycle. Defaults to `10`.\n   * Shorter values = faster scroll; longer values = slower scroll.\n   */\n  'marquee-duration'?: number;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   * - `'marquee'`   — continuous auto-scroll ticker; `loop` controls whether it repeats\n   */\n  variant?: CarouselVariant;\n};\n\n// ── Internal marquee instance type ────────────────────────────────────────────\n\ntype MarqueeInstance = {\n  cleanup: () => void;\n  seekTo: (index: number, slideSnapshot: HTMLElement[]) => void;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true); in marquee mode: repeat vs run-once\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n * @attr {number}  marquee-duration  - Loop cycle duration in seconds for marquee variant (default 10)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion). Also controls marquee seek animation duration.\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n * @cssprop --carousel-marquee-gap         - Gap between slides in marquee mode (default var(--size-4))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\nconst syncMarqueeSlides = (slides: HTMLElement[], current: number): void => {\n  slides.forEach((slide, i) => {\n    slide.toggleAttribute('data-active', i === current);\n    slide.setAttribute('aria-hidden', 'false');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.removeAttribute('data-gallery-visible');\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps, OreCarouselEvents>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    'marquee-duration': prop.number(10),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props, { bind, el, emit, onMounted }) {\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    const isMarquee = computed(() => props.variant.value === 'marquee');\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    // marqueeInstance is set in onMounted; accessed here via module-level ref\n    // stored on the setup closure. No separate side-channel variable needed.\n    let marqueeInstance: MarqueeInstance | null = null;\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n      // Pass current slides snapshot so seekTo never reads a stale closure.\n      marqueeInstance?.seekTo(next, slides);\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n      marquee: syncMarqueeSlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Marquee ───────────────────────────────────────────────────────────────\n    // Clones slides for a seamless loop. Seek uses WAAPI when available\n    // (all modern browsers) so it can be cancelled cleanly. Falls back to\n    // instant negative-delay repositioning in environments without WAAPI\n    // (e.g. jsdom in tests).\n\n    const setupMarquee = (track: HTMLElement): MarqueeInstance => {\n      const orientation = props.orientation.value ?? 'horizontal';\n      const horizontal = orientation !== 'vertical';\n\n      if (isMarquee.value && props.loop.value === false) {\n        warn(\n          'ore-carousel: loop=\"false\" on the marquee variant stops the scroll animation rather than ' +\n            'disabling navigation wrap-around. Navigation in marquee always loops. ' +\n            'This is different from loop=\"false\" on other variants.',\n        );\n      }\n\n      const clones = slides.map((s) => {\n        const clone = s.cloneNode(true) as HTMLElement;\n\n        clone.setAttribute('aria-hidden', 'true');\n        clone.setAttribute('data-variant', 'marquee');\n        clone.setAttribute('data-orientation', orientation);\n        clone.setAttribute('data-marquee-clone', '');\n        track.appendChild(clone);\n\n        return clone;\n      });\n\n      track.style.setProperty('--_marquee-duration', `${props['marquee-duration'].value ?? 10}s`);\n\n      if (!looping.value) {\n        track.style.setProperty('animation-iteration-count', '1');\n      }\n\n      let isHovered = false;\n\n      const pause = (): void => {\n        isHovered = true;\n        track.style.setProperty('animation-play-state', 'paused');\n      };\n\n      const resume = (): void => {\n        isHovered = false;\n        track.style.removeProperty('animation-play-state');\n      };\n\n      // mouseenter/mouseleave fire only when the pointer crosses the host\n      // boundary — never when moving between children (e.g. onto controls).\n      // This means clicking buttons never accidentally resumes the animation.\n      el.addEventListener('mouseenter', pause);\n      el.addEventListener('mouseleave', resume);\n\n      // ── Seek ──────────────────────────────────────────────────────────────\n      // Smoothly slides to the target position using a CSS transition on the\n      // inline transform (the CSS keyframe animation is paused throughout so\n      // there is no compositing conflict). On transitionend, switches back to\n      // the keyframe animation via a negative animation-delay.\n\n      let seekTimer: ReturnType<typeof setTimeout> | null = null;\n\n      const seekTo = (index: number, slideSnapshot: HTMLElement[]): void => {\n        const slide = slideSnapshot[index];\n\n        if (!slide) return;\n\n        const targetOffset = horizontal ? slide.offsetLeft : slide.offsetTop;\n        const halfSize = horizontal ? track.scrollWidth / 2 : track.scrollHeight / 2;\n        const cycleDuration = props['marquee-duration'].value ?? 10;\n        const delay = halfSize > 0 ? -((targetOffset / halfSize) * cycleDuration) : 0;\n\n        // Cancel any in-flight seek timer.\n        if (seekTimer !== null) {\n          clearTimeout(seekTimer);\n          seekTimer = null;\n          // Snap the previous transition to its end state immediately.\n          track.style.removeProperty('transition');\n        }\n\n        // No layout (jsdom): instant seek with no visual transition.\n        if (halfSize === 0) {\n          track.style.setProperty('animation-delay', `${delay}s`);\n\n          if (!isHovered) {\n            track.style.removeProperty('animation-play-state');\n          }\n\n          return;\n        }\n\n        const seekMs =\n          parseFloat(getComputedStyle(el).getPropertyValue('--carousel-transition-duration') || '0.35') * 1000 || 350;\n\n        const targetTransform = horizontal ? `translateX(-${targetOffset}px)` : `translateY(-${targetOffset}px)`;\n\n        // 1. Read the current visual position from the live animation, then\n        //    kill the animation entirely so nothing else drives transform.\n        //    getBoundingClientRect() flushes layout so the matrix is current.\n        void track.getBoundingClientRect();\n\n        const computedTransform = getComputedStyle(track).transform;\n        const matrixValues = computedTransform\n          .match(/matrix\\(([^)]+)\\)/)?.[1]\n          .split(',')\n          .map(Number);\n        const frozenOffset = horizontal ? (matrixValues?.[4] ?? 0) : (matrixValues?.[5] ?? 0);\n        const frozenTransform = horizontal ? `translateX(${frozenOffset}px)` : `translateY(${frozenOffset}px)`;\n\n        // Stop the CSS animation — inline transform is now the sole driver.\n        track.style.setProperty('animation', 'none');\n        track.style.setProperty('transform', frozenTransform);\n\n        // 2. Next frame: apply transition and slide to target.\n        requestAnimationFrame(() => {\n          track.style.setProperty('transition', `transform ${seekMs}ms ease-in-out`);\n          track.style.setProperty('transform', targetTransform);\n\n          // 3. After the transition completes, restore the keyframe animation\n          //    at the correct position via negative animation-delay.\n          seekTimer = setTimeout(() => {\n            seekTimer = null;\n            track.style.removeProperty('transition');\n            track.style.removeProperty('transform');\n            track.style.removeProperty('animation');\n            track.style.setProperty('animation-delay', `${delay}s`);\n\n            if (isHovered) {\n              track.style.setProperty('animation-play-state', 'paused');\n            }\n          }, seekMs);\n        });\n      };\n\n      return {\n        cleanup: () => {\n          if (seekTimer !== null) clearTimeout(seekTimer);\n\n          seekTimer = null;\n          clones.forEach((c) => c.remove());\n          track.style.removeProperty('transition');\n          track.style.removeProperty('transform');\n          track.style.removeProperty('animation');\n          track.style.removeProperty('--_marquee-duration');\n          track.style.removeProperty('animation-iteration-count');\n          track.style.removeProperty('animation-delay');\n          track.style.removeProperty('animation-play-state');\n          el.removeEventListener('mouseenter', pause);\n          el.removeEventListener('mouseleave', resume);\n        },\n        seekTo,\n      };\n    };\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const track = shadowRoot.querySelector<HTMLElement>('.track')!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n\n        if (isMarquee.value) {\n          marqueeInstance?.cleanup();\n          marqueeInstance = setupMarquee(track);\n        }\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      watch(\n        computed(() => ({\n          duration: props['marquee-duration'].value,\n          isMarquee: isMarquee.value,\n          loop: props.loop.value,\n          orientation: props.orientation.value,\n        })),\n        ({ isMarquee: active }) => {\n          marqueeInstance?.cleanup();\n          marqueeInstance = active ? setupMarquee(track) : null;\n        },\n        { immediate: true },\n      );\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n        marqueeInstance?.cleanup();\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\n        ? html`<div class=\"controls\" part=\"controls\">\n            <ore-button\n              class=\"nav-btn prev-btn\"\n              part=\"prev-btn\"\n              variant=\"ghost\"\n              :color=${() => props.color.value}\n              rounded\n              icon-only\n              aria-label=\"Previous slide\"\n              :disabled=${() => (!canGoPrev.value ? true : undefined)}\n              @click=${(e: Event) => {\n                e.stopPropagation();\n                prev();\n              }}>\n              <ore-icon\n                :name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                size=\"16\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"></ore-icon>\n            </ore-button>\n            <ore-button\n              class=\"nav-btn next-btn\"\n              part=\"next-btn\"\n              variant=\"ghost\"\n              :color=${() => props.color.value}\n              rounded\n              icon-only\n              aria-label=\"Next slide\"\n              :disabled=${() => (!canGoNext.value ? true : undefined)}\n              @click=${(e: Event) => {\n                e.stopPropagation();\n                next();\n              }}>\n              <ore-icon\n                :name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                size=\"16\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"></ore-icon>\n            </ore-button>\n          </div>`\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" :aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1 && !isMarquee.value\n          ? html`<div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n              ${() =>\n                Array.from(\n                  { length: slideCount.value },\n                  (_, i) =>\n                    html`<button\n                      type=\"button\"\n                      role=\"tab\"\n                      data-index=\"${i}\"\n                      :class=${() =>\n                        `indicator${!isMarquee.value && i === activeIndex.value ? ' indicator-active' : ''}`}\n                      :aria-selected=${() => String(!isMarquee.value && i === activeIndex.value)}\n                      :tabindex=${() => (!isMarquee.value && i === activeIndex.value ? '0' : '-1')}\n                      aria-label=\"${`Go to slide ${i + 1}`}\"\n                      @click=${() => goTo(i)}\n                      @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                      <ore-progress\n                        aria-hidden=\"true\"\n                        tabindex=\"-1\"\n                        :color=${() => props.color.value}\n                        :type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                        :value=${() => (!isMarquee.value && i === activeIndex.value ? 100 : 0)}\n                        :style=${() => {\n                          const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                          return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${!isMarquee.value && i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                        }}></ore-progress>\n                    </button>`,\n                )}\n              ${renderControls}\n            </div>`\n          : html`${renderControls}`}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/carousel.js

@@ -0,0 +1,280 @@
+import { warn as e } from "./_dev.js";
+import { createSwipeControl as t } from "./headless/swipe.js";
+import { announce as n } from "./headless/announcer.js";
+import r from "./content/carousel/carousel.css?inline.js";
+import { CAROUSEL_SLIDE_TAG as i } from "./content/carousel/carousel-slide.js";
+import { define as a, html as o, prop as s } from "@vielzeug/ore";
+import { computed as c, signal as l, watch as u } from "@vielzeug/ripple";
+//#region src/content/carousel/carousel.ts
+var d = "ore-carousel", f = (e, t) => {
+	let n = e.length;
+	e.forEach((e, r) => {
+		let i = r === t;
+		e.toggleAttribute("data-active", i), e.setAttribute("aria-hidden", String(!i)), e.setAttribute("aria-label", e.getAttribute("aria-label") ?? `Slide ${r + 1} of ${n}`), e.removeAttribute("data-gallery-visible"), e.toggleAttribute("data-before", r < t), e.toggleAttribute("data-after", r > t);
+	});
+}, p = (e, t) => {
+	let n = e.length;
+	e.forEach((e, r) => {
+		let i = r === t;
+		e.toggleAttribute("data-active", i), e.setAttribute("aria-hidden", String(!i)), e.setAttribute("aria-label", e.getAttribute("aria-label") ?? `Slide ${r + 1} of ${n}`), e.removeAttribute("data-gallery-visible"), e.removeAttribute("data-before"), e.removeAttribute("data-after");
+	});
+}, m = (e, t) => {
+	let n = e.length;
+	e.forEach((e, r) => {
+		let i = r === t, a = t > 0 && r === t - 1, o = t < n - 1 && r === t + 1;
+		e.toggleAttribute("data-active", i), e.setAttribute("aria-hidden", String(!i)), e.setAttribute("aria-label", e.getAttribute("aria-label") ?? `Slide ${r + 1} of ${n}`), e.removeAttribute("data-before"), e.removeAttribute("data-after"), e.toggleAttribute("data-gallery-visible", i || a || o);
+	});
+}, h = (e, t) => {
+	e.forEach((e, n) => {
+		e.toggleAttribute("data-active", n === t), e.setAttribute("aria-hidden", "false"), e.removeAttribute("data-before"), e.removeAttribute("data-after"), e.removeAttribute("data-gallery-visible");
+	});
+};
+a(d, {
+	props: {
+		autoplay: s.bool(!1),
+		"autoplay-interval": s.number(5e3),
+		color: s.string(),
+		label: s.string("Carousel"),
+		loop: s.bool(!0),
+		"marquee-duration": s.number(10),
+		orientation: s.string("horizontal"),
+		"show-controls": s.bool(!0),
+		"show-indicators": s.bool(!0),
+		"slide-index": s.number(0),
+		variant: s.string("default")
+	},
+	setup(r, { bind: i, el: a, emit: s, onMounted: d }) {
+		let g = l(r["slide-index"].value ?? 0), _ = c(() => r.variant.value === "marquee"), v = null, y = Array.from(a.querySelectorAll(":scope > ore-carousel-slide")), b = l(y.length), x = () => {
+			y = Array.from(a.querySelectorAll(":scope > ore-carousel-slide")), b.value = y.length;
+		}, S = c(() => r.orientation.value !== "vertical"), C = c(() => r.loop.value !== !1), w = c(() => r["show-controls"].value !== !1), T = c(() => r["show-indicators"].value !== !1), E = c(() => C.value || g.value > 0), D = c(() => C.value || g.value < b.value - 1), O = null, k = (e, t = !0) => {
+			let r = b.value;
+			if (r === 0) return;
+			let i = C.value ? (e % r + r) % r : Math.max(0, Math.min(e, r - 1));
+			i !== g.value && (g.value = i, a.setAttribute("slide-index", String(i)), s("change", { index: i }), O?.seekTo(i, y), t && n(y[i]?.getAttribute("aria-label") ?? `Slide ${i + 1} of ${r}`));
+		}, A = () => k(g.value - 1), j = () => k(g.value + 1);
+		u(r["slide-index"], (e) => {
+			typeof e == "number" && e !== g.value && k(e, !1);
+		});
+		let M = () => {
+			let e = r.variant.value ?? "default", t = r.orientation.value ?? "horizontal";
+			y.forEach((n) => {
+				n.setAttribute("data-variant", e), n.setAttribute("data-orientation", t);
+			});
+		};
+		u(c(() => ({
+			orientation: r.orientation.value,
+			variant: r.variant.value
+		})), M, { immediate: !0 });
+		let N = {
+			default: f,
+			fade: f,
+			filmstrip: p,
+			gallery: m,
+			marquee: h
+		}, P = () => {
+			let e = r.variant.value ?? "default";
+			N[e](y, g.value);
+		};
+		u(g, P, { immediate: !0 });
+		let F = () => {
+			v === null && (v = setInterval(j, r["autoplay-interval"].value ?? 5e3));
+		}, I = () => {
+			v !== null && (clearInterval(v), v = null);
+		};
+		u(c(() => ({
+			enabled: r.autoplay.value,
+			interval: r["autoplay-interval"].value
+		})), ({ enabled: e }) => {
+			I(), e && F();
+		});
+		let L = (e) => {
+			let t = S.value, n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
+			e.key === n ? (e.preventDefault(), A()) : e.key === r ? (e.preventDefault(), j()) : e.key === "Home" ? (e.preventDefault(), k(0)) : e.key === "End" && (e.preventDefault(), k(b.value - 1));
+		}, R = t({
+			axis: () => S.value ? "x" : "y",
+			onCommit: (e) => {
+				e.distance < 0 ? j() : A();
+			},
+			threshold: () => 48
+		});
+		i({
+			attr: {
+				"aria-label": () => r.label.value ?? "Carousel",
+				"aria-roledescription": () => "carousel",
+				orientation: () => r.orientation.value ?? "horizontal",
+				role: () => "region",
+				style: () => `touch-action:${S.value ? "pan-y" : "pan-x"}`,
+				variant: () => r.variant.value ?? "default"
+			},
+			on: {
+				focusin: () => {
+					I();
+				},
+				focusout: () => {
+					r.autoplay.value && F();
+				},
+				keydown: L,
+				pointercancel: (e) => R.handlePointerCancel(e),
+				pointerdown: (e) => {
+					e.composedPath().some((e) => e instanceof HTMLElement && (e.tagName === "BUTTON" || e.tagName === "ORE-BUTTON" || e.tagName === "ORE-PROGRESS")) || R.handlePointerDown(e);
+				},
+				pointerenter: () => {
+					I();
+				},
+				pointerleave: () => {
+					r.autoplay.value && F();
+				},
+				pointermove: (e) => R.handlePointerMove(e),
+				pointerup: (e) => R.handlePointerUp(e)
+			}
+		});
+		let z = (t) => {
+			let n = r.orientation.value ?? "horizontal", i = n !== "vertical";
+			_.value && r.loop.value === !1 && e("ore-carousel: loop=\"false\" on the marquee variant stops the scroll animation rather than disabling navigation wrap-around. Navigation in marquee always loops. This is different from loop=\"false\" on other variants.");
+			let o = y.map((e) => {
+				let r = e.cloneNode(!0);
+				return r.setAttribute("aria-hidden", "true"), r.setAttribute("data-variant", "marquee"), r.setAttribute("data-orientation", n), r.setAttribute("data-marquee-clone", ""), t.appendChild(r), r;
+			});
+			t.style.setProperty("--_marquee-duration", `${r["marquee-duration"].value ?? 10}s`), C.value || t.style.setProperty("animation-iteration-count", "1");
+			let s = !1, c = () => {
+				s = !0, t.style.setProperty("animation-play-state", "paused");
+			}, l = () => {
+				s = !1, t.style.removeProperty("animation-play-state");
+			};
+			a.addEventListener("mouseenter", c), a.addEventListener("mouseleave", l);
+			let u = null;
+			return {
+				cleanup: () => {
+					u !== null && clearTimeout(u), u = null, o.forEach((e) => e.remove()), t.style.removeProperty("transition"), t.style.removeProperty("transform"), t.style.removeProperty("animation"), t.style.removeProperty("--_marquee-duration"), t.style.removeProperty("animation-iteration-count"), t.style.removeProperty("animation-delay"), t.style.removeProperty("animation-play-state"), a.removeEventListener("mouseenter", c), a.removeEventListener("mouseleave", l);
+				},
+				seekTo: (e, n) => {
+					let o = n[e];
+					if (!o) return;
+					let c = i ? o.offsetLeft : o.offsetTop, l = i ? t.scrollWidth / 2 : t.scrollHeight / 2, d = r["marquee-duration"].value ?? 10, f = l > 0 ? -(c / l * d) : 0;
+					if (u !== null && (clearTimeout(u), u = null, t.style.removeProperty("transition")), l === 0) {
+						t.style.setProperty("animation-delay", `${f}s`), s || t.style.removeProperty("animation-play-state");
+						return;
+					}
+					let p = parseFloat(getComputedStyle(a).getPropertyValue("--carousel-transition-duration") || "0.35") * 1e3 || 350, m = i ? `translateX(-${c}px)` : `translateY(-${c}px)`;
+					t.getBoundingClientRect();
+					let h = getComputedStyle(t).transform.match(/matrix\(([^)]+)\)/)?.[1].split(",").map(Number), g = i ? h?.[4] ?? 0 : h?.[5] ?? 0, _ = i ? `translateX(${g}px)` : `translateY(${g}px)`;
+					t.style.setProperty("animation", "none"), t.style.setProperty("transform", _), requestAnimationFrame(() => {
+						t.style.setProperty("transition", `transform ${p}ms ease-in-out`), t.style.setProperty("transform", m), u = setTimeout(() => {
+							u = null, t.style.removeProperty("transition"), t.style.removeProperty("transform"), t.style.removeProperty("animation"), t.style.setProperty("animation-delay", `${f}s`), s && t.style.setProperty("animation-play-state", "paused");
+						}, p);
+					});
+				}
+			};
+		};
+		d(() => {
+			let e = a.shadowRoot, t = e.querySelector(".track"), n = e.querySelector("slot"), i = () => {
+				x(), M(), P(), _.value && (O?.cleanup(), O = z(t));
+			};
+			return n.addEventListener("slotchange", i), u(c(() => ({
+				duration: r["marquee-duration"].value,
+				isMarquee: _.value,
+				loop: r.loop.value,
+				orientation: r.orientation.value
+			})), ({ isMarquee: e }) => {
+				O?.cleanup(), O = e ? z(t) : null;
+			}, { immediate: !0 }), r.autoplay.value && F(), () => {
+				I(), R.dispose(), n.removeEventListener("slotchange", i), O?.cleanup();
+			};
+		});
+		let B = (e) => {
+			(a.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus();
+		}, V = (e, t) => {
+			let n = b.value, r;
+			switch (e.key) {
+				case "ArrowDown":
+				case "ArrowRight":
+					r = (t + 1) % n;
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					r = (t - 1 + n) % n;
+					break;
+				case "End":
+					r = n - 1;
+					break;
+				case "Home":
+					r = 0;
+					break;
+				default: return;
+			}
+			e.preventDefault(), k(r), B(r);
+		}, H = () => w.value ? o`<div class="controls" part="controls">
+            <ore-button
+              class="nav-btn prev-btn"
+              part="prev-btn"
+              variant="ghost"
+              :color=${() => r.color.value}
+              rounded
+              icon-only
+              aria-label="Previous slide"
+              :disabled=${() => E.value ? void 0 : !0}
+              @click=${(e) => {
+			e.stopPropagation(), A();
+		}}>
+              <ore-icon
+                :name=${() => S.value ? "chevron-left" : "chevron-up"}
+                size="16"
+                stroke-width="2"
+                aria-hidden="true"></ore-icon>
+            </ore-button>
+            <ore-button
+              class="nav-btn next-btn"
+              part="next-btn"
+              variant="ghost"
+              :color=${() => r.color.value}
+              rounded
+              icon-only
+              aria-label="Next slide"
+              :disabled=${() => D.value ? void 0 : !0}
+              @click=${(e) => {
+			e.stopPropagation(), j();
+		}}>
+              <ore-icon
+                :name=${() => S.value ? "chevron-right" : "chevron-down"}
+                size="16"
+                stroke-width="2"
+                aria-hidden="true"></ore-icon>
+            </ore-button>
+          </div>` : o``;
+		return o`
+      <div class="track" part="track" :aria-live=${() => r.autoplay.value ? "off" : "polite"}>
+        <slot></slot>
+      </div>
+
+      ${() => T.value && b.value > 1 && !_.value ? o`<div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
+              ${() => Array.from({ length: b.value }, (e, t) => o`<button
+                      type="button"
+                      role="tab"
+                      data-index="${t}"
+                      :class=${() => `indicator${!_.value && t === g.value ? " indicator-active" : ""}`}
+                      :aria-selected=${() => String(!_.value && t === g.value)}
+                      :tabindex=${() => !_.value && t === g.value ? "0" : "-1"}
+                      aria-label="${`Go to slide ${t + 1}`}"
+                      @click=${() => k(t)}
+                      @keydown=${(e) => V(e, t)}>
+                      <ore-progress
+                        aria-hidden="true"
+                        tabindex="-1"
+                        :color=${() => r.color.value}
+                        :type=${() => S.value ? "linear" : "vertical"}
+                        :value=${() => !_.value && t === g.value ? 100 : 0}
+                        :style=${() => {
+			let e = S.value ? "carousel-fill" : "carousel-fill-v";
+			return `--carousel-timeout:${r["autoplay-interval"].value ?? 5e3};--carousel-animation-name:${!_.value && t === g.value && r.autoplay.value ? e : "none"}`;
+		}}></ore-progress>
+                    </button>`)}
+              ${H}
+            </div>` : o`${H}`}
+    `;
+	},
+	styles: [r]
+});
+//#endregion
+export { i as CAROUSEL_SLIDE_TAG, d as CAROUSEL_TAG };
+
+//# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport { warn } from '../../_dev';\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../headless';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /**\n   * Whether the carousel loops from the last slide back to the first. Defaults to `true`.\n   *\n   * > **Note for `marquee` variant:** `loop=\"false\"` runs the scroll animation once then stops,\n   * > rather than controlling navigation wrap-around (marquee navigation always loops).\n   * > If you intend to stop wrapping navigation in another variant, use `loop` there as expected.\n   */\n  loop?: boolean;\n  /**\n   * Duration in seconds for one full marquee loop cycle. Defaults to `10`.\n   * Shorter values = faster scroll; longer values = slower scroll.\n   */\n  'marquee-duration'?: number;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   * - `'marquee'`   — continuous auto-scroll ticker; `loop` controls whether it repeats\n   */\n  variant?: CarouselVariant;\n};\n\n// ── Internal marquee instance type ────────────────────────────────────────────\n\ntype MarqueeInstance = {\n  cleanup: () => void;\n  seekTo: (index: number, slideSnapshot: HTMLElement[]) => void;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true); in marquee mode: repeat vs run-once\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery' | 'marquee'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n * @attr {number}  marquee-duration  - Loop cycle duration in seconds for marquee variant (default 10)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion). Also controls marquee seek animation duration.\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n * @cssprop --carousel-marquee-gap         - Gap between slides in marquee mode (default var(--size-4))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\nconst syncMarqueeSlides = (slides: HTMLElement[], current: number): void => {\n  slides.forEach((slide, i) => {\n    slide.toggleAttribute('data-active', i === current);\n    slide.setAttribute('aria-hidden', 'false');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.removeAttribute('data-gallery-visible');\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps, OreCarouselEvents>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    'marquee-duration': prop.number(10),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props, { bind, el, emit, onMounted }) {\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    const isMarquee = computed(() => props.variant.value === 'marquee');\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    // marqueeInstance is set in onMounted; accessed here via module-level ref\n    // stored on the setup closure. No separate side-channel variable needed.\n    let marqueeInstance: MarqueeInstance | null = null;\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n      // Pass current slides snapshot so seekTo never reads a stale closure.\n      marqueeInstance?.seekTo(next, slides);\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n      marquee: syncMarqueeSlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    // ── Swipe ────────────────────────────────────────────────────────────────\n\n    const swipe = createSwipeControl({\n      axis: () => (isHorizontal.value ? 'x' : 'y'),\n      onCommit: (detail) => {\n        if (detail.distance < 0) next();\n        else prev();\n      },\n      threshold: () => 48,\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointercancel: (e: PointerEvent) => swipe.handlePointerCancel(e),\n        pointerdown: (e: PointerEvent) => {\n          const path = e.composedPath();\n          const onButton = path.some(\n            (n) =>\n              n instanceof HTMLElement &&\n              (n.tagName === 'BUTTON' || n.tagName === 'ORE-BUTTON' || n.tagName === 'ORE-PROGRESS'),\n          );\n\n          if (!onButton) swipe.handlePointerDown(e);\n        },\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        pointermove: (e: PointerEvent) => swipe.handlePointerMove(e),\n        pointerup: (e: PointerEvent) => swipe.handlePointerUp(e),\n      },\n    });\n\n    // ── Marquee ───────────────────────────────────────────────────────────────\n    // Clones slides for a seamless loop. Seek uses WAAPI when available\n    // (all modern browsers) so it can be cancelled cleanly. Falls back to\n    // instant negative-delay repositioning in environments without WAAPI\n    // (e.g. jsdom in tests).\n\n    const setupMarquee = (track: HTMLElement): MarqueeInstance => {\n      const orientation = props.orientation.value ?? 'horizontal';\n      const horizontal = orientation !== 'vertical';\n\n      if (isMarquee.value && props.loop.value === false) {\n        warn(\n          'ore-carousel: loop=\"false\" on the marquee variant stops the scroll animation rather than ' +\n            'disabling navigation wrap-around. Navigation in marquee always loops. ' +\n            'This is different from loop=\"false\" on other variants.',\n        );\n      }\n\n      const clones = slides.map((s) => {\n        const clone = s.cloneNode(true) as HTMLElement;\n\n        clone.setAttribute('aria-hidden', 'true');\n        clone.setAttribute('data-variant', 'marquee');\n        clone.setAttribute('data-orientation', orientation);\n        clone.setAttribute('data-marquee-clone', '');\n        track.appendChild(clone);\n\n        return clone;\n      });\n\n      track.style.setProperty('--_marquee-duration', `${props['marquee-duration'].value ?? 10}s`);\n\n      if (!looping.value) {\n        track.style.setProperty('animation-iteration-count', '1');\n      }\n\n      let isHovered = false;\n\n      const pause = (): void => {\n        isHovered = true;\n        track.style.setProperty('animation-play-state', 'paused');\n      };\n\n      const resume = (): void => {\n        isHovered = false;\n        track.style.removeProperty('animation-play-state');\n      };\n\n      // mouseenter/mouseleave fire only when the pointer crosses the host\n      // boundary — never when moving between children (e.g. onto controls).\n      // This means clicking buttons never accidentally resumes the animation.\n      el.addEventListener('mouseenter', pause);\n      el.addEventListener('mouseleave', resume);\n\n      // ── Seek ──────────────────────────────────────────────────────────────\n      // Smoothly slides to the target position using a CSS transition on the\n      // inline transform (the CSS keyframe animation is paused throughout so\n      // there is no compositing conflict). On transitionend, switches back to\n      // the keyframe animation via a negative animation-delay.\n\n      let seekTimer: ReturnType<typeof setTimeout> | null = null;\n\n      const seekTo = (index: number, slideSnapshot: HTMLElement[]): void => {\n        const slide = slideSnapshot[index];\n\n        if (!slide) return;\n\n        const targetOffset = horizontal ? slide.offsetLeft : slide.offsetTop;\n        const halfSize = horizontal ? track.scrollWidth / 2 : track.scrollHeight / 2;\n        const cycleDuration = props['marquee-duration'].value ?? 10;\n        const delay = halfSize > 0 ? -((targetOffset / halfSize) * cycleDuration) : 0;\n\n        // Cancel any in-flight seek timer.\n        if (seekTimer !== null) {\n          clearTimeout(seekTimer);\n          seekTimer = null;\n          // Snap the previous transition to its end state immediately.\n          track.style.removeProperty('transition');\n        }\n\n        // No layout (jsdom): instant seek with no visual transition.\n        if (halfSize === 0) {\n          track.style.setProperty('animation-delay', `${delay}s`);\n\n          if (!isHovered) {\n            track.style.removeProperty('animation-play-state');\n          }\n\n          return;\n        }\n\n        const seekMs =\n          parseFloat(getComputedStyle(el).getPropertyValue('--carousel-transition-duration') || '0.35') * 1000 || 350;\n\n        const targetTransform = horizontal ? `translateX(-${targetOffset}px)` : `translateY(-${targetOffset}px)`;\n\n        // 1. Read the current visual position from the live animation, then\n        //    kill the animation entirely so nothing else drives transform.\n        //    getBoundingClientRect() flushes layout so the matrix is current.\n        void track.getBoundingClientRect();\n\n        const computedTransform = getComputedStyle(track).transform;\n        const matrixValues = computedTransform\n          .match(/matrix\\(([^)]+)\\)/)?.[1]\n          .split(',')\n          .map(Number);\n        const frozenOffset = horizontal ? (matrixValues?.[4] ?? 0) : (matrixValues?.[5] ?? 0);\n        const frozenTransform = horizontal ? `translateX(${frozenOffset}px)` : `translateY(${frozenOffset}px)`;\n\n        // Stop the CSS animation — inline transform is now the sole driver.\n        track.style.setProperty('animation', 'none');\n        track.style.setProperty('transform', frozenTransform);\n\n        // 2. Next frame: apply transition and slide to target.\n        requestAnimationFrame(() => {\n          track.style.setProperty('transition', `transform ${seekMs}ms ease-in-out`);\n          track.style.setProperty('transform', targetTransform);\n\n          // 3. After the transition completes, restore the keyframe animation\n          //    at the correct position via negative animation-delay.\n          seekTimer = setTimeout(() => {\n            seekTimer = null;\n            track.style.removeProperty('transition');\n            track.style.removeProperty('transform');\n            track.style.removeProperty('animation');\n            track.style.setProperty('animation-delay', `${delay}s`);\n\n            if (isHovered) {\n              track.style.setProperty('animation-play-state', 'paused');\n            }\n          }, seekMs);\n        });\n      };\n\n      return {\n        cleanup: () => {\n          if (seekTimer !== null) clearTimeout(seekTimer);\n\n          seekTimer = null;\n          clones.forEach((c) => c.remove());\n          track.style.removeProperty('transition');\n          track.style.removeProperty('transform');\n          track.style.removeProperty('animation');\n          track.style.removeProperty('--_marquee-duration');\n          track.style.removeProperty('animation-iteration-count');\n          track.style.removeProperty('animation-delay');\n          track.style.removeProperty('animation-play-state');\n          el.removeEventListener('mouseenter', pause);\n          el.removeEventListener('mouseleave', resume);\n        },\n        seekTo,\n      };\n    };\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\n      const track = shadowRoot.querySelector<HTMLElement>('.track')!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n\n        if (isMarquee.value) {\n          marqueeInstance?.cleanup();\n          marqueeInstance = setupMarquee(track);\n        }\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      watch(\n        computed(() => ({\n          duration: props['marquee-duration'].value,\n          isMarquee: isMarquee.value,\n          loop: props.loop.value,\n          orientation: props.orientation.value,\n        })),\n        ({ isMarquee: active }) => {\n          marqueeInstance?.cleanup();\n          marqueeInstance = active ? setupMarquee(track) : null;\n        },\n        { immediate: true },\n      );\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\n        marqueeInstance?.cleanup();\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const focusIndicator = (index: number): void => {\n      const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n      dot?.focus();\n    };\n\n    const handleIndicatorKeydown = (e: KeyboardEvent, i: number): void => {\n      const count = slideCount.value;\n      let target: number | undefined;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          target = (i + 1) % count;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          target = (i - 1 + count) % count;\n          break;\n        case 'End':\n          target = count - 1;\n          break;\n        case 'Home':\n          target = 0;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      goTo(target);\n      focusIndicator(target);\n    };\n\n    const renderControls = () =>\n      showControls.value\n        ? html`<div class=\"controls\" part=\"controls\">\n            <ore-button\n              class=\"nav-btn prev-btn\"\n              part=\"prev-btn\"\n              variant=\"ghost\"\n              :color=${() => props.color.value}\n              rounded\n              icon-only\n              aria-label=\"Previous slide\"\n              :disabled=${() => (!canGoPrev.value ? true : undefined)}\n              @click=${(e: Event) => {\n                e.stopPropagation();\n                prev();\n              }}>\n              <ore-icon\n                :name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                size=\"16\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"></ore-icon>\n            </ore-button>\n            <ore-button\n              class=\"nav-btn next-btn\"\n              part=\"next-btn\"\n              variant=\"ghost\"\n              :color=${() => props.color.value}\n              rounded\n              icon-only\n              aria-label=\"Next slide\"\n              :disabled=${() => (!canGoNext.value ? true : undefined)}\n              @click=${(e: Event) => {\n                e.stopPropagation();\n                next();\n              }}>\n              <ore-icon\n                :name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                size=\"16\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"></ore-icon>\n            </ore-button>\n          </div>`\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" :aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1 && !isMarquee.value\n          ? html`<div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n              ${() =>\n                Array.from(\n                  { length: slideCount.value },\n                  (_, i) =>\n                    html`<button\n                      type=\"button\"\n                      role=\"tab\"\n                      data-index=\"${i}\"\n                      :class=${() =>\n                        `indicator${!isMarquee.value && i === activeIndex.value ? ' indicator-active' : ''}`}\n                      :aria-selected=${() => String(!isMarquee.value && i === activeIndex.value)}\n                      :tabindex=${() => (!isMarquee.value && i === activeIndex.value ? '0' : '-1')}\n                      aria-label=\"${`Go to slide ${i + 1}`}\"\n                      @click=${() => goTo(i)}\n                      @keydown=${(e: KeyboardEvent) => handleIndicatorKeydown(e, i)}>\n                      <ore-progress\n                        aria-hidden=\"true\"\n                        tabindex=\"-1\"\n                        :color=${() => props.color.value}\n                        :type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                        :value=${() => (!isMarquee.value && i === activeIndex.value ? 100 : 0)}\n                        :style=${() => {\n                          const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                          return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${!isMarquee.value && i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                        }}></ore-progress>\n                    </button>`,\n                )}\n              ${renderControls}\n            </div>`\n          : html`${renderControls}`}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/checkbox-group.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/light-dom.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/checkbox-group/checkbox-group.css?inline.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ripple");var f=(0,u.createContext)(`CheckboxGroupContext`),p=`ore-checkbox-group`;(0,u.define)(p,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:u.prop.string(),helper:u.prop.string(),label:u.prop.string(),name:u.prop.string(),orientation:u.prop.string(`vertical`),required:u.prop.bool(!1),values:u.prop.string()},setup(t,{bind:n,el:r,emit:i,onCleanup:l,provide:p,slots:m,watch:h}){let g=(0,u.inject)(c.FORM_CTX),_=c.useFormContext(n,t,g),v=null,y=o.createChoiceField({disabled:_.disabled,error:t.error,getFormField:()=>v,helper:t.helper,multiple:(0,d.signal)(!0),prefix:`checkbox-group`,signal:a.lifecycleSignal(l),validateOn:g?.validateOn,value:t.values});v=(0,u.useField)({disabled:y.disabled,toFormValue:e=>e,value:y.formValue});let b=y.selectedValues,x=()=>s.getLightChildrenByTag(r,`ore-checkbox`),S=e=>s.getChoiceLabel(x(),e),C=e=>{let t=b.value;i(`change`,{labels:t.map(S),originalEvent:e,values:t})},w=(e,t)=>{y.toggleValue(e),r.setAttribute(`values`,y.formValue.value),y.triggerValidation(`change`),C(t)};p(f,{color:t.color,disabled:(0,d.computed)(()=>!!t.disabled.value),size:t.size,toggle:w,values:b});let T=()=>{let e=b.value,n=t.color.value,r=t.size.value,i=t.disabled.value,a=x();for(let t of a){let a=t.getAttribute(`value`)??``;t.toggleAttribute(`checked`,e.includes(a)),n?t.setAttribute(`color`,n):t.removeAttribute(`color`),r?t.setAttribute(`size`,r):t.removeAttribute(`size`),t.toggleAttribute(`disabled`,!!i)}};h(()=>{m.elements().value,T()}),h(()=>{m.elements().value;let e=x().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&w(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let E=(0,u.createStableId)(`checkbox-group-legend`),D=`${E}-error`,O=`${E}-helper`,k=()=>!!t.error.value,A=()=>!!t.helper.value&&!k();return n({attr:{size:_.size}}),u.html`
+      <fieldset
+        role="group"
+        aria-required="${()=>String(!!t.required.value)}"
+        aria-invalid="${()=>String(k())}"
+        aria-errormessage="${()=>k()?D:null}"
+        aria-describedby="${()=>k()?D:A()?O:null}">
+        <legend id="${E}" ?hidden=${()=>!t.label.value}>
+          ${t.label}${e.when(()=>!!t.required.value,()=>u.html`<span aria-hidden="true"> *</span>`)}
+        </legend>
+        <div class="checkbox-group-items" part="items">
+          <slot></slot>
+        </div>
+        <div class="error-text" id="${D}" role="alert" ?hidden=${()=>!k()}>${t.error}</div>
+        <div class="helper-text" id="${O}" ?hidden=${()=>!A()}>${t.helper}</div>
+      </fieldset>
+    `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,l.default]}),exports.CHECKBOX_GROUP_CTX=f,exports.CHECKBOX_GROUP_TAG=p;
+//# sourceMappingURL=checkbox-group.cjs.map

package/dist/checkbox-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import { createContext, createStableId, define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps, OreCheckboxGroupEvents>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    values: prop.string(),\n  },\n  setup(props, { bind, el, emit, onCleanup, provide, slots, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n    const checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      el.setAttribute('values', choice.formValue.value);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    bind({ attr: { size: fCtxProps.size } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}