@skdx/web-components 0.26.0 → 0.28.0

package/dist/carousel/Carousel.d.ts

@@ -1,32 +1,26 @@
 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.
+ * Carousel: `role="region"` with `aria-roledescription="carousel"` and
+ * `data-orientation`. Slide order from `<skdx-carousel-item>` mount order
+ * (via `closest()`). The `slides-per-page` slides starting at `value` render;
+ * others are hidden. Arrow Left/Right (Up/Down for vertical) or previous/next
+ * buttons step by `slides-per-move`.
  *
- * `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.
+ * `autoplay` off by default, respects `prefers-reduced-motion`. Pair with
+ * `<skdx-carousel-play-pause>` control. Hover/hidden page suspend timer;
+ * keyboard focus into carousel disables autoplay.
  *
- * `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.
+ * `value`/`default-value` controlled convention: `value` is source of truth.
+ * Requires `aria-label` or `aria-labelledby` (region takes no name from content).
+ * neither exposed as a landmark nor allowed to keep its
+ * `aria-roledescription`, so the carousel becomes something assistive
+ * technology cannot find, list or jump to.
  *
  * @fires value-change - Fires with the new active index whenever the slide changes.
  *
  * @example
  * ```html
- * <skdx-carousel loop>
+ * <skdx-carousel aria-label="Featured products" loop>
  *   <skdx-carousel-content>
  *     <skdx-carousel-item>Slide 1</skdx-carousel-item>
  *     <skdx-carousel-item>Slide 2</skdx-carousel-item>
@@ -40,11 +34,13 @@ import { LitElement, type PropertyValues } from 'lit';
 export declare class SkdxCarousel extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Index of the active slide, for controlled usage. Pair with `value-change`.
+     * Index of the **first slide in the active window**, for controlled usage.
+     * Pair with `value-change`. Not "the active slide": with `slides-per-page`
+     * above 1 several slides are active at once and this names the first of them.
      * @default undefined
      */
     value?: number;
-    /** Initial active slide index, for uncontrolled usage. @default 0 */
+    /** Initial index of the first slide in the active window, for uncontrolled usage. @default 0 */
     defaultValue: number;
     /** Layout axis for slide navigation, exposed as `data-orientation`. @default 'horizontal' */
     orientation: 'horizontal' | 'vertical';
@@ -60,17 +56,61 @@ export declare class SkdxCarousel extends LitElement {
      * 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 */
+    /**
+     * Advances slides automatically on a timer. Suspended while hovered or while
+     * the page is hidden; keyboard focus entering the carousel switches it off
+     * for good. @default false
+     */
     autoplay: boolean;
     /** Milliseconds to wait between automatic slide advances. @default 5000 */
     autoplayInterval: number;
+    /**
+     * Slide data the derived anatomy renders one `CarouselItem` per entry from,
+     * instead of the `<skdx-carousel-item>` children you write by hand. Set as
+     * a property, not an attribute.
+     * @default undefined — the carousel renders its own light-DOM children.
+     */
+    items?: readonly unknown[];
+    /**
+     * Renders a slide's content for a derived `SkdxCarouselItem`, in place of the item's
+     * default string rendering. Ignored without `items`. Set as a property, not
+     * an attribute.
+     * @default undefined — renders `String(item)`.
+     */
+    renderItem?: (item: unknown, state: {
+        index: number;
+    }) => unknown;
+    /**
+     * Whether the derived anatomy includes `SkdxCarouselPrevious`/`SkdxCarouselNext` buttons. Ignored
+     * under hand composition.
+     * @default true
+     */
+    showControls: boolean;
+    /**
+     * Whether the derived anatomy includes an `SkdxCarouselIndicators` strip, one
+     * `SkdxCarouselIndicator` dot per slide. Ignored under hand composition.
+     * @default false
+     */
+    showIndicators: boolean;
+    /**
+     * Accessible names for the derived Indicator dots, one per entry in items
+     * and in the same order — for example ["Featured products", "New arrivals"].
+     * Each dot otherwise announces by position ("Go to slide 2"), which is a
+     * real name but says nothing about the slide it moves to. Shorter than items
+     * leaves the remaining dots on the positional default, so a partial list is
+     * allowed rather than a silent misnaming. Ignored under hand composition,
+     * where each Indicator carries its own aria-label. Set as a property, not
+     * an attribute.
+     * @default undefined
+     */
+    indicatorLabels?: readonly string[];
     private internalValue;
     itemIds: string[];
     private _playing;
     private _hovered;
-    private _focused;
     private _pageHidden;
     private _timer;
+    private _motionQuery;
     /** The current active index (controlled `value` if set, else internal state). @internal */
     get currentValue(): number;
     /** Normalized `slidesPerPage` — at least one whole slide. @internal */
@@ -82,6 +122,15 @@ export declare class SkdxCarousel extends LitElement {
     /** Whether autoplay is switched on — the user's setting, not the possibly-suspended timer. @default false */
     get playing(): boolean;
     connectedCallback(): void;
+    private _anatomyBuilt;
+    /**
+     * Draws the canonical anatomy into the light DOM when this element has no
+     * consumer-authored part — "simple by default" — and hands it straight back
+     * once one appears.
+     */
+    private readonly _fillAnatomy;
+    /** Forces a rebuild — for a change (`autoplay`/`showControls`/`showIndicators`) that alters the derived structure itself. */
+    private readonly _rebuildAnatomy;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private syncSpacing;
@@ -92,18 +141,41 @@ export declare class SkdxCarousel extends LitElement {
      * 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. */
+    /**
+     * Switches autoplay on or off. Works even when `autoplay` is false, so the
+     * same control serves as a play button — but never actually starts under
+     * `prefers-reduced-motion: reduce`, the same guard `connectedCallback` and
+     * `updated()` apply, checked live rather than only at those two moments:
+     * pressing Play while reduced motion is already active must not start the
+     * timer either.
+     */
     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;
+    /**
+     * Whether `next()` has somewhere to go — false at the last page of a
+     * non-looping carousel, and with no slides. The same predicate
+     * `<skdx-carousel-next>` disables itself on.
+     */
+    get canScrollNext(): boolean;
+    /** Whether `previous()` has somewhere to go — false at the first slide of a non-looping carousel. */
+    get canScrollPrev(): boolean;
     /** Steps back by `slidesPerMove`, wrapping to the last page when `loop` is set. */
     previous(): void;
     private readonly handlePointerEnter;
     private readonly handlePointerLeave;
+    /**
+     * Focus entering the carousel stops autoplay for good rather than suspending
+     * it. APG: rotation "does not resume unless the user activates the rotation
+     * control" — and a timer that restarted the moment the user tabbed past moved
+     * the page out from under someone who had just reached it. Going through
+     * `setPlaying` is what makes `data-state` and `<skdx-carousel-play-pause>`
+     * report it.
+     */
     private readonly handleFocusIn;
-    private readonly handleFocusOut;
+    private readonly handleReducedMotionChange;
     private readonly handleVisibilityChange;
     /** Sets the active index (updates internal state when uncontrolled) and dispatches `value-change`. */
     setValue(next: number): void;

package/dist/carousel/Carousel.js

@@ -1,5 +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`
+var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(l,o,t,n)=>{for(var a=n>1?void 0:n?u(o,t):o,r=l.length-1,h;r>=0;r--)(h=l[r])&&(a=(n?h(o,t,a):h(a))||a);return n&&a&&d(o,t,a),a};import{css as y,html as m,LitElement as p}from"lit";import{property as s}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as v}from"../internal/define.js";import{directionalKey as f}from"../internal/direction.js";import{arrowKeyBelongsToDescendant as g}from"./arrowKeys.js";import{CAROUSEL_ANATOMY_GENERATED as b,fillCarouselAnatomy as _,renderCarouselItems as I}from"./CarouselAnatomy.js";var E="(prefers-reduced-motion: reduce)";function P(){return typeof window>"u"||typeof window.matchMedia!="function"?null:window.matchMedia(E)}var e=class extends p{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.showControls=!0;this.showIndicators=!1;this.internalValue=this.defaultValue;this.itemIds=[];this._playing=!1;this._hovered=!1;this._pageHidden=!1;this._motionQuery=null;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(c(this,b)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,_(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this.handlePointerEnter=()=>{this._hovered=!0,this.syncPlayState()};this.handlePointerLeave=()=>{this._hovered=!1,this.syncPlayState()};this.handleFocusIn=()=>{this.setPlaying(!1)};this.handleReducedMotionChange=t=>{t.matches&&this.setPlaying(!1)};this.handleVisibilityChange=()=>{this._pageHidden=document.visibilityState==="hidden",this.syncPlayState()};this.handleKeyDown=t=>{if(this.itemIds.length===0||g(t.target,this))return;let n=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",a=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp",r=f(t.key,this);r===n?(t.preventDefault(),this.next()):r===a&&(t.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.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this._motionQuery=P(),this._motionQuery?.addEventListener?.("change",this.handleReducedMotionChange),this._playing=this.autoplay&&!(this._motionQuery?.matches??!1),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),document.addEventListener("visibilitychange",this.handleVisibilityChange),this.broadcast(),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){this._motionQuery?.removeEventListener?.("change",this.handleReducedMotionChange),this._motionQuery=null,this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),this.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("visibilitychange",this.handleVisibilityChange),clearInterval(this._timer),this._timer=void 0,super.disconnectedCallback()}updated(t){t.has("orientation")&&this.setAttribute("data-orientation",this.orientation),t.has("autoplay")&&(this._playing=this.autoplay&&!(this._motionQuery?.matches??!1)),t.has("spacing")&&this.syncSpacing(),(t.has("value")||t.has("autoplay"))&&this.broadcast(),this.syncPlayState(),t.has("autoplay")||t.has("showControls")||t.has("showIndicators")?this._rebuildAnatomy():this._fillAnatomy(),(t.has("items")||t.has("renderItem"))&&I(this)}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"),this.toggleAttribute("data-suspended",this._hovered||this._pageHidden),clearInterval(this._timer),this._timer=void 0,this.isConnected&&(!this._playing||this._hovered||this._pageHidden||this.itemIds.length<=this.pageSize||(this._timer=setInterval(()=>this.next(),this.autoplayInterval)))}setPlaying(t){let n=t&&!(this._motionQuery?.matches??!1);this._playing!==n&&(this._playing=n,this.syncPlayState(),this.broadcast())}scrollToIndex(t){this.setValue(Math.min(Math.max(t,0),this.maxIndex))}next(){if(this.itemIds.length===0)return;let t=this.currentValue+this.moveSize;t<=this.maxIndex?this.setValue(t):this.setValue(this.loop?0:this.maxIndex)}get canScrollNext(){return this.itemIds.length>0&&(this.loop||this.currentValue<this.maxIndex)}get canScrollPrev(){return this.itemIds.length>0&&(this.loop||this.currentValue>0)}previous(){if(this.itemIds.length===0)return;let t=this.currentValue-this.moveSize;t>=0?this.setValue(t):this.setValue(this.loop?this.maxIndex:0)}setValue(t){t!==this.currentValue&&(this.value===void 0&&(this.internalValue=t),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.broadcast())}registerItem(t){this.itemIds.includes(t)||(this.itemIds=[...this.itemIds,t],this.syncPlayState(),this.broadcast())}unregisterItem(t){this.itemIds=this.itemIds.filter(n=>n!==t),this.syncPlayState(),this.broadcast()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-carousel-update",{bubbles:!0,composed:!0}))}render(){return m`<slot @slotchange=${this._fillAnatomy}></slot>`}};e.styles=y`
     :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};
+  `,i([s({type:Number})],e.prototype,"value",2),i([s({type:Number,attribute:"default-value"})],e.prototype,"defaultValue",2),i([s({type:String,reflect:!0})],e.prototype,"orientation",2),i([s({type:Boolean,reflect:!0})],e.prototype,"loop",2),i([s({type:Number,attribute:"slides-per-page"})],e.prototype,"slidesPerPage",2),i([s({type:Number,attribute:"slides-per-move"})],e.prototype,"slidesPerMove",2),i([s()],e.prototype,"spacing",2),i([s({type:Boolean})],e.prototype,"autoplay",2),i([s({type:Number,attribute:"autoplay-interval"})],e.prototype,"autoplayInterval",2),i([s({attribute:!1})],e.prototype,"items",2),i([s({attribute:!1})],e.prototype,"renderItem",2),i([s({type:Boolean,attribute:"show-controls"})],e.prototype,"showControls",2),i([s({type:Boolean,attribute:"show-indicators"})],e.prototype,"showIndicators",2),i([s({attribute:!1})],e.prototype,"indicatorLabels",2),e=i([v("skdx-carousel","carousel","root")],e);export{e as SkdxCarousel};

