@skdx/web-components 0.26.0

package/dist/carousel/Carousel.d.ts

@@ -0,0 +1,123 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * `<skdx-carousel>` — the Web Components implementation of the shared
+ * Carousel contract (see `@skdx/shared`'s `carouselContract`):
+ * `role="region"` with `aria-roledescription="carousel"` and
+ * `data-orientation`, owning the index of the first visible slide. Slide
+ * order comes from `<skdx-carousel-item>` mount order
+ * (registered/unregistered via `closest('skdx-carousel')`), not an explicit
+ * per-item index — the `slides-per-page` slides starting at `value` render,
+ * the rest are `hidden`, and there's no track/transform-based sliding.
+ * Supports Arrow Left/Right (or Up/Down when `orientation="vertical"`) when
+ * the root is focused, in addition to
+ * `<skdx-carousel-previous>`/`<skdx-carousel-next>`; each step moves
+ * `slides-per-move` slides.
+ *
+ * `autoplay` is off by default and, when on, pauses on hover, on focus, and
+ * while the page is hidden, and never starts under `prefers-reduced-motion`
+ * (WCAG 2.2.2) — pair it with an `<skdx-carousel-play-pause>` control.
+ *
+ * `value`/`default-value` mirror `<skdx-dialog>`'s open/controlled
+ * convention: `value` is the single source of truth; a consumer that wants
+ * controlled behavior listens for `value-change` and writes the property
+ * back.
+ *
+ * @fires value-change - Fires with the new active index whenever the slide changes.
+ *
+ * @example
+ * ```html
+ * <skdx-carousel loop>
+ *   <skdx-carousel-content>
+ *     <skdx-carousel-item>Slide 1</skdx-carousel-item>
+ *     <skdx-carousel-item>Slide 2</skdx-carousel-item>
+ *     <skdx-carousel-item>Slide 3</skdx-carousel-item>
+ *   </skdx-carousel-content>
+ *   <skdx-carousel-previous>Prev</skdx-carousel-previous>
+ *   <skdx-carousel-next>Next</skdx-carousel-next>
+ * </skdx-carousel>
+ * ```
+ */
+export declare class SkdxCarousel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Index of the active slide, for controlled usage. Pair with `value-change`.
+     * @default undefined
+     */
+    value?: number;
+    /** Initial active slide index, for uncontrolled usage. @default 0 */
+    defaultValue: number;
+    /** Layout axis for slide navigation, exposed as `data-orientation`. @default 'horizontal' */
+    orientation: 'horizontal' | 'vertical';
+    /** Whether stepping past the last/first slide wraps around. @default false */
+    loop: boolean;
+    /** How many slides are visible at once. @default 1 */
+    slidesPerPage: number;
+    /** How many slides one Previous/Next/Arrow step moves. @default 1 */
+    slidesPerMove: number;
+    /**
+     * Gap between slides, published as the `--skdx-carousel-spacing` custom
+     * property on the root. A number is treated as pixels; a string is used
+     * verbatim. @default undefined — the property is not set at all.
+     */
+    spacing?: string | number;
+    /** Advances slides automatically on a timer, pausing on hover and focus. @default false */
+    autoplay: boolean;
+    /** Milliseconds to wait between automatic slide advances. @default 5000 */
+    autoplayInterval: number;
+    private internalValue;
+    itemIds: string[];
+    private _playing;
+    private _hovered;
+    private _focused;
+    private _pageHidden;
+    private _timer;
+    /** The current active index (controlled `value` if set, else internal state). @internal */
+    get currentValue(): number;
+    /** Normalized `slidesPerPage` — at least one whole slide. @internal */
+    get pageSize(): number;
+    /** Normalized `slidesPerMove` — at least one whole slide. @internal */
+    get moveSize(): number;
+    /** The last reachable index: the last page stays full rather than scrolling past the final slide. */
+    get maxIndex(): number;
+    /** Whether autoplay is switched on — the user's setting, not the possibly-suspended timer. @default false */
+    get playing(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private syncSpacing;
+    /**
+     * Publishes `data-state` from the autoplay *setting* — hovering the carousel
+     * to reach the play/pause button must not make it read as already paused, or
+     * pressing it could never pause anything — and restarts the timer, which runs
+     * only while nothing suspends it and there is somewhere left to scroll.
+     */
+    private syncPlayState;
+    /** Switches autoplay on or off. Works even when `autoplay` is false, so the same control serves as a play button. */
+    setPlaying(playing: boolean): void;
+    /** Moves to `index`, clamped into `[0, maxIndex]`. */
+    scrollToIndex(index: number): void;
+    /** Steps forward by `slidesPerMove`, wrapping to the start when `loop` is set. */
+    next(): void;
+    /** Steps back by `slidesPerMove`, wrapping to the last page when `loop` is set. */
+    previous(): void;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handleFocusIn;
+    private readonly handleFocusOut;
+    private readonly handleVisibilityChange;
+    /** Sets the active index (updates internal state when uncontrolled) and dispatches `value-change`. */
+    setValue(next: number): void;
+    /** Registers a slide's id, establishing slide order by mount order. @internal */
+    registerItem(id: string): void;
+    /** Unregisters a slide's id. @internal */
+    unregisterItem(id: string): void;
+    /** Broadcasts current state to descendant parts. @internal */
+    broadcast(): void;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel': SkdxCarousel;
+    }
+}

