@vielzeug/refine 1.7.0 → 2.0.0

package/dist/carousel.cjs

@@ -1,61 +1,69 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./_dev.cjs"),t=require("./headless/swipe.cjs"),n=require("./headless/announcer.cjs"),r=require("./content/carousel/carousel.css.cjs"),i=require("./content/carousel/carousel-slide.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-carousel`,c=(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)})},l=(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`)})},u=(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)})},d=(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`)})};(0,a.define)(s,{props:{autoplay:a.prop.bool(!1),"autoplay-interval":a.prop.number(5e3),color:a.prop.string(),label:a.prop.string(`Carousel`),loop:a.prop.bool(!0),"marquee-duration":a.prop.number(10),orientation:a.prop.string(`horizontal`),"show-controls":a.prop.bool(!0),"show-indicators":a.prop.bool(!0),"slide-index":a.prop.number(0),variant:a.prop.string(`default`)},setup(r){let i=(0,a.getHost)(),s=(0,a.useEmit)(),f=(0,o.signal)(r[`slide-index`].value??0),p=(0,o.computed)(()=>r.variant.value===`marquee`),m=null,h=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),g=(0,o.signal)(h.length),_=()=>{h=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),g.value=h.length},v=(0,o.computed)(()=>r.orientation.value!==`vertical`),y=(0,o.computed)(()=>r.loop.value!==!1),b=(0,o.computed)(()=>r[`show-controls`].value!==!1),x=(0,o.computed)(()=>r[`show-indicators`].value!==!1),S=(0,o.computed)(()=>y.value||f.value>0),C=(0,o.computed)(()=>y.value||f.value<g.value-1),w=null,T=(e,t=!0)=>{let r=g.value;if(r===0)return;let a=y.value?(e%r+r)%r:Math.max(0,Math.min(e,r-1));a!==f.value&&(f.value=a,i.setAttribute(`slide-index`,String(a)),s(`change`,{index:a}),w?.seekTo(a,h),t&&n.announce(h[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${r}`))},E=()=>T(f.value-1),D=()=>T(f.value+1);(0,o.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==f.value&&T(e,!1)});let O=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;h.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,o.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),O,{immediate:!0});let k={default:c,fade:c,filmstrip:l,gallery:u,marquee:d},A=()=>{let e=r.variant.value??`default`;k[e](h,f.value)};(0,o.watch)(f,A,{immediate:!0});let j=()=>{m===null&&(m=setInterval(D,r[`autoplay-interval`].value??5e3))},M=()=>{m!==null&&(clearInterval(m),m=null)};(0,o.watch)((0,o.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{M(),e&&j()});let N=e=>{let t=v.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),E()):e.key===r?(e.preventDefault(),D()):e.key===`Home`?(e.preventDefault(),T(0)):e.key===`End`&&(e.preventDefault(),T(g.value-1))},P=t.createSwipeControl({axis:()=>v.value?`x`:`y`,onCommit:e=>{e.distance<0?D():E()},threshold:()=>48});(0,a.bind)({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${v.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{M()},focusout:()=>{r.autoplay.value&&j()},keydown:N,pointercancel:e=>P.handlePointerCancel(e),pointerdown:e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))||P.handlePointerDown(e)},pointerenter:()=>{M()},pointerleave:()=>{r.autoplay.value&&j()},pointermove:e=>P.handlePointerMove(e),pointerup:e=>P.handlePointerUp(e)}});let F=t=>{let n=r.orientation.value??`horizontal`,a=n!==`vertical`;p.value&&r.loop.value===!1&&e.warn(`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=h.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`),y.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`)};i.addEventListener(`mouseenter`,c),i.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`),i.removeEventListener(`mouseenter`,c),i.removeEventListener(`mouseleave`,l)},seekTo:(e,n)=>{let o=n[e];if(!o)return;let c=a?o.offsetLeft:o.offsetTop,l=a?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(i).getPropertyValue(`--carousel-transition-duration`)||`0.35`)*1e3||350,m=a?`translateX(-${c}px)`:`translateY(-${c}px)`;t.getBoundingClientRect();let h=getComputedStyle(t).transform.match(/matrix\(([^)]+)\)/)?.[1].split(`,`).map(Number),g=a?h?.[4]??0:h?.[5]??0,_=a?`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)})}}};(0,a.onMounted)(()=>{let e=i.shadowRoot,t=e.querySelector(`.track`),n=e.querySelector(`slot`),a=()=>{_(),O(),A(),p.value&&(w?.cleanup(),w=F(t))};return n.addEventListener(`slotchange`,a),(0,o.watch)((0,o.computed)(()=>({duration:r[`marquee-duration`].value,isMarquee:p.value,loop:r.loop.value,orientation:r.orientation.value})),({isMarquee:e})=>{w?.cleanup(),w=e?F(t):null},{immediate:!0}),r.autoplay.value&&j(),()=>{M(),P.dispose(),n.removeEventListener(`slotchange`,a),w?.cleanup()}});let I=e=>{(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},L=(e,t)=>{let n=g.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(),T(r),I(r)},R=()=>b.value?a.html`<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=${()=>S.value?void 0:!0}
-              @click=${e=>{e.stopPropagation(),E()}}>
-              <ore-icon
-                :name=${()=>v.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=${()=>C.value?void 0:!0}
-              @click=${e=>{e.stopPropagation(),D()}}>
-              <ore-icon
-                :name=${()=>v.value?`chevron-right`:`chevron-down`}
-                size="16"
-                stroke-width="2"
-                aria-hidden="true"></ore-icon>
-            </ore-button>
-          </div>`:a.html``;return a.html`
-      <div class="track" part="track" :aria-live=${()=>r.autoplay.value?`off`:`polite`}>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/swipe.cjs"),t=require("./core/announcer.cjs"),n=require("./content/carousel/carousel.css.cjs"),r=require("./content/carousel/carousel-slide.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("@vielzeug/ripple/watch");var s=`ore-carousel`,c=(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)})},l=(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`)})},u=(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)})};(0,i.define)(s,{props:{autoplay:i.prop.bool(!1),"autoplay-interval":i.prop.number(5e3),color:i.prop.string(),label:i.prop.string(`Carousel`),loop:i.prop.bool(!0),orientation:i.prop.string(`horizontal`),"show-controls":i.prop.bool(!0),"show-indicators":i.prop.bool(!0),"slide-index":i.prop.number(0),variant:i.prop.string(`default`)},setup(n){let r=(0,i.getHost)(),s=(0,i.useEmit)(),d=(0,a.signal)(n[`slide-index`].value??0),f=null,p=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),m=(0,a.signal)(p.length),h=()=>{p=Array.from(r.querySelectorAll(`:scope > ore-carousel-slide`)),m.value=p.length},g=(0,a.computed)(()=>n.orientation.value!==`vertical`),_=(0,a.computed)(()=>n.loop.value!==!1),v=(0,a.computed)(()=>n[`show-controls`].value!==!1),y=(0,a.computed)(()=>n[`show-indicators`].value!==!1),b=(0,a.computed)(()=>_.value||d.value>0),x=(0,a.computed)(()=>_.value||d.value<m.value-1),S=(e,n=!0)=>{let i=m.value;if(i===0)return;let a=_.value?(e%i+i)%i:Math.max(0,Math.min(e,i-1));a!==d.value&&(d.value=a,r.setAttribute(`slide-index`,String(a)),s(`change`,{index:a}),n&&t.announce(p[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${i}`))},C=()=>S(d.value-1),w=()=>S(d.value+1);(0,o.watch)(n[`slide-index`],e=>{typeof e==`number`&&e!==d.value&&S(e,!1)});let T=()=>{let e=n.variant.value??`default`,t=n.orientation.value??`horizontal`;p.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,a.computed)(()=>({orientation:n.orientation.value,variant:n.variant.value})),T,{immediate:!0});let E={default:c,fade:c,filmstrip:l,gallery:u},D=()=>{let e=n.variant.value??`default`;E[e](p,d.value)};(0,o.watch)(d,D,{immediate:!0});let O=()=>{f===null&&(f=setInterval(w,n[`autoplay-interval`].value??5e3))},k=()=>{f!==null&&(clearInterval(f),f=null)};(0,o.watch)((0,a.computed)(()=>({enabled:n.autoplay.value,interval:n[`autoplay-interval`].value})),({enabled:e})=>{k(),e&&O()});let A=e=>{let t=g.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),C()):e.key===r?(e.preventDefault(),w()):e.key===`Home`?(e.preventDefault(),S(0)):e.key===`End`&&(e.preventDefault(),S(m.value-1))},j=e.createSwipeControl({axis:()=>g.value?`x`:`y`,onCommit:e=>{e.distance<0?w():C()},threshold:()=>48});(0,i.bind)({attr:{"aria-label":()=>n.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>n.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${g.value?`pan-y`:`pan-x`}`,variant:()=>n.variant.value??`default`},on:{focusin:()=>{k()},focusout:()=>{n.autoplay.value&&O()},keydown:A,pointercancel:e=>j.handlePointerCancel(e),pointerdown:e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))||j.handlePointerDown(e)},pointerenter:()=>{k()},pointerleave:()=>{n.autoplay.value&&O()},pointermove:e=>j.handlePointerMove(e),pointerup:e=>j.handlePointerUp(e)}}),(0,i.onMounted)(()=>{let e=r.shadowRoot.querySelector(`slot`),t=()=>{h(),T(),D()};return e.addEventListener(`slotchange`,t),n.autoplay.value&&O(),()=>{k(),j.dispose(),e.removeEventListener(`slotchange`,t)}});let M=e=>{(r.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},N=(e,t)=>{let n=m.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(),S(r),M(r)},P=()=>v.value?i.html`
+            <div class="controls" part="controls">
+              <ore-button
+                class="nav-btn prev-btn"
+                part="prev-btn"
+                variant="ghost"
+                color=${()=>n.color.value}
+                rounded
+                icon-only
+                aria-label="Previous slide"
+                disabled=${()=>!b.value||void 0}
+                @click=${e=>{e.stopPropagation(),C()}}>
+                <ore-icon
+                  name=${()=>g.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=${()=>n.color.value}
+                rounded
+                icon-only
+                aria-label="Next slide"
+                disabled=${()=>!x.value||void 0}
+                @click=${e=>{e.stopPropagation(),w()}}>
+                <ore-icon
+                  name=${()=>g.value?`chevron-right`:`chevron-down`}
+                  size="16"
+                  stroke-width="2"
+                  aria-hidden="true"></ore-icon>
+              </ore-button>
+            </div>
+          `:i.html``;return i.html`
+      <div class="track" part="track" aria-live=${()=>n.autoplay.value?`off`:`polite`}>
         <slot></slot>
       </div>
 
-      ${()=>x.value&&g.value>1&&!p.value?a.html`<div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
-              ${()=>Array.from({length:g.value},(e,t)=>a.html`<button
-                      type="button"
-                      role="tab"
-                      data-index="${t}"
-                      :class=${()=>`indicator${!p.value&&t===f.value?` indicator-active`:``}`}
-                      :aria-selected=${()=>String(!p.value&&t===f.value)}
-                      :tabindex=${()=>!p.value&&t===f.value?`0`:`-1`}
-                      aria-label="${`Go to slide ${t+1}`}"
-                      @click=${()=>T(t)}
-                      @keydown=${e=>L(e,t)}>
-                      <ore-progress
-                        aria-hidden="true"
-                        tabindex="-1"
-                        :color=${()=>r.color.value}
-                        :type=${()=>v.value?`linear`:`vertical`}
-                        :value=${()=>!p.value&&t===f.value?100:0}
-                        :style=${()=>{let e=v.value?`carousel-fill`:`carousel-fill-v`;return`--carousel-timeout:${r[`autoplay-interval`].value??5e3};--carousel-animation-name:${!p.value&&t===f.value&&r.autoplay.value?e:`none`}`}}></ore-progress>
-                    </button>`)}
-              ${R}
-            </div>`:a.html`${R}`}
-    `},styles:[r.default]}),exports.CAROUSEL_SLIDE_TAG=i.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=s;
+      ${()=>y.value&&m.value>1?i.html`
+              <div class="indicators" part="indicators" role="tablist" aria-label="Slide indicators">
+                ${()=>Array.from({length:m.value},(e,t)=>i.html`
+                      <button
+                        type="button"
+                        role="tab"
+                        data-index="${t}"
+                        class=${()=>`indicator${t===d.value?` indicator-active`:``}`}
+                        aria-selected=${()=>String(t===d.value)}
+                        tabindex=${()=>t===d.value?`0`:`-1`}
+                        aria-label="${`Go to slide ${t+1}`}"
+                        @click=${()=>S(t)}
+                        @keydown=${e=>N(e,t)}>
+                        <ore-progress
+                          aria-hidden="true"
+                          tabindex="-1"
+                          color=${()=>n.color.value}
+                          type=${()=>g.value?`linear`:`vertical`}
+                          value=${()=>t===d.value?100:0}
+                          style=${()=>{let e=g.value?`carousel-fill`:`carousel-fill-v`;return`--carousel-timeout:${n[`autoplay-interval`].value??5e3};--carousel-animation-name:${t===d.value&&n.autoplay.value?e:`none`}`}}></ore-progress>
+                      </button>
+                    `)}
+                ${P}
+              </div>
+            `:i.html`
+              ${P}
+            `}
+    `},styles:[n.default]}),exports.CAROUSEL_SLIDE_TAG=r.CAROUSEL_SLIDE_TAG,exports.CAROUSEL_TAG=s;
 //# sourceMappingURL=carousel.cjs.map

package/dist/carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, useEmit } 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>(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) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\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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"}
+{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted, useEmit } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createSwipeControl } from '../../core';\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';\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  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\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   */\n  variant?: CarouselVariant;\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)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\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 *\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).\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 *\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\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(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    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) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\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    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\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    };\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    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const shadowRoot = el.shadowRoot!;\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\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        stopAutoplay();\n        swipe.dispose();\n        slot.removeEventListener('slotchange', onSlotChange);\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`\n            <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          `\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\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (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=${() => (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:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}