package/dist/carousel/CarouselAnatomy.cjs

@@ -0,0 +1,6 @@
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!x.call(e,r)&&r!==o&&l(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var f=e=>E(l({},"__esModule",{value:!0}),e);var C={};k(C,{CAROUSEL_ANATOMY_GENERATED:()=>c,fillCarouselAnatomy:()=>h,renderCarouselItems:()=>d});module.exports=f(C);var i=require("lit"),u=require("lit/directives/repeat.js"),b=require("./CarouselContent.cjs"),y=require("./CarouselItem.cjs"),S=require("./CarouselPrevious.cjs"),v=require("./CarouselNext.cjs"),_=require("./CarouselPlayPause.cjs"),$=require("./CarouselIndicators.cjs"),I=require("./CarouselIndicator.cjs"),c="data-skdx-carousel-generated";function h(e){let t=[];if(e.autoplay){let s=document.createElement("skdx-carousel-play-pause");s.setAttribute(c,""),t.push(s)}let o=document.createElement("skdx-carousel-content");if(o.setAttribute(c,""),t.push(o),e.showControls){let s=document.createElement("skdx-carousel-previous");s.setAttribute(c,""),s.textContent="Previous";let r=document.createElement("skdx-carousel-next");r.setAttribute(c,""),r.textContent="Next",t.push(s,r)}if(e.showIndicators){let s=document.createElement("skdx-carousel-indicators");s.setAttribute(c,""),t.push(s)}e.replaceChildren(...t),d(e)}function d(e){let t=e.querySelector(`:scope > skdx-carousel-content[${c}]`),o=e.items??[],s=e.renderItem;t&&(0,i.render)((0,u.repeat)(o,(a,n)=>n,(a,n)=>i.html`<skdx-carousel-item
+            >${s?s(a,{index:n}):String(a)}</skdx-carousel-item
+          >`),t,{host:e});let r=e.querySelector(`:scope > skdx-carousel-indicators[${c}]`);r&&(0,i.render)((0,u.repeat)(o,(a,n)=>n,(a,n)=>i.html`<skdx-carousel-indicator
+            index=${n}
+            .label=${e.indicatorLabels?.[n]}
+          ></skdx-carousel-indicator>`),r,{host:e})}0&&(module.exports={CAROUSEL_ANATOMY_GENERATED,fillCarouselAnatomy,renderCarouselItems});

package/dist/carousel/CarouselAnatomy.d.cts

@@ -0,0 +1,24 @@
+import type { SkdxCarousel } from './Carousel.cjs';
+import './CarouselContent.cjs';
+import './CarouselItem.cjs';
+import './CarouselPrevious.cjs';
+import './CarouselNext.cjs';
+import './CarouselPlayPause.cjs';
+import './CarouselIndicators.cjs';
+import './CarouselIndicator.cjs';
+/** @internal Marks a direct child of `<skdx-carousel>` this module generated. */
+export declare const CAROUSEL_ANATOMY_GENERATED = "data-skdx-carousel-generated";
+/**
+ * Builds the canonical anatomy once as light-DOM children: optional PlayPause,
+ * Content, optional Previous/Next, and optional Indicators, mirroring APG's
+ * tab-order requirement. Content's Items and Indicators are (re)rendered
+ * separately by {@link renderCarouselItems} on every `items` change.
+ * @internal
+ */
+export declare function fillCarouselAnatomy(root: SkdxCarousel): void;
+/**
+ * (Re)renders the generated Content's Items and Indicators' dots from `root.items`,
+ * using `renderItem` for a slide's content when supplied.
+ * @internal
+ */
+export declare function renderCarouselItems(root: SkdxCarousel): void;

package/dist/carousel/CarouselAnatomy.d.ts

@@ -0,0 +1,24 @@
+import type { SkdxCarousel } from './Carousel.js';
+import './CarouselContent.js';
+import './CarouselItem.js';
+import './CarouselPrevious.js';
+import './CarouselNext.js';
+import './CarouselPlayPause.js';
+import './CarouselIndicators.js';
+import './CarouselIndicator.js';
+/** @internal Marks a direct child of `<skdx-carousel>` this module generated. */
+export declare const CAROUSEL_ANATOMY_GENERATED = "data-skdx-carousel-generated";
+/**
+ * Builds the canonical anatomy once as light-DOM children: optional PlayPause,
+ * Content, optional Previous/Next, and optional Indicators, mirroring APG's
+ * tab-order requirement. Content's Items and Indicators are (re)rendered
+ * separately by {@link renderCarouselItems} on every `items` change.
+ * @internal
+ */
+export declare function fillCarouselAnatomy(root: SkdxCarousel): void;
+/**
+ * (Re)renders the generated Content's Items and Indicators' dots from `root.items`,
+ * using `renderItem` for a slide's content when supplied.
+ * @internal
+ */
+export declare function renderCarouselItems(root: SkdxCarousel): void;

package/dist/carousel/CarouselAnatomy.js

@@ -0,0 +1,6 @@
+import{html as a,render as l}from"lit";import{repeat as u}from"lit/directives/repeat.js";import"./CarouselContent.js";import"./CarouselItem.js";import"./CarouselPrevious.js";import"./CarouselNext.js";import"./CarouselPlayPause.js";import"./CarouselIndicators.js";import"./CarouselIndicator.js";var o="data-skdx-carousel-generated";function b(e){let s=[];if(e.autoplay){let t=document.createElement("skdx-carousel-play-pause");t.setAttribute(o,""),s.push(t)}let c=document.createElement("skdx-carousel-content");if(c.setAttribute(o,""),s.push(c),e.showControls){let t=document.createElement("skdx-carousel-previous");t.setAttribute(o,""),t.textContent="Previous";let n=document.createElement("skdx-carousel-next");n.setAttribute(o,""),n.textContent="Next",s.push(t,n)}if(e.showIndicators){let t=document.createElement("skdx-carousel-indicators");t.setAttribute(o,""),s.push(t)}e.replaceChildren(...s),d(e)}function d(e){let s=e.querySelector(`:scope > skdx-carousel-content[${o}]`),c=e.items??[],t=e.renderItem;s&&l(u(c,(i,r)=>r,(i,r)=>a`<skdx-carousel-item
+            >${t?t(i,{index:r}):String(i)}</skdx-carousel-item
+          >`),s,{host:e});let n=e.querySelector(`:scope > skdx-carousel-indicators[${o}]`);n&&l(u(c,(i,r)=>r,(i,r)=>a`<skdx-carousel-indicator
+            index=${r}
+            .label=${e.indicatorLabels?.[r]}
+          ></skdx-carousel-indicator>`),n,{host:e})}export{o as CAROUSEL_ANATOMY_GENERATED,b as fillCarouselAnatomy,d as renderCarouselItems};

package/dist/carousel/CarouselContent.cjs

@@ -1,5 +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`
+"use strict";var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var b=(s,t)=>{for(var o in t)l(s,o,{get:t[o],enumerable:!0})},v=(s,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!m.call(s,e)&&e!==o&&l(s,e,{get:()=>t[e],enumerable:!(r=d(t,e))||r.enumerable});return s};var E=s=>v(l({},"__esModule",{value:!0}),s),u=(s,t,o,r)=>{for(var e=r>1?void 0:r?d(t,o):t,n=s.length-1,c;n>=0;n--)(c=s[n])&&(e=(r?c(t,o,e):c(e))||e);return r&&e&&l(t,o,e),e};var k={};b(k,{SkdxCarouselContent:()=>i});module.exports=E(k);var a=require("lit"),h=require("../internal/define.cjs");var i=class extends a.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.setAttribute("aria-atomic","false"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),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),this.setAttribute("aria-live",this.rootEl.playing?"off":"polite"))}render(){return a.html`<slot></slot>`}};i.styles=a.css`
     :host {
       display: block;
     }
-  `,i=u([(0,p.customElement)("skdx-carousel-content","carousel","content")],i);0&&(module.exports={SkdxCarouselContent});
+  `,i=u([(0,h.customElement)("skdx-carousel-content","carousel","content")],i);0&&(module.exports={SkdxCarouselContent});

package/dist/carousel/CarouselContent.d.cts

@@ -1,9 +1,7 @@
 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>`.
+ * Wrapper for slides; reflects `data-orientation`. Live region exposing active window;
+ * slide changes announce (politeness: `off` during autoplay, `polite` on stop).
  */
 export declare class SkdxCarouselContent extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/carousel/CarouselContent.d.ts

@@ -1,9 +1,7 @@
 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>`.
+ * Wrapper for slides; reflects `data-orientation`. Live region exposing active window;
+ * slide changes announce (politeness: `off` during autoplay, `polite` on stop).
  */
 export declare class SkdxCarouselContent extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/carousel/CarouselContent.js

@@ -1,5 +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`
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(r,e,i,o)=>{for(var t=o>1?void 0:o?d(e,i):e,a=r.length-1,l;a>=0;a--)(l=r[a])&&(t=(o?l(e,i,t):l(t))||t);return o&&t&&c(e,i,t),t};import{css as u,html as h,LitElement as p}from"lit";import{customElement as m}from"../internal/define.js";var s=class extends p{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.setAttribute("aria-atomic","false"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),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),this.setAttribute("aria-live",this.rootEl.playing?"off":"polite"))}render(){return h`<slot></slot>`}};s.styles=u`
     :host {
       display: block;
     }
-  `,o=n([m("skdx-carousel-content","carousel","content")],o);export{o as SkdxCarouselContent};
+  `,s=n([m("skdx-carousel-content","carousel","content")],s);export{s as SkdxCarouselContent};

package/dist/carousel/CarouselIndicator.cjs

@@ -0,0 +1,16 @@
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var t in e)n(o,t,{get:e[t],enumerable:!0})},x=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of b(e))!E.call(o,i)&&i!==t&&n(o,i,{get:()=>e[i],enumerable:!(a=h(e,i))||a.enumerable});return o};var k=o=>x(n({},"__esModule",{value:!0}),o),d=(o,e,t,a)=>{for(var i=a>1?void 0:a?h(e,t):e,c=o.length-1,p;c>=0;c--)(p=o[c])&&(i=(a?p(e,t,i):p(i))||i);return a&&i&&n(e,t,i),i};var y={};f(y,{SkdxCarouselIndicator:()=>r});module.exports=k(y);var s=require("lit"),u=require("lit/decorators.js"),v=require("../internal/define.cjs"),m=require("../internal/part.cjs"),l=require("../internal/styles.cjs");var r=class extends s.LitElement{constructor(){super(...arguments);this.index=0;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.isActive||this.rootEl?.scrollToIndex(this.index)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-indicator> 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()}get isActive(){let t=this.rootEl;return t?this.index>=t.currentValue&&this.index<t.currentValue+t.pageSize:!1}updated(){(0,m.reflectHostState)(this,{"data-state":this.isActive?"active":"inactive"})}render(){let t=this.isActive;return s.html`
+      <button
+        part="indicator"
+        type="button"
+        aria-label=${this.label||`Go to slide ${this.index+1}`}
+        aria-disabled=${t?"true":s.nothing}
+        data-state=${t?"active":"inactive"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};r.shadowRootOptions=l.delegatesFocusShadowRootOptions,r.styles=[l.resetNativeControl,s.css`
+      :host {
+        display: inline-block;
+      }
+    `,l.controlBoxOnHost],d([(0,u.property)({type:Number})],r.prototype,"index",2),d([(0,u.property)({type:String})],r.prototype,"label",2),r=d([(0,v.customElement)("skdx-carousel-indicator","carousel","indicator")],r);0&&(module.exports={SkdxCarouselIndicator});

package/dist/carousel/CarouselIndicator.d.cts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-indicator>` — one slide dot: a native button that calls
+ * `scrollToIndex(index)`. Carries `aria-disabled="true"` while on the current slide
+ * (stays focusable so keyboard users can count slides). The shadow button bears the
+ * `aria-label` (the host label cannot name it).
+ *
+ * @csspart indicator - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCarouselIndicator extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Zero-based slide index this dot jumps to when pressed. @default 0 */
+    index: number;
+    /**
+     * Accessible name for this dot. Must be a property (not an attribute) to reach the shadow button.
+     * @default undefined — the dot announces as "Go to slide N".
+     */
+    label?: string;
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get isActive();
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-indicator': SkdxCarouselIndicator;
+    }
+}