package/dist/carousel/Carousel.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(h,o,e,a)=>{for(var s=a>1?void 0:a?c(o,e):o,r=h.length-1,l;r>=0;r--)(l=h[r])&&(s=(a?l(o,e,s):l(s))||s);return a&&s&&u(o,e,s),s};import{css as p,html as v,LitElement as y}from"lit";import{property as n}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{directionalKey as f}from"../internal/direction.js";var g="(prefers-reduced-motion: reduce)";function d(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(g).matches}var t=class extends y{constructor(){super(...arguments);this.defaultValue=0;this.orientation="horizontal";this.loop=!1;this.slidesPerPage=1;this.slidesPerMove=1;this.autoplay=!1;this.autoplayInterval=5e3;this.internalValue=this.defaultValue;this.itemIds=[];this._playing=!1;this._hovered=!1;this._focused=!1;this._pageHidden=!1;this.handlePointerEnter=()=>{this._hovered=!0,this.syncPlayState()};this.handlePointerLeave=()=>{this._hovered=!1,this.syncPlayState()};this.handleFocusIn=()=>{this._focused=!0,this.syncPlayState()};this.handleFocusOut=()=>{this._focused=!1,this.syncPlayState()};this.handleVisibilityChange=()=>{this._pageHidden=document.visibilityState==="hidden",this.syncPlayState()};this.handleKeyDown=e=>{if(this.itemIds.length===0)return;let a=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",s=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp",r=f(e.key,this);r===a?(e.preventDefault(),this.next()):r===s&&(e.preventDefault(),this.previous())}}get currentValue(){return this.value??this.internalValue}get pageSize(){return Math.max(1,Math.floor(this.slidesPerPage))}get moveSize(){return Math.max(1,Math.floor(this.slidesPerMove))}get maxIndex(){return Math.max(0,this.itemIds.length-this.pageSize)}get playing(){return this._playing}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-roledescription","carousel"),this.setAttribute("data-orientation",this.orientation),this._playing=this.autoplay&&!d(),this._pageHidden=document.visibilityState==="hidden",this.syncSpacing(),this.syncPlayState(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("focusin",this.handleFocusIn),this.addEventListener("focusout",this.handleFocusOut),document.addEventListener("visibilitychange",this.handleVisibilityChange)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),this.removeEventListener("focusin",this.handleFocusIn),this.removeEventListener("focusout",this.handleFocusOut),document.removeEventListener("visibilitychange",this.handleVisibilityChange),clearInterval(this._timer),this._timer=void 0,super.disconnectedCallback()}updated(e){e.has("orientation")&&this.setAttribute("data-orientation",this.orientation),e.has("autoplay")&&(this._playing=this.autoplay&&!d()),e.has("spacing")&&this.syncSpacing(),e.has("value")&&this.broadcast(),this.syncPlayState()}syncSpacing(){if(this.spacing===void 0){this.style.removeProperty("--skdx-carousel-spacing");return}this.style.setProperty("--skdx-carousel-spacing",typeof this.spacing=="number"?`${this.spacing}px`:this.spacing)}syncPlayState(){this.setAttribute("data-state",this._playing?"playing":"paused"),clearInterval(this._timer),this._timer=void 0,this.isConnected&&(!this._playing||this._hovered||this._focused||this._pageHidden||this.itemIds.length<=this.pageSize||(this._timer=setInterval(()=>this.next(),this.autoplayInterval)))}setPlaying(e){this._playing!==e&&(this._playing=e,this.syncPlayState(),this.broadcast())}scrollToIndex(e){this.setValue(Math.min(Math.max(e,0),this.maxIndex))}next(){if(this.itemIds.length===0)return;let e=this.currentValue+this.moveSize;e<=this.maxIndex?this.setValue(e):this.setValue(this.loop?0:this.maxIndex)}previous(){if(this.itemIds.length===0)return;let e=this.currentValue-this.moveSize;e>=0?this.setValue(e):this.setValue(this.loop?this.maxIndex:0)}setValue(e){e!==this.currentValue&&(this.value===void 0&&(this.internalValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast())}registerItem(e){this.itemIds.includes(e)||(this.itemIds=[...this.itemIds,e],this.syncPlayState(),this.broadcast())}unregisterItem(e){this.itemIds=this.itemIds.filter(a=>a!==e),this.syncPlayState(),this.broadcast()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-carousel-update",{bubbles:!0,composed:!0}))}render(){return v`<slot></slot>`}};t.styles=p`
+    :host {
+      display: block;
+    }
+  `,i([n({type:Number})],t.prototype,"value",2),i([n({type:Number,attribute:"default-value"})],t.prototype,"defaultValue",2),i([n({type:String,reflect:!0})],t.prototype,"orientation",2),i([n({type:Boolean,reflect:!0})],t.prototype,"loop",2),i([n({type:Number,attribute:"slides-per-page"})],t.prototype,"slidesPerPage",2),i([n({type:Number,attribute:"slides-per-move"})],t.prototype,"slidesPerMove",2),i([n()],t.prototype,"spacing",2),i([n({type:Boolean})],t.prototype,"autoplay",2),i([n({type:Number,attribute:"autoplay-interval"})],t.prototype,"autoplayInterval",2),t=i([m("skdx-carousel","carousel","root")],t);export{t as SkdxCarousel};

