npm - @vielzeug/refine - Versions diffs - 26.10.11 → 26.10.13 - Mend

@vielzeug/refine 26.10.11 → 26.10.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/carousel.cjs +1 -1
package/dist/carousel.cjs.map +1 -1
package/dist/carousel.js +1 -1
package/dist/carousel.js.map +1 -1
package/dist/content/carousel/carousel.css.cjs +1 -1
package/dist/content/carousel/carousel.css.cjs.map +1 -1
package/dist/content/carousel/carousel.css.js +1 -1
package/dist/content/carousel/carousel.css.js.map +1 -1
package/dist/custom-elements.json +9909 -9909
package/dist/refine.cjs +2 -2
package/dist/refine.cjs.map +1 -1
package/dist/refine.iife.js +2 -2
package/dist/refine.iife.js.map +1 -1
package/dist/refine.js +2 -2
package/dist/refine.js.map +1 -1
package/package.json +13 -13

package/dist/carousel.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/announcer.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./shared/types.cjs"),i=require("./icon.cjs"),a=require("./content/carousel/carousel.css.cjs"),o=require("./content/carousel/carousel-slide.cjs"),s=require("./progress.cjs");let c=require("@vielzeug/ripple"),l=require("@vielzeug/ore"),u=require("@vielzeug/gesture");var d=[`horizontal`,`vertical`],f=[`default`,`fade`,`filmstrip`,`gallery`],p=`ore-carousel`,syncDefaultSlides=(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)})},syncFilmstripSlides=(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`)})},syncGallerySlides=(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,l.define)(p,{props:{autoplay:l.prop.bool(!1),"autoplay-interval":l.prop.number(5e3),color:l.prop.oneOf(r.THEME_COLORS),label:l.prop.string(`Carousel`),loop:l.prop.bool(!0),orientation:l.prop.oneOf(d,`horizontal`),"show-controls":l.prop.bool(!0),"show-indicators":l.prop.bool(!0),"slide-index":l.prop.number(0),variant:l.prop.oneOf(f,`default`)},setup(r){let i=(0,l.getHost)(),a=(0,l.useEmit)(),o=(0,c.signal)(r[`slide-index`].value??0),s=null,d=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),f=(0,c.signal)(d.length),refreshSlides=()=>{d=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),f.value=d.length},p=(0,c.computed)(()=>r.orientation.value!==`vertical`),m=(0,c.computed)(()=>r.loop.value!==!1),h=(0,c.computed)(()=>r[`show-controls`].value!==!1),g=(0,c.computed)(()=>r[`show-indicators`].value!==!1),_=(0,c.computed)(()=>m.value||o.value>0),v=(0,c.computed)(()=>m.value||o.value<f.value-1),goTo=(t,n=!0)=>{let r=f.value;if(r===0)return;let s=m.value?(t%r+r)%r:Math.max(0,Math.min(t,r-1));s!==o.value&&(o.value=s,i.setAttribute(`slide-index`,String(s)),a(`change`,{index:s}),n&&e.announce(d[s]?.getAttribute(`aria-label`)??`Slide ${s+1} of ${r}`,{document:i.ownerDocument}))},prev=()=>goTo(o.value-1),next=()=>goTo(o.value+1);(0,c.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==o.value&&goTo(e,!1)});let syncSlideVariants=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;d.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,c.watch)((0,c.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),syncSlideVariants,{immediate:!0});let y={default:syncDefaultSlides,fade:syncDefaultSlides,filmstrip:syncFilmstripSlides,gallery:syncGallerySlides},syncActiveState=()=>{let e=r.variant.value??`default`;y[e](d,o.value)};(0,c.watch)(o,syncActiveState,{immediate:!0});let startAutoplay=()=>{s===null&&(s=setInterval(next,r[`autoplay-interval`].value??5e3))},stopAutoplay=()=>{s!==null&&(clearInterval(s),s=null)};(0,c.watch)((0,c.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{stopAutoplay(),e&&startAutoplay()});let handleKeydown=e=>{let t=p.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),prev()):e.key===r?(e.preventDefault(),next()):e.key===`Home`?(e.preventDefault(),goTo(0)):e.key===`End`&&(e.preventDefault(),goTo(f.value-1))},b=n.createListControl({getItems:()=>Array.from({length:f.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{goTo(e),(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>p.value?`horizontal`:`vertical`,signal:t.lifecycleSignal(l.onCleanup)});(0,l.bind)({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${p.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{stopAutoplay()},focusout:()=>{r.autoplay.value&&startAutoplay()},keydown:handleKeydown,pointerenter:()=>{stopAutoplay()},pointerleave:()=>{r.autoplay.value&&startAutoplay()}}}),(0,l.onMounted)(()=>{let e=(0,u.createPanGesture)(i,{axis:()=>p.value?`x`:`y`,onEnd:({distance:e,reason:t})=>{t!==`release`||Math.abs(e)<48||(e<0?next():prev())},shouldStart:e=>!e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))}),t=i.shadowRoot.querySelector(`slot`),onSlotChange=()=>{refreshSlides(),syncSlideVariants(),syncActiveState()};return t.addEventListener(`slotchange`,onSlotChange),r.autoplay.value&&startAutoplay(),()=>{e.dispose(),stopAutoplay(),t.removeEventListener(`slotchange`,onSlotChange)}});let renderControls=()=>h.value?l.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/announcer.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./shared/types.cjs"),i=require("./icon.cjs"),a=require("./content/carousel/carousel.css.cjs"),o=require("./content/carousel/carousel-slide.cjs"),s=require("./progress.cjs");let c=require("@vielzeug/ripple"),l=require("@vielzeug/ore"),u=require("@vielzeug/gesture");var d=[`horizontal`,`vertical`],f=[`default`,`fade`,`filmstrip`,`gallery`],p=`ore-carousel`,syncDefaultSlides=(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)})},syncFilmstripSlides=(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`)})},syncGallerySlides=(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,l.define)(p,{props:{autoplay:l.prop.bool(!1),"autoplay-interval":l.prop.number(5e3),color:l.prop.oneOf(r.THEME_COLORS),label:l.prop.string(`Carousel`),loop:l.prop.bool(!0),orientation:l.prop.oneOf(d,`horizontal`),"show-controls":l.prop.bool(!0),"show-indicators":l.prop.bool(!0),"slide-index":l.prop.number(0),variant:l.prop.oneOf(f,`default`)},setup(r){let i=(0,l.getHost)(),a=(0,l.useEmit)(),o=(0,c.signal)(r[`slide-index`].value??0),s=null,d=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),f=(0,c.signal)(d.length),refreshSlides=()=>{d=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),f.value=d.length},p=(0,c.computed)(()=>r.orientation.value!==`vertical`),m=(0,c.computed)(()=>r.loop.value!==!1),h=(0,c.computed)(()=>r[`show-controls`].value!==!1),g=(0,c.computed)(()=>r[`show-indicators`].value!==!1),_=(0,c.computed)(()=>m.value||o.value>0),v=(0,c.computed)(()=>m.value||o.value<f.value-1),goTo=(t,n=!0)=>{let r=f.value;if(r===0)return;let s=m.value?(t%r+r)%r:Math.max(0,Math.min(t,r-1));s!==o.value&&(o.value=s,i.setAttribute(`slide-index`,String(s)),a(`change`,{index:s}),n&&e.announce(d[s]?.getAttribute(`aria-label`)??`Slide ${s+1} of ${r}`,{document:i.ownerDocument}))},prev=()=>goTo(o.value-1),next=()=>goTo(o.value+1);(0,c.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==o.value&&goTo(e,!1)});let syncSlideVariants=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;d.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,c.watch)((0,c.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),syncSlideVariants,{immediate:!0});let y={default:syncDefaultSlides,fade:syncDefaultSlides,filmstrip:syncFilmstripSlides,gallery:syncGallerySlides},syncActiveState=()=>{let e=r.variant.value??`default`;y[e](d,o.value)};(0,c.watch)(o,syncActiveState,{immediate:!0});let startAutoplay=()=>{s===null&&(s=setInterval(next,r[`autoplay-interval`].value??5e3))},stopAutoplay=()=>{s!==null&&(clearInterval(s),s=null)};(0,c.watch)((0,c.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{stopAutoplay(),e&&startAutoplay()});let handleKeydown=e=>{let t=p.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),prev()):e.key===r?(e.preventDefault(),next()):e.key===`Home`?(e.preventDefault(),goTo(0)):e.key===`End`&&(e.preventDefault(),goTo(f.value-1))},b=n.createListControl({getItems:()=>Array.from({length:f.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{goTo(e),(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>p.value?`horizontal`:`vertical`,signal:t.lifecycleSignal(l.onCleanup)});(0,l.bind)({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{stopAutoplay()},focusout:()=>{r.autoplay.value&&startAutoplay()},keydown:handleKeydown,pointerenter:()=>{stopAutoplay()},pointerleave:()=>{r.autoplay.value&&startAutoplay()}}}),(0,l.onMounted)(()=>{let e=!1,resetClick=()=>{e=!1},handleClick=t=>{e&&t.detail!==0&&(e=!1,t.preventDefault(),t.stopImmediatePropagation())},handleDragStart=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&d.includes(e))&&e.preventDefault()},t=(0,u.createPanGesture)(i,{axis:()=>p.value?`x`:`y`,onEnd:({distance:t,reason:n})=>{if(n!==`release`){e=!1;return}Math.abs(t)<48||(t<0?next():prev())},onStart:()=>{e=!0},shouldStart:e=>!e.composedPath().some(e=>e instanceof Element&&e.getRootNode()===i.shadowRoot&&e.matches(`.controls, .indicators`))}),n=i.shadowRoot.querySelector(`slot`),onSlotChange=()=>{refreshSlides(),syncSlideVariants(),syncActiveState()};return n.addEventListener(`slotchange`,onSlotChange),i.addEventListener(`pointerdown`,resetClick,!0),i.addEventListener(`click`,handleClick,!0),i.addEventListener(`dragstart`,handleDragStart),r.autoplay.value&&startAutoplay(),()=>{t.dispose(),stopAutoplay(),n.removeEventListener(`slotchange`,onSlotChange),i.removeEventListener(`pointerdown`,resetClick,!0),i.removeEventListener(`click`,handleClick,!0),i.removeEventListener(`dragstart`,handleDragStart)}});let renderControls=()=>h.value?l.html`
             <div class="controls" part="controls">
               <ore-button
                 class="nav-btn prev-btn"

package/dist/carousel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { THEME_COLORS, type ThemeColor } from '../../types';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { PROGRESS_TAG } from '../../feedback/progress/progress';\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport const CAROUSEL_ORIENTATIONS = ['horizontal', 'vertical'] as const;\nexport type CarouselOrientation = (typeof CAROUSEL_ORIENTATIONS)[number];\nexport const CAROUSEL_VARIANTS = ['default', 'fade', 'filmstrip', 'gallery'] as const;\nexport type CarouselVariant = (typeof CAROUSEL_VARIANTS)[number];\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.oneOf(THEME_COLORS),\n label: prop.string('Carousel'),\n loop: prop.bool(true),\n orientation: prop.oneOf(CAROUSEL_ORIENTATIONS, 'horizontal'),\n 'show-controls': prop.bool(true),\n 'show-indicators': prop.bool(true),\n 'slide-index': prop.number(0),\n variant: prop.oneOf(CAROUSEL_VARIANTS, '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 document: el.ownerDocument,\n });\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 const indicatorNav = createListControl<number>({\n getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n loop: true,\n onNavigate: ({ index }) => {\n goTo(index);\n const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n dot?.focus();\n },\n orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n signal: lifecycleSignal(onCleanup),\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 pointerenter: () => {\n stopAutoplay();\n },\n pointerleave: () => {\n if (props.autoplay.value) startAutoplay();\n },\n },\n });\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n const pan = createPanGesture(el, {\n axis: () => (isHorizontal.value ? 'x' : 'y'),\n onEnd: ({ distance, reason }) => {\n if (reason !== 'release' \|\| Math.abs(distance) < 48) return;\n\n if (distance < 0) next();\n else prev();\n },\n shouldStart: (event) => {\n const path = event.composedPath();\n\n return !path.some(\n (node) =>\n node instanceof HTMLElement &&\n (node.tagName === 'BUTTON' \|\| node.tagName === 'ORE-BUTTON' \|\| node.tagName === 'ORE-PROGRESS'),\n );\n },\n });\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 pan.dispose();\n stopAutoplay();\n slot.removeEventListener('slotchange', onSlotChange);\n };\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\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 @focus=${() => indicatorNav.set(i)}\n @click=${() => goTo(i)}\n @keydown=${(e: KeyboardEvent) => {\n const target = e.currentTarget;\n\n if (target instanceof HTMLElement) {\n const index = Number(target.dataset.index);\n\n if (Number.isInteger(index)) indicatorNav.set(index);\n }\n\n indicatorNav.handleKeydown(e);\n }}>\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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"}
1	+ {"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { THEME_COLORS, type ThemeColor } from '../../types';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { PROGRESS_TAG } from '../../feedback/progress/progress';\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport const CAROUSEL_ORIENTATIONS = ['horizontal', 'vertical'] as const;\nexport type CarouselOrientation = (typeof CAROUSEL_ORIENTATIONS)[number];\nexport const CAROUSEL_VARIANTS = ['default', 'fade', 'filmstrip', 'gallery'] as const;\nexport type CarouselVariant = (typeof CAROUSEL_VARIANTS)[number];\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.oneOf(THEME_COLORS),\n label: prop.string('Carousel'),\n loop: prop.bool(true),\n orientation: prop.oneOf(CAROUSEL_ORIENTATIONS, 'horizontal'),\n 'show-controls': prop.bool(true),\n 'show-indicators': prop.bool(true),\n 'slide-index': prop.number(0),\n variant: prop.oneOf(CAROUSEL_VARIANTS, '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 document: el.ownerDocument,\n });\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 const indicatorNav = createListControl<number>({\n getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n loop: true,\n onNavigate: ({ index }) => {\n goTo(index);\n const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n dot?.focus();\n },\n orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n signal: lifecycleSignal(onCleanup),\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 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 pointerenter: () => {\n stopAutoplay();\n },\n pointerleave: () => {\n if (props.autoplay.value) startAutoplay();\n },\n },\n });\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n let suppressClick = false;\n const resetClick = (): void => {\n suppressClick = false;\n };\n const handleClick = (event: MouseEvent): void => {\n if (!suppressClick \|\| event.detail === 0) return;\n\n suppressClick = false;\n event.preventDefault();\n event.stopImmediatePropagation();\n };\n const handleDragStart = (event: DragEvent): void => {\n if (event.composedPath().some((node) => node instanceof HTMLElement && slides.includes(node))) {\n event.preventDefault();\n }\n };\n const pan = createPanGesture(el, {\n axis: () => (isHorizontal.value ? 'x' : 'y'),\n onEnd: ({ distance, reason }) => {\n if (reason !== 'release') {\n suppressClick = false;\n return;\n }\n if (Math.abs(distance) < 48) return;\n\n if (distance < 0) next();\n else prev();\n },\n onStart: () => {\n suppressClick = true;\n },\n shouldStart: (event) => {\n const path = event.composedPath();\n\n return !path.some(\n (node) =>\n node instanceof Element && node.getRootNode() === el.shadowRoot && node.matches('.controls, .indicators'),\n );\n },\n });\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 el.addEventListener('pointerdown', resetClick, true);\n el.addEventListener('click', handleClick, true);\n el.addEventListener('dragstart', handleDragStart);\n\n if (props.autoplay.value) {\n startAutoplay();\n }\n\n return () => {\n pan.dispose();\n stopAutoplay();\n slot.removeEventListener('slotchange', onSlotChange);\n el.removeEventListener('pointerdown', resetClick, true);\n el.removeEventListener('click', handleClick, true);\n el.removeEventListener('dragstart', handleDragStart);\n };\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\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 @focus=${() => indicatorNav.set(i)}\n @click=${() => goTo(i)}\n @keydown=${(e: KeyboardEvent) => {\n const target = e.currentTarget;\n\n if (target instanceof HTMLElement) {\n const index = Number(target.dataset.index);\n\n if (Number.isInteger(index)) indicatorNav.set(index);\n }\n\n indicatorNav.handleKeydown(e);\n }}>\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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"}

package/dist/carousel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{announce as e}from"./core/announcer.js";import{lifecycleSignal as t}from"./core/ore.js";import{createListControl as n}from"./core/nav.js";import{THEME_COLORS as r}from"./shared/types.js";import{ICON_TAG as i}from"./icon.js";import a from"./content/carousel/carousel.css.js";import{CAROUSEL_SLIDE_TAG as o}from"./content/carousel/carousel-slide.js";import{PROGRESS_TAG as s}from"./progress.js";import{computed as c,signal as l,watch as u}from"@vielzeug/ripple";import{bind as d,define as f,getHost as p,html as m,onCleanup as h,onMounted as g,prop as _,useEmit as v}from"@vielzeug/ore";import{createPanGesture as y}from"@vielzeug/gesture";var b=[`horizontal`,`vertical`],x=[`default`,`fade`,`filmstrip`,`gallery`],S=`ore-carousel`,syncDefaultSlides=(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)})},syncFilmstripSlides=(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`)})},syncGallerySlides=(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)})};f(S,{props:{autoplay:_.bool(!1),"autoplay-interval":_.number(5e3),color:_.oneOf(r),label:_.string(`Carousel`),loop:_.bool(!0),orientation:_.oneOf(b,`horizontal`),"show-controls":_.bool(!0),"show-indicators":_.bool(!0),"slide-index":_.number(0),variant:_.oneOf(x,`default`)},setup(r){let i=p(),a=v(),o=l(r[`slide-index`].value??0),s=null,f=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),_=l(f.length),refreshSlides=()=>{f=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),_.value=f.length},b=c(()=>r.orientation.value!==`vertical`),x=c(()=>r.loop.value!==!1),S=c(()=>r[`show-controls`].value!==!1),C=c(()=>r[`show-indicators`].value!==!1),w=c(()=>x.value||o.value>0),T=c(()=>x.value||o.value<_.value-1),goTo=(t,n=!0)=>{let r=_.value;if(r===0)return;let s=x.value?(t%r+r)%r:Math.max(0,Math.min(t,r-1));s!==o.value&&(o.value=s,i.setAttribute(`slide-index`,String(s)),a(`change`,{index:s}),n&&e(f[s]?.getAttribute(`aria-label`)??`Slide ${s+1} of ${r}`,{document:i.ownerDocument}))},prev=()=>goTo(o.value-1),next=()=>goTo(o.value+1);u(r[`slide-index`],e=>{typeof e==`number`&&e!==o.value&&goTo(e,!1)});let syncSlideVariants=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;f.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};u(c(()=>({orientation:r.orientation.value,variant:r.variant.value})),syncSlideVariants,{immediate:!0});let E={default:syncDefaultSlides,fade:syncDefaultSlides,filmstrip:syncFilmstripSlides,gallery:syncGallerySlides},syncActiveState=()=>{let e=r.variant.value??`default`;E[e](f,o.value)};u(o,syncActiveState,{immediate:!0});let startAutoplay=()=>{s===null&&(s=setInterval(next,r[`autoplay-interval`].value??5e3))},stopAutoplay=()=>{s!==null&&(clearInterval(s),s=null)};u(c(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{stopAutoplay(),e&&startAutoplay()});let handleKeydown=e=>{let t=b.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),prev()):e.key===r?(e.preventDefault(),next()):e.key===`Home`?(e.preventDefault(),goTo(0)):e.key===`End`&&(e.preventDefault(),goTo(_.value-1))},D=n({getItems:()=>Array.from({length:_.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{goTo(e),(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>b.value?`horizontal`:`vertical`,signal:t(h)});d({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${b.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{stopAutoplay()},focusout:()=>{r.autoplay.value&&startAutoplay()},keydown:handleKeydown,pointerenter:()=>{stopAutoplay()},pointerleave:()=>{r.autoplay.value&&startAutoplay()}}}),g(()=>{let e=y(i,{axis:()=>b.value?`x`:`y`,onEnd:({distance:e,reason:t})=>{t!==`release`||Math.abs(e)<48||(e<0?next():prev())},shouldStart:e=>!e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))}),t=i.shadowRoot.querySelector(`slot`),onSlotChange=()=>{refreshSlides(),syncSlideVariants(),syncActiveState()};return t.addEventListener(`slotchange`,onSlotChange),r.autoplay.value&&startAutoplay(),()=>{e.dispose(),stopAutoplay(),t.removeEventListener(`slotchange`,onSlotChange)}});let renderControls=()=>S.value?m`
+import{announce as e}from"./core/announcer.js";import{lifecycleSignal as t}from"./core/ore.js";import{createListControl as n}from"./core/nav.js";import{THEME_COLORS as r}from"./shared/types.js";import{ICON_TAG as i}from"./icon.js";import a from"./content/carousel/carousel.css.js";import{CAROUSEL_SLIDE_TAG as o}from"./content/carousel/carousel-slide.js";import{PROGRESS_TAG as s}from"./progress.js";import{computed as c,signal as l,watch as u}from"@vielzeug/ripple";import{bind as d,define as f,getHost as p,html as m,onCleanup as h,onMounted as g,prop as _,useEmit as v}from"@vielzeug/ore";import{createPanGesture as y}from"@vielzeug/gesture";var b=[`horizontal`,`vertical`],x=[`default`,`fade`,`filmstrip`,`gallery`],S=`ore-carousel`,syncDefaultSlides=(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)})},syncFilmstripSlides=(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`)})},syncGallerySlides=(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)})};f(S,{props:{autoplay:_.bool(!1),"autoplay-interval":_.number(5e3),color:_.oneOf(r),label:_.string(`Carousel`),loop:_.bool(!0),orientation:_.oneOf(b,`horizontal`),"show-controls":_.bool(!0),"show-indicators":_.bool(!0),"slide-index":_.number(0),variant:_.oneOf(x,`default`)},setup(r){let i=p(),a=v(),o=l(r[`slide-index`].value??0),s=null,f=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),_=l(f.length),refreshSlides=()=>{f=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),_.value=f.length},b=c(()=>r.orientation.value!==`vertical`),x=c(()=>r.loop.value!==!1),S=c(()=>r[`show-controls`].value!==!1),C=c(()=>r[`show-indicators`].value!==!1),w=c(()=>x.value||o.value>0),T=c(()=>x.value||o.value<_.value-1),goTo=(t,n=!0)=>{let r=_.value;if(r===0)return;let s=x.value?(t%r+r)%r:Math.max(0,Math.min(t,r-1));s!==o.value&&(o.value=s,i.setAttribute(`slide-index`,String(s)),a(`change`,{index:s}),n&&e(f[s]?.getAttribute(`aria-label`)??`Slide ${s+1} of ${r}`,{document:i.ownerDocument}))},prev=()=>goTo(o.value-1),next=()=>goTo(o.value+1);u(r[`slide-index`],e=>{typeof e==`number`&&e!==o.value&&goTo(e,!1)});let syncSlideVariants=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;f.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};u(c(()=>({orientation:r.orientation.value,variant:r.variant.value})),syncSlideVariants,{immediate:!0});let E={default:syncDefaultSlides,fade:syncDefaultSlides,filmstrip:syncFilmstripSlides,gallery:syncGallerySlides},syncActiveState=()=>{let e=r.variant.value??`default`;E[e](f,o.value)};u(o,syncActiveState,{immediate:!0});let startAutoplay=()=>{s===null&&(s=setInterval(next,r[`autoplay-interval`].value??5e3))},stopAutoplay=()=>{s!==null&&(clearInterval(s),s=null)};u(c(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{stopAutoplay(),e&&startAutoplay()});let handleKeydown=e=>{let t=b.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),prev()):e.key===r?(e.preventDefault(),next()):e.key===`Home`?(e.preventDefault(),goTo(0)):e.key===`End`&&(e.preventDefault(),goTo(_.value-1))},D=n({getItems:()=>Array.from({length:_.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{goTo(e),(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>b.value?`horizontal`:`vertical`,signal:t(h)});d({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{stopAutoplay()},focusout:()=>{r.autoplay.value&&startAutoplay()},keydown:handleKeydown,pointerenter:()=>{stopAutoplay()},pointerleave:()=>{r.autoplay.value&&startAutoplay()}}}),g(()=>{let e=!1,resetClick=()=>{e=!1},handleClick=t=>{e&&t.detail!==0&&(e=!1,t.preventDefault(),t.stopImmediatePropagation())},handleDragStart=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&f.includes(e))&&e.preventDefault()},t=y(i,{axis:()=>b.value?`x`:`y`,onEnd:({distance:t,reason:n})=>{if(n!==`release`){e=!1;return}Math.abs(t)<48||(t<0?next():prev())},onStart:()=>{e=!0},shouldStart:e=>!e.composedPath().some(e=>e instanceof Element&&e.getRootNode()===i.shadowRoot&&e.matches(`.controls, .indicators`))}),n=i.shadowRoot.querySelector(`slot`),onSlotChange=()=>{refreshSlides(),syncSlideVariants(),syncActiveState()};return n.addEventListener(`slotchange`,onSlotChange),i.addEventListener(`pointerdown`,resetClick,!0),i.addEventListener(`click`,handleClick,!0),i.addEventListener(`dragstart`,handleDragStart),r.autoplay.value&&startAutoplay(),()=>{t.dispose(),stopAutoplay(),n.removeEventListener(`slotchange`,onSlotChange),i.removeEventListener(`pointerdown`,resetClick,!0),i.removeEventListener(`click`,handleClick,!0),i.removeEventListener(`dragstart`,handleDragStart)}});let renderControls=()=>S.value?m`
             <div class="controls" part="controls">
               <ore-button
                 class="nav-btn prev-btn"

package/dist/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { THEME_COLORS, type ThemeColor } from '../../types';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { PROGRESS_TAG } from '../../feedback/progress/progress';\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport const CAROUSEL_ORIENTATIONS = ['horizontal', 'vertical'] as const;\nexport type CarouselOrientation = (typeof CAROUSEL_ORIENTATIONS)[number];\nexport const CAROUSEL_VARIANTS = ['default', 'fade', 'filmstrip', 'gallery'] as const;\nexport type CarouselVariant = (typeof CAROUSEL_VARIANTS)[number];\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.oneOf(THEME_COLORS),\n label: prop.string('Carousel'),\n loop: prop.bool(true),\n orientation: prop.oneOf(CAROUSEL_ORIENTATIONS, 'horizontal'),\n 'show-controls': prop.bool(true),\n 'show-indicators': prop.bool(true),\n 'slide-index': prop.number(0),\n variant: prop.oneOf(CAROUSEL_VARIANTS, '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 document: el.ownerDocument,\n });\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 const indicatorNav = createListControl<number>({\n getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n loop: true,\n onNavigate: ({ index }) => {\n goTo(index);\n const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n dot?.focus();\n },\n orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n signal: lifecycleSignal(onCleanup),\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 pointerenter: () => {\n stopAutoplay();\n },\n pointerleave: () => {\n if (props.autoplay.value) startAutoplay();\n },\n },\n });\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n const pan = createPanGesture(el, {\n axis: () => (isHorizontal.value ? 'x' : 'y'),\n onEnd: ({ distance, reason }) => {\n if (reason !== 'release' \|\| Math.abs(distance) < 48) return;\n\n if (distance < 0) next();\n else prev();\n },\n shouldStart: (event) => {\n const path = event.composedPath();\n\n return !path.some(\n (node) =>\n node instanceof HTMLElement &&\n (node.tagName === 'BUTTON' \|\| node.tagName === 'ORE-BUTTON' \|\| node.tagName === 'ORE-PROGRESS'),\n );\n },\n });\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 pan.dispose();\n stopAutoplay();\n slot.removeEventListener('slotchange', onSlotChange);\n };\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\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 @focus=${() => indicatorNav.set(i)}\n @click=${() => goTo(i)}\n @keydown=${(e: KeyboardEvent) => {\n const target = e.currentTarget;\n\n if (target instanceof HTMLElement) {\n const index = Number(target.dataset.index);\n\n if (Number.isInteger(index)) indicatorNav.set(index);\n }\n\n indicatorNav.handleKeydown(e);\n }}>\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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"}
1	+ {"version":3,"file":"carousel.js","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport { THEME_COLORS, type ThemeColor } from '../../types';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { PROGRESS_TAG } from '../../feedback/progress/progress';\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport const CAROUSEL_ORIENTATIONS = ['horizontal', 'vertical'] as const;\nexport type CarouselOrientation = (typeof CAROUSEL_ORIENTATIONS)[number];\nexport const CAROUSEL_VARIANTS = ['default', 'fade', 'filmstrip', 'gallery'] as const;\nexport type CarouselVariant = (typeof CAROUSEL_VARIANTS)[number];\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.oneOf(THEME_COLORS),\n label: prop.string('Carousel'),\n loop: prop.bool(true),\n orientation: prop.oneOf(CAROUSEL_ORIENTATIONS, 'horizontal'),\n 'show-controls': prop.bool(true),\n 'show-indicators': prop.bool(true),\n 'slide-index': prop.number(0),\n variant: prop.oneOf(CAROUSEL_VARIANTS, '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 document: el.ownerDocument,\n });\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 const indicatorNav = createListControl<number>({\n getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n loop: true,\n onNavigate: ({ index }) => {\n goTo(index);\n const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n dot?.focus();\n },\n orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n signal: lifecycleSignal(onCleanup),\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 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 pointerenter: () => {\n stopAutoplay();\n },\n pointerleave: () => {\n if (props.autoplay.value) startAutoplay();\n },\n },\n });\n\n // ── Lifecycle ────────────────────────────────────────────────────────────\n\n onMounted(() => {\n let suppressClick = false;\n const resetClick = (): void => {\n suppressClick = false;\n };\n const handleClick = (event: MouseEvent): void => {\n if (!suppressClick \|\| event.detail === 0) return;\n\n suppressClick = false;\n event.preventDefault();\n event.stopImmediatePropagation();\n };\n const handleDragStart = (event: DragEvent): void => {\n if (event.composedPath().some((node) => node instanceof HTMLElement && slides.includes(node))) {\n event.preventDefault();\n }\n };\n const pan = createPanGesture(el, {\n axis: () => (isHorizontal.value ? 'x' : 'y'),\n onEnd: ({ distance, reason }) => {\n if (reason !== 'release') {\n suppressClick = false;\n return;\n }\n if (Math.abs(distance) < 48) return;\n\n if (distance < 0) next();\n else prev();\n },\n onStart: () => {\n suppressClick = true;\n },\n shouldStart: (event) => {\n const path = event.composedPath();\n\n return !path.some(\n (node) =>\n node instanceof Element && node.getRootNode() === el.shadowRoot && node.matches('.controls, .indicators'),\n );\n },\n });\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 el.addEventListener('pointerdown', resetClick, true);\n el.addEventListener('click', handleClick, true);\n el.addEventListener('dragstart', handleDragStart);\n\n if (props.autoplay.value) {\n startAutoplay();\n }\n\n return () => {\n pan.dispose();\n stopAutoplay();\n slot.removeEventListener('slotchange', onSlotChange);\n el.removeEventListener('pointerdown', resetClick, true);\n el.removeEventListener('click', handleClick, true);\n el.removeEventListener('dragstart', handleDragStart);\n };\n });\n\n // ── Template ─────────────────────────────────────────────────────────────\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 @focus=${() => indicatorNav.set(i)}\n @click=${() => goTo(i)}\n @keydown=${(e: KeyboardEvent) => {\n const target = e.currentTarget;\n\n if (target instanceof HTMLElement) {\n const index = Number(target.dataset.index);\n\n if (Number.isInteger(index)) indicatorNav.set(index);\n }\n\n indicatorNav.handleKeydown(e);\n }}>\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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"}

package/dist/content/carousel/carousel.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--carousel-bg,var(--color-canvas));--_radius:var(--carousel-radius,var(--rounded-xl));--_dot-bg:var(--carousel-dot-bg,var(--color-contrast-300));--_dot-active-bg:var(--carousel-dot-active-bg,var(--color-contrast-700));width:100%;min-height:var(--carousel-min-height,240px);touch-action:auto;background:var(--_bg);border-radius:var(--_radius);outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.track{flex:auto;width:100%;min-height:0;position:relative}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3);margin-left:0}:host>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3);margin-right:0}.nav-btn{pointer-events:auto}:host([variant=gallery]) .track{gap:var(--carousel-gallery-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=gallery][orientation=vertical]) .track{flex-direction:column;align-items:stretch}:host([variant=filmstrip]) .track{gap:var(--carousel-filmstrip-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=filmstrip][orientation=vertical]) .track{flex-direction:column;width:100%}:host([orientation=vertical]){--_slide-translate-before:translateY(-100%);--_slide-translate-after:translateY(100%)}:host([orientation=vertical]) .indicators{top:50%;bottom:auto;inset-inline:var(--size-3) auto;width:auto;height:max-content;padding-block:var(--size-6) var(--size-2);padding-inline:var(--size-1-5);border-radius:var(--rounded-full);flex-direction:column;transform:translate(0)translateY(-50%)}:host([orientation=vertical]) .controls{flex-direction:column;margin-top:auto}:host([orientation=vertical]) .controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([orientation=vertical]) .controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}:host([orientation=vertical])>.controls{bottom:var(--size-3);margin-top:0}:host([orientation=vertical])>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3)}:host([orientation=vertical])>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3)}:host([orientation=vertical]) .indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2)}:host([orientation=vertical]) .indicator-active{width:var(--size-1-5);height:var(--size-8)}.indicators{gap:var(--size-1-5);width:max-content;padding:var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);pointer-events:none;background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);flex-direction:row;align-items:center;display:flex;position:absolute;left:50%;right:50%;transform:translate(-50%)}.indicator{pointer-events:auto;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0;padding:0;display:block}.indicator>ore-progress{pointer-events:none;width:100%;height:100%;display:block}.indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2);border-radius:var(--rounded-full);overflow:hidden}.indicator-active{--progress-track-bg:color-mix(in oklch, var(--_dot-bg) 60%, transparent);width:var(--size-8)}.indicator:focus-visible{outline:var(--border) solid currentcolor;outline-offset:2px}.indicator:hover{opacity:.8}.indicator ore-progress::part(fill){transition:width var(--transition-normal)}.indicator-active ore-progress::part(fill){animation-name:var(--carousel-animation-name,none);animation-duration:calc(var(--carousel-timeout,4000) * 1ms);animation-timing-function:var(--ease-linear);animation-fill-mode:forwards}}@media (prefers-reduced-motion:reduce){:host{--carousel-transition-duration:0s}}@keyframes carousel-fill{0%{width:0%}to{width:100%}}@keyframes carousel-fill-v{0%{height:0%}to{height:100%}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--carousel-bg,var(--color-canvas));--_radius:var(--carousel-radius,var(--rounded-xl));--_dot-bg:var(--carousel-dot-bg,var(--color-contrast-300));--_dot-active-bg:var(--carousel-dot-active-bg,var(--color-contrast-700));width:100%;min-height:var(--carousel-min-height,240px);touch-action:pan-y pinch-zoom;background:var(--_bg);border-radius:var(--_radius);outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.track{flex:auto;width:100%;min-height:0;position:relative}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3);margin-left:0}:host>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3);margin-right:0}.nav-btn{pointer-events:auto}:host([variant=gallery]) .track{gap:var(--carousel-gallery-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=gallery][orientation=vertical]) .track{flex-direction:column;align-items:stretch}:host([variant=filmstrip]) .track{gap:var(--carousel-filmstrip-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=filmstrip][orientation=vertical]) .track{flex-direction:column;width:100%}:host([orientation=vertical]){--_slide-translate-before:translateY(-100%);--_slide-translate-after:translateY(100%);touch-action:pan-x pinch-zoom}:host([orientation=vertical]) .indicators{top:50%;bottom:auto;inset-inline:var(--size-3) auto;width:auto;height:max-content;padding-block:var(--size-6) var(--size-2);padding-inline:var(--size-1-5);border-radius:var(--rounded-full);flex-direction:column;transform:translate(0)translateY(-50%)}:host([orientation=vertical]) .controls{flex-direction:column;margin-top:auto}:host([orientation=vertical]) .controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([orientation=vertical]) .controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}:host([orientation=vertical])>.controls{bottom:var(--size-3);margin-top:0}:host([orientation=vertical])>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3)}:host([orientation=vertical])>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3)}:host([orientation=vertical]) .indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2)}:host([orientation=vertical]) .indicator-active{width:var(--size-1-5);height:var(--size-8)}.indicators{gap:var(--size-1-5);width:max-content;padding:var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);pointer-events:none;background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);flex-direction:row;align-items:center;display:flex;position:absolute;left:50%;right:50%;transform:translate(-50%)}.indicator{pointer-events:auto;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0;padding:0;display:block}.indicator>ore-progress{pointer-events:none;width:100%;height:100%;display:block}.indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2);border-radius:var(--rounded-full);overflow:hidden}.indicator-active{--progress-track-bg:color-mix(in oklch, var(--_dot-bg) 60%, transparent);width:var(--size-8)}.indicator:focus-visible{outline:var(--border) solid currentcolor;outline-offset:2px}.indicator:hover{opacity:.8}.indicator ore-progress::part(fill){transition:width var(--transition-normal)}.indicator-active ore-progress::part(fill){animation-name:var(--carousel-animation-name,none);animation-duration:calc(var(--carousel-timeout,4000) * 1ms);animation-timing-function:var(--ease-linear);animation-fill-mode:forwards}}@media (prefers-reduced-motion:reduce){:host{--carousel-transition-duration:0s}}@keyframes carousel-fill{0%{width:0%}to{width:100%}}@keyframes carousel-fill-v{0%{height:0%}to{height:100%}}`;exports.default=e;
 //# sourceMappingURL=carousel.css.cjs.map

package/dist/content/carousel/carousel.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.css.cjs","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--carousel-bg, var(--color-canvas));\n --_radius: var(--carousel-radius, var(--rounded-xl));\n --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: var(--carousel-min-height, 240px);\n overflow: hidden;\n touch-action: ~~auto~~;\n outline: none;\n background: var(--_bg);\n border-radius: var(--_radius);\n }\n\n /* ── Track ──────────────────────────────────────────────────────── /\n\n .track {\n position: relative;\n flex: 1 1 auto;\n width: 100%;\n min-height: 0;\n }\n\n / ── Controls (prev / next) ────────────────────────────────────────────── /\n\n / Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. /\n\n .controls {\n display: flex;\n gap: var(--size-0-5);\n align-items: center;\n margin-inline-start: auto;\n pointer-events: none;\n }\n\n / Controls rendered standalone (no indicators bar): needs own positioning + backdrop. /\n :host > .controls {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n padding: var(--size-1-5) var(--size-2);\n margin-inline-start: 0;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n }\n\n .nav-btn {\n pointer-events: auto;\n }\n\n / ── Variant-specific track styles ────────────────────────────────────── /\n\n / Gallery: flex row, fills host, shows active + two thumbnails /\n :host([variant='gallery']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-gallery-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='gallery'][orientation='vertical']) .track {\n flex-direction: column;\n align-items: stretch;\n }\n\n / Filmstrip: flex row/column with absolute positioning to fill host /\n :host([variant='filmstrip']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-filmstrip-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='filmstrip'][orientation='vertical']) .track {\n flex-direction: column;\n width: 100%;\n }\n\n / ── Vertical orientation ──────────────────────────────────────────────── /\n\n :host([orientation='vertical']) {\n --_slide-translate-before: translateY(-100%);\n --_slide-translate-after: translateY(100%);\n }\n\n :host([orientation='vertical']) .indicators {\n inset-block: 50% auto;\n inset-inline: var(--size-3) auto;\n flex-direction: column;\n width: auto;\n height: max-content;\n padding-block: var(--size-6) var(--size-2);\n padding-inline: var(--size-1-5);\n border-radius: var(--rounded-full);\n transform: translateX(0) translateY(-50%);\n }\n\n :host([orientation='vertical']) .controls {\n flex-direction: column;\n margin-block-start: auto;\n margin-inline-start: 0;\n }\n\n :host([orientation='vertical']) > .controls {\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n margin-block-start: 0;\n }\n\n :host([orientation='vertical']) .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n }\n\n :host([orientation='vertical']) .indicator-active {\n width: var(--size-1-5);\n height: var(--size-8);\n }\n\n / animation properties are inherited from .indicator-active ore-progress::part(fill) below /\n\n / ── Bottom nav bar: indicators + controls ───────────────────────────── /\n\n / Floats above the bottom edge, shrinks to content width, centered.\n A frosted backdrop keeps it legible over any image. /\n\n .indicators {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline: 50%;\n display: flex;\n flex-direction: row;\n gap: var(--size-1-5);\n align-items: center;\n width: max-content;\n padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n pointer-events: none;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n transform: translateX(-50%);\n }\n\n .indicator {\n display: block;\n flex-shrink: 0;\n padding: 0;\n pointer-events: auto;\n cursor: pointer;\n background: none;\n border: none;\n transition: opacity var(--transition-fast);\n }\n\n .indicator > ore-progress {\n display: block;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n / Inactive indicator: small circle /\n .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n overflow: hidden;\n border-radius: var(--rounded-full);\n }\n\n / Active indicator: wider pill (progress bar) /\n .indicator-active {\n --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n width: var(--size-8);\n }\n\n .indicator:focus-visible {\n outline: var(--border) solid currentcolor;\n outline-offset: 2px;\n }\n\n .indicator:hover {\n opacity: 0.8;\n }\n\n .indicator ore-progress::part(fill) {\n transition: width var(--transition-normal);\n }\n\n .indicator-active ore-progress::part(fill) {\n animation-name: var(--carousel-animation-name, none);\n animation-duration: calc(var(--carousel-timeout, 4000) 1ms);\n animation-timing-function: var(--ease-linear);\n animation-fill-mode: forwards;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n --carousel-transition-duration: 0s;\n }\n}\n\n@keyframes carousel-fill {\n from {\n width: 0%;\n }\n\n to {\n width: 100%;\n }\n}\n\n@keyframes carousel-fill-v {\n from {\n height: 0%;\n }\n\n to {\n height: 100%;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"carousel.css.cjs","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--carousel-bg, var(--color-canvas));\n --_radius: var(--carousel-radius, var(--rounded-xl));\n --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: var(--carousel-min-height, 240px);\n overflow: hidden;\n touch-action: pan-y pinch-zoom;\n outline: none;\n background: var(--_bg);\n border-radius: var(--_radius);\n }\n\n /* ── Track ──────────────────────────────────────────────────────── /\n\n .track {\n position: relative;\n flex: 1 1 auto;\n width: 100%;\n min-height: 0;\n }\n\n / ── Controls (prev / next) ────────────────────────────────────────────── /\n\n / Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. /\n\n .controls {\n display: flex;\n gap: var(--size-0-5);\n align-items: center;\n margin-inline-start: auto;\n pointer-events: none;\n }\n\n / Controls rendered standalone (no indicators bar): needs own positioning + backdrop. /\n :host > .controls {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n padding: var(--size-1-5) var(--size-2);\n margin-inline-start: 0;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n }\n\n .nav-btn {\n pointer-events: auto;\n }\n\n / ── Variant-specific track styles ────────────────────────────────────── /\n\n / Gallery: flex row, fills host, shows active + two thumbnails /\n :host([variant='gallery']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-gallery-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='gallery'][orientation='vertical']) .track {\n flex-direction: column;\n align-items: stretch;\n }\n\n / Filmstrip: flex row/column with absolute positioning to fill host /\n :host([variant='filmstrip']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-filmstrip-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='filmstrip'][orientation='vertical']) .track {\n flex-direction: column;\n width: 100%;\n }\n\n / ── Vertical orientation ──────────────────────────────────────────────── /\n\n :host([orientation='vertical']) {\n --_slide-translate-before: translateY(-100%);\n --_slide-translate-after: translateY(100%);\n touch-action: pan-x pinch-zoom;\n }\n\n :host([orientation='vertical']) .indicators {\n inset-block: 50% auto;\n inset-inline: var(--size-3) auto;\n flex-direction: column;\n width: auto;\n height: max-content;\n padding-block: var(--size-6) var(--size-2);\n padding-inline: var(--size-1-5);\n border-radius: var(--rounded-full);\n transform: translateX(0) translateY(-50%);\n }\n\n :host([orientation='vertical']) .controls {\n flex-direction: column;\n margin-block-start: auto;\n margin-inline-start: 0;\n }\n\n :host([orientation='vertical']) > .controls {\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n margin-block-start: 0;\n }\n\n :host([orientation='vertical']) .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n }\n\n :host([orientation='vertical']) .indicator-active {\n width: var(--size-1-5);\n height: var(--size-8);\n }\n\n / animation properties are inherited from .indicator-active ore-progress::part(fill) below /\n\n / ── Bottom nav bar: indicators + controls ───────────────────────────── /\n\n / Floats above the bottom edge, shrinks to content width, centered.\n A frosted backdrop keeps it legible over any image. /\n\n .indicators {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline: 50%;\n display: flex;\n flex-direction: row;\n gap: var(--size-1-5);\n align-items: center;\n width: max-content;\n padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n pointer-events: none;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n transform: translateX(-50%);\n }\n\n .indicator {\n display: block;\n flex-shrink: 0;\n padding: 0;\n pointer-events: auto;\n cursor: pointer;\n background: none;\n border: none;\n transition: opacity var(--transition-fast);\n }\n\n .indicator > ore-progress {\n display: block;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n / Inactive indicator: small circle /\n .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n overflow: hidden;\n border-radius: var(--rounded-full);\n }\n\n / Active indicator: wider pill (progress bar) /\n .indicator-active {\n --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n width: var(--size-8);\n }\n\n .indicator:focus-visible {\n outline: var(--border) solid currentcolor;\n outline-offset: 2px;\n }\n\n .indicator:hover {\n opacity: 0.8;\n }\n\n .indicator ore-progress::part(fill) {\n transition: width var(--transition-normal);\n }\n\n .indicator-active ore-progress::part(fill) {\n animation-name: var(--carousel-animation-name, none);\n animation-duration: calc(var(--carousel-timeout, 4000) 1ms);\n animation-timing-function: var(--ease-linear);\n animation-fill-mode: forwards;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n --carousel-transition-duration: 0s;\n }\n}\n\n@keyframes carousel-fill {\n from {\n width: 0%;\n }\n\n to {\n width: 100%;\n }\n}\n\n@keyframes carousel-fill-v {\n from {\n height: 0%;\n }\n\n to {\n height: 100%;\n }\n}\n"],"mappings":""}

package/dist/content/carousel/carousel.css.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--carousel-bg,var(--color-canvas));--_radius:var(--carousel-radius,var(--rounded-xl));--_dot-bg:var(--carousel-dot-bg,var(--color-contrast-300));--_dot-active-bg:var(--carousel-dot-active-bg,var(--color-contrast-700));width:100%;min-height:var(--carousel-min-height,240px);touch-action:auto;background:var(--_bg);border-radius:var(--_radius);outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.track{flex:auto;width:100%;min-height:0;position:relative}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3);margin-left:0}:host>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3);margin-right:0}.nav-btn{pointer-events:auto}:host([variant=gallery]) .track{gap:var(--carousel-gallery-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=gallery][orientation=vertical]) .track{flex-direction:column;align-items:stretch}:host([variant=filmstrip]) .track{gap:var(--carousel-filmstrip-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=filmstrip][orientation=vertical]) .track{flex-direction:column;width:100%}:host([orientation=vertical]){--_slide-translate-before:translateY(-100%);--_slide-translate-after:translateY(100%)}:host([orientation=vertical]) .indicators{top:50%;bottom:auto;inset-inline:var(--size-3) auto;width:auto;height:max-content;padding-block:var(--size-6) var(--size-2);padding-inline:var(--size-1-5);border-radius:var(--rounded-full);flex-direction:column;transform:translate(0)translateY(-50%)}:host([orientation=vertical]) .controls{flex-direction:column;margin-top:auto}:host([orientation=vertical]) .controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([orientation=vertical]) .controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}:host([orientation=vertical])>.controls{bottom:var(--size-3);margin-top:0}:host([orientation=vertical])>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3)}:host([orientation=vertical])>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3)}:host([orientation=vertical]) .indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2)}:host([orientation=vertical]) .indicator-active{width:var(--size-1-5);height:var(--size-8)}.indicators{gap:var(--size-1-5);width:max-content;padding:var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);pointer-events:none;background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);flex-direction:row;align-items:center;display:flex;position:absolute;left:50%;right:50%;transform:translate(-50%)}.indicator{pointer-events:auto;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0;padding:0;display:block}.indicator>ore-progress{pointer-events:none;width:100%;height:100%;display:block}.indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2);border-radius:var(--rounded-full);overflow:hidden}.indicator-active{--progress-track-bg:color-mix(in oklch, var(--_dot-bg) 60%, transparent);width:var(--size-8)}.indicator:focus-visible{outline:var(--border) solid currentcolor;outline-offset:2px}.indicator:hover{opacity:.8}.indicator ore-progress::part(fill){transition:width var(--transition-normal)}.indicator-active ore-progress::part(fill){animation-name:var(--carousel-animation-name,none);animation-duration:calc(var(--carousel-timeout,4000) * 1ms);animation-timing-function:var(--ease-linear);animation-fill-mode:forwards}}@media (prefers-reduced-motion:reduce){:host{--carousel-transition-duration:0s}}@keyframes carousel-fill{0%{width:0%}to{width:100%}}@keyframes carousel-fill-v{0%{height:0%}to{height:100%}}`;export{e as default};
+var e=`@layer refine.base{:host{--_bg:var(--carousel-bg,var(--color-canvas));--_radius:var(--carousel-radius,var(--rounded-xl));--_dot-bg:var(--carousel-dot-bg,var(--color-contrast-300));--_dot-active-bg:var(--carousel-dot-active-bg,var(--color-contrast-700));width:100%;min-height:var(--carousel-min-height,240px);touch-action:pan-y pinch-zoom;background:var(--_bg);border-radius:var(--_radius);outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.track{flex:auto;width:100%;min-height:0;position:relative}.controls{gap:var(--size-0-5);pointer-events:none;align-items:center;display:flex}.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host>.controls{padding:var(--size-1-5) var(--size-2);background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);position:absolute}:host>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3);margin-left:0}:host>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3);margin-right:0}.nav-btn{pointer-events:auto}:host([variant=gallery]) .track{gap:var(--carousel-gallery-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=gallery][orientation=vertical]) .track{flex-direction:column;align-items:stretch}:host([variant=filmstrip]) .track{gap:var(--carousel-filmstrip-gap,var(--size-2));flex-direction:row;align-items:stretch;display:flex;position:absolute;inset:0;overflow:hidden}:host([variant=filmstrip][orientation=vertical]) .track{flex-direction:column;width:100%}:host([orientation=vertical]){--_slide-translate-before:translateY(-100%);--_slide-translate-after:translateY(100%);touch-action:pan-x pinch-zoom}:host([orientation=vertical]) .indicators{top:50%;bottom:auto;inset-inline:var(--size-3) auto;width:auto;height:max-content;padding-block:var(--size-6) var(--size-2);padding-inline:var(--size-1-5);border-radius:var(--rounded-full);flex-direction:column;transform:translate(0)translateY(-50%)}:host([orientation=vertical]) .controls{flex-direction:column;margin-top:auto}:host([orientation=vertical]) .controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([orientation=vertical]) .controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}:host([orientation=vertical])>.controls{bottom:var(--size-3);margin-top:0}:host([orientation=vertical])>.controls:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--size-3)}:host([orientation=vertical])>.controls:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-3)}:host([orientation=vertical]) .indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2)}:host([orientation=vertical]) .indicator-active{width:var(--size-1-5);height:var(--size-8)}.indicators{gap:var(--size-1-5);width:max-content;padding:var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);pointer-events:none;background:color-mix(in oklch, var(--color-canvas) 55%, transparent);border-radius:var(--rounded-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);bottom:var(--size-3);flex-direction:row;align-items:center;display:flex;position:absolute;left:50%;right:50%;transform:translate(-50%)}.indicator{pointer-events:auto;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0;padding:0;display:block}.indicator>ore-progress{pointer-events:none;width:100%;height:100%;display:block}.indicator:not(.indicator-active){width:var(--size-2);height:var(--size-2);border-radius:var(--rounded-full);overflow:hidden}.indicator-active{--progress-track-bg:color-mix(in oklch, var(--_dot-bg) 60%, transparent);width:var(--size-8)}.indicator:focus-visible{outline:var(--border) solid currentcolor;outline-offset:2px}.indicator:hover{opacity:.8}.indicator ore-progress::part(fill){transition:width var(--transition-normal)}.indicator-active ore-progress::part(fill){animation-name:var(--carousel-animation-name,none);animation-duration:calc(var(--carousel-timeout,4000) * 1ms);animation-timing-function:var(--ease-linear);animation-fill-mode:forwards}}@media (prefers-reduced-motion:reduce){:host{--carousel-transition-duration:0s}}@keyframes carousel-fill{0%{width:0%}to{width:100%}}@keyframes carousel-fill-v{0%{height:0%}to{height:100%}}`;export{e as default};
 //# sourceMappingURL=carousel.css.js.map