package/dist/carousel/CarouselIndicator.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-indicator>` — one slide dot: a native button that calls
+ * `scrollToIndex(index)`. Carries `aria-disabled="true"` while on the current slide
+ * (stays focusable so keyboard users can count slides). The shadow button bears the
+ * `aria-label` (the host label cannot name it).
+ *
+ * @csspart indicator - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxCarouselIndicator extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Zero-based slide index this dot jumps to when pressed. @default 0 */
+    index: number;
+    /**
+     * Accessible name for this dot. Must be a property (not an attribute) to reach the shadow button.
+     * @default undefined — the dot announces as "Go to slide N".
+     */
+    label?: string;
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get isActive();
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-carousel-indicator': SkdxCarouselIndicator;
+    }
+}

package/dist/carousel/CarouselIndicator.js

@@ -0,0 +1,16 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(a,o,t,r)=>{for(var i=r>1?void 0:r?p(o,t):o,l=a.length-1,n;l>=0;l--)(n=a[l])&&(i=(r?n(o,t,i):n(i))||i);return r&&i&&c(o,t,i),i};import{css as u,html as h,LitElement as v,nothing as m}from"lit";import{property as d}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{reflectHostState as E}from"../internal/part.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as x,resetNativeControl as k}from"../internal/styles.js";var e=class extends v{constructor(){super(...arguments);this.index=0;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.isActive||this.rootEl?.scrollToIndex(this.index)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-carousel"),!this.rootEl)throw new Error("<skdx-carousel-indicator> 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()}get isActive(){let t=this.rootEl;return t?this.index>=t.currentValue&&this.index<t.currentValue+t.pageSize:!1}updated(){E(this,{"data-state":this.isActive?"active":"inactive"})}render(){let t=this.isActive;return h`
+      <button
+        part="indicator"
+        type="button"
+        aria-label=${this.label||`Go to slide ${this.index+1}`}
+        aria-disabled=${t?"true":m}
+        data-state=${t?"active":"inactive"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=x,e.styles=[k,u`
+      :host {
+        display: inline-block;
+      }
+    `,f],s([d({type:Number})],e.prototype,"index",2),s([d({type:String})],e.prototype,"label",2),e=s([b("skdx-carousel-indicator","carousel","indicator")],e);export{e as SkdxCarouselIndicator};

package/dist/carousel/CarouselIndicators.cjs

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

package/dist/carousel/CarouselIndicators.d.cts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-indicators>` — the container for slide dots.
+ * Sets `role="group"` with `data-orientation` from the ancestor carousel.
+ * Composed, not generated; place one `<skdx-carousel-indicator>` per slide inside it.
+ *
+ * @example
+ * ```html
+ * <skdx-carousel-indicators aria-label="Slides">
+ *   <skdx-carousel-indicator index="0"></skdx-carousel-indicator>
+ *   <skdx-carousel-indicator index="1"></skdx-carousel-indicator>
+ * </skdx-carousel-indicators>
+ * ```
+ */
+export declare class SkdxCarouselIndicators 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-indicators': SkdxCarouselIndicators;
+    }
+}

package/dist/carousel/CarouselIndicators.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-carousel-indicators>` — the container for slide dots.
+ * Sets `role="group"` with `data-orientation` from the ancestor carousel.
+ * Composed, not generated; place one `<skdx-carousel-indicator>` per slide inside it.
+ *
+ * @example
+ * ```html
+ * <skdx-carousel-indicators aria-label="Slides">
+ *   <skdx-carousel-indicator index="0"></skdx-carousel-indicator>
+ *   <skdx-carousel-indicator index="1"></skdx-carousel-indicator>
+ * </skdx-carousel-indicators>
+ * ```
+ */
+export declare class SkdxCarouselIndicators 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-indicators': SkdxCarouselIndicators;
+    }
+}