package/dist/carousel/CarouselContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var v=(o,e)=>{for(var s in e)a(o,s,{get:e[s],enumerable:!0})},E=(o,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!m.call(o,t)&&t!==s&&a(o,t,{get:()=>e[t],enumerable:!(r=d(e,t))||r.enumerable});return o};var k=o=>E(a({},"__esModule",{value:!0}),o),u=(o,e,s,r)=>{for(var t=r>1?void 0:r?d(e,s):e,n=o.length-1,c;n>=0;n--)(c=o[n])&&(t=(r?c(e,s,t):c(t))||t);return r&&t&&a(e,s,t),t};var b={};v(b,{SkdxCarouselContent:()=>i});module.exports=k(b);var l=require("lit"),p=require("../internal/define.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.onUpdate=()=>this.sync();this.rootEl=null}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-content> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}sync(){this.rootEl&&this.setAttribute("data-orientation",this.rootEl.orientation)}render(){return l.html`<slot></slot>`}};i.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,i=u([(0,p.customElement)("skdx-carousel-content","carousel","content")],i);0&&(module.exports={SkdxCarouselContent});

package/dist/carousel/CarouselContent.d.cts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-content>` — wrapper around the slide
+ * `<skdx-carousel-item>`s. Reflects `data-orientation` from the ancestor
+ * `<skdx-carousel>`'s axis. Layout (e.g. hiding overflow) is entirely up to
+ * your CSS. Must be used inside `<skdx-carousel>`.
+ */
+export declare class SkdxCarouselContent extends LitElement {
+    static styles: import("lit").CSSResult;
+    private readonly onUpdate;
+    private rootEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-content': SkdxCarouselContent;
+    }
+}

package/dist/carousel/CarouselContent.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-content>` — wrapper around the slide
+ * `<skdx-carousel-item>`s. Reflects `data-orientation` from the ancestor
+ * `<skdx-carousel>`'s axis. Layout (e.g. hiding overflow) is entirely up to
+ * your CSS. Must be used inside `<skdx-carousel>`.
+ */
+export declare class SkdxCarouselContent extends LitElement {
+    static styles: import("lit").CSSResult;
+    private readonly onUpdate;
+    private rootEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-content': SkdxCarouselContent;
+    }
+}

