@ecopages/radiant-ui 0.1.0-rc.8 → 0.1.0

package/dist/components/ui/carousel/carousel-window.d.ts

@@ -0,0 +1,63 @@
+export type CarouselTrackMode = 'swap' | 'stack' | 'window';
+export type CarouselSurface = 'shell' | 'cards';
+export type CarouselWindowParams = {
+    index: number;
+    count: number;
+    slidesPerView: number;
+    slidesPerGroup: number;
+    wrap: boolean;
+};
+export type CarouselWindow = {
+    index: number;
+    slidesPerView: number;
+    slidesPerGroup: number;
+    maxStartIndex: number;
+    canGoPrev: boolean;
+    canGoNext: boolean;
+};
+/**
+ * How many slides fill the viewport. Values below 1 collapse to a single pane.
+ */
+export declare function clampSlidesPerView(value: number): number;
+/**
+ * How many slides prev/next/autoplay move. Fractional input truncates toward zero.
+ */
+export declare function clampSlidesPerGroup(value: number): number;
+/**
+ * Last valid window-start index so the viewport still has content.
+ *
+ * @remarks Integer `index` cannot flush a fractional peek against the end;
+ * `floor(slidesPerView)` is the visible count used for that bound. The track
+ * translate still clamps so the last card sits on the right edge.
+ */
+export declare function maxStartIndex(count: number, slidesPerView: number): number;
+/** Clamp an authored or requested index to a valid window start. */
+export declare function clampIndex(raw: number, count: number, slidesPerView: number): number;
+/**
+ * First slide overlapping the viewport. Near the end this moves left of `index`
+ * so a fractional peek shows the previous card and the last full card sits flush right.
+ */
+export declare function visualStartIndex(index: number, count: number, slidesPerView: number): number;
+export declare function isSlideInView(slideIndex: number, index: number, count: number, slidesPerView: number): boolean;
+/**
+ * Track layout the host paints. A window of more than one slide cannot swap or
+ * cross-fade, so those transitions fall back to a sliding track.
+ */
+export declare function resolveCarouselTrackMode(transition: 'none' | 'slide' | 'fade', slidesPerView: number): CarouselTrackMode;
+/**
+ * One pane keeps chrome on the viewport. More than one slide paints each slide
+ * as a card with `--rui-carousel-gap` between them.
+ */
+export declare function resolveCarouselSurface(slidesPerView: number): CarouselSurface;
+/**
+ * Gaps visible in the window, including a peek of the next card.
+ *
+ * @remarks `slidesPerView` 3 → 2 gaps; `1.2` → 1 gap between the card and the peek.
+ */
+export declare function carouselGapCount(slidesPerView: number): number;
+export declare function resolveCarouselWindow(params: CarouselWindowParams): CarouselWindow;
+/**
+ * Move by `slidesPerGroup`. Overflow wraps to the other end when `wrap` is set;
+ * otherwise the window clamps.
+ */
+export declare function advanceIndex(params: CarouselWindowParams, deltaGroups: number): number;

package/dist/components/ui/carousel/carousel.css