package/dist/carousel/CarouselIndicators.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(i,o,t,s)=>{for(var e=s>1?void 0:s?c(o,t):o,l=i.length-1,a;l>=0;l--)(a=i[l])&&(e=(s?a(o,t,e):a(e))||e);return s&&e&&d(o,t,e),e};import{css as u,html as p,LitElement as h}from"lit";import{customElement as m}from"../internal/define.js";var r=class extends h{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-indicators> must be used inside <skdx-carousel>.");this.setAttribute("role","group"),this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate),this.sync()}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-carousel-update",this.onUpdate),super.disconnectedCallback()}sync(){let t=this.rootEl;t&&this.setAttribute("data-orientation",t.orientation)}render(){return p`<slot></slot>`}};r.styles=u`
+    :host {
+      display: flex;
+    }
+  `,r=n([m("skdx-carousel-indicators","carousel","indicators")],r);export{r as SkdxCarouselIndicators};

package/dist/carousel/CarouselItem.cjs

@@ -1,8 +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`
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(s,e)=>{for(var i in e)a(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&&a(s,t,{get:()=>e[t],enumerable:!(o=h(e,t))||o.enumerable});return s};var x=s=>k(a({},"__esModule",{value:!0}),s),u=(s,e,i,o)=>{for(var t=o>1?void 0:o?h(e,i):e,n=s.length-1,c;n>=0;n--)(c=s[n])&&(t=(o?c(e,i,t):c(t))||t);return o&&t&&a(e,i,t),t};var b={};E(b,{SkdxCarouselItem:()=>r});module.exports=x(b);var d=require("lit"),l=require("../internal/define.cjs"),p=require("../internal/ids.cjs");var r=class extends d.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.addEventListener("skdx-carousel-update",this.onUpdate),(0,l.whenUpgraded)(this.rootEl,()=>{this.rootEl?.registerItem(this.id),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 d.html`<slot></slot>`}};r.styles=d.css`
     :host {
       display: block;
     }
     :host([hidden]) {
       display: none;
     }