package/dist/carousel/CarouselContent.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(r,t,i,s)=>{for(var e=s>1?void 0:s?d(t,i):t,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(s?a(t,i,e):a(e))||e);return s&&e&&c(t,i,e),e};import{css as u,html as p,LitElement as h}from"lit";import{customElement as m}from"../internal/define.js";var o=class extends h{constructor(){super(...arguments);this.onUpdate=()=>this.sync();this.rootEl=null}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-content> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}sync(){this.rootEl&&this.setAttribute("data-orientation",this.rootEl.orientation)}render(){return p`<slot></slot>`}};o.styles=u`
+    :host {
+      display: block;
+    }
+  `,o=n([m("skdx-carousel-content","carousel","content")],o);export{o as SkdxCarouselContent};

package/dist/carousel/CarouselItem.cjs

@@ -0,0 +1,8 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(s,e)=>{for(var i in e)d(s,i,{get:e[i],enumerable:!0})},k=(s,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!v.call(s,t)&&t!==i&&d(s,t,{get:()=>e[t],enumerable:!(o=c(e,t))||o.enumerable});return s};var x=s=>k(d({},"__esModule",{value:!0}),s),u=(s,e,i,o)=>{for(var t=o>1?void 0:o?c(e,i):e,l=s.length-1,n;l>=0;l--)(n=s[l])&&(t=(o?n(e,i,t):n(t))||t);return o&&t&&d(e,i,t),t};var b={};E(b,{SkdxCarouselItem:()=>r});module.exports=x(b);var a=require("lit"),h=require("../internal/define.cjs"),p=require("../internal/ids.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-item> must be used inside <skdx-carousel>.");this.id||(this.id=(0,p.nextId)("skdx-carousel-item")),this.setAttribute("role","group"),this.setAttribute("aria-roledescription","slide"),this.rootEl.registerItem(this.id),this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl&&(this.rootEl.unregisterItem(this.id),this.rootEl.removeEventListener("skdx-carousel-update",this.onUpdate)),super.disconnectedCallback()}sync(){let i=this.rootEl;if(!i)return;let o=i.itemIds.indexOf(this.id),t=o>=i.currentValue&&o<i.currentValue+i.pageSize;this.setAttribute("data-state",t?"active":"inactive"),this.setAttribute("data-orientation",i.orientation),this.hidden=!t}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,r=u([(0,h.customElement)("skdx-carousel-item","carousel","item")],r);0&&(module.exports={SkdxCarouselItem});

package/dist/carousel/CarouselItem.d.cts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-item>` — a single slide: `role="group"` with
+ * `aria-roledescription="slide"`, `data-state` (`active`/`inactive`), and
+ * `data-orientation`. Registers itself with the ancestor `<skdx-carousel>` on
+ * connect to establish slide order. Only the slides in the active window
+ * (`slides-per-page` of them, starting at the carousel's `value`) render
+ * content — the rest are present in the DOM but `hidden`. Must be used inside
+ * `<skdx-carousel>`.
+ */
+export declare class SkdxCarouselItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-item': SkdxCarouselItem;
+    }
+}

package/dist/carousel/CarouselItem.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-item>` — a single slide: `role="group"` with
+ * `aria-roledescription="slide"`, `data-state` (`active`/`inactive`), and
+ * `data-orientation`. Registers itself with the ancestor `<skdx-carousel>` on
+ * connect to establish slide order. Only the slides in the active window
+ * (`slides-per-page` of them, starting at the carousel's `value`) render
+ * content — the rest are present in the DOM but `hidden`. Must be used inside
+ * `<skdx-carousel>`.
+ */
+export declare class SkdxCarouselItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-item': SkdxCarouselItem;
+    }
+}

package/dist/carousel/CarouselItem.js

