@vielzeug/refine 26.10.10 → 26.10.12

package/README.md

@@ -62,6 +62,8 @@ import '@vielzeug/refine/time-picker';
 - Form-associated controls integrate with native `FormData`, supported required validation, and form reset.
 - Enumerated component properties validate values against their documented options.
 - Import components and global styles through explicit package subpaths.
+- `registerIcons` from `@vielzeug/refine/icons` accepts library-neutral SVG definitions; `@vielzeug/refine/icons/iconify` adapts local Heroicons, Tabler, and Material Design Icons data, while `@vielzeug/refine/icons/lucide` adapts selected Lucide icons. Core and structural adapters need no Lucide install; declare the optional `lucide` peer yourself when using its data or `@vielzeug/refine/icons/lucide/all` (`pnpm add lucide@^1.48.0`). See the [icon reference](https://vielzeug.dev/refine/components/icon).
+- `heroiconsIcons`, `tablerIcons`, and `mdiIcons` from `@vielzeug/refine/icons/heroicons`, `/tabler`, and `/mdi` convert caller-named individual `@iconify-icons/*` data: `registerIcons(heroiconsIcons({ Search, Home }))`. They preserve your app keys without bundling collections or accepting framework components.
 
 ## Documentation
 

package/THIRD_PARTY_NOTICES

@@ -0,0 +1,116 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+Heroicons test fixture license
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+Tabler Icons test fixture license
+Fixture data: https://github.com/iconify/icon-sets/blob/master/json/tabler.json
+Includes home, pause, skip-back, and skip-forward; provider class metadata is normalized during conversion.
+MIT License
+
+Copyright (c) 2020-2026 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+Material Design Icons test fixture license
+Pictogrammers Free License
+--------------------------
+
+This icon collection is released as free, open source, and GPL friendly by
+the [Pictogrammers](http://pictogrammers.com/) icon group. You may use it
+for commercial projects, open source projects, or anything really.
+
+# Icons: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0)
+Some of the icons are redistributed under the Apache 2.0 license. All other
+icons are either redistributed under their respective licenses or are
+distributed under the Apache 2.0 license.
+
+# Fonts: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0)
+All web and desktop fonts are distributed under the Apache 2.0 license. Web
+and desktop fonts contain some icons that are redistributed under the Apache
+2.0 license. All other icons are either redistributed under their respective
+licenses or are distributed under the Apache 2.0 license.
+
+# Code: MIT (https://opensource.org/licenses/MIT)
+The MIT license applies to all non-font and non-icon files.

package/dist/carousel.cjs

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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