-  `,r=u([(0,h.customElement)("skdx-carousel-item","carousel","item")],r);0&&(module.exports={SkdxCarouselItem});
+  `,r=u([(0,l.customElement)("skdx-carousel-item","carousel","item")],r);0&&(module.exports={SkdxCarouselItem});

package/dist/carousel/CarouselItem.js

@@ -1,4 +1,4 @@
-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`
+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,d=r.length-1,a;d>=0;d--)(a=r[d])&&(e=(i?a(s,t,e):a(e))||e);return i&&e&&n(s,t,e),e};import{css as h,html as u,LitElement as p}from"lit";import{customElement as m,whenUpgraded as v}from"../internal/define.js";import{nextId as E}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=E("skdx-carousel-item")),this.setAttribute("role","group"),this.setAttribute("aria-roledescription","slide"),this.rootEl.addEventListener("skdx-carousel-update",this.onUpdate),v(this.rootEl,()=>{this.rootEl?.registerItem(this.id),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 u`<slot></slot>`}};o.styles=h`
     :host {
       display: block;
     }

package/dist/carousel/CarouselNext.d.cts

@@ -17,11 +17,7 @@ export declare class SkdxCarouselNext extends LitElement {
     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()`.
+     * Syncs disabled state to both the host (for part selectors) and the button (for `::part()`).
      */
     protected updated(): void;
     private get isDisabled();

package/dist/carousel/CarouselNext.d.ts

@@ -17,11 +17,7 @@ export declare class SkdxCarouselNext extends LitElement {
     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()`.
+     * Syncs disabled state to both the host (for part selectors) and the button (for `::part()`).
      */
     protected updated(): void;
     private get isDisabled();