@@ -0,0 +1,8 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(r,s,t,i)=>{for(var e=i>1?void 0:i?c(s,t):s,a=r.length-1,d;a>=0;a--)(d=r[a])&&(e=(i?d(s,t,e):d(e))||e);return i&&e&&n(s,t,e),e};import{css as u,html as h,LitElement as p}from"lit";import{customElement as m}from"../internal/define.js";import{nextId as v}from"../internal/ids.js";var o=class extends p{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-item> must be used inside <skdx-carousel>.");this.id||(this.id=v("skdx-carousel-item")),this.setAttribute("role","group"),this.setAttribute("aria-roledescription","slide"),this.rootEl.registerItem(this.id),this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl&&(this.rootEl.unregisterItem(this.id),this.rootEl.removeEventListener("skdx-carousel-update",this.onUpdate)),super.disconnectedCallback()}sync(){let t=this.rootEl;if(!t)return;let i=t.itemIds.indexOf(this.id),e=i>=t.currentValue&&i<t.currentValue+t.pageSize;this.setAttribute("data-state",e?"active":"inactive"),this.setAttribute("data-orientation",t.orientation),this.hidden=!e}render(){return h`<slot></slot>`}};o.styles=u`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,o=l([m("skdx-carousel-item","carousel","item")],o);export{o as SkdxCarouselItem};

package/dist/carousel/CarouselNext.cjs

@@ -0,0 +1,15 @@
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},k=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!v.call(s,o)&&o!==e&&d(s,o,{get:()=>t[o],enumerable:!(r=p(t,o))||r.enumerable});return s};var x=s=>k(d({},"__esModule",{value:!0}),s),u=(s,t,e,r)=>{for(var o=r>1?void 0:r?p(t,e):t,n=s.length-1,c;n>=0;n--)(c=s[n])&&(o=(r?c(t,e,o):c(o))||o);return r&&o&&d(t,e,o),o};var f={};E(f,{SkdxCarouselNext:()=>i});module.exports=x(f);var l=require("lit"),h=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.next()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-next> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}get isDisabled(){let e=this.rootEl?.itemIds.length??0,r=(this.rootEl?.currentValue??0)>=(this.rootEl?.maxIndex??0);return e===0||r&&!(this.rootEl?.loop??!1)}render(){let e=this.isDisabled;return l.html`
+      <button
+        part="next"
+        type="button"
+        ?disabled=${e}
+        data-disabled=${e?"":l.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};i.shadowRootOptions=a.delegatesFocusShadowRootOptions,i.styles=[a.resetNativeControl,l.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],i=u([(0,h.customElement)("skdx-carousel-next","carousel","next")],i);0&&(module.exports={SkdxCarouselNext});

package/dist/carousel/CarouselNext.d.cts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-next>` — button that steps forward by the ancestor
+ * `<skdx-carousel>`'s `slides-per-move` when clicked, wrapping to the first
+ * slide when its `loop` is enabled. Disabled (native `disabled` plus
+ * `data-disabled`) once the last page is showing and `loop` is false, or when
+ * there are no slides. Must be used inside `<skdx-carousel>`.
+ *
+ * @csspart next - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCarouselNext extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    /**
+     * The state hook has to reach the *host*, which is where the part class
+     * lives — `.skdx-carousel__next[data-disabled]` is a document selector and
+     * cannot see inside a shadow root, so a copy on the shadow `<button>` alone
+     * matched nothing from `@skdx/skins`. The button keeps its own for
+     * `::part()`.
+     */
+    protected updated(): void;
+    private get isDisabled();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-next': SkdxCarouselNext;
+    }
+}

package/dist/carousel/CarouselNext.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-next>` — button that steps forward by the ancestor
+ * `<skdx-carousel>`'s `slides-per-move` when clicked, wrapping to the first
+ * slide when its `loop` is enabled. Disabled (native `disabled` plus
+ * `data-disabled`) once the last page is showing and `loop` is false, or when
+ * there are no slides. Must be used inside `<skdx-carousel>`.
+ *
+ * @csspart next - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCarouselNext extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    /**
+     * The state hook has to reach the *host*, which is where the part class
+     * lives — `.skdx-carousel__next[data-disabled]` is a document selector and
+     * cannot see inside a shadow root, so a copy on the shadow `<button>` alone
+     * matched nothing from `@skdx/skins`. The button keeps its own for
+     * `::part()`.
+     */
+    protected updated(): void;
+    private get isDisabled();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-next': SkdxCarouselNext;
+    }
+}

package/dist/carousel/CarouselNext.js

@@ -0,0 +1,15 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(l,r,t,o)=>{for(var e=o>1?void 0:o?c(r,t):r,i=l.length-1,a;i>=0;i--)(a=l[i])&&(e=(o?a(r,t,e):a(e))||e);return o&&e&&n(r,t,e),e};import{css as p,html as u,LitElement as h,nothing as m}from"lit";import{customElement as b}from"../internal/define.js";import{reflectHostState as v}from"../internal/part.js";import{controlBoxOnHost as E,delegatesFocusShadowRootOptions as k,resetNativeControl as x}from"../internal/styles.js";var s=class extends h{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.next()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-next> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}updated(){v(this,{"data-disabled":this.isDisabled?"":null})}get isDisabled(){let t=this.rootEl?.itemIds.length??0,o=(this.rootEl?.currentValue??0)>=(this.rootEl?.maxIndex??0);return t===0||o&&!(this.rootEl?.loop??!1)}render(){let t=this.isDisabled;return u`
+      <button
+        part="next"
+        type="button"
+        ?disabled=${t}
+        data-disabled=${t?"":m}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=k,s.styles=[x,p`
+      :host {
+        display: inline-block;
+      }
+    `,E],s=d([b("skdx-carousel-next","carousel","next")],s);export{s as SkdxCarouselNext};

