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

package/README.md

@@ -33,8 +33,8 @@ Useful scripts:
 ```bash
 pnpm run test            # Vitest (storybook + unit browser projects)
 pnpm run test:storybook  # Story interaction/render tests (CI)
-pnpm run test:ssr:smoke  # Local SSR smoke (6 stories × client/ssr-static/ssr-hydrate)
-pnpm run test:ssr        # Full Components/* SSR matrix (nightly)
+pnpm run test:ssr:smoke  # SSR smoke (6 stories × client/ssr-static/ssr-hydrate; runs on PRs)
+pnpm run test:ssr        # Full Components/* SSR matrix (run on demand)
 pnpm run typecheck
 pnpm run lint
 pnpm run build:lib       # generate exports + build JS/types + compile CSS

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

@@ -30,12 +30,10 @@ export type RuiAlertDescriptionProps = JsxElementProps<HTMLDivElement>;
 export declare function RuiAlertDescription({ children, class: className, ...props }: RuiAlertDescriptionProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiAlertComponentProps = JsxElementProps<HTMLDivElement> & RuiAlertProps;
 /**
- * Status alert with optional dismiss control.
+ * Status alert with optional dismiss control. Stamps `<rui-alert>` and the inner
+ * `role="alert"` surface; appends `[data-alert-close]` when `dismissible`.
  *
  * @remarks
- * Importable JSX helper around `<rui-alert>`. Owns the `role="alert"` surface and
- * BEM classes; the host owns dismiss (`rui-close` / `dismiss()`).
- *
  * Variant tones map to semantic theme roles (`info`, `success`, `warning`, `error`)
  * via `.rui-alert--*` — not palette steps. See `alert.css` and DESIGN.md status roles.
  *

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

@@ -23,16 +23,25 @@ export type RuiAlertCloseDetail = {
     reason: 'dismiss';
 };
 /**
- * `<rui-alert>` — a brief, important message that attracts attention
- * without interrupting the user's task.
+ * `<rui-alert>` — status message host with optional dismiss.
  *
- * Compose with the `RuiAlert` view (surface + optional dismiss control) and
- * `RuiAlertIcon` / `RuiAlertTitle` / `RuiAlertDescription` as needed.
+ * 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,
+ * or use the `RuiAlert` view helpers which stamp the same targets.
  *
  * Prefer injecting or revealing alerts at the moment they become relevant;
  * static copy that is always present should not use `role="alert"`.
  *
- * @summary Status message host; optional dismiss removes the element.
+ * ## Light-DOM contract
+ *
+ * Optional:
+ * - `[data-alert-close]` — dismiss control. Click calls `dismiss()` when `dismissible` is set.
+ *
+ * The host does not query alert content or the `role="alert"` surface. Authors own
+ * that markup (or use `RuiAlert`, which stamps it). Do not rely on BEM class names
+ * for behavior.
+ *
+ * Nested hosts: none.
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
  *
@@ -40,22 +49,23 @@ export type RuiAlertCloseDetail = {
  *
  * @attr {('info'|'success'|'warning'|'error')} variant - Visual tone. Default: `info`.
  * @attr {('inline'|'banner')} layout - Layout mode. Default: `inline`.
- * @attr {boolean} dismissible - Show dismiss control (via the view). Default: `false`.
+ * @attr {boolean} dismissible - Show dismiss control. Default: `false`.
  * @attr {string} close-label - Accessible name for dismiss. Default: `Dismiss`.
  *
- * @slot - Alert content. Prefer the `RuiAlert` view so the `role="alert"` surface
- *   and BEM classes stay in sync with `variant` / `layout` / `dismissible`.
- *
  * @fires rui-close - Emitted when the alert is dismissed; then the host is removed.
  *
  * @remarks
- * Styling classes live on the JSX view helpers (`@cssclass`). This element owns
- * dismiss behavior — default `render()` is a passthrough slot so prop updates do
- * not rebuild the composed light-DOM surface.
+ * Minimum headless tree with dismiss:
+ *
+ * ```html
+ * <rui-alert dismissible close-label="Dismiss">
+ *   <div role="alert">Your session will expire soon.</div>
+ *   <button type="button" data-alert-close aria-label="Dismiss"></button>
+ * </rui-alert>
+ * ```
  *
- * **Why a custom element?** Dismiss emits `rui-close` and removes the host from
- * the DOM without re-projecting slot content. A presentational-only wrapper would
- * need equivalent lifecycle wiring; the CE keeps that behavior self-contained.
+ * BEM classes are presentation-only; see view `@cssclass`. Dismiss emits `rui-close`
+ * and removes the host without re-building the composed surface.
  */
 export declare class RuiAlert extends RadiantElement {
     variant: RuiAlertVariant;

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

@@ -5,21 +5,26 @@ export type RuiAutocompleteInputProps = JsxElementProps<HTMLInputElement> & {
     placeholder?: string;
     disabled?: boolean;
 };
-/** Search field paired with `RuiAutocomplete` via `data-autocomplete-input`.
+/** Search field paired with `RuiAutocomplete`. Stamps `[data-autocomplete-input]`.
  *
  * @cssclass rui-autocomplete__input - Bordered search input.
  */
 export declare function RuiAutocompleteInput({ placeholder, class: className, disabled, ...props }: RuiAutocompleteInputProps): JsxRenderable;
 export type RuiAutocompleteCollectionProps = JsxElementProps<HTMLDivElement>;
-/** Wrapper around the filterable collection inside `RuiAutocomplete`.
+/** Wrapper around the filterable collection. Stamps `[data-autocomplete-collection]`.
  *
  * @cssclass rui-autocomplete__collection - Scrollable filterable region.
  */
 export declare function RuiAutocompleteCollection({ children, class: className, ...props }: RuiAutocompleteCollectionProps): JsxRenderable;
 export type RuiAutocompleteEmptyProps = JsxElementProps<HTMLDivElement>;
-/** Shown when filtering yields no visible items.
+/** No-results state. Stamps `[data-autocomplete-empty]`; host toggles `hidden`.
  *
  * @cssclass rui-autocomplete__empty - No-results state.
  */
 export declare function RuiAutocompleteEmpty({ children, class: className, ...props }: RuiAutocompleteEmptyProps): JsxRenderable;
+/**
+ * Filter host view. Wraps children in `[data-ref="root"]` (presentation only).
+ *
+ * @cssclass rui-autocomplete - Filter host root.
+ */
 export declare function RuiAutocomplete({ children, ...props }: JsxCustomElementAttributes<RuiAutocompleteElement, RuiAutocompleteProps>): JsxRenderable;

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

@@ -9,9 +9,32 @@ export type RuiAutocompleteProps = {
 /**
  * `<rui-autocomplete>` — filters a composed collection from a text input.
  *
- * Wrap a search field (`data-autocomplete-input`) and a collection
- * (`data-autocomplete-collection` or default slot) containing `[role="option"]`,
- * `[role="menuitem"]`, or `[data-tag]` items.
+ * The custom element is a behavior host: it does not render filter markup.
+ * Import the script and place light-DOM children that match the contract below,
+ * or use `RuiAutocomplete` and its helpers, which stamp the same targets.
+ *
+ * ## Light-DOM contract
+ *
+ * Required (one of):
+ * - `[data-autocomplete-input]` — search field inside this host. Host listens for `input`.
+ * - External `[data-autocomplete-input]` on an ancestor `rui-combobox` or `rui-select`
+ *   when this host does not contain the input.
+ *
+ * Collection (one of):
+ * - `[data-autocomplete-collection]` — wrapper around filterable items.
+ * - The host element itself — when no collection wrapper is provided.
+ *
+ * Per item inside the collection:
+ * - `[role="option"]`, `[role="menuitem"]`, or `[data-tag]` — filterable rows. Host
+ *   toggles `hidden` based on the query. Text match uses `data-label` or trimmed
+ *   `textContent`.
+ *
+ * Optional:
+ * - `[data-autocomplete-empty]` — no-results state. Host toggles `hidden` when matches exist.
+ * - `[data-label]` on items — filter text; falls back to trimmed `textContent`.
+ *
+ * Nested hosts: filterable items are often `rui-listbox` options or `rui-tag` chips;
+ * this host only queries the role / data-tag selectors above, not listbox internals.
  *
  * @remarks When nested in `rui-combobox`, the combobox input acts as the filter
  * field. `rui-select` uses a dedicated search input inside the popup instead.
@@ -23,7 +46,9 @@ export type RuiAutocompleteProps = {
  * @attr {string} sensitivity - Filter sensitivity: `base` (case-insensitive contains), `case`, or `accent`. Default: `base`.
  * @attr {string} input-value - Controlled filter query; when unset, reads from the composed input. Default: `''`.
  *
- * @cssclass rui-autocomplete - Filter host.
+ * @remarks
+ * `[data-ref="root"]` on the view is presentation only; the host does not query it.
+ * BEM classes live on the view; the host never queries them.
  */
 export declare class RuiAutocomplete extends RadiantElement {
     sensitivity: TextFilterSensitivity;

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

@@ -3,23 +3,23 @@ import type { RuiBreadcrumb as RuiBreadcrumbElement, RuiBreadcrumbProps } from '
 import './breadcrumb.script';
 export type RuiBreadcrumbViewProps = JsxCustomElementAttributes<RuiBreadcrumbElement, RuiBreadcrumbProps>;
 /**
- * Landmark wrapper for a breadcrumb trail. Set `separator` once here (e.g. `/`
- * or `>`); empty `RuiBreadcrumbSeparator` nodes pick it up via CSS — no context.
- * Pass children into a separator to override for that instance.
+ * Landmark wrapper for a breadcrumb trail. Stamps `<nav class="rui-breadcrumb">`.
  *
  * @cssclass rui-breadcrumb - `<nav>` landmark root.
+ *
+ * @remarks `separator` sets `--rui-breadcrumb-separator` for empty separators.
  */
 export declare function RuiBreadcrumb({ children, label, separator, ...props }: RuiBreadcrumbViewProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbListProps = JsxElementProps<HTMLOListElement>;
 /**
- * Ordered list of breadcrumb items and separators.
+ * Ordered list of breadcrumb items and separators. Stamps `<ol class="rui-breadcrumb__list">`.
  *
  * @cssclass rui-breadcrumb__list - Ordered list row.
  */
 export declare function RuiBreadcrumbList({ children, class: className, ...props }: RuiBreadcrumbListProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbItemProps = JsxElementProps<HTMLLIElement>;
 /**
- * Single crumb (`<li>`).
+ * Single crumb list item. Stamps `<li class="rui-breadcrumb__item">`.
  *
  * @cssclass rui-breadcrumb__item - List item wrapping a crumb link/page.
  */
@@ -28,25 +28,25 @@ export type RuiBreadcrumbLinkProps = JsxElementProps<HTMLAnchorElement> & {
     href: string;
 };
 /**
- * Linked ancestor page.
+ * Linked ancestor page. Stamps `<a class="rui-breadcrumb__link">`.
  *
  * @cssclass rui-breadcrumb__link - Crumb link.
  */
 export declare function RuiBreadcrumbLink({ children, href, class: className, ...props }: RuiBreadcrumbLinkProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbPageProps = JsxElementProps<HTMLSpanElement>;
 /**
- * Current page (non-link).
+ * Current page (non-link). Stamps `<span class="rui-breadcrumb__page" aria-current="page">`.
  *
  * @cssclass rui-breadcrumb__page - Current page span (`aria-current="page"`).
  */
 export declare function RuiBreadcrumbPage({ children, class: className, ...props }: RuiBreadcrumbPageProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbSeparatorProps = JsxElementProps<HTMLLIElement>;
 /**
- * Visual separator between crumbs. Renders as a presentational list item.
- * With no children, uses the glyph from `RuiBreadcrumb`’s `separator` prop
- * (CSS custom property). With children, those replace the default glyph.
+ * Visual separator between crumbs. Stamps presentational `<li class="rui-breadcrumb__separator">`.
  *
  * @cssclass rui-breadcrumb__separator - Presentational separator (`aria-hidden`).
+ *
+ * @remarks With no children, uses the glyph from `RuiBreadcrumb`'s `separator` prop.
  */
 export declare function RuiBreadcrumbSeparator({ children, class: className, ...props }: RuiBreadcrumbSeparatorProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbEllipsisProps = JsxElementProps<HTMLSpanElement> & {
@@ -54,7 +54,7 @@ export type RuiBreadcrumbEllipsisProps = JsxElementProps<HTMLSpanElement> & {
     label?: string;
 };
 /**
- * Collapsed middle segment indicator.
+ * Collapsed middle segment indicator. Stamps `<span class="rui-breadcrumb__ellipsis">`.
  *
  * @cssclass rui-breadcrumb__ellipsis - Collapsed segment indicator (`aria-hidden`).
  * @cssclass rui-breadcrumb__ellipsis-label - Screen-reader label for the collapsed segment.

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

@@ -10,20 +10,20 @@ export type RuiBreadcrumbProps = {
     separator?: string;
 };
 /**
- * `<rui-breadcrumb>` — a trail of links to ancestor pages in hierarchical order.
+ * `<rui-breadcrumb>` — navigation landmark for a hierarchical page trail.
  *
- * Implements the WAI-ARIA APG Breadcrumb pattern: a `<nav>` landmark containing
- * an ordered list of links, with `aria-current="page"` on the current page item.
- *
- * Compose with the JSX helpers (`RuiBreadcrumbList`, `RuiBreadcrumbItem`,
- * `RuiBreadcrumbLink`, `RuiBreadcrumbPage`, `RuiBreadcrumbSeparator`,
- * `RuiBreadcrumbEllipsis`).
+ * The custom element holds `label` and `separator` props; it does not query
+ * authored children. Use `RuiBreadcrumb` and the breadcrumb helpers, which stamp
+ * the `<nav>` landmark and list structure.
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
- *
- * Keyboard interaction: standard link navigation (`Tab`, `Enter`).
- *
  * @element rui-breadcrumb
+ * @attr {string} label - Accessible name for the navigation landmark. Default: `Breadcrumb`.
+ * @attr {string} separator - Glyph for empty `RuiBreadcrumbSeparator` nodes (CSS custom property). Default: `/`.
+ *
+ * @remarks
+ * No light-DOM query contract — keyboard interaction is standard link navigation.
+ * BEM classes live on the view helpers.
  */
 export declare class RuiBreadcrumb extends RadiantElement {
     label: string;

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

@@ -30,15 +30,34 @@ type MonthPanel = {
 /**
  * `<rui-calendar>` — locale-aware month grid(s) for picking dates.
  *
+ * Derived Tree: the host `render()` paints the month grid. Authored children are
+ * not the inner calendar. Parent hosts (`rui-date-field`, `rui-date-range-picker`)
+ * embed `<rui-calendar>` and query day targets when opening the popup.
+ *
  * Supports single, multiple, and range selection. Value format:
  * - single: `YYYY-MM-DD`
  * - multiple: comma-separated ISO dates
  * - range: `YYYY-MM-DD/YYYY-MM-DD`
  *
- * @see https://react-aria.adobe.com/Calendar
+ * ## Light-DOM contract
  *
- * @element rui-calendar
+ * Generated by `render()` (do not author manually):
+ * - `[data-ref="root"]` — application root. Host sets `role="application"`,
+ *   `aria-label`, and `aria-multiselectable` when `selection-mode="multiple"`.
+ * - `[data-calendar-prev-month]` / `[data-calendar-next-month]` — paging controls.
+ * - `[data-calendar-grid]` — month grid (`role="grid"`).
+ * - `[data-calendar-day]` — day buttons. Host sets `data-iso`, roving `tabIndex`,
+ *   `aria-selected`, `aria-current`, `disabled`, and range `data-range-*` attrs.
+ * - `[data-calendar-today]` — jump to today.
+ *
+ * Parent-queried on nested calendars:
+ * - `[data-calendar-day][data-iso="…"]` — focus target when a date-field popup opens.
+ * - `[data-calendar-day][tabindex="0"]` — roving focus fallback.
+ *
+ * Nested hosts: none.
  *
+ * @see https://react-aria.adobe.com/Calendar
+ * @element rui-calendar
  * @attr {string} value - Selected date(s) in the mode-specific ISO format. Default: `''`.
  * @attr {string} min - Earliest selectable ISO date. Default: `''`.
  * @attr {string} max - Latest selectable ISO date. Default: `''`.
@@ -47,29 +66,12 @@ type MonthPanel = {
  * @attr {('single'|'multiple'|'range')} selection-mode - Selection mode. Default: `single`.
  * @attr {number} visible-months - Month grids shown side by side. Default: `1`.
  * @attr {('visible'|'single')} page-behavior - Whether paging moves by all visible months or one month. Default: `visible`.
- *
  * @fires rui-change - Emitted when the selection changes; detail carries `value`, plus `start` / `end` for ranges.
  *
- * @cssclass rui-calendar - Root surface (`role="application"`).
- * @cssclass rui-calendar--multi - Multi-month root modifier.
- * @cssclass rui-calendar__months - Row of month panels.
- * @cssclass rui-calendar__month-panel - Single month grid column.
- * @cssclass rui-calendar__header - Month title row with paging controls.
- * @cssclass rui-calendar__nav - Prev / next month button.
- * @cssclass rui-calendar__nav-spacer - Placeholder where a nav button is absent.
- * @cssclass rui-calendar__month - Month title.
- * @cssclass rui-calendar__weekdays - Weekday header row.
- * @cssclass rui-calendar__weekday - Weekday label.
- * @cssclass rui-calendar__grid - Month grid (`role="grid"`).
- * @cssclass rui-calendar__week - Grid row.
- * @cssclass rui-calendar__day - Day cell button (`role="gridcell"`).
- * @cssclass rui-calendar__footer - Footer row with the today button.
- * @cssclass rui-calendar__today - "Today" jump button.
- *
  * @remarks
  * Arrow keys move the focused day, PageUp / PageDown page the months (Shift
- * adds ±12), and Enter / Space select the focused day. Disabled or out-of-range
- * days are skipped while navigating.
+ * adds ±12), and Enter / Space select the focused day. BEM classes are
+ * presentation-only; behavior keys off the `data-calendar-*` targets above.
  */
 export declare class RuiCalendar extends RadiantElement {
     value: string;

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

@@ -9,9 +9,11 @@ export type RuiCarouselSlideProps = Omit<JsxElementProps<HTMLDivElement>, 'id'>
     id: string;
 };
 /**
- * Slide in the carousel track (APG `group` / `tabpanel` roles are applied by the host).
+ * Slide in the carousel track. Host applies `group` / `tabpanel` roles and visibility.
  *
  * @cssclass rui-carousel__slide - Slide surface.
+ *
+ * @remarks Stamps `[data-slide]` with the slide `id`.
  */
 export declare function RuiCarouselSlide({ id, children, class: className, ...props }: RuiCarouselSlideProps): JsxRenderable;
 export type RuiCarouselControlProps = JsxElementProps<HTMLButtonElement> & {
@@ -23,14 +25,16 @@ export type RuiCarouselControlProps = JsxElementProps<HTMLButtonElement> & {
  * Previous carousel control.
  *
  * @cssclass rui-carousel__nav - Prev nav button (composed with `rui-button`).
+ *
+ * @remarks Stamps `[data-carousel-action="prev"]` and `data-ref="prev"`.
  */
 export declare function RuiCarouselPrev({ children, class: className, disabled, overlay, aria, ...props }: RuiCarouselControlProps): JsxRenderable;
-/** Next carousel control. */
+/** Next carousel control. Stamps `[data-carousel-action="next"]` and `data-ref="next"`. */
 export declare function RuiCarouselNext({ children, class: className, disabled, overlay, aria, ...props }: RuiCarouselControlProps): JsxRenderable;
 export type RuiCarouselRotationProps = JsxElementProps<HTMLButtonElement> & {
     overlay?: boolean;
 };
-/** Play/pause rotation control when `autoplay` or `show-rotation-control` is set. */
+/** 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 & {
     slides?: RuiCarouselSlideData[];

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

@@ -27,16 +27,41 @@ export type RuiCarouselProps = {
     loop?: boolean;
     /** When true, prev/next wrap and controls stay enabled at the ends. Default: true. */
     wrap?: boolean;
-    /** Authored slide count for render-time control state before slot projection. */
+    /** Authored slide count for render-time control state before the view paints slides. */
     slideCount?: number;
 };
 /**
  * `<rui-carousel>` — sequentially displays one slide at a time.
  *
+ * 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,
+ * or use the `RuiCarousel` view helpers which stamp the same targets.
+ *
  * Implements the [APG Carousel pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/):
  * labeled `carousel` region, slide groups or tab panels, optional tabbed pickers,
  * rotation control when autoplay is enabled, and `aria-live` on the slide container.
  *
+ * ## Light-DOM contract
+ *
+ * Required:
+ * - `[data-ref="root"]` — carousel region. View seeds `aria-roledescription="carousel"` and `aria-label`.
+ * - `[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-slide]` — one slide per panel. Host sets `role`, `aria-*`, `aria-hidden`, `data-active`,
+ *   `hidden` (when `transition="none"`), 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.
+ *
+ * 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.
  *
  * @element rui-carousel
@@ -53,33 +78,10 @@ export type RuiCarouselProps = {
  * @attr {boolean} wrap - Keep controls enabled at the ends. Default: `true`.
  * @attr {number} slide-count - Authored slide count for render-time control state. Default: `0`.
  *
- * @cssclass rui-carousel - Root region (`aria-roledescription="carousel"`).
- * @cssclass rui-carousel--none - No animation between slides.
- * @cssclass rui-carousel--slide - Horizontal slide transition.
- * @cssclass rui-carousel--fade - Cross-fade transition.
- * @cssclass rui-carousel--controls-toolbar - Controls below the viewport.
- * @cssclass rui-carousel--controls-overlay - Controls overlaid on the viewport.
- * @cssclass rui-carousel__stage - Viewport wrapper.
- * @cssclass rui-carousel__viewport - Overflow-hidden slide window (`aria-live`).
- * @cssclass rui-carousel__track - Slide track.
- * @cssclass rui-carousel__footer - Controls row below the viewport (`toolbar`).
- * @cssclass rui-carousel__toolbar - Toolbar grid.
- * @cssclass rui-carousel__toolbar-rotation - Rotation control cell.
- * @cssclass rui-carousel__toolbar-center - Indicators cell.
- * @cssclass rui-carousel__toolbar-side--start - Prev control cell.
- * @cssclass rui-carousel__toolbar-side--end - Next control cell.
- * @cssclass rui-carousel__overlay-chrome - Absolute overlay layer over the viewport.
- * @cssclass rui-carousel__overlay-rotation - Rotation control overlay position.
- * @cssclass rui-carousel__controls--overlay - Prev/next overlay row.
- * @cssclass rui-carousel__indicators - Indicator tablist.
- * @cssclass rui-carousel__indicators--overlay - Overlay pill indicator tablist.
- * @cssclass rui-carousel__indicator - Indicator button (`role="tab"`).
- *
  * @remarks
  * Autoplay pauses on hover, pointer interaction, focus, and hidden tabs, and
  * respects `prefers-reduced-motion`. `aria-live` flips to `off` while rotating.
- * Prev/next and rotation chrome classes are authored by the `RuiCarouselPrev` /
- * `RuiCarouselNext` / `RuiCarouselRotation` view helpers for custom placement.
+ * BEM classes live on the view; the host queries `[data-ref="track"]` for slide transitions.
  */
 export declare class RuiCarousel extends RadiantElement {
     label: string;
@@ -93,6 +95,9 @@ export declare class RuiCarousel extends RadiantElement {
     loop: boolean;
     wrap: boolean;
     slideCount: number;
+    trackTarget: HTMLElement;
+    indicatorsTarget: HTMLElement;
+    viewportTarget: HTMLElement;
     private timer;
     private paused;
     /** User explicitly resumed rotation (e.g. via rotation control) despite reduced motion. */

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

@@ -1,2 +1,2 @@
-import{RadiantElement as Dt,customElement as Yt,onEvent as _,onUpdated as Z,prop as x}from"@ecopages/radiant";var ct,dt,ht,pt,ft,yt,bt,_t,vt,mt,gt,wt,xt,At,St,It,Ct,Rt,Pt,Et,Vt,Lt,Tt,kt;function Wt(i,t,e,o,r,s){var c,n,d,v,y,I,m,L=Symbol.metadata||Symbol.for("Symbol.metadata"),P=Object.defineProperty,j=Object.create,z=[j(null),j(null)],N=t.length;function W(a,A,g){return function(l,h){A&&(h=l,l=i);for(var S=0;S<a.length;S++)h=a[S].apply(l,g?[h]:[]);return g?h:l}}function E(a,A,g,l){if(typeof a!="function"&&(l||a!==void 0))throw new TypeError(A+" must "+(g||"be")+" a function"+(l?"":" or undefined"));return a}function tt(a,A,g,l,h,S,T,w,C,R,it){function F(f){if(!it(f))throw new TypeError("Attempted to access private element on non-instance")}var G=[].concat(A[0]),rt=A[3],H=!T,O=h===1,ot=h===3,nt=h===4,$=h===2;function B(f,U,lt){return function(Y,ut){return U&&(ut=Y,Y=a),lt&&lt(Y),p[f].call(Y,ut)}}if(!H){var p={},J=[],V=ot?"get":nt||O?"set":"value";if(C?(R||O?p={get:Mt(function(){return rt(this)},l,"get"),set:function(f){A[4](this,f)}}:p[V]=rt,R||Mt(p[V],l,$?"":V)):R||(p=Object.getOwnPropertyDescriptor(a,l)),!R&&!C){if((n=z[+w][l])&&(n^h)!==7)throw Error("Decorating two elements with the same name ("+p[V].name+") is not supported yet");z[+w][l]=h<3?1:h}}for(var b=a,X=G.length-1;X>=0;X-=g?2:1){var at=E(G[X],"A decorator","be",!0),st=g?G[X-1]:void 0,Q={},q={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");E(U,"An initializer","be",!0),S.push(U)}.bind(null,Q)};if(H)n=at.call(st,b,q),Q.v=1,E(n,"class decorators","return")&&(b=n);else if(q.static=w,q.private=C,n=q.access={has:C?it.bind():function(f){return l in f}},nt||(n.get=C?$?function(f){return F(f),p.value}:B("get",0,F):function(f){return f[l]}),$||ot||(n.set=C?B("set",0,F):function(f,U){f[l]=U}),b=at.call(st,O?{get:p.get,set:p.set}:p[V],q),Q.v=1,O){if(typeof b=="object"&&b)(n=E(b.get,"accessor.get"))&&(p.get=n),(n=E(b.set,"accessor.set"))&&(p.set=n),(n=E(b.init,"accessor.init"))&&J.unshift(n);else if(b!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else E(b,(R?"field":"method")+" decorators","return")&&(R?J.unshift(b):p[V]=b)}return h<2&&T.push(W(J,w,1),W(S,w,0)),R||H||(C?O?T.splice(-1,0,B("get",w),B("set",w)):T.push($?p[V]:E.call.bind(p[V])):P(a,l,p)),b}function et(a){return P(a,L,{configurable:!0,enumerable:!0,value:c})}return s!==void 0&&(c=s[L]),c=j(c??null),y=[],I=function(a){a&&y.push(W(a))},m=function(a,A){for(var g=0;g<e.length;g++){var l=e[g],h=l[1],S=7&h;if((8&h)==a&&!S==A){var T=l[2],w=!!l[3],C=16&h;tt(a?i:i.prototype,l,C,w?"#"+T:$t(T),S,S<2?[]:a?v=v||[]:d=d||[],y,!!a,w,A,a&&w?function(R){return Xt(R)===i}:r)}}},m(8,0),m(0,0),m(8,1),m(0,1),I(d),I(v),n=y,N||et(i),{e:n,get c(){var a=[];return N&&[et(i=tt(i,[t],o,i.name,5,a)),W(a,1)]}}}function $t(i){var t=Bt(i,"string");return typeof t=="symbol"?t:t+""}function Bt(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 Mt(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 Xt(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 k={label:"Carousel",transition:"none",controlsVariant:"toolbar"},Kt=48,Ut,jt=class extends Dt{static{({e:[ht,pt,ft,yt,bt,_t,vt,mt,gt,wt,xt,At,St,It,Ct,Rt,Pt,Et,Vt,Lt,Tt,kt,ct],c:[Ut,dt]}=Wt(this,[Yt("rui-carousel")],[[x({type:String,defaultValue:k.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:k.transition}),0,"transition"],[x({type:String,defaultValue:k.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"],[Z(["index","transition","loop","wrap","controlsVariant"]),2,"onSlideStateUpdated"],[Z(["autoplay","showRotationControl","interval"]),2,"onAutoplayUpdated"],[Z(["showIndicators"]),2,"onIndicatorsUpdated"],[_({selector:'[data-carousel-action="prev"]',type:"click"}),2,"prev"],[_({selector:'[data-carousel-action="next"]',type:"click"}),2,"next"],[_({selector:'[data-carousel-action="rotation"]',type:"click"}),2,"toggleRotation"],[_({selector:"[data-carousel-indicator]",type:"click"}),2,"onIndicatorClick"],[_({selector:"[data-carousel-indicator]",type:"keydown"}),2,"onIndicatorKeydown"],[_({ref:"root",type:"pointerenter"}),2,"onRootPointerEnter"],[_({ref:"root",type:"pointerleave"}),2,"onRootPointerLeave"],[_({ref:"root",type:"focusin"}),2,"onRootFocusIn"],[_({ref:"root",type:"focusout"}),2,"onRootFocusOut"],[_({ref:"viewport",type:"pointerdown"}),2,"onViewportPointerDown"],[_({ref:"viewport",type:"pointermove"}),2,"onViewportPointerMove"],[_({ref:"viewport",type:"pointerup"}),2,"onViewportPointerUp"],[_({ref:"viewport",type:"pointercancel"}),2,"onViewportPointerCancel"]],0,void 0,Dt))}label=(ct(this),ht(this));index=(pt(this),ft(this));autoplay=(yt(this),bt(this));interval=(_t(this),vt(this));transition=(mt(this),gt(this));controlsVariant=(wt(this),xt(this));showIndicators=(At(this),St(this));showRotationControl=(It(this),Ct(this));loop=(Rt(this),Pt(this));wrap=(Et(this),Vt(this));slideCount=(Lt(this),Tt(this));timer=(kt(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,n=`${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",n),r.removeAttribute("aria-roledescription")):(r.setAttribute("role","group"),r.setAttribute("aria-roledescription","slide"),r.setAttribute("aria-label",n),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.querySelector(".rui-carousel__track");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.querySelector('[data-ref="indicators"]');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,n)=>{let d=document.createElement("button");return d.type="button",d.className="rui-carousel__indicator",d.id=this.tabId(n),d.setAttribute("role","tab"),d.setAttribute("data-carousel-indicator",String(n)),d.setAttribute("aria-controls",this.slidePanelId(c,n)),d.setAttribute("aria-label",`Slide ${n+1}`),d})),Array.from(t.querySelectorAll("[data-carousel-indicator]")).forEach((c,n)=>{let d=n===o,v=e[n];v&&(c.id=this.tabId(n),c.setAttribute("aria-controls",this.slidePanelId(v,n))),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.querySelector('[data-ref="viewport"]');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.querySelectorAll('[data-ref="indicators"] [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)<Kt||Math.abs(e)<=Math.abs(o))&&(e<0?this.next():this.prev())}onViewportPointerCancel(t){this.swipePointerId===t.pointerId&&(this.swipePointerId=null)}static{dt()}};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 Ot({id:i,children:t,class:e,...o}){return u("div",{...o,class:M("rui-carousel__slide",e),"data-slide":i,children:t})}function Ft(){return D("span",{class:"rui-carousel__nav-label",children:[u("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u2039"}),"Previous"]})}function Gt(){return D("span",{class:"rui-carousel__nav-label",children:["Next",u("span",{class:"rui-carousel__nav-icon","aria-hidden":"true",children:"\u203A"})]})}function qt({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"}):Ft())})}function zt({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"}):Gt())})}function Nt({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 Ht({autoplay:i,children:t,controlsVariant:e,label:o,next:r,prev:s,rotation:c,showIndicators:n,showRotationControl:d,transition:v}){let y=e==="overlay",I=i||d,m=s??u(qt,{overlay:y}),L=r??u(zt,{overlay:y}),P=I?c??u(Nt,{overlay:y}):null,j=n?u("div",{class:M("rui-carousel__indicators",y&&"rui-carousel__indicators--overlay"),"data-ref":"indicators",role:"tablist","aria-label":"Choose slide to display"}):null,z=D("div",{class:"rui-carousel__toolbar",children:[I?u("div",{class:"rui-carousel__toolbar-rotation",children:P}):null,u("div",{class:"rui-carousel__toolbar-side rui-carousel__toolbar-side--start",children:m}),u("div",{class:"rui-carousel__toolbar-center",children:j}),u("div",{class:"rui-carousel__toolbar-side rui-carousel__toolbar-side--end",children:L})]}),N=y?D("div",{class:"rui-carousel__overlay-chrome",children:[I?u("div",{class:"rui-carousel__overlay-rotation",children:P}):null,D("div",{class:"rui-carousel__controls rui-carousel__controls--overlay",children:[m,L]}),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",children:t}),N]})}),y?null:u("div",{class:"rui-carousel__footer",children:z})]})}function Jt({slides:i,children:t,prev:e,next:o,rotation:r,label:s=k.label,transition:c=k.transition,controlsVariant:n=k.controlsVariant,showIndicators:d,showRotationControl:v,autoplay:y,...I}){let m=i??[],L=i!=null?m.map(P=>u(Ot,{id:P.id,children:P.children})):t;return u("rui-carousel",{...I,label:s,transition:c,controlsVariant:n,showIndicators:d,showRotationControl:v,autoplay:y,slideCount:m.length,children:u(Ht,{autoplay:y,controlsVariant:n,label:s,next:o,prev:e,rotation:r,showIndicators:d,showRotationControl:v,transition:c,children:L})})}export{Jt as RuiCarousel,Ut as RuiCarouselElement,zt as RuiCarouselNext,qt as RuiCarouselPrev,Nt as RuiCarouselRotation,Ot as RuiCarouselSlide};
+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};
 //# sourceMappingURL=index.js.map