package/dist/content/carousel/carousel.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.css.js","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--carousel-bg, var(--color-canvas));\n --_radius: var(--carousel-radius, var(--rounded-xl));\n --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: var(--carousel-min-height, 240px);\n overflow: hidden;\n touch-action: ~~auto~~;\n outline: none;\n background: var(--_bg);\n border-radius: var(--_radius);\n }\n\n /* ── Track ──────────────────────────────────────────────────────── /\n\n .track {\n position: relative;\n flex: 1 1 auto;\n width: 100%;\n min-height: 0;\n }\n\n / ── Controls (prev / next) ────────────────────────────────────────────── /\n\n / Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. /\n\n .controls {\n display: flex;\n gap: var(--size-0-5);\n align-items: center;\n margin-inline-start: auto;\n pointer-events: none;\n }\n\n / Controls rendered standalone (no indicators bar): needs own positioning + backdrop. /\n :host > .controls {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n padding: var(--size-1-5) var(--size-2);\n margin-inline-start: 0;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n }\n\n .nav-btn {\n pointer-events: auto;\n }\n\n / ── Variant-specific track styles ────────────────────────────────────── /\n\n / Gallery: flex row, fills host, shows active + two thumbnails /\n :host([variant='gallery']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-gallery-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='gallery'][orientation='vertical']) .track {\n flex-direction: column;\n align-items: stretch;\n }\n\n / Filmstrip: flex row/column with absolute positioning to fill host /\n :host([variant='filmstrip']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-filmstrip-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='filmstrip'][orientation='vertical']) .track {\n flex-direction: column;\n width: 100%;\n }\n\n / ── Vertical orientation ──────────────────────────────────────────────── /\n\n :host([orientation='vertical']) {\n --_slide-translate-before: translateY(-100%);\n --_slide-translate-after: translateY(100%);\n }\n\n :host([orientation='vertical']) .indicators {\n inset-block: 50% auto;\n inset-inline: var(--size-3) auto;\n flex-direction: column;\n width: auto;\n height: max-content;\n padding-block: var(--size-6) var(--size-2);\n padding-inline: var(--size-1-5);\n border-radius: var(--rounded-full);\n transform: translateX(0) translateY(-50%);\n }\n\n :host([orientation='vertical']) .controls {\n flex-direction: column;\n margin-block-start: auto;\n margin-inline-start: 0;\n }\n\n :host([orientation='vertical']) > .controls {\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n margin-block-start: 0;\n }\n\n :host([orientation='vertical']) .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n }\n\n :host([orientation='vertical']) .indicator-active {\n width: var(--size-1-5);\n height: var(--size-8);\n }\n\n / animation properties are inherited from .indicator-active ore-progress::part(fill) below /\n\n / ── Bottom nav bar: indicators + controls ───────────────────────────── /\n\n / Floats above the bottom edge, shrinks to content width, centered.\n A frosted backdrop keeps it legible over any image. /\n\n .indicators {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline: 50%;\n display: flex;\n flex-direction: row;\n gap: var(--size-1-5);\n align-items: center;\n width: max-content;\n padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n pointer-events: none;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n transform: translateX(-50%);\n }\n\n .indicator {\n display: block;\n flex-shrink: 0;\n padding: 0;\n pointer-events: auto;\n cursor: pointer;\n background: none;\n border: none;\n transition: opacity var(--transition-fast);\n }\n\n .indicator > ore-progress {\n display: block;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n / Inactive indicator: small circle /\n .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n overflow: hidden;\n border-radius: var(--rounded-full);\n }\n\n / Active indicator: wider pill (progress bar) /\n .indicator-active {\n --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n width: var(--size-8);\n }\n\n .indicator:focus-visible {\n outline: var(--border) solid currentcolor;\n outline-offset: 2px;\n }\n\n .indicator:hover {\n opacity: 0.8;\n }\n\n .indicator ore-progress::part(fill) {\n transition: width var(--transition-normal);\n }\n\n .indicator-active ore-progress::part(fill) {\n animation-name: var(--carousel-animation-name, none);\n animation-duration: calc(var(--carousel-timeout, 4000) 1ms);\n animation-timing-function: var(--ease-linear);\n animation-fill-mode: forwards;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n --carousel-transition-duration: 0s;\n }\n}\n\n@keyframes carousel-fill {\n from {\n width: 0%;\n }\n\n to {\n width: 100%;\n }\n}\n\n@keyframes carousel-fill-v {\n from {\n height: 0%;\n }\n\n to {\n height: 100%;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"carousel.css.js","names":[],"sources":["../../../src/content/carousel/carousel.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--carousel-bg, var(--color-canvas));\n --_radius: var(--carousel-radius, var(--rounded-xl));\n --_dot-bg: var(--carousel-dot-bg, var(--color-contrast-300));\n --_dot-active-bg: var(--carousel-dot-active-bg, var(--color-contrast-700));\n\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: var(--carousel-min-height, 240px);\n overflow: hidden;\n touch-action: pan-y pinch-zoom;\n outline: none;\n background: var(--_bg);\n border-radius: var(--_radius);\n }\n\n /* ── Track ──────────────────────────────────────────────────────── /\n\n .track {\n position: relative;\n flex: 1 1 auto;\n width: 100%;\n min-height: 0;\n }\n\n / ── Controls (prev / next) ────────────────────────────────────────────── /\n\n / Controls live inside the bottom nav bar, right-aligned via margin-inline-start: auto. /\n\n .controls {\n display: flex;\n gap: var(--size-0-5);\n align-items: center;\n margin-inline-start: auto;\n pointer-events: none;\n }\n\n / Controls rendered standalone (no indicators bar): needs own positioning + backdrop. /\n :host > .controls {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n padding: var(--size-1-5) var(--size-2);\n margin-inline-start: 0;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n }\n\n .nav-btn {\n pointer-events: auto;\n }\n\n / ── Variant-specific track styles ────────────────────────────────────── /\n\n / Gallery: flex row, fills host, shows active + two thumbnails /\n :host([variant='gallery']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-gallery-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='gallery'][orientation='vertical']) .track {\n flex-direction: column;\n align-items: stretch;\n }\n\n / Filmstrip: flex row/column with absolute positioning to fill host /\n :host([variant='filmstrip']) .track {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: row;\n gap: var(--carousel-filmstrip-gap, var(--size-2));\n align-items: stretch;\n overflow: hidden;\n }\n\n :host([variant='filmstrip'][orientation='vertical']) .track {\n flex-direction: column;\n width: 100%;\n }\n\n / ── Vertical orientation ──────────────────────────────────────────────── /\n\n :host([orientation='vertical']) {\n --_slide-translate-before: translateY(-100%);\n --_slide-translate-after: translateY(100%);\n touch-action: pan-x pinch-zoom;\n }\n\n :host([orientation='vertical']) .indicators {\n inset-block: 50% auto;\n inset-inline: var(--size-3) auto;\n flex-direction: column;\n width: auto;\n height: max-content;\n padding-block: var(--size-6) var(--size-2);\n padding-inline: var(--size-1-5);\n border-radius: var(--rounded-full);\n transform: translateX(0) translateY(-50%);\n }\n\n :host([orientation='vertical']) .controls {\n flex-direction: column;\n margin-block-start: auto;\n margin-inline-start: 0;\n }\n\n :host([orientation='vertical']) > .controls {\n inset-block-end: var(--size-3);\n inset-inline-end: var(--size-3);\n margin-block-start: 0;\n }\n\n :host([orientation='vertical']) .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n }\n\n :host([orientation='vertical']) .indicator-active {\n width: var(--size-1-5);\n height: var(--size-8);\n }\n\n / animation properties are inherited from .indicator-active ore-progress::part(fill) below /\n\n / ── Bottom nav bar: indicators + controls ───────────────────────────── /\n\n / Floats above the bottom edge, shrinks to content width, centered.\n A frosted backdrop keeps it legible over any image. /\n\n .indicators {\n position: absolute;\n inset-block-end: var(--size-3);\n inset-inline: 50%;\n display: flex;\n flex-direction: row;\n gap: var(--size-1-5);\n align-items: center;\n width: max-content;\n padding: var(--size-1-5) var(--size-2) var(--size-1-5) var(--size-6);\n pointer-events: none;\n background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n border-radius: var(--rounded-full);\n backdrop-filter: blur(6px);\n transform: translateX(-50%);\n }\n\n .indicator {\n display: block;\n flex-shrink: 0;\n padding: 0;\n pointer-events: auto;\n cursor: pointer;\n background: none;\n border: none;\n transition: opacity var(--transition-fast);\n }\n\n .indicator > ore-progress {\n display: block;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n / Inactive indicator: small circle /\n .indicator:not(.indicator-active) {\n width: var(--size-2);\n height: var(--size-2);\n overflow: hidden;\n border-radius: var(--rounded-full);\n }\n\n / Active indicator: wider pill (progress bar) /\n .indicator-active {\n --progress-track-bg: color-mix(in oklch, var(--_dot-bg) 60%, transparent);\n width: var(--size-8);\n }\n\n .indicator:focus-visible {\n outline: var(--border) solid currentcolor;\n outline-offset: 2px;\n }\n\n .indicator:hover {\n opacity: 0.8;\n }\n\n .indicator ore-progress::part(fill) {\n transition: width var(--transition-normal);\n }\n\n .indicator-active ore-progress::part(fill) {\n animation-name: var(--carousel-animation-name, none);\n animation-duration: calc(var(--carousel-timeout, 4000) 1ms);\n animation-timing-function: var(--ease-linear);\n animation-fill-mode: forwards;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n --carousel-transition-duration: 0s;\n }\n}\n\n@keyframes carousel-fill {\n from {\n width: 0%;\n }\n\n to {\n width: 100%;\n }\n}\n\n@keyframes carousel-fill-v {\n from {\n height: 0%;\n }\n\n to {\n height: 100%;\n }\n}\n"],"mappings":""}