package/dist/carousel/CarouselPlayPause.cjs

@@ -0,0 +1,15 @@
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(s,e)=>{for(var t in e)n(s,t,{get:e[t],enumerable:!0})},E=(s,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!y.call(s,o)&&o!==t&&n(s,o,{get:()=>e[o],enumerable:!(a=h(e,o))||a.enumerable});return s};var k=s=>E(n({},"__esModule",{value:!0}),s),p=(s,e,t,a)=>{for(var o=a>1?void 0:a?h(e,t):e,d=s.length-1,c;d>=0;d--)(c=s[d])&&(o=(a?c(e,t,o):c(o))||o);return a&&o&&n(e,t,o),o};var g={};v(g,{SkdxCarouselPlayPause:()=>l});module.exports=k(g);var r=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),i=require("../internal/styles.cjs");var l=class extends r.LitElement{constructor(){super(...arguments);this.playLabel="Play slideshow";this.pauseLabel="Pause slideshow";this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{let t=this.rootEl;t?.setPlaying(!t.playing)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-play-pause> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}render(){let t=this.rootEl?.playing??!1;return r.html`
+      <button
+        part="play-pause"
+        type="button"
+        data-state=${t?"playing":"paused"}
+        aria-label=${t?this.pauseLabel:this.playLabel}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};l.shadowRootOptions=i.delegatesFocusShadowRootOptions,l.styles=[i.resetNativeControl,r.css`
+      :host {
+        display: inline-block;
+      }
+    `,i.controlBoxOnHost],p([(0,u.property)({type:String,attribute:"play-label"})],l.prototype,"playLabel",2),p([(0,u.property)({type:String,attribute:"pause-label"})],l.prototype,"pauseLabel",2),l=p([(0,b.customElement)("skdx-carousel-play-pause","carousel","play-pause")],l);0&&(module.exports={SkdxCarouselPlayPause});

package/dist/carousel/CarouselPlayPause.d.cts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-play-pause>` — the autoplay pause/resume control WCAG 2.2.2
+ * requires next to any carousel that moves on its own: a native `<button>`
+ * carrying `data-state` of `"playing"`/`"paused"`, which toggles the ancestor
+ * `<skdx-carousel>`'s timer on click.
+ *
+ * It stays functional when `autoplay` is false — pressing it starts playback —
+ * so the same control serves as a play button. The accessible name names the
+ * *action*, so it swaps with the state; the button lives in this element's
+ * shadow root, so an `aria-label` on the host would not name it (same reason
+ * `<skdx-toast-close>` takes a `label`). Must be used inside `<skdx-carousel>`.
+ *
+ * @csspart play-pause - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-carousel-play-pause play-label="Play slideshow" pause-label="Pause slideshow">
+ * </skdx-carousel-play-pause>
+ * ```
+ */
+export declare class SkdxCarouselPlayPause extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name while autoplay is off, i.e. the action pressing it performs. @default 'Play slideshow' */
+    playLabel: string;
+    /** Accessible name while autoplay is on. @default 'Pause slideshow' */
+    pauseLabel: string;
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-play-pause': SkdxCarouselPlayPause;
+    }
+}

package/dist/carousel/CarouselPlayPause.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-play-pause>` — the autoplay pause/resume control WCAG 2.2.2
+ * requires next to any carousel that moves on its own: a native `<button>`
+ * carrying `data-state` of `"playing"`/`"paused"`, which toggles the ancestor
+ * `<skdx-carousel>`'s timer on click.
+ *
+ * It stays functional when `autoplay` is false — pressing it starts playback —
+ * so the same control serves as a play button. The accessible name names the
+ * *action*, so it swaps with the state; the button lives in this element's
+ * shadow root, so an `aria-label` on the host would not name it (same reason
+ * `<skdx-toast-close>` takes a `label`). Must be used inside `<skdx-carousel>`.
+ *
+ * @csspart play-pause - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-carousel-play-pause play-label="Play slideshow" pause-label="Pause slideshow">
+ * </skdx-carousel-play-pause>
+ * ```
+ */
+export declare class SkdxCarouselPlayPause extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name while autoplay is off, i.e. the action pressing it performs. @default 'Play slideshow' */
+    playLabel: string;
+    /** Accessible name while autoplay is on. @default 'Pause slideshow' */
+    pauseLabel: string;
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-play-pause': SkdxCarouselPlayPause;
+    }
+}

package/dist/carousel/CarouselPlayPause.js

@@ -0,0 +1,15 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(r,s,e,l)=>{for(var o=l>1?void 0:l?c(s,e):s,i=r.length-1,n;i>=0;i--)(n=r[i])&&(o=(l?n(s,e,o):n(o))||o);return l&&o&&d(s,e,o),o};import{css as u,html as h,LitElement as b}from"lit";import{property as p}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{controlBoxOnHost as y,delegatesFocusShadowRootOptions as v,resetNativeControl as E}from"../internal/styles.js";var t=class extends b{constructor(){super(...arguments);this.playLabel="Play slideshow";this.pauseLabel="Pause slideshow";this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{let e=this.rootEl;e?.setPlaying(!e.playing)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-play-pause> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}render(){let e=this.rootEl?.playing??!1;return h`
+      <button
+        part="play-pause"
+        type="button"
+        data-state=${e?"playing":"paused"}
+        aria-label=${e?this.pauseLabel:this.playLabel}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};t.shadowRootOptions=v,t.styles=[E,u`
+      :host {
+        display: inline-block;
+      }
+    `,y],a([p({type:String,attribute:"play-label"})],t.prototype,"playLabel",2),a([p({type:String,attribute:"pause-label"})],t.prototype,"pauseLabel",2),t=a([m("skdx-carousel-play-pause","carousel","play-pause")],t);export{t as SkdxCarouselPlayPause};

package/dist/carousel/CarouselPrevious.cjs

@@ -0,0 +1,15 @@
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var E=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},k=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!b.call(s,o)&&o!==e&&d(s,o,{get:()=>t[o],enumerable:!(r=p(t,o))||r.enumerable});return s};var f=s=>k(d({},"__esModule",{value:!0}),s),u=(s,t,e,r)=>{for(var o=r>1?void 0:r?p(t,e):t,n=s.length-1,c;n>=0;n--)(c=s[n])&&(o=(r?c(t,e,o):c(o))||o);return r&&o&&d(t,e,o),o};var x={};E(x,{SkdxCarouselPrevious:()=>l});module.exports=f(x);var i=require("lit"),h=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.previous()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-previous> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}get isDisabled(){let e=this.rootEl?.itemIds.length??0,r=(this.rootEl?.currentValue??0)<=0;return e===0||r&&!(this.rootEl?.loop??!1)}render(){let e=this.isDisabled;return i.html`
+      <button
+        part="previous"
+        type="button"
+        ?disabled=${e}
+        data-disabled=${e?"":i.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};l.shadowRootOptions=a.delegatesFocusShadowRootOptions,l.styles=[a.resetNativeControl,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],l=u([(0,h.customElement)("skdx-carousel-previous","carousel","previous")],l);0&&(module.exports={SkdxCarouselPrevious});

package/dist/carousel/CarouselPrevious.d.cts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-previous>` — button that steps back by the ancestor
+ * `<skdx-carousel>`'s `slides-per-move` when clicked, wrapping to the last page
+ * when its `loop` is enabled. Disabled (native `disabled` plus `data-disabled`) at the
+ * first slide when `loop` is false, or when there are no slides. Must be
+ * used inside `<skdx-carousel>`.
+ *
+ * @csspart previous - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCarouselPrevious extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    /**
+     * The state hook has to reach the *host*, which is where the part class
+     * lives — `.skdx-carousel__previous[data-disabled]` is a document selector and
+     * cannot see inside a shadow root, so a copy on the shadow `<button>` alone
+     * matched nothing from `@skdx/skins`. The button keeps its own for
+     * `::part()`.
+     */
+    protected updated(): void;
+    private get isDisabled();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-previous': SkdxCarouselPrevious;
+    }
+}