@@ -1,6 +1,11 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties;
 rui-carousel {
+  --rui-carousel-gap: var(--space-inline);
+  --rui-carousel-radius: var(--radius-container);
+  --rui-carousel-border-color: var(--border);
+  --rui-carousel-surface: var(--surface);
+  --rui-carousel-padding: var(--space-inset);
   display: block;
   width: 100%;
   max-width: 100%;
@@ -8,6 +13,7 @@ rui-carousel {
 }
 @layer components {
   .rui-carousel {
+    --rui-carousel-track-gap: 0px;
     display: flex;
     width: 100%;
     max-width: 100%;
@@ -15,8 +21,10 @@ rui-carousel {
     flex-direction: column;
     gap: var(--spacing-stack, var(--space-stack));
   }
+  .rui-carousel[data-carousel-surface='cards'] {
+    --rui-carousel-track-gap: var(--rui-carousel-gap);
+  }
   .rui-carousel:focus-visible {
-    border-radius: var(--radius-container, var(--radius-container));
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
@@ -26,6 +34,7 @@ rui-carousel {
       outline: 2px solid transparent;
       outline-offset: 2px;
     }
+    border-radius: var(--rui-carousel-radius);
   }
   .rui-carousel__stage {
     position: relative;
@@ -37,20 +46,31 @@ rui-carousel {
     width: 100%;
     min-width: 0px;
     overflow: hidden;
-    border-radius: var(--radius-container, var(--radius-container));
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-surface, var(--surface));
     font-size: var(--text-sm, var(--text-sm));
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     touch-action: pan-y;
   }
-  .rui-carousel--controls-toolbar .rui-carousel__viewport {
-    padding: var(--spacing-inset, var(--space-inset));
+  .rui-carousel[data-carousel-surface='shell'] .rui-carousel__viewport,
+	.rui-carousel:not([data-carousel-surface]) .rui-carousel__viewport {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--rui-carousel-border-color);
+    border-radius: var(--rui-carousel-radius);
+    background-color: var(--rui-carousel-surface);
+  }
+  .rui-carousel--controls-toolbar[data-carousel-surface='shell'] .rui-carousel__viewport,
+	.rui-carousel--controls-toolbar:not([data-carousel-surface]) .rui-carousel__viewport {
+    padding: var(--rui-carousel-padding);
   }
   .rui-carousel--controls-overlay .rui-carousel__viewport {
+    padding: 0;
+  }
+  .rui-carousel[data-carousel-surface='cards'] .rui-carousel__viewport {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
     padding: 0px;
+    border-radius: 0;
   }
   .rui-carousel__track {
     position: relative;
@@ -65,6 +85,14 @@ rui-carousel {
     align-items: center;
     justify-content: center;
   }
+  .rui-carousel[data-carousel-surface='cards'] .rui-carousel__slide {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--rui-carousel-border-color);
+    border-radius: var(--rui-carousel-radius);
+    background-color: var(--rui-carousel-surface);
+    padding: var(--rui-carousel-padding);
+  }
   .rui-carousel__footer {
     width: 100%;
     min-width: 0px;
@@ -235,7 +263,8 @@ rui-carousel {
       border-radius: var(--radius-full, var(--border-radius-full));
     }
   }
-  .rui-carousel__indicator[aria-selected='true'] {
+  .rui-carousel__indicator[aria-selected='true'],
+	.rui-carousel__indicator[aria-current='true'] {
     border-radius: var(--radius-full, var(--border-radius-full));
     border-color: var(--color-primary, var(--primary));
     background-color: var(--color-primary, var(--primary));
@@ -255,12 +284,32 @@ rui-carousel {
   .rui-carousel__indicator:active {
     border-radius: var(--radius-full, var(--border-radius-full));
   }
-  .rui-carousel--none .rui-carousel__slide[hidden] {
+  .rui-carousel--none .rui-carousel__slide[hidden],
+	.rui-carousel[data-carousel-track='swap'] .rui-carousel__slide[hidden] {
     display: none;
   }
-  .rui-carousel--slide .rui-carousel__track {
+  .rui-carousel--slide .rui-carousel__track,
+	.rui-carousel[data-carousel-track='window'] .rui-carousel__track {
+    --rui-carousel-slide-size: calc(
+			(100% - (var(--rui-carousel-track-gap) * var(--rui-carousel-gap-count, 0))) /
+				var(--rui-carousel-slides-per-view, 1)
+		);
+    --rui-carousel-step: calc(var(--rui-carousel-slide-size) + var(--rui-carousel-track-gap));
+    --rui-carousel-track-extent: calc(
+			var(--rui-carousel-slide-count, 1) * var(--rui-carousel-slide-size) +
+				(var(--rui-carousel-slide-count, 1) - 1) * var(--rui-carousel-track-gap)
+		);
+    --rui-carousel-max-shift: max(0px, var(--rui-carousel-track-extent) - 100%);
+    --rui-carousel-shift: min(
+			calc(var(--rui-carousel-index, 0) * var(--rui-carousel-step)),
+			var(--rui-carousel-max-shift)
+		);
     display: flex;
     width: 100%;
+    gap: var(--rui-carousel-track-gap);
+    transform: translateX(calc(-1 * var(--rui-carousel-shift)));
+  }
+  .rui-carousel--slide .rui-carousel__track {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
     transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
@@ -268,18 +317,21 @@ rui-carousel {
     transition-duration: var(--transition-duration-slow, var(--duration-slow));
     --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
     transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
-    transform: translateX(calc(var(--rui-carousel-index, 0) * -100%));
   }
-  .rui-carousel--slide .rui-carousel__slide {
-    width: 100%;
-    min-width: 100%;
+  .rui-carousel--slide .rui-carousel__slide,
+	.rui-carousel[data-carousel-track='window'] .rui-carousel__slide {
+    min-width: 0px;
     flex-shrink: 0;
+    flex: 0 0 var(--rui-carousel-slide-size, 100%);
+    width: var(--rui-carousel-slide-size, 100%);
   }
-  .rui-carousel--fade .rui-carousel__track {
+  .rui-carousel--fade[data-carousel-track='stack'] .rui-carousel__track,
+	.rui-carousel--fade:not([data-carousel-track]) .rui-carousel__track {
     display: grid;
     width: 100%;
   }
-  .rui-carousel--fade .rui-carousel__slide {
+  .rui-carousel--fade[data-carousel-track='stack'] .rui-carousel__slide,
+	.rui-carousel--fade:not([data-carousel-track]) .rui-carousel__slide {
     grid-column-start: 1;
     grid-row-start: 1;
     width: 100%;
@@ -293,7 +345,8 @@ rui-carousel {
     opacity: 0;
     pointer-events: none;
   }
-  .rui-carousel--fade .rui-carousel__slide[data-active='true'] {
+  .rui-carousel--fade[data-carousel-track='stack'] .rui-carousel__slide[data-active='true'],
+	.rui-carousel--fade:not([data-carousel-track]) .rui-carousel__slide[data-active='true'] {
     opacity: 1;
     pointer-events: auto;
   }

package/dist/components/ui/carousel/carousel.d.ts

@@ -36,7 +36,7 @@ export type RuiCarouselRotationProps = JsxElementProps<HTMLButtonElement> & {
 };
 /** Play/pause rotation control. Stamps `[data-carousel-action="rotation"]` and `data-ref="rotation"`. */
 export declare function RuiCarouselRotation({ children, class: className, overlay, aria, ...props }: RuiCarouselRotationProps): JsxRenderable;
-export declare function RuiCarousel({ slides, children, prev, next, rotation, label, transition, controlsVariant, showIndicators, showRotationControl, autoplay, ...props }: JsxCustomElementAttributes<RuiCarouselElement, RuiCarouselProps & {
+export declare function RuiCarousel({ slides, children, prev, next, rotation, label, transition, controlsVariant, showIndicators, showRotationControl, autoplay, slidesPerView, slidesPerGroup, ...props }: JsxCustomElementAttributes<RuiCarouselElement, RuiCarouselProps & {
     slides?: RuiCarouselSlideData[];
     prev?: JsxRenderable;
     next?: JsxRenderable;

package/dist/components/ui/carousel/carousel.script.d.ts

@@ -2,6 +2,7 @@ import { RadiantElement } from '@ecopages/radiant';
 export type RuiCarouselTransition = 'none' | 'slide' | 'fade';
 /** Where default prev/next chrome is laid out. `toolbar` places controls below the slide; `overlay` pins them to the slide edges. */
 export type RuiCarouselControlsVariant = 'toolbar' | 'overlay';
+export { resolveCarouselSurface, resolveCarouselTrackMode, type CarouselSurface, type CarouselTrackMode, } from './carousel-window';
 /**
  * Defaults the SSR shell depends on.
  *
@@ -12,6 +13,8 @@ export declare const CAROUSEL_DEFAULTS: {
     readonly label: 'Carousel';
     readonly transition: 'none';
     readonly controlsVariant: 'toolbar';
+    readonly slidesPerView: 1;
+    readonly slidesPerGroup: 1;
 };
 export type RuiCarouselProps = {
     label?: string;
@@ -27,11 +30,15 @@ export type RuiCarouselProps = {
     loop?: boolean;
     /** When true, prev/next wrap and controls stay enabled at the ends. Default: true. */
     wrap?: boolean;
+    /** How many slides fill the viewport. Values `>= 1`; fractional peek is allowed. Default: `1`. */
+    slidesPerView?: number;
+    /** How many slides prev/next/autoplay/swipe move. Default: `1`. */
+    slidesPerGroup?: number;
     /** Authored slide count for render-time control state before the view paints slides. */
     slideCount?: number;
 };
 /**
- * `<rui-carousel>` — sequentially displays one slide at a time.
+ * `<rui-carousel>` — sequentially displays a window of slides.
  *
  * The custom element is a behavior host: it does not render the composed tree.
  * Import the script and place light-DOM children that match the contract below,
@@ -45,43 +52,63 @@ export type RuiCarouselProps = {
  *
  * Required:
  * - `[data-ref="root"]` — carousel region. View seeds `aria-roledescription="carousel"` and `aria-label`.
+ *   Host sets `data-carousel-track` (`swap` | `stack` | `window`) and `data-carousel-surface`
+ *   (`shell` | `cards`).
  * - `[data-ref="viewport"]` — slide window. Host sets `aria-live` and `aria-atomic`; swipe target.
- * - `[data-ref="track"]` — slide track. Host sets `--rui-carousel-index` when `transition="slide"`.
+ * - `[data-ref="track"]` — slide track. Host sets `--rui-carousel-index`,
+ *   `--rui-carousel-slides-per-view`, `--rui-carousel-gap-count`, and `--rui-carousel-slide-count`.
  * - `[data-slide]` — one slide per panel. Host sets `role`, `aria-*`, `aria-hidden`, `data-active`,
- *   `hidden` (when `transition="none"`), and `id`.
+ *   `hidden` (when track mode is `swap`), and `id`.
  *
  * Optional:
  * - `[data-carousel-action="prev"]` / `[data-carousel-action="next"]` — navigation buttons.
  *   Host toggles `disabled` at the ends when `wrap` is false.
  * - `[data-carousel-action="rotation"]` — play/pause when `autoplay` or `show-rotation-control`.
  *   Host sets `aria-pressed` and `aria-label`.
- * - `[data-ref="indicators"]` — tablist container when `show-indicators`. Host creates or updates
- *   `[data-carousel-indicator]` buttons inside.
+ * - `[data-ref="indicators"]` — indicator container when `show-indicators`. Host sets `role="tablist"`
+ *   for one slide per view, or `role="group"` for multiple slides, and its `aria-label`.
+ *   Creates one `[data-carousel-indicator]` per valid window start. Single-slide indicators
+ *   use `role="tab"` and `aria-selected`; window buttons use `aria-current`. Both set
+ *   `aria-controls`, `aria-label`, `id`, and roving `tabIndex`.
  *
  * Do not set `role`, `aria-hidden`, `aria-selected`, or `tabIndex` on slides or indicators — the host owns those.
  *
  * Nested hosts: none.
  *
- * @summary Region that cycles slides; optional autoplay, transitions, and chrome.
+ * @summary Region that cycles a window of slides; optional autoplay, transitions, and chrome.
  *
  * @element rui-carousel
  *
  * @attr {string} label - Accessible name for the carousel. Default: `Carousel`.
- * @attr {number} index - Active slide index. Default: `0`.
+ * @attr {number} index - First visible slide index. Default: `0`.
  * @attr {boolean} autoplay - Advance automatically. Default: `false`.
  * @attr {number} interval - Autoplay interval in ms. Default: `4000`.
  * @attr {('none'|'slide'|'fade')} transition - Slide swap animation. Default: `none`.
  * @attr {('toolbar'|'overlay')} controls-variant - Chrome layout. Default: `toolbar`.
- * @attr {boolean} show-indicators - Render tabbed indicator pickers. Default: `false`.
+ * @attr {boolean} show-indicators - Render slide tabs or multi-slide window buttons. Default: `false`.
  * @attr {boolean} show-rotation-control - Render play/pause control. Default: `false`.
  * @attr {boolean} loop - Allow looping past the last slide. Default: `true`.
  * @attr {boolean} wrap - Keep controls enabled at the ends. Default: `true`.
+ * @attr {number} slides-per-view - Slides that fill the viewport. Default: `1`.
+ * @attr {number} slides-per-group - Slides moved per prev/next/autoplay/swipe. Default: `1`.
  * @attr {number} slide-count - Authored slide count for render-time control state. Default: `0`.
  *
+ * @cssprop --rui-carousel-gap - Space between cards when `slides-per-view` is greater than 1. Default: `--space-inline`.
+ * @cssprop --rui-carousel-radius - Corner radius on the shell viewport or each card. Default: `--radius-container`.
+ * @cssprop --rui-carousel-border-color - Border on the shell viewport or each card. Default: `--border`.
+ * @cssprop --rui-carousel-surface - Fill on the shell viewport or each card. Default: `--surface`.
+ * @cssprop --rui-carousel-padding - Inset on the shell viewport (toolbar) or each card. Default: `--space-inset`.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
+ *
  * @remarks
- * Autoplay pauses on hover, pointer interaction, focus, and hidden tabs, and
- * respects `prefers-reduced-motion`. `aria-live` flips to `off` while rotating.
- * BEM classes live on the view; the host queries `[data-ref="track"]` for slide transitions.
+ * `index` is the first visible slide. `slides-per-view` greater than 1 paints a sliding
+ * track of separate cards even when `transition` is `none` or `fade`. A single pane keeps
+ * chrome on the viewport. Override `--rui-carousel-*` on `rui-carousel`. Autoplay pauses on
+ * hover, pointer interaction, focus, and hidden tabs, and respects `prefers-reduced-motion`.
+ * `aria-live` is `off` while the timer runs and `polite` when it stops. Indicators use the
+ * same valid window starts as navigation. BEM classes live on the view; the host queries
+ * `[data-ref="track"]` for slide transitions.
  */
 export declare class RuiCarousel extends RadiantElement {
     label: string;
@@ -94,39 +121,41 @@ export declare class RuiCarousel extends RadiantElement {
     showRotationControl: boolean;
     loop: boolean;
     wrap: boolean;
+    slidesPerView: number;
+    slidesPerGroup: number;
     slideCount: number;
+    rootTarget: HTMLElement;
     trackTarget: HTMLElement;
     indicatorsTarget: HTMLElement;
     viewportTarget: HTMLElement;
-    private timer;
     private paused;
+    private readonly uid;
     /** User explicitly resumed rotation (e.g. via rotation control) despite reduced motion. */
     private userOverrideReducedMotion;
-    private swipePointerId;
-    private swipeStartX;
-    private swipeStartY;
+    private readonly swipe;
+    private readonly autoplayController;
     protected onConnected(): void;
     disconnectedCallback(): void;
     onSlideStateUpdated(): void;
     onAutoplayUpdated(): void;
     onIndicatorsUpdated(): void;
     private prefersReducedMotion;
-    private getCarouselId;
     private slidePanelId;
     private tabId;
-    private syncSlideAccessibility;
     private getSlides;
     private get shouldWrap();
-    private normalizeIndex;
+    private windowParams;
+    private windowFor;
+    private trackMode;
+    private syncSlideAccessibility;
     private sync;
     private syncPrevNextDisabled;
     private syncIndicators;
     private syncRotationControl;
     private syncAriaLive;
     private canAutoplayRotate;
+    private onAutoplayTick;
     private syncAutoplay;
-    private start;
-    private stop;
     private goTo;
     private userNavigate;
     private isSwipeExcludedTarget;
@@ -140,7 +169,6 @@ export declare class RuiCarousel extends RadiantElement {
     onRootFocusIn(): void;
     onRootFocusOut(event: FocusEvent): void;
     onViewportPointerDown(event: PointerEvent): void;
-    onViewportPointerMove(event: PointerEvent): void;
     onViewportPointerUp(event: PointerEvent): void;
     onViewportPointerCancel(event: PointerEvent): void;
 }

package/dist/components/ui/carousel/index.js

@@ -1,2 +1,2 @@
-import{RadiantElement as $t,customElement as Zt,onEvent as b,onUpdated as Z,prop as x,query as tt}from"@ecopages/radiant";var dt,ht,pt,ft,yt,_t,bt,vt,gt,mt,wt,xt,At,It,St,Ct,Rt,Tt,Pt,Et,Vt,kt,Lt,Mt,Dt,jt,Ut,Ot,zt,Nt;function Gt(i,t,e,o,r,s){var c,a,d,v,y,S,g,V=Symbol.metadata||Symbol.for("Symbol.metadata"),T=Object.defineProperty,j=Object.create,N=[j(null),j(null)],W=t.length;function $(n,A,m){return function(l,h){A&&(h=l,l=i);for(var I=0;I<n.length;I++)h=n[I].apply(l,m?[h]:[]);return m?h:l}}function P(n,A,m,l){if(typeof n!="function"&&(l||n!==void 0))throw new TypeError(A+" must "+(m||"be")+" a function"+(l?"":" or undefined"));return n}function et(n,A,m,l,h,I,k,w,C,R,rt){function F(f){if(!rt(f))throw new TypeError("Attempted to access private element on non-instance")}var G=[].concat(A[0]),ot=A[3],H=!k,O=h===1,at=h===3,nt=h===4,q=h===2;function B(f,U,ut){return function(Y,ct){return U&&(ct=Y,Y=n),ut&&ut(Y),p[f].call(Y,ct)}}if(!H){var p={},J=[],E=at?"get":nt||O?"set":"value";if(C?(R||O?p={get:Wt(function(){return ot(this)},l,"get"),set:function(f){A[4](this,f)}}:p[E]=ot,R||Wt(p[E],l,q?"":E)):R||(p=Object.getOwnPropertyDescriptor(n,l)),!R&&!C){if((a=N[+w][l])&&(a^h)!==7)throw Error("Decorating two elements with the same name ("+p[E].name+") is not supported yet");N[+w][l]=h<3?1:h}}for(var _=n,X=G.length-1;X>=0;X-=m?2:1){var st=P(G[X],"A decorator","be",!0),lt=m?G[X-1]:void 0,Q={},z={kind:["field","accessor","method","getter","setter","class"][h],name:l,metadata:c,addInitializer:function(f,U){if(f.v)throw new TypeError("attempted to call addInitializer after decoration was finished");P(U,"An initializer","be",!0),I.push(U)}.bind(null,Q)};if(H)a=st.call(lt,_,z),Q.v=1,P(a,"class decorators","return")&&(_=a);else if(z.static=w,z.private=C,a=z.access={has:C?rt.bind():function(f){return l in f}},nt||(a.get=C?q?function(f){return F(f),p.value}:B("get",0,F):function(f){return f[l]}),q||at||(a.set=C?B("set",0,F):function(f,U){f[l]=U}),_=st.call(lt,O?{get:p.get,set:p.set}:p[E],z),Q.v=1,O){if(typeof _=="object"&&_)(a=P(_.get,"accessor.get"))&&(p.get=a),(a=P(_.set,"accessor.set"))&&(p.set=a),(a=P(_.init,"accessor.init"))&&J.unshift(a);else if(_!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else P(_,(R?"field":"method")+" decorators","return")&&(R?J.unshift(_):p[E]=_)}return h<2&&k.push($(J,w,1),$(I,w,0)),R||H||(C?O?k.splice(-1,0,B("get",w),B("set",w)):k.push(q?p[E]:P.call.bind(p[E])):T(n,l,p)),_}function it(n){return T(n,V,{configurable:!0,enumerable:!0,value:c})}return s!==void 0&&(c=s[V]),c=j(c??null),y=[],S=function(n){n&&y.push($(n))},g=function(n,A){for(var m=0;m<e.length;m++){var l=e[m],h=l[1],I=7&h;if((8&h)==n&&!I==A){var k=l[2],w=!!l[3],C=16&h;et(n?i:i.prototype,l,C,w?"#"+k:Ht(k),I,I<2?[]:n?v=v||[]:d=d||[],y,!!n,w,A,n&&w?function(R){return Qt(R)===i}:r)}}},g(8,0),g(0,0),g(8,1),g(0,1),S(d),S(v),a=y,W||it(i),{e:a,get c(){var n=[];return W&&[it(i=et(i,[t],o,i.name,5,n)),$(n,1)]}}}function Ht(i){var t=Jt(i,"string");return typeof t=="symbol"?t:t+""}function Jt(i,t){if(typeof i!="object"||!i)return i;var e=i[Symbol.toPrimitive];if(e!==void 0){var o=e.call(i,t||"default");if(typeof o!="object")return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(i)}function Wt(i,t,e){typeof t=="symbol"&&(t=(t=t.description)?"["+t+"]":"");try{Object.defineProperty(i,"name",{configurable:!0,value:e?e+" "+t:t})}catch{}return i}function Qt(i){if(Object(i)!==i)throw TypeError("right-hand side of 'in' should be an object, got "+(i!==null?typeof i:"null"));return i}var L={label:"Carousel",transition:"none",controlsVariant:"toolbar"},te=48,Bt,qt=class extends $t{static{({e:[pt,ft,yt,_t,bt,vt,gt,mt,wt,xt,At,It,St,Ct,Rt,Tt,Pt,Et,Vt,kt,Lt,Mt,Dt,jt,Ut,Ot,zt,Nt,dt],c:[Bt,ht]}=Gt(this,[Zt("rui-carousel")],[[x({type:String,defaultValue:L.label}),0,"label"],[x({type:Number,reflect:!0,defaultValue:0}),0,"index"],[x({type:Boolean,reflect:!0,defaultValue:!1}),0,"autoplay"],[x({type:Number,defaultValue:4e3}),0,"interval"],[x({type:String,defaultValue:L.transition}),0,"transition"],[x({type:String,defaultValue:L.controlsVariant,attribute:"controls-variant"}),0,"controlsVariant"],[x({type:Boolean,defaultValue:!1}),0,"showIndicators"],[x({type:Boolean,defaultValue:!1}),0,"showRotationControl"],[x({type:Boolean,defaultValue:!0}),0,"loop"],[x({type:Boolean,defaultValue:!0}),0,"wrap"],[x({type:Number,defaultValue:0}),0,"slideCount"],[tt({ref:"track"}),0,"trackTarget"],[tt({ref:"indicators"}),0,"indicatorsTarget"],[tt({ref:"viewport"}),0,"viewportTarget"],[Z(["index","transition","loop","wrap","controlsVariant"]),2,"onSlideStateUpdated"],[Z(["autoplay","showRotationControl","interval"]),2,"onAutoplayUpdated"],[Z(["showIndicators"]),2,"onIndicatorsUpdated"],[b({selector:'[data-carousel-action="prev"]',type:"click"}),2,"prev"],[b({selector:'[data-carousel-action="next"]',type:"click"}),2,"next"],[b({selector:'[data-carousel-action="rotation"]',type:"click"}),2,"toggleRotation"],[b({selector:"[data-carousel-indicator]",type:"click"}),2,"onIndicatorClick"],[b({selector:"[data-carousel-indicator]",type:"keydown"}),2,"onIndicatorKeydown"],[b({ref:"root",type:"pointerenter"}),2,"onRootPointerEnter"],[b({ref:"root",type:"pointerleave"}),2,"onRootPointerLeave"],[b({ref:"root",type:"focusin"}),2,"onRootFocusIn"],[b({ref:"root",type:"focusout"}),2,"onRootFocusOut"],[b({ref:"viewport",type:"pointerdown"}),2,"onViewportPointerDown"],[b({ref:"viewport",type:"pointermove"}),2,"onViewportPointerMove"],[b({ref:"viewport",type:"pointerup"}),2,"onViewportPointerUp"],[b({ref:"viewport",type:"pointercancel"}),2,"onViewportPointerCancel"]],0,void 0,$t))}label=(dt(this),pt(this));index=(ft(this),yt(this));autoplay=(_t(this),bt(this));interval=(vt(this),gt(this));transition=(mt(this),wt(this));controlsVariant=(xt(this),At(this));showIndicators=(It(this),St(this));showRotationControl=(Ct(this),Rt(this));loop=(Tt(this),Pt(this));wrap=(Et(this),Vt(this));slideCount=(kt(this),Lt(this));trackTarget=(Mt(this),Dt(this));indicatorsTarget=(jt(this),Ut(this));viewportTarget=(Ot(this),zt(this));timer=(Nt(this),null);paused=!1;userOverrideReducedMotion=!1;swipePointerId=null;swipeStartX=0;swipeStartY=0;onConnected(){this.autoplay&&this.prefersReducedMotion()&&(this.paused=!0),this.sync(),this.syncAutoplay(),this.syncIndicators(),this.syncAriaLive()}disconnectedCallback(){this.stop(),super.disconnectedCallback()}onSlideStateUpdated(){this.sync(),this.syncIndicators(),this.syncAutoplay()}onAutoplayUpdated(){this.syncAutoplay(),this.syncRotationControl()}onIndicatorsUpdated(){this.syncIndicators()}prefersReducedMotion(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}getCarouselId(){return this.id||"rui-carousel"}slidePanelId(t,e){let o=t.getAttribute("data-slide")??String(e),r=`${this.getCarouselId()}-panel-${o}`;return t.id=r,r}tabId(t){return`${this.getCarouselId()}-tab-${t}`}syncSlideAccessibility(t,e){let o=t.length;t.forEach((r,s)=>{let c=s===e,a=`${s+1} of ${o}`;this.showIndicators?(this.slidePanelId(r,s),r.setAttribute("role","tabpanel"),r.setAttribute("aria-labelledby",this.tabId(s)),r.setAttribute("aria-label",a),r.removeAttribute("aria-roledescription")):(r.setAttribute("role","group"),r.setAttribute("aria-roledescription","slide"),r.setAttribute("aria-label",a),r.removeAttribute("aria-labelledby"),r.removeAttribute("tabindex")),this.transition==="none"?r.hidden=!c:r.hidden=!1,r.setAttribute("aria-hidden",String(!c)),r.setAttribute("data-active",c?"true":"false")})}getSlides(){return Array.from(this.querySelectorAll("[data-slide]"))}get shouldWrap(){return this.wrap&&this.loop}normalizeIndex(t,e){return e<=0?0:this.shouldWrap?(t%e+e)%e:Math.min(Math.max(t,0),e-1)}sync(){let t=this.getSlides();if(!t.length)return;let e=this.normalizeIndex(this.index,t.length);e!==this.index&&(this.index=e);let o=this.trackTarget;o&&this.transition==="slide"&&o.style.setProperty("--rui-carousel-index",String(e)),this.syncSlideAccessibility(t,e),this.syncPrevNextDisabled(t.length,e)}syncPrevNextDisabled(t,e){let o=!this.shouldWrap&&t>0&&e<=0,r=!this.shouldWrap&&t>0&&e>=t-1;for(let s of this.querySelectorAll('[data-carousel-action="prev"]'))this.shouldWrap?s.removeAttribute("disabled"):s.disabled=o;for(let s of this.querySelectorAll('[data-carousel-action="next"]'))this.shouldWrap?s.removeAttribute("disabled"):s.disabled=r}syncIndicators(){let t=this.indicatorsTarget;if(!t)return;let e=this.getSlides(),o=this.normalizeIndex(this.index,e.length);Array.from(t.querySelectorAll("[data-carousel-indicator]")).length!==e.length&&t.replaceChildren(...e.map((c,a)=>{let d=document.createElement("button");return d.type="button",d.className="rui-carousel__indicator",d.id=this.tabId(a),d.setAttribute("role","tab"),d.setAttribute("data-carousel-indicator",String(a)),d.setAttribute("aria-controls",this.slidePanelId(c,a)),d.setAttribute("aria-label",`Slide ${a+1}`),d})),Array.from(t.querySelectorAll("[data-carousel-indicator]")).forEach((c,a)=>{let d=a===o,v=e[a];v&&(c.id=this.tabId(a),c.setAttribute("aria-controls",this.slidePanelId(v,a))),c.setAttribute("aria-selected",String(d)),c.tabIndex=d?0:-1})}syncRotationControl(){for(let t of this.querySelectorAll('[data-carousel-action="rotation"]')){let e=this.autoplay&&!this.paused;t.setAttribute("aria-pressed",String(e)),t.setAttribute("aria-label",e?"Pause rotation":"Start rotation")}}syncAriaLive(){let t=this.viewportTarget;if(!t)return;let e=this.autoplay&&!this.paused&&this.timer!==null;t.setAttribute("aria-live",e?"off":"polite"),t.setAttribute("aria-atomic","false")}canAutoplayRotate(){return!(!this.autoplay||this.paused||this.prefersReducedMotion()&&!this.userOverrideReducedMotion)}syncAutoplay(){this.canAutoplayRotate()?this.start():this.stop(),this.syncRotationControl(),this.syncAriaLive()}start(){let t=this.getSlides();if(!t.length)return;if(!this.shouldWrap&&this.index>=t.length-1){this.stop();return}this.stop();let e=Math.max(0,this.interval);this.timer=setInterval(()=>{let o=this.getSlides();if(o.length){if(!this.shouldWrap&&this.index>=o.length-1){this.stop(),this.syncAriaLive();return}this.goTo(this.index+1)}},e),this.syncAriaLive()}stop(){this.timer&&clearInterval(this.timer),this.timer=null,this.syncAriaLive()}goTo(t){let e=this.getSlides();e.length&&(this.index=this.normalizeIndex(t,e.length),this.sync(),this.syncIndicators())}userNavigate(t){this.paused=!0,this.stop(),this.goTo(this.index+t)}isSwipeExcludedTarget(t){return t instanceof Element?!!t.closest("button, a, input, textarea, select, [data-carousel-indicator], [data-carousel-action]"):!1}prev(){this.userNavigate(-1)}next(){this.userNavigate(1)}toggleRotation(){this.autoplay?(this.paused=!this.paused,this.paused||(this.userOverrideReducedMotion=!0)):(this.autoplay=!0,this.paused=!1,this.userOverrideReducedMotion=!0),this.syncAutoplay()}onIndicatorClick(t){let e=t.target.closest("[data-carousel-indicator]");if(!e)return;let o=Number(e.getAttribute("data-carousel-indicator"));Number.isFinite(o)&&(this.paused=!0,this.stop(),this.goTo(o),e.focus())}onIndicatorKeydown(t){let e=this.getSlides();if(!e.length)return;let o=t.target.closest("[data-carousel-indicator]");if(!o)return;let r=Number(o.getAttribute("data-carousel-indicator"));if(!Number.isFinite(r))return;if(t.key==="ArrowRight")r=this.normalizeIndex(r+1,e.length);else if(t.key==="ArrowLeft")r=this.normalizeIndex(r-1,e.length);else if(t.key==="Home")r=0;else if(t.key==="End")r=e.length-1;else if(t.key===" "||t.key==="Enter"){t.preventDefault(),this.paused=!0,this.stop(),this.goTo(r);return}else return;t.preventDefault(),this.paused=!0,this.stop(),this.goTo(r),Array.from(this.indicatorsTarget?.querySelectorAll("[data-carousel-indicator]")??[])[r]?.focus()}onRootPointerEnter(t){this.autoplay&&t.pointerType==="mouse"&&this.stop()}onRootPointerLeave(t){this.autoplay&&!this.paused&&t.pointerType==="mouse"&&this.syncAutoplay()}onRootFocusIn(){this.autoplay&&this.stop()}onRootFocusOut(t){let e=t.relatedTarget;e&&this.contains(e)||this.autoplay&&!this.paused&&this.syncAutoplay()}onViewportPointerDown(t){t.button!==0||this.isSwipeExcludedTarget(t.target)||(this.swipePointerId=t.pointerId,this.swipeStartX=t.clientX,this.swipeStartY=t.clientY)}onViewportPointerMove(t){this.swipePointerId,t.pointerId}onViewportPointerUp(t){if(this.swipePointerId!==t.pointerId)return;let e=t.clientX-this.swipeStartX,o=t.clientY-this.swipeStartY;this.swipePointerId=null,!(Math.abs(e)<te||Math.abs(e)<=Math.abs(o))&&(e<0?this.next():this.prev())}onViewportPointerCancel(t){this.swipePointerId===t.pointerId&&(this.swipePointerId=null)}static{ht()}};import{jsx as u,jsxs as D}from"@ecopages/jsx/jsx-runtime";function K(i,t){return t===void 0||i?.label!==void 0?i:{...i,label:t}}function M(...i){return i.filter(Boolean).join(" ")}function Xt({id:i,children:t,class:e,...o}){return u("div",{...o,class:M("rui-carousel__slide",e),"data-slide":i,children:t})}function ee(){return D("span",{class:"rui-carousel__nav-label",children:[u("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u2039"}),"Previous"]})}function ie(){return D("span",{class:"rui-carousel__nav-label",children:["Next",u("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u203A"})]})}function Yt({children:i,class:t,disabled:e,overlay:o,aria:r,...s}){return u("button",{...s,aria:K(r,"Previous slide"),type:"button","data-carousel-action":"prev","data-ref":"prev",class:M("rui-carousel__nav rui-button rui-button--outline rui-button--sm",o?"rui-carousel__nav--overlay":"rui-carousel__nav--toolbar",t),disabled:e,children:i??(o?u("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u2039"}):ee())})}function Kt({children:i,class:t,disabled:e,overlay:o,aria:r,...s}){return u("button",{...s,aria:K(r,"Next slide"),type:"button","data-carousel-action":"next","data-ref":"next",class:M("rui-carousel__nav rui-button rui-button--outline rui-button--sm",o?"rui-carousel__nav--overlay":"rui-carousel__nav--toolbar",t),disabled:e,children:i??(o?u("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u203A"}):ie())})}function Ft({children:i,class:t,overlay:e,aria:o,...r}){return u("button",{...r,aria:K(o,"Start rotation"),type:"button","data-carousel-action":"rotation","data-ref":"rotation",class:M("rui-carousel__rotation rui-button rui-button--ghost rui-button--sm",e&&"rui-carousel__rotation--overlay",t),"aria-pressed":!1,children:i??"Play"})}function re({autoplay:i,children:t,controlsVariant:e,label:o,next:r,prev:s,rotation:c,showIndicators:a,showRotationControl:d,transition:v}){let y=e==="overlay",S=i||d,g=s??u(Yt,{overlay:y}),V=r??u(Kt,{overlay:y}),T=S?c??u(Ft,{overlay:y}):null,j=a?u("div",{class:M("rui-carousel__indicators",y&&"rui-carousel__indicators--overlay"),"data-ref":"indicators",role:"tablist","aria-label":"Choose slide to display"}):null,N=D("div",{class:"rui-carousel__toolbar",children:[S?u("div",{class:"rui-carousel__toolbar-rotation",children:T}):null,u("div",{class:"rui-carousel__toolbar-side rui-carousel__toolbar-side--start",children:g}),u("div",{class:"rui-carousel__toolbar-center",children:j}),u("div",{class:"rui-carousel__toolbar-side rui-carousel__toolbar-side--end",children:V})]}),W=y?D("div",{class:"rui-carousel__overlay-chrome",children:[S?u("div",{class:"rui-carousel__overlay-rotation",children:T}):null,D("div",{class:"rui-carousel__controls rui-carousel__controls--overlay",children:[g,V]}),j]}):null;return D("section",{class:M("rui-carousel",`rui-carousel--${v}`,`rui-carousel--controls-${e}`),"data-ref":"root","aria-roledescription":"carousel","aria-label":o,children:[u("div",{class:"rui-carousel__stage",children:D("div",{class:"rui-carousel__viewport","data-ref":"viewport",children:[u("div",{class:"rui-carousel__track","data-ref":"track",children:t}),W]})}),y?null:u("div",{class:"rui-carousel__footer",children:N})]})}function oe({slides:i,children:t,prev:e,next:o,rotation:r,label:s=L.label,transition:c=L.transition,controlsVariant:a=L.controlsVariant,showIndicators:d,showRotationControl:v,autoplay:y,...S}){let g=i??[],V=i!=null?g.map(T=>u(Xt,{id:T.id,children:T.children})):t;return u("rui-carousel",{...S,label:s,transition:c,controlsVariant:a,showIndicators:d,showRotationControl:v,autoplay:y,slideCount:g.length,children:u(re,{autoplay:y,controlsVariant:a,label:s,next:o,prev:e,rotation:r,showIndicators:d,showRotationControl:v,transition:c,children:V})})}export{oe as RuiCarousel,Bt as RuiCarouselElement,Kt as RuiCarouselNext,Yt as RuiCarouselPrev,Ft as RuiCarouselRotation,Xt as RuiCarouselSlide};
+import{RadiantElement as le,bindTo as Se,customElement as Ae,onEvent as m,onUpdated as dt,prop as w,query as tt}from"@ecopages/radiant";var ye=/^[A-Za-z][A-Za-z0-9_-]*$/;function mt(e){return ye.test(e)}function _e(e){let t=e.trim();if(mt(t))return t;let r=`rui-${t}`;return t&&mt(r)?r:"rui"}function xt(e){let t=typeof crypto.randomUUID=="function"?crypto.randomUUID().replace(/-/g,""):Array.from(crypto.getRandomValues(new Uint8Array(16)),r=>r.toString(16).padStart(2,"0")).join("");return`${_e(e)}-${t}`}var J=class{constructor(t){this.config=t}config;timer=null;get isRunning(){return this.timer!==null}start(){if(!this.config.canRotate()){this.stop();return}this.stop();let t=Math.max(0,this.config.getInterval());this.timer=setInterval(()=>{if(!this.config.canRotate()){this.stop();return}this.config.onTick()},t),this.config.onRunningChange()}stop(){this.timer!==null&&(clearInterval(this.timer),this.timer=null,this.config.onRunningChange())}sync(){this.config.canRotate()?this.start():this.stop()}};function be(e,t,r=48){return Math.abs(e)<r||Math.abs(e)<=Math.abs(t)?null:e<0?"next":"prev"}var Q=class{pointerId=null;startX=0;startY=0;onPointerDown(t,r){t.button!==0||r||(this.pointerId=t.pointerId,this.startX=t.clientX,this.startY=t.clientY)}onPointerUp(t){if(this.pointerId!==t.pointerId)return null;let r=t.clientX-this.startX,i=t.clientY-this.startY;return this.pointerId=null,be(r,i)}onPointerCancel(t){this.pointerId===t.pointerId&&(this.pointerId=null)}};function U(e){return!Number.isFinite(e)||e<1?1:e}function St(e){return!Number.isFinite(e)||e<1?1:Math.floor(e)}function at(e,t){return e<=0?0:Math.max(0,e-Math.floor(U(t)))}function lt(e,t,r){if(t<=0||!Number.isFinite(e))return 0;let i=at(t,r);return Math.min(Math.max(Math.trunc(e),0),i)}function ge(e,t,r){let i=U(r),o=lt(e,t,i);return Math.min(o,Math.max(0,t-i))}function ut(e,t,r,i){let o=U(i),h=ge(t,r,o);return e+1>h&&e<h+o}function W(e,t){return U(t)>1?"window":e==="fade"?"stack":e==="slide"?"window":"swap"}function B(e){return U(e)>1?"cards":"shell"}function At(e){let t=U(e);return t<=1?0:Math.ceil(t)-1}function ct(e){let t=U(e.slidesPerView),r=St(e.slidesPerGroup),i=lt(e.index,e.count,t),o=at(e.count,t);return{index:i,slidesPerView:t,slidesPerGroup:r,maxStartIndex:o,canGoPrev:e.wrap||i>0,canGoNext:e.wrap||i<o}}function X(e,t){let r=St(e.slidesPerGroup),i=Math.trunc(e.index)+t*r,o=at(e.count,e.slidesPerView);return e.wrap?o<=0||i>o?0:i<0?o:i:lt(i,e.count,e.slidesPerView)}var Ct,Pt,It,Rt,Tt,Vt,kt,Mt,Et,Gt,Dt,Lt,Ut,Nt,jt,$t,Ot,Ft,qt,Wt,Bt,Xt,Yt,zt,Kt,Ht,Zt,Jt,Qt,te,ee,re,ie,oe,ne,se;function we(e,t,r,i,o,h){var s,n,b,a,u,c,v,R=Symbol.metadata||Symbol.for("Symbol.metadata"),k=Object.defineProperty,M=Object.create,G=[M(null),M(null)],$=t.length;function D(l,P,x){return function(d,f){P&&(f=d,d=e);for(var I=0;I<l.length;I++)f=l[I].apply(d,x?[f]:[]);return x?f:d}}function C(l,P,x,d){if(typeof l!="function"&&(d||l!==void 0))throw new TypeError(P+" must "+(x||"be")+" a function"+(d?"":" or undefined"));return l}function Y(l,P,x,d,f,I,L,S,T,V,ht){function rt(_){if(!ht(_))throw new TypeError("Attempted to access private element on non-instance")}var it=[].concat(P[0]),ft=P[3],ot=!L,F=f===1,yt=f===3,_t=f===4,z=f===2;function K(_,O,wt){return function(Z,vt){return O&&(vt=Z,Z=l),wt&&wt(Z),y[_].call(Z,vt)}}if(!ot){var y={},nt=[],E=yt?"get":_t||F?"set":"value";if(T?(V||F?y={get:ae(function(){return ft(this)},d,"get"),set:function(_){P[4](this,_)}}:y[E]=ft,V||ae(y[E],d,z?"":E)):V||(y=Object.getOwnPropertyDescriptor(l,d)),!V&&!T){if((n=G[+S][d])&&(n^f)!==7)throw Error("Decorating two elements with the same name ("+y[E].name+") is not supported yet");G[+S][d]=f<3?1:f}}for(var g=l,H=it.length-1;H>=0;H-=x?2:1){var bt=C(it[H],"A decorator","be",!0),gt=x?it[H-1]:void 0,st={},q={kind:["field","accessor","method","getter","setter","class"][f],name:d,metadata:s,addInitializer:function(_,O){if(_.v)throw new TypeError("attempted to call addInitializer after decoration was finished");C(O,"An initializer","be",!0),I.push(O)}.bind(null,st)};if(ot)n=bt.call(gt,g,q),st.v=1,C(n,"class decorators","return")&&(g=n);else if(q.static=S,q.private=T,n=q.access={has:T?ht.bind():function(_){return d in _}},_t||(n.get=T?z?function(_){return rt(_),y.value}:K("get",0,rt):function(_){return _[d]}),z||yt||(n.set=T?K("set",0,rt):function(_,O){_[d]=O}),g=bt.call(gt,F?{get:y.get,set:y.set}:y[E],q),st.v=1,F){if(typeof g=="object"&&g)(n=C(g.get,"accessor.get"))&&(y.get=n),(n=C(g.set,"accessor.set"))&&(y.set=n),(n=C(g.init,"accessor.init"))&&nt.unshift(n);else if(g!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else C(g,(V?"field":"method")+" decorators","return")&&(V?nt.unshift(g):y[E]=g)}return f<2&&L.push(D(nt,S,1),D(I,S,0)),V||ot||(T?F?L.splice(-1,0,K("get",S),K("set",S)):L.push(z?y[E]:C.call.bind(y[E])):k(l,d,y)),g}function pt(l){return k(l,R,{configurable:!0,enumerable:!0,value:s})}return h!==void 0&&(s=h[R]),s=M(s??null),u=[],c=function(l){l&&u.push(D(l))},v=function(l,P){for(var x=0;x<r.length;x++){var d=r[x],f=d[1],I=7&f;if((8&f)==l&&!I==P){var L=d[2],S=!!d[3],T=16&f;Y(l?e:e.prototype,d,T,S?"#"+L:ve(L),I,I<2?[]:l?a=a||[]:b=b||[],u,!!l,S,P,l&&S?function(V){return xe(V)===e}:o)}}},v(8,0),v(0,0),v(8,1),v(0,1),c(b),c(a),n=u,$||pt(e),{e:n,get c(){var l=[];return $&&[pt(e=Y(e,[t],i,e.name,5,l)),D(l,1)]}}}function ve(e){var t=me(e,"string");return typeof t=="symbol"?t:t+""}function me(e,t){if(typeof e!="object"||!e)return e;var r=e[Symbol.toPrimitive];if(r!==void 0){var i=r.call(e,t||"default");if(typeof i!="object")return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function ae(e,t,r){typeof t=="symbol"&&(t=(t=t.description)?"["+t+"]":"");try{Object.defineProperty(e,"name",{configurable:!0,value:r?r+" "+t:t})}catch{}return e}function xe(e){if(Object(e)!==e)throw TypeError("right-hand side of 'in' should be an object, got "+(e!==null?typeof e:"null"));return e}var A={label:"Carousel",transition:"none",controlsVariant:"toolbar",slidesPerView:1,slidesPerGroup:1},ce,ue=class extends le{static{({e:[It,Rt,Tt,Vt,kt,Mt,Et,Gt,Dt,Lt,Ut,Nt,jt,$t,Ot,Ft,qt,Wt,Bt,Xt,Yt,zt,Kt,Ht,Zt,Jt,Qt,te,ee,re,ie,oe,ne,se,Ct],c:[ce,Pt]}=we(this,[Ae("rui-carousel")],[[w({type:String,defaultValue:A.label}),0,"label"],[w({type:Number,reflect:!0,defaultValue:0}),0,"index"],[w({type:Boolean,reflect:!0,defaultValue:!1}),0,"autoplay"],[w({type:Number,defaultValue:4e3}),0,"interval"],[w({type:String,defaultValue:A.transition}),0,"transition"],[w({type:String,defaultValue:A.controlsVariant,attribute:"controls-variant"}),0,"controlsVariant"],[w({type:Boolean,defaultValue:!1}),0,"showIndicators"],[w({type:Boolean,defaultValue:!1}),0,"showRotationControl"],[w({type:Boolean,defaultValue:!0}),0,"loop"],[w({type:Boolean,defaultValue:!0}),0,"wrap"],[[w({type:Number,defaultValue:A.slidesPerView,attribute:"slides-per-view"}),Se({ref:"root",attr:"data-carousel-surface",map:t=>B(t)})],0,"slidesPerView"],[w({type:Number,defaultValue:A.slidesPerGroup,attribute:"slides-per-group"}),0,"slidesPerGroup"],[w({type:Number,defaultValue:0}),0,"slideCount"],[tt({ref:"root"}),0,"rootTarget"],[tt({ref:"track"}),0,"trackTarget"],[tt({ref:"indicators"}),0,"indicatorsTarget"],[tt({ref:"viewport"}),0,"viewportTarget"],[dt(["index","transition","loop","wrap","controlsVariant","slidesPerView","slidesPerGroup"]),2,"onSlideStateUpdated"],[dt(["autoplay","showRotationControl","interval"]),2,"onAutoplayUpdated"],[dt(["showIndicators"]),2,"onIndicatorsUpdated"],[m({selector:'[data-carousel-action="prev"]',type:"click"}),2,"prev"],[m({selector:'[data-carousel-action="next"]',type:"click"}),2,"next"],[m({selector:'[data-carousel-action="rotation"]',type:"click"}),2,"toggleRotation"],[m({selector:"[data-carousel-indicator]",type:"click"}),2,"onIndicatorClick"],[m({selector:"[data-carousel-indicator]",type:"keydown"}),2,"onIndicatorKeydown"],[m({ref:"root",type:"pointerenter"}),2,"onRootPointerEnter"],[m({ref:"root",type:"pointerleave"}),2,"onRootPointerLeave"],[m({ref:"root",type:"focusin"}),2,"onRootFocusIn"],[m({ref:"root",type:"focusout"}),2,"onRootFocusOut"],[m({ref:"viewport",type:"pointerdown"}),2,"onViewportPointerDown"],[m({ref:"viewport",type:"pointerup"}),2,"onViewportPointerUp"],[m({ref:"viewport",type:"pointercancel"}),2,"onViewportPointerCancel"]],0,void 0,le))}label=(Ct(this),It(this));index=(Rt(this),Tt(this));autoplay=(Vt(this),kt(this));interval=(Mt(this),Et(this));transition=(Gt(this),Dt(this));controlsVariant=(Lt(this),Ut(this));showIndicators=(Nt(this),jt(this));showRotationControl=($t(this),Ot(this));loop=(Ft(this),qt(this));wrap=(Wt(this),Bt(this));slidesPerView=(Xt(this),Yt(this));slidesPerGroup=(zt(this),Kt(this));slideCount=(Ht(this),Zt(this));rootTarget=(Jt(this),Qt(this));trackTarget=(te(this),ee(this));indicatorsTarget=(re(this),ie(this));viewportTarget=(oe(this),ne(this));paused=(se(this),!1);uid=xt("rui-carousel");userOverrideReducedMotion=!1;swipe=new Q;autoplayController=new J({getInterval:()=>this.interval,canRotate:()=>this.canAutoplayRotate(),onTick:()=>this.onAutoplayTick(),onRunningChange:()=>this.syncAriaLive()});onConnected(){this.autoplay&&this.prefersReducedMotion()&&(this.paused=!0),this.sync(),this.syncAutoplay(),this.syncIndicators(),this.syncAriaLive()}disconnectedCallback(){this.autoplayController.stop(),super.disconnectedCallback()}onSlideStateUpdated(){this.sync(),this.syncIndicators(),this.syncAutoplay()}onAutoplayUpdated(){this.syncAutoplay(),this.syncRotationControl()}onIndicatorsUpdated(){this.sync(),this.syncIndicators()}prefersReducedMotion(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}slidePanelId(t,r){let i=t.getAttribute("data-slide")??String(r),o=`${this.uid}-panel-${i}`;return t.id=o,o}tabId(t){return`${this.uid}-tab-${t}`}getSlides(){return Array.from(this.querySelectorAll("[data-slide]"))}get shouldWrap(){return this.wrap&&this.loop}windowParams(t,r=this.index){return{index:r,count:t,slidesPerView:this.slidesPerView,slidesPerGroup:this.slidesPerGroup,wrap:this.shouldWrap}}windowFor(t){return ct(this.windowParams(t))}trackMode(){return W(this.transition,this.slidesPerView)}syncSlideAccessibility(t,r,i){let o=t.length,h=this.trackMode();t.forEach((s,n)=>{let b=n===r,a=ut(n,r,o,i),u=`${n+1} of ${o}`;this.showIndicators&&i===1?(this.slidePanelId(s,n),s.setAttribute("role","tabpanel"),s.setAttribute("aria-labelledby",this.tabId(n)),s.setAttribute("aria-label",u),s.removeAttribute("aria-roledescription")):(s.setAttribute("role","group"),s.setAttribute("aria-roledescription","slide"),s.setAttribute("aria-label",u),s.removeAttribute("aria-labelledby"),s.removeAttribute("tabindex")),s.hidden=h==="swap"&&!b,s.setAttribute("aria-hidden",String(!a)),s.setAttribute("data-active",b?"true":"false")})}sync(){let t=this.getSlides();if(!t.length)return;let r=this.windowFor(t.length);r.index!==this.index&&(this.index=r.index);let i=this.rootTarget;i&&i.setAttribute("data-carousel-track",this.trackMode());let o=this.trackTarget;o&&(o.style.setProperty("--rui-carousel-index",String(r.index)),o.style.setProperty("--rui-carousel-slides-per-view",String(r.slidesPerView)),o.style.setProperty("--rui-carousel-gap-count",String(At(r.slidesPerView))),o.style.setProperty("--rui-carousel-slide-count",String(t.length))),this.syncSlideAccessibility(t,r.index,r.slidesPerView),this.syncPrevNextDisabled(r)}syncPrevNextDisabled(t){let r=!this.shouldWrap&&!t.canGoPrev,i=!this.shouldWrap&&!t.canGoNext;for(let o of this.querySelectorAll('[data-carousel-action="prev"]'))this.shouldWrap?o.removeAttribute("disabled"):o.disabled=r;for(let o of this.querySelectorAll('[data-carousel-action="next"]'))this.shouldWrap?o.removeAttribute("disabled"):o.disabled=i}syncIndicators(){let t=this.indicatorsTarget;if(!t)return;let r=this.getSlides(),i=this.windowFor(r.length),o=i.slidesPerView===1,h=r.slice(0,i.maxStartIndex+1);t.setAttribute("role",o?"tablist":"group"),t.setAttribute("aria-label",o?"Choose slide to display":"Choose slide window"),Array.from(t.querySelectorAll("[data-carousel-indicator]")).length!==h.length&&t.replaceChildren(...h.map((a,u)=>{let c=document.createElement("button");return c.type="button",c.className="rui-carousel__indicator",c.id=this.tabId(u),c.setAttribute("data-carousel-indicator",String(u)),c}));let n=Array.from(t.querySelectorAll("[data-carousel-indicator]")),b=r.map((a,u)=>this.slidePanelId(a,u));n.forEach((a,u)=>{let c=u===i.index;a.id=this.tabId(u),a.setAttribute("aria-label",o?`Slide ${u+1}`:`Slide window ${u+1}`),a.setAttribute("aria-controls",b.filter((v,R)=>ut(R,u,r.length,i.slidesPerView)).join(" ")),o?(a.setAttribute("role","tab"),a.setAttribute("aria-selected",String(c)),a.removeAttribute("aria-current")):(a.removeAttribute("role"),a.removeAttribute("aria-selected"),c?a.setAttribute("aria-current","true"):a.removeAttribute("aria-current")),a.tabIndex=c?0:-1})}syncRotationControl(){for(let t of this.querySelectorAll('[data-carousel-action="rotation"]')){let r=this.autoplay&&!this.paused;t.setAttribute("aria-pressed",String(r)),t.setAttribute("aria-label",r?"Pause rotation":"Start rotation")}}syncAriaLive(){let t=this.viewportTarget;if(!t)return;let r=this.autoplay&&!this.paused&&this.autoplayController.isRunning;t.setAttribute("aria-live",r?"off":"polite"),t.setAttribute("aria-atomic","false")}canAutoplayRotate(){if(!this.autoplay||this.paused||this.prefersReducedMotion()&&!this.userOverrideReducedMotion)return!1;let t=this.getSlides();return t.length?this.windowFor(t.length).canGoNext:!1}onAutoplayTick(){let t=this.getSlides();if(!t.length)return;if(!this.windowFor(t.length).canGoNext){this.autoplayController.stop(),this.syncAriaLive();return}this.goTo(X(this.windowParams(t.length),1))}syncAutoplay(){this.autoplayController.sync(),this.syncRotationControl(),this.syncAriaLive()}goTo(t){let r=this.getSlides();r.length&&(this.index=ct(this.windowParams(r.length,t)).index,this.sync(),this.syncIndicators())}userNavigate(t){this.paused=!0,this.autoplayController.stop();let r=this.getSlides();r.length&&this.goTo(X(this.windowParams(r.length),t))}isSwipeExcludedTarget(t){return t instanceof Element?!!t.closest("button, a, input, textarea, select, [data-carousel-indicator], [data-carousel-action]"):!1}prev(){this.userNavigate(-1)}next(){this.userNavigate(1)}toggleRotation(){this.autoplay?(this.paused=!this.paused,this.paused||(this.userOverrideReducedMotion=!0)):(this.autoplay=!0,this.paused=!1,this.userOverrideReducedMotion=!0),this.syncAutoplay()}onIndicatorClick(t){let r=t.target.closest("[data-carousel-indicator]");if(!r)return;let i=Number(r.getAttribute("data-carousel-indicator"));Number.isFinite(i)&&(this.paused=!0,this.autoplayController.stop(),this.goTo(i),r.focus())}onIndicatorKeydown(t){let r=this.getSlides();if(!r.length)return;let i=t.target.closest("[data-carousel-indicator]");if(!i)return;let o=Number(i.getAttribute("data-carousel-indicator"));if(!Number.isFinite(o))return;if(t.key==="ArrowRight")o=X({...this.windowParams(r.length,o),slidesPerGroup:1},1);else if(t.key==="ArrowLeft")o=X({...this.windowParams(r.length,o),slidesPerGroup:1},-1);else if(t.key==="Home")o=0;else if(t.key==="End")o=this.windowFor(r.length).maxStartIndex;else if(t.key===" "||t.key==="Enter"){t.preventDefault(),this.paused=!0,this.autoplayController.stop(),this.goTo(o);return}else return;t.preventDefault(),this.paused=!0,this.autoplayController.stop(),this.goTo(o),Array.from(this.indicatorsTarget?.querySelectorAll("[data-carousel-indicator]")??[])[this.index]?.focus()}onRootPointerEnter(t){this.autoplay&&t.pointerType==="mouse"&&this.autoplayController.stop()}onRootPointerLeave(t){this.autoplay&&!this.paused&&t.pointerType==="mouse"&&this.syncAutoplay()}onRootFocusIn(){this.autoplay&&this.autoplayController.stop()}onRootFocusOut(t){let r=t.relatedTarget;r&&this.contains(r)||this.autoplay&&!this.paused&&this.syncAutoplay()}onViewportPointerDown(t){this.swipe.onPointerDown(t,this.isSwipeExcludedTarget(t.target))}onViewportPointerUp(t){let r=this.swipe.onPointerUp(t);r==="next"?this.next():r==="prev"&&this.prev()}onViewportPointerCancel(t){this.swipe.onPointerCancel(t)}static{Pt()}};import{jsx as p,jsxs as j}from"@ecopages/jsx/jsx-runtime";function et(e,t){return t===void 0||e?.label!==void 0?e:{...e,label:t}}function N(...e){return e.filter(Boolean).join(" ")}function de({id:e,children:t,class:r,...i}){return p("div",{...i,class:N("rui-carousel__slide",r),"data-slide":e,children:t})}function Ce(){return j("span",{class:"rui-carousel__nav-label",children:[p("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u2039"}),"Previous"]})}function Pe(){return j("span",{class:"rui-carousel__nav-label",children:["Next",p("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u203A"})]})}function pe({children:e,class:t,disabled:r,overlay:i,aria:o,...h}){return p("button",{...h,aria:et(o,"Previous slide"),type:"button","data-carousel-action":"prev","data-ref":"prev",class:N("rui-carousel__nav rui-button rui-button--outline rui-button--sm",i?"rui-carousel__nav--overlay":"rui-carousel__nav--toolbar",t),disabled:r,children:e??(i?p("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u2039"}):Ce())})}function he({children:e,class:t,disabled:r,overlay:i,aria:o,...h}){return p("button",{...h,aria:et(o,"Next slide"),type:"button","data-carousel-action":"next","data-ref":"next",class:N("rui-carousel__nav rui-button rui-button--outline rui-button--sm",i?"rui-carousel__nav--overlay":"rui-carousel__nav--toolbar",t),disabled:r,children:e??(i?p("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u203A"}):Pe())})}function fe({children:e,class:t,overlay:r,aria:i,...o}){return p("button",{...o,aria:et(i,"Start rotation"),type:"button","data-carousel-action":"rotation","data-ref":"rotation",class:N("rui-carousel__rotation rui-button rui-button--ghost rui-button--sm",r&&"rui-carousel__rotation--overlay",t),"aria-pressed":!1,children:e??"Play"})}function Ie({autoplay:e,children:t,controlsVariant:r,label:i,next:o,prev:h,rotation:s,showIndicators:n,showRotationControl:b,slidesPerView:a,transition:u}){let c=r==="overlay",v=e||b,R=h??p(pe,{overlay:c}),k=o??p(he,{overlay:c}),M=v?s??p(fe,{overlay:c}):null,G=W(u,a),$=B(a),D=n?p("div",{class:N("rui-carousel__indicators",c&&"rui-carousel__indicators--overlay"),"data-ref":"indicators",role:$==="shell"?"tablist":"group","aria-label":$==="shell"?"Choose slide to display":"Choose slide window"}):null,C=j("div",{class:"rui-carousel__toolbar",children:[v?p("div",{class:"rui-carousel__toolbar-rotation",children:M}):null,p("div",{class:"rui-carousel__toolbar-side rui-carousel__toolbar-side--start",children:R}),p("div",{class:"rui-carousel__toolbar-center",children:D}),p("div",{class:"rui-carousel__toolbar-side rui-carousel__toolbar-side--end",children:k})]}),Y=c?j("div",{class:"rui-carousel__overlay-chrome",children:[v?p("div",{class:"rui-carousel__overlay-rotation",children:M}):null,j("div",{class:"rui-carousel__controls rui-carousel__controls--overlay",children:[R,k]}),D]}):null;return j("section",{class:N("rui-carousel",`rui-carousel--${u}`,`rui-carousel--controls-${r}`),"data-ref":"root","data-carousel-track":G,"data-carousel-surface":$,"aria-roledescription":"carousel","aria-label":i,children:[p("div",{class:"rui-carousel__stage",children:j("div",{class:"rui-carousel__viewport","data-ref":"viewport",children:[p("div",{class:"rui-carousel__track","data-ref":"track",children:t}),Y]})}),c?null:p("div",{class:"rui-carousel__footer",children:C})]})}function Re({slides:e,children:t,prev:r,next:i,rotation:o,label:h=A.label,transition:s=A.transition,controlsVariant:n=A.controlsVariant,showIndicators:b,showRotationControl:a,autoplay:u,slidesPerView:c=A.slidesPerView,slidesPerGroup:v=A.slidesPerGroup,...R}){let k=e??[],M=e!=null?k.map(G=>p(de,{id:G.id,children:G.children})):t;return p("rui-carousel",{...R,label:h,transition:s,controlsVariant:n,showIndicators:b,showRotationControl:a,autoplay:u,slidesPerView:c,slidesPerGroup:v,slideCount:k.length,children:p(Ie,{autoplay:u,controlsVariant:n,label:h,next:i,prev:r,rotation:o,showIndicators:b,showRotationControl:a,slidesPerView:c,transition:s,children:M})})}export{Re as RuiCarousel,ce as RuiCarouselElement,he as RuiCarouselNext,pe as RuiCarouselPrev,fe as RuiCarouselRotation,de as RuiCarouselSlide};
 //# sourceMappingURL=index.js.map