package/dist/carousel/CarouselPrevious.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-previous>` — button that steps back by the ancestor
+ * `<skdx-carousel>`'s `slides-per-move` when clicked, wrapping to the last page
+ * when its `loop` is enabled. Disabled (native `disabled` plus `data-disabled`) at the
+ * first slide when `loop` is false, or when there are no slides. Must be
+ * used inside `<skdx-carousel>`.
+ *
+ * @csspart previous - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCarouselPrevious extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    /**
+     * The state hook has to reach the *host*, which is where the part class
+     * lives — `.skdx-carousel__previous[data-disabled]` is a document selector and
+     * cannot see inside a shadow root, so a copy on the shadow `<button>` alone
+     * matched nothing from `@skdx/skins`. The button keeps its own for
+     * `::part()`.
+     */
+    protected updated(): void;
+    private get isDisabled();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-previous': SkdxCarouselPrevious;
+    }
+}

package/dist/carousel/CarouselPrevious.js

@@ -0,0 +1,15 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(i,r,t,o)=>{for(var e=o>1?void 0:o?c(r,t):r,l=i.length-1,a;l>=0;l--)(a=i[l])&&(e=(o?a(r,t,e):a(e))||e);return o&&e&&n(r,t,e),e};import{css as p,html as u,LitElement as h,nothing as m}from"lit";import{customElement as v}from"../internal/define.js";import{reflectHostState as b}from"../internal/part.js";import{controlBoxOnHost as E,delegatesFocusShadowRootOptions as k,resetNativeControl as f}from"../internal/styles.js";var s=class extends h{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.previous()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-previous> must be used inside <skdx-carousel>.");this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}updated(){b(this,{"data-disabled":this.isDisabled?"":null})}get isDisabled(){let t=this.rootEl?.itemIds.length??0,o=(this.rootEl?.currentValue??0)<=0;return t===0||o&&!(this.rootEl?.loop??!1)}render(){let t=this.isDisabled;return u`
+      <button
+        part="previous"
+        type="button"
+        ?disabled=${t}
+        data-disabled=${t?"":m}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=k,s.styles=[f,p`
+      :host {
+        display: inline-block;
+      }
+    `,E],s=d([v("skdx-carousel-previous","carousel","previous")],s);export{s as SkdxCarouselPrevious};

package/dist/carousel/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var S=(r,o)=>{for(var x in o)t(r,x,{get:o[x],enumerable:!0})},P=(r,o,x,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of k(o))!p.call(r,e)&&e!==x&&t(r,e,{get:()=>o[e],enumerable:!(a=f(o,e))||a.enumerable});return r};var n=r=>P(t({},"__esModule",{value:!0}),r);var i={};S(i,{SkdxCarousel:()=>s.SkdxCarousel,SkdxCarouselContent:()=>u.SkdxCarouselContent,SkdxCarouselItem:()=>l.SkdxCarouselItem,SkdxCarouselNext:()=>C.SkdxCarouselNext,SkdxCarouselPlayPause:()=>d.SkdxCarouselPlayPause,SkdxCarouselPrevious:()=>m.SkdxCarouselPrevious});module.exports=n(i);var s=require("./Carousel.cjs"),u=require("./CarouselContent.cjs"),l=require("./CarouselItem.cjs"),m=require("./CarouselPrevious.cjs"),C=require("./CarouselNext.cjs"),d=require("./CarouselPlayPause.cjs");0&&(module.exports={SkdxCarousel,SkdxCarouselContent,SkdxCarouselItem,SkdxCarouselNext,SkdxCarouselPlayPause,SkdxCarouselPrevious});

package/dist/carousel/index.d.cts

@@ -0,0 +1,6 @@
+export { SkdxCarousel } from './Carousel.cjs';
+export { SkdxCarouselContent } from './CarouselContent.cjs';
+export { SkdxCarouselItem } from './CarouselItem.cjs';
+export { SkdxCarouselPrevious } from './CarouselPrevious.cjs';
+export { SkdxCarouselNext } from './CarouselNext.cjs';
+export { SkdxCarouselPlayPause } from './CarouselPlayPause.cjs';

package/dist/carousel/index.d.ts

@@ -0,0 +1,6 @@
+export { SkdxCarousel } from './Carousel.js';
+export { SkdxCarouselContent } from './CarouselContent.js';
+export { SkdxCarouselItem } from './CarouselItem.js';
+export { SkdxCarouselPrevious } from './CarouselPrevious.js';
+export { SkdxCarouselNext } from './CarouselNext.js';
+export { SkdxCarouselPlayPause } from './CarouselPlayPause.js';