@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-carousel.mjs

@@ -0,0 +1,840 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, booleanAttribute, input, output, DestroyRef, computed, signal, untracked, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, HostAttributeToken, ElementRef, Directive, TemplateRef, contentChild } from '@angular/core';
+import { DEFAULT_AUTOPLAY_DELAY, EMPTY_PAGES, canStep, createCarouselEngine, createCarouselRotation, stepPage, carouselKeyIntent, intentPage, indicatorDistance, revealInStrip } from '@slotted/core/carousel';
+import { injectMessages, injectLocale } from '@slotted/angular/i18n';
+import { carouselMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { NgTemplateOutlet } from '@angular/common';
+import { createRovingTabindex } from '@slotted/core/focus';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+const FALLBACK = {
+    align: 'start',
+    arrows: 'inset',
+    autoplayDelay: DEFAULT_AUTOPLAY_DELAY,
+    draggable: true,
+    loop: false,
+    orientation: 'horizontal',
+    size: 'md',
+    transition: 'slide',
+};
+const CAROUSEL_DEFAULTS = new InjectionToken('slotted carousel defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its carousels look and move; a carousel that
+ * states anything itself still wins. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideCarouselDefaults(defaults) {
+    return {
+        provide: CAROUSEL_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a carousel renders as here, before it states anything of its own. */
+function injectCarouselDefaults() {
+    return inject(CAROUSEL_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+class SlCarouselIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-carousel-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** `autoplay` as an attribute is on; a number is the wait in milliseconds. */
+function autoplayAttribute(value) {
+    if (value === undefined || value === null || value === false || value === 'false')
+        return false;
+    if (value === '' || value === true || value === 'true')
+        return true;
+    const number = Number(value);
+    return Number.isFinite(number) && number > 0 ? number : true;
+}
+function optionalBoolean(value) {
+    return value === undefined ? undefined : booleanAttribute(value);
+}
+/** Whether focus arrived the way a keyboard brings it; an engine without the selector says yes. */
+function focusVisible(target) {
+    if (!(target instanceof Element))
+        return false;
+    try {
+        return target.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}
+/**
+ * A set of slides shown a page at a time, and the controls that move it.
+ *
+ * **The viewport is a native scroller with snap**, so a finger, a trackpad
+ * and the keyboard page it as the platform does. `@slotted/core/carousel`
+ * reads the pages from the slides' own boxes, animates the scroll on the
+ * theme's motion scale, drags it with a mouse and reports where a gesture
+ * ended; the page a consumer owns is decided here, as a request with a reason.
+ *
+ * **The rotation follows the APG.** It never starts unless asked, does not
+ * start for a reader who asked for reduced motion, pauses on hover and on a
+ * hidden document with the time that was left, and stops on the first
+ * keyboard focus inside until the rotation control starts it again.
+ */
+class SlCarousel {
+    /** Present means the consumer owns the page, counted from 0. */
+    page = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /** The page an uncontrolled carousel starts on, read once. */
+    defaultPage = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPage" }] : /* istanbul ignore next */ []));
+    /** Present means the consumer owns whether the rotation runs. */
+    playing = input(undefined, { ...(ngDevMode ? { debugName: "playing" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Whether an uncontrolled rotation starts running. */
+    defaultPlaying = input(undefined, { ...(ngDevMode ? { debugName: "defaultPlaying" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Turns the rotation on: present as an attribute waits the provider's delay, a number that many ms. */
+    autoplay = input(false, { ...(ngDevMode ? { debugName: "autoplay" } : /* istanbul ignore next */ {}), transform: autoplayAttribute });
+    loop = input(undefined, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    draggable = input(undefined, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    transition = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    arrows = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrows" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Written as `--slotted-carousel-slides-per-view`; unset, a container query may write it. */
+    slidesPerView = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slidesPerView" }] : /* istanbul ignore next */ []));
+    /** How many slides a page moves: a number, or `page` for the slides wholly in view. */
+    slidesPerMove = input('page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slidesPerMove" }] : /* istanbul ignore next */ []));
+    /** Words laid over the catalog of the language in force, key by key. */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The page after it moved, for `[(page)]`. */
+    pageChange = output();
+    /** Asked before the page moves, with the reason; `cancel()` keeps the page. */
+    pageRequest = output();
+    /** Whether the rotation runs, after it changed, for `[(playing)]`. */
+    playingChange = output();
+    /** Asked before the rotation starts or stops, with the reason. */
+    playingRequest = output();
+    defaults = injectCarouselDefaults();
+    destroyRef = inject(DestroyRef);
+    baseId = inject(SlCarouselIdFactory).next();
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    resolvedTransition = computed(() => this.transition() ?? this.defaults.transition, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTransition" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? this.defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedArrows = computed(() => this.arrows() ?? this.defaults.arrows, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedArrows" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedLoop = computed(() => this.loop() ?? this.defaults.loop, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLoop" }] : /* istanbul ignore next */ []));
+    resolvedDraggable = computed(() => this.draggable() ?? this.defaults.draggable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDraggable" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this carousel's `messages` laid over them. */
+    t = injectMessages(carouselMessages, this.messages);
+    /** The locale in force: what the counter's numbers are written in. */
+    locale = injectLocale();
+    rotates = computed(() => this.autoplay() !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rotates" }] : /* istanbul ignore next */ []));
+    delay = computed(() => {
+        const value = this.autoplay();
+        return typeof value === 'number' ? value : this.defaults.autoplayDelay;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+    ownPage = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownPage" }] : /* istanbul ignore next */ []));
+    ownPlaying = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownPlaying" }] : /* istanbul ignore next */ []));
+    visualPage = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visualPage" }] : /* istanbul ignore next */ []));
+    pages = signal(EMPTY_PAGES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    slideIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideIds" }] : /* istanbul ignore next */ []));
+    measured = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    held = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    revision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    viewportElement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportElement" }] : /* istanbul ignore next */ []));
+    engine = null;
+    rotation = null;
+    motion = { animate: false, announce: false };
+    placed = null;
+    pageCount = computed(() => this.pages().positions.length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    committed = computed(() => this.page() ?? this.ownPage() ?? untracked(() => this.defaultPage()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "committed" }] : /* istanbul ignore next */ []));
+    /** The page the family holds, kept inside the pages that exist. */
+    current = computed(() => {
+        const count = this.pageCount();
+        const page = this.committed();
+        return count === 0 ? page : Math.min(Math.max(page, 0), count - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** The page the parts draw: the committed one, or the one a gesture is crossing. */
+    shown = computed(() => this.visualPage() ?? this.current(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    isPlaying = computed(() => {
+        if (!this.rotates())
+            return false;
+        return this.playing() ?? this.ownPlaying() ?? this.defaultPlaying() !== false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
+    canPrevious = computed(() => canStep(this.current(), -1, this.pageCount(), this.resolvedLoop()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canPrevious" }] : /* istanbul ignore next */ []));
+    canNext = computed(() => canStep(this.current(), 1, this.pageCount(), this.resolvedLoop()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+    viewportId = `${this.baseId}-viewport`;
+    constructor() {
+        afterNextRender(() => {
+            const viewport = this.viewportElement();
+            if (viewport !== null)
+                this.start(viewport);
+        });
+        /** The viewport follows the page the family holds, whoever moved it. */
+        effect(() => {
+            const current = this.current();
+            this.revision();
+            this.pages();
+            untracked(() => this.place(current));
+        });
+        effect(() => {
+            const playing = this.isPlaying();
+            const count = this.pageCount();
+            untracked(() => {
+                if (playing && count > 1)
+                    this.rotation?.start();
+                else
+                    this.rotation?.stop();
+            });
+        });
+        /** A page that stopped existing is asked away with `resize`. */
+        effect(() => {
+            const count = this.pageCount();
+            untracked(() => {
+                if (count > 0 && this.committed() > count - 1) {
+                    this.go(count - 1, 'resize', undefined, { instant: true });
+                }
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.engine?.destroy();
+            this.rotation?.destroy();
+        });
+    }
+    /** The viewport hands the root its element; the root owns the engine that moves it. */
+    attachViewport(element) {
+        this.viewportElement.set(element);
+    }
+    start(viewport) {
+        const doc = viewport.ownerDocument;
+        if (this.defaultPlaying() !== true && this.playing() === undefined) {
+            const reduced = doc.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)');
+            if (reduced?.matches === true)
+                this.ownPlaying.set(false);
+        }
+        const engine = createCarouselEngine(viewport, {
+            orientation: () => this.resolvedOrientation(),
+            align: () => this.resolvedAlign(),
+            slidesPerMove: () => this.slidesPerMove(),
+            transition: () => this.resolvedTransition(),
+            draggable: () => this.resolvedDraggable(),
+            page: () => this.current(),
+            idPrefix: `${this.baseId}-slide-`,
+            slideLabel: (index, count) => this.t('slide', { index: index + 1, count }),
+            onPages: (pages, ids) => {
+                this.pages.set(pages);
+                this.slideIds.set(ids);
+                this.measured.set(true);
+            },
+            onVisualPage: (page) => this.visualPage.set(page),
+            onSettle: (page, reason, event) => this.go(page, reason, event, { instant: true }),
+            onDraggingChange: (dragging) => this.dragging.set(dragging),
+            onSwipe: (delta, event) => this.step(delta, 'pointer', event),
+            onPeekPress: (slide, event) => {
+                const target = engine.pages().pageOfSlide[slide];
+                if (target !== undefined)
+                    this.go(target, 'pointer', event);
+            },
+        });
+        this.engine = engine;
+        if (this.rotates()) {
+            this.rotation = createCarouselRotation({
+                delay: () => this.delay(),
+                document: doc,
+                onHeldChange: (held) => this.held.set(held),
+                onTick: () => this.tick(),
+            });
+            this.held.set(this.rotation.held());
+            if (this.isPlaying() && this.pageCount() > 1)
+                this.rotation.start();
+        }
+        this.place(this.current());
+    }
+    place(current) {
+        const engine = this.engine;
+        if (engine === null)
+            return;
+        const moved = this.placed !== current;
+        this.placed = current;
+        engine.setCurrent(current);
+        /* An unmoved page is a request the consumer refused: the viewport glides back to it. */
+        engine.scrollToPage(current, { animate: moved ? this.motion.animate : true });
+        const count = this.pageCount();
+        if (moved && this.motion.announce && count > 0) {
+            getLiveAnnouncer(this.viewportElement()?.ownerDocument).announce(this.t('announce', { page: current + 1, count }));
+        }
+        this.motion = { animate: false, announce: false };
+        this.rotation?.restart();
+    }
+    tick() {
+        const count = this.pageCount();
+        const at = this.current();
+        if (count <= 1)
+            return;
+        if (at >= count - 1 && !this.resolvedLoop()) {
+            this.setPlaying(false, 'timeout');
+            return;
+        }
+        this.go(stepPage(at, 1, count, true), 'timeout');
+    }
+    /** Asks for a page, carrying the reason and the originating event. */
+    go(next, reason, source, options = {}) {
+        const count = this.pageCount();
+        if (count === 0 || next < 0 || next >= count)
+            return;
+        if ((reason === 'pointer' || reason === 'keyboard' || reason === 'scroll') &&
+            this.isPlaying()) {
+            this.setPlaying(false, reason, source);
+        }
+        this.visualPage.set(null);
+        this.revision.update((value) => value + 1);
+        const current = this.current();
+        if (next === current)
+            return;
+        this.motion = {
+            animate: options.instant !== true,
+            announce: reason === 'pointer' || reason === 'keyboard' || reason === 'scroll',
+        };
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.page(),
+            initial: current,
+            onRequest: (request) => {
+                this.pageRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled)
+            return;
+        if (moved)
+            this.ownPage.set(next);
+        this.pageChange.emit(next);
+    }
+    /** Steps a page forward or back, within the ends unless the carousel loops. */
+    step(delta, reason, source) {
+        const count = this.pageCount();
+        const current = this.current();
+        if (!canStep(current, delta, count, this.resolvedLoop()))
+            return;
+        this.go(stepPage(current, delta, count, this.resolvedLoop()), reason, source);
+    }
+    /** Asks for the rotation to start or stop. */
+    setPlaying(next, reason, source) {
+        if (!this.rotates() || next === this.isPlaying())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.playing(),
+            initial: this.isPlaying(),
+            onRequest: (request) => {
+                this.playingRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled)
+            return;
+        if (moved)
+            this.ownPlaying.set(next);
+        this.playingChange.emit(next);
+    }
+    /** Asks for a page with reason `programmatic`. */
+    scrollTo(page) {
+        this.go(page, 'programmatic');
+    }
+    /** Asks for the page that holds a slide, with reason `programmatic`. */
+    scrollToSlide(slide) {
+        const target = this.pages().pageOfSlide[slide];
+        if (target !== undefined)
+            this.go(target, 'programmatic');
+    }
+    /** Reads the layout again. */
+    refresh() {
+        this.engine?.measure();
+    }
+    onFocusIn(event) {
+        /* "Automatic slide rotation stops when any element in the carousel receives keyboard focus." */
+        if (this.isPlaying() && focusVisible(event.target))
+            this.setPlaying(false, 'keyboard', event);
+    }
+    onPointerEnter(event) {
+        if (event.pointerType === 'mouse')
+            this.rotation?.hold('hover');
+    }
+    onPointerLeave() {
+        this.rotation?.release('hover');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlCarousel, isStandalone: true, selector: "section[slCarousel]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, defaultPage: { classPropertyName: "defaultPage", publicName: "defaultPage", isSignal: true, isRequired: false, transformFunction: null }, playing: { classPropertyName: "playing", publicName: "playing", isSignal: true, isRequired: false, transformFunction: null }, defaultPlaying: { classPropertyName: "defaultPlaying", publicName: "defaultPlaying", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, slidesPerMove: { classPropertyName: "slidesPerMove", publicName: "slidesPerMove", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageRequest: "pageRequest", playingChange: "playingChange", playingRequest: "playingRequest" }, host: { attributes: { "data-ui": "carousel", "data-part": "root" }, listeners: { "focusin": "onFocusIn($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave()" }, properties: { "attr.aria-roledescription": "t('roleDescription')", "attr.data-orientation": "resolvedOrientation()", "attr.data-transition": "resolvedTransition()", "attr.data-align": "resolvedAlign()", "attr.data-arrows": "resolvedArrows()", "attr.data-size": "resolvedSize()", "attr.data-draggable": "resolvedDraggable() ? '' : null", "attr.data-dragging": "dragging() ? '' : null", "attr.data-measured": "measured() ? '' : null", "attr.data-playing": "isPlaying() ? '' : null", "attr.data-paused": "isPlaying() && held() ? '' : null", "style.--slotted-carousel-slides-per-view": "slidesPerView() ?? null", "style.--slotted-carousel-autoplay-delay": "rotates() ? delay() + 'ms' : null" } }, exportAs: ["slCarousel"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=carousel]{--_control-size: var(--slotted-control-height-md, 34px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-carousel-gap, var(--slotted-space-6, 1rem));--_peek: var(--slotted-carousel-peek, 0px);--_per-view: var(--slotted-carousel-slides-per-view, 1);--_radius: var(--slotted-carousel-radius, var(--slotted-radius-lg, 8px));--_inset: var(--slotted-space-5, .75rem);--_scroll-duration: var(--slotted-carousel-duration, var(--slotted-duration-long));--_dot: var(--slotted-space-4, .5rem);--_dot-current: var(--slotted-space-8, 1.5rem);--_dot-air: var(--slotted-space-3, .375rem);--_line: var(--slotted-border-width-thick, 2px);--_thumbnail: var(--slotted-carousel-thumbnail-size, var(--slotted-space-12, 4rem));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;min-inline-size:0;row-gap:var(--slotted-carousel-controls-gap, var(--slotted-space-5, .75rem))}[data-ui=carousel][data-size=sm]{--_control-size: var(--slotted-control-height-sm, 30px);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=carousel][data-size=lg]{--_control-size: var(--slotted-control-height-lg, 38px);--_icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=carousel][data-arrows=outside]{column-gap:var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto}[data-ui=carousel]>[data-part=viewport]{--_track: max( var(--slotted-carousel-slide-min-size, 0px), calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view)) );border-radius:var(--_radius);display:grid;gap:var(--_gap);grid-area:1 / 1;grid-auto-columns:var(--_track);grid-auto-flow:column;min-inline-size:0;outline:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;padding-inline:var(--_peek);scroll-behavior:auto;scroll-padding-inline:var(--_peek);scroll-snap-type:x mandatory;scrollbar-width:none}[data-ui=carousel][data-arrows=outside]>[data-part=viewport]{grid-area:1 / 2}[data-ui=carousel]>[data-part=viewport]::-webkit-scrollbar{display:none}[data-ui=carousel]>[data-part=viewport]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=carousel]>[data-part=viewport][data-moving]{scroll-snap-type:none}@media(hover:hover)and (pointer:fine){[data-ui=carousel][data-draggable]:not([data-transition=fade])>[data-part=viewport]{cursor:grab}}[data-ui=carousel][data-dragging]>[data-part=viewport]{cursor:grabbing;-webkit-user-select:none;user-select:none}[data-ui=carousel][data-draggable]>[data-part=viewport] img{-webkit-user-drag:none}[data-ui=carousel][data-orientation=vertical]>[data-part=viewport]{block-size:var(--slotted-carousel-viewport-size, 20rem);grid-auto-columns:100%;grid-auto-flow:row;grid-auto-rows:calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view));overflow-x:hidden;overflow-y:auto;overscroll-behavior-block:contain;padding-block:var(--_peek);padding-inline:0;scroll-padding-block:var(--_peek);scroll-padding-inline:0;scroll-snap-type:y mandatory}[data-ui=carousel]>[data-part=viewport]>[data-part=slide]{min-block-size:0;min-inline-size:0;position:relative;scroll-snap-align:start;translate:var(--slotted-carousel-overscroll, none)}[data-ui=carousel][data-align=center]>[data-part=viewport]>[data-part=slide]{scroll-snap-align:center}[data-ui=carousel][data-measured]>[data-part=viewport]>[data-part=slide]:not([data-snap]){scroll-snap-align:none}[data-ui=carousel][data-transition=fade]>[data-part=viewport]{grid-auto-columns:100%;grid-template-areas:\"stack\";overflow:hidden;scroll-snap-type:none;touch-action:pan-y}[data-ui=carousel][data-transition=fade]>[data-part=viewport]>[data-part=slide]{grid-area:stack;opacity:0;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-exit, ease-in),visibility var(--slotted-duration-medium) linear;visibility:hidden}[data-ui=carousel][data-transition=fade]>[data-part=viewport]>[data-part=slide][data-current]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-enter, ease-out),visibility var(--slotted-duration-long) linear;visibility:visible}[data-ui=carousel] [data-part=previous],[data-ui=carousel] [data-part=next],[data-ui=carousel] [data-part=autoplay]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background:var(--slotted-control-surface, Field);block-size:var(--_control-size);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-text, ButtonText);cursor:pointer;display:inline-flex;flex:none;inline-size:var(--_control-size);justify-content:center;margin:0;padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel]>[data-part=previous],[data-ui=carousel]>[data-part=next]{align-self:center;grid-area:1 / 1;margin-inline:var(--_inset);z-index:1}[data-ui=carousel]>[data-part=previous]{justify-self:start}[data-ui=carousel]>[data-part=next]{justify-self:end}[data-ui=carousel][data-arrows=outside]>[data-part=previous]{grid-area:1 / 1;margin-inline:0}[data-ui=carousel][data-arrows=outside]>[data-part=next]{grid-area:1 / 3;margin-inline:0}[data-ui=carousel][data-orientation=vertical]>[data-part=previous],[data-ui=carousel][data-orientation=vertical]>[data-part=next]{justify-self:center;margin-block:var(--_inset);margin-inline:0}[data-ui=carousel][data-orientation=vertical]>[data-part=previous]{align-self:start}[data-ui=carousel][data-orientation=vertical]>[data-part=next]{align-self:end}[data-ui=carousel] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=carousel][data-orientation=vertical] [data-part=previous]>[data-ui=icon]{rotate:-90deg}[data-ui=carousel][data-orientation=vertical] [data-part=next]>[data-ui=icon]{rotate:90deg}[data-ui=carousel][data-orientation=vertical] :is([data-part=previous],[data-part=next])>[data-ui=icon]:dir(rtl){scale:none}[data-ui=carousel] [data-part=previous]:hover:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=next]:hover:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=autoplay]:hover:not([data-disabled]):not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=carousel] [data-part=previous]:active:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=next]:active:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=autoplay]:active:not([data-disabled]):not(:disabled){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);box-shadow:none;scale:.94;transition-duration:var(--slotted-duration-instant)}[data-ui=carousel] [data-part=previous]:focus-visible,[data-ui=carousel] [data-part=next]:focus-visible,[data-ui=carousel] [data-part=autoplay]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=carousel] :is([data-part=previous],[data-part=next])[data-disabled]{border-color:var(--slotted-disabled-border, GrayText);box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=carousel]>[data-part=controls]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-4, .5rem);grid-column:1 / -1;justify-content:center;min-inline-size:0}[data-ui=carousel][data-arrows=outside]>[data-part=controls]{grid-column:2}[data-ui=carousel]>[data-part=controls][data-placement=overlay]{align-self:end;background:var(--slotted-surface-raised, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm, none);gap:var(--slotted-space-2, .25rem);grid-area:1 / 1;justify-self:center;margin-block-end:var(--_inset);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-3, .375rem);z-index:1}[data-ui=carousel]>[data-part=controls][data-placement=overlay]>:is([data-part=previous],[data-part=next],[data-part=autoplay]){--_control-size: var(--slotted-control-inner-size-md, 24px);background:transparent;border-color:transparent;box-shadow:none}[data-ui=carousel][data-size=sm]>[data-part=controls][data-placement=overlay]>:is([data-part=previous],[data-part=next],[data-part=autoplay]){--_control-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=carousel][data-size=lg]>[data-part=controls][data-placement=overlay]>:is([data-part=previous],[data-part=next],[data-part=autoplay]){--_control-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=carousel][data-arrows=outside]>[data-part=controls][data-placement=overlay]{grid-area:1 / 2}[data-ui=carousel]>[data-part=controls]>[data-part=indicators][data-variant=line]{flex:1 1 auto}[data-ui=carousel] [data-part=indicators]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:0}[data-ui=carousel] [data-part=indicator]{appearance:none;background:transparent;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-radius-full, 9999px);color:inherit;cursor:pointer;flex:none;inline-size:calc(var(--_dot) + 2 * var(--_dot-air));margin:0;padding:0;position:relative;transition:inline-size var(--slotted-duration-medium) var(--slotted-easing-standard, ease)}[data-ui=carousel] [data-part=indicator][data-current]{inline-size:calc(var(--_dot-current) + 2 * var(--_dot-air))}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:before,[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:after{block-size:var(--_dot);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(50% - var(--_dot) / 2);inset-inline:var(--_dot-air);position:absolute}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:before{background:var(--slotted-border-strong, transparent);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:hover:not([data-current]):not([data-disabled]):before{background:var(--slotted-text-muted, transparent)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:active:not([data-current]):not([data-disabled]):before{background:var(--slotted-text, transparent);transition-duration:var(--slotted-duration-instant)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:before{background:var(--slotted-text, transparent)}[data-ui=carousel][data-playing] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:before{background:var(--slotted-border-strong, transparent)}[data-ui=carousel][data-playing] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:after{animation:slotted-carousel-countdown var(--slotted-carousel-autoplay-delay, var(--slotted-duration-loop-slow)) linear forwards;background:var(--slotted-text, transparent);inset-inline-end:auto}[data-ui=carousel][data-playing][data-paused] [data-part=indicators]>[data-part=indicator][data-current]:after{animation-play-state:paused}@keyframes slotted-carousel-countdown{0%{inline-size:var(--_dot)}to{inline-size:calc(100% - 2 * var(--_dot-air))}}[data-ui=carousel] [data-part=indicators][data-adaptive]>[data-part=indicator][data-distance=\"2\"]:before{scale:.66}[data-ui=carousel] [data-part=indicators][data-adaptive]>[data-part=indicator][data-distance=far]{inline-size:0;overflow:hidden}[data-ui=carousel] [data-part=indicators][data-variant=line]{gap:var(--slotted-space-2, .25rem)}[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator],[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator][data-current]{flex:1 1 0;inline-size:auto;min-inline-size:var(--slotted-target-min, 24px)}[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator]:before,[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator]:after{block-size:var(--_line);border-radius:var(--slotted-radius-full, 9999px);inset-block-start:calc(50% - var(--_line) / 2);inset-inline:0}[data-ui=carousel][data-playing] [data-part=indicators][data-variant=line]>[data-part=indicator][data-current]:after{animation-name:slotted-carousel-countdown-line}@keyframes slotted-carousel-countdown-line{0%{inline-size:0}to{inline-size:100%}}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]{gap:var(--slotted-space-4, .5rem);justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;padding:calc(var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px));scrollbar-width:none}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator],[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]{block-size:var(--_thumbnail);border-radius:var(--slotted-radius-md, 6px);inline-size:var(--_thumbnail);overflow:hidden;transition:none}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]>*{block-size:100%;display:block;inline-size:100%;object-fit:cover;opacity:.6;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:hover:not([data-current]):not([data-disabled])>*{opacity:.85}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]>*{opacity:1}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:after{border-radius:inherit;box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);content:\"\";inset:0;pointer-events:none;position:absolute;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:hover:not([data-current]):not([data-disabled]):after{box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-strong, transparent)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:active:not([data-current]):not([data-disabled]):after{box-shadow:inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-border-strong, transparent);transition-duration:var(--slotted-duration-instant)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]:after{box-shadow:inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-text, transparent)}[data-ui=carousel] [data-part=indicator]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:focus-visible{outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=carousel] [data-part=counter]{color:var(--slotted-text-muted, GrayText);font-family:var(--slotted-font-family-sans, sans-serif);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);direction:ltr;unicode-bidi:isolate;white-space:nowrap}@media(forced-colors:active){[data-ui=carousel] [data-part=indicator]:before,[data-ui=carousel] [data-part=indicator]:after{forced-color-adjust:none}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:before,[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:after{background:var(--slotted-tone-accent-solid, transparent)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]:after{box-shadow:inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-tone-accent-solid, transparent)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarousel, decorators: [{
+            type: Component,
+            args: [{ selector: 'section[slCarousel]', standalone: true, exportAs: 'slCarousel', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'carousel',
+                        'data-part': 'root',
+                        '[attr.aria-roledescription]': "t('roleDescription')",
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-transition]': 'resolvedTransition()',
+                        '[attr.data-align]': 'resolvedAlign()',
+                        '[attr.data-arrows]': 'resolvedArrows()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-draggable]': "resolvedDraggable() ? '' : null",
+                        '[attr.data-dragging]': "dragging() ? '' : null",
+                        '[attr.data-measured]': "measured() ? '' : null",
+                        '[attr.data-playing]': "isPlaying() ? '' : null",
+                        '[attr.data-paused]': "isPlaying() && held() ? '' : null",
+                        '[style.--slotted-carousel-slides-per-view]': 'slidesPerView() ?? null',
+                        '[style.--slotted-carousel-autoplay-delay]': "rotates() ? delay() + 'ms' : null",
+                        '(focusin)': 'onFocusIn($event)',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave()',
+                    }, styles: ["@layer slotted.components{[data-ui=carousel]{--_control-size: var(--slotted-control-height-md, 34px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-carousel-gap, var(--slotted-space-6, 1rem));--_peek: var(--slotted-carousel-peek, 0px);--_per-view: var(--slotted-carousel-slides-per-view, 1);--_radius: var(--slotted-carousel-radius, var(--slotted-radius-lg, 8px));--_inset: var(--slotted-space-5, .75rem);--_scroll-duration: var(--slotted-carousel-duration, var(--slotted-duration-long));--_dot: var(--slotted-space-4, .5rem);--_dot-current: var(--slotted-space-8, 1.5rem);--_dot-air: var(--slotted-space-3, .375rem);--_line: var(--slotted-border-width-thick, 2px);--_thumbnail: var(--slotted-carousel-thumbnail-size, var(--slotted-space-12, 4rem));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;min-inline-size:0;row-gap:var(--slotted-carousel-controls-gap, var(--slotted-space-5, .75rem))}[data-ui=carousel][data-size=sm]{--_control-size: var(--slotted-control-height-sm, 30px);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=carousel][data-size=lg]{--_control-size: var(--slotted-control-height-lg, 38px);--_icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=carousel][data-arrows=outside]{column-gap:var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto}[data-ui=carousel]>[data-part=viewport]{--_track: max( var(--slotted-carousel-slide-min-size, 0px), calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view)) );border-radius:var(--_radius);display:grid;gap:var(--_gap);grid-area:1 / 1;grid-auto-columns:var(--_track);grid-auto-flow:column;min-inline-size:0;outline:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;padding-inline:var(--_peek);scroll-behavior:auto;scroll-padding-inline:var(--_peek);scroll-snap-type:x mandatory;scrollbar-width:none}[data-ui=carousel][data-arrows=outside]>[data-part=viewport]{grid-area:1 / 2}[data-ui=carousel]>[data-part=viewport]::-webkit-scrollbar{display:none}[data-ui=carousel]>[data-part=viewport]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=carousel]>[data-part=viewport][data-moving]{scroll-snap-type:none}@media(hover:hover)and (pointer:fine){[data-ui=carousel][data-draggable]:not([data-transition=fade])>[data-part=viewport]{cursor:grab}}[data-ui=carousel][data-dragging]>[data-part=viewport]{cursor:grabbing;-webkit-user-select:none;user-select:none}[data-ui=carousel][data-draggable]>[data-part=viewport] img{-webkit-user-drag:none}[data-ui=carousel][data-orientation=vertical]>[data-part=viewport]{block-size:var(--slotted-carousel-viewport-size, 20rem);grid-auto-columns:100%;grid-auto-flow:row;grid-auto-rows:calc((100% - (var(--_per-view) - 1) * var(--_gap)) / var(--_per-view));overflow-x:hidden;overflow-y:auto;overscroll-behavior-block:contain;padding-block:var(--_peek);padding-inline:0;scroll-padding-block:var(--_peek);scroll-padding-inline:0;scroll-snap-type:y mandatory}[data-ui=carousel]>[data-part=viewport]>[data-part=slide]{min-block-size:0;min-inline-size:0;position:relative;scroll-snap-align:start;translate:var(--slotted-carousel-overscroll, none)}[data-ui=carousel][data-align=center]>[data-part=viewport]>[data-part=slide]{scroll-snap-align:center}[data-ui=carousel][data-measured]>[data-part=viewport]>[data-part=slide]:not([data-snap]){scroll-snap-align:none}[data-ui=carousel][data-transition=fade]>[data-part=viewport]{grid-auto-columns:100%;grid-template-areas:\"stack\";overflow:hidden;scroll-snap-type:none;touch-action:pan-y}[data-ui=carousel][data-transition=fade]>[data-part=viewport]>[data-part=slide]{grid-area:stack;opacity:0;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-exit, ease-in),visibility var(--slotted-duration-medium) linear;visibility:hidden}[data-ui=carousel][data-transition=fade]>[data-part=viewport]>[data-part=slide][data-current]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-enter, ease-out),visibility var(--slotted-duration-long) linear;visibility:visible}[data-ui=carousel] [data-part=previous],[data-ui=carousel] [data-part=next],[data-ui=carousel] [data-part=autoplay]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background:var(--slotted-control-surface, Field);block-size:var(--_control-size);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-control-shadow, none);color:var(--slotted-text, ButtonText);cursor:pointer;display:inline-flex;flex:none;inline-size:var(--_control-size);justify-content:center;margin:0;padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel]>[data-part=previous],[data-ui=carousel]>[data-part=next]{align-self:center;grid-area:1 / 1;margin-inline:var(--_inset);z-index:1}[data-ui=carousel]>[data-part=previous]{justify-self:start}[data-ui=carousel]>[data-part=next]{justify-self:end}[data-ui=carousel][data-arrows=outside]>[data-part=previous]{grid-area:1 / 1;margin-inline:0}[data-ui=carousel][data-arrows=outside]>[data-part=next]{grid-area:1 / 3;margin-inline:0}[data-ui=carousel][data-orientation=vertical]>[data-part=previous],[data-ui=carousel][data-orientation=vertical]>[data-part=next]{justify-self:center;margin-block:var(--_inset);margin-inline:0}[data-ui=carousel][data-orientation=vertical]>[data-part=previous]{align-self:start}[data-ui=carousel][data-orientation=vertical]>[data-part=next]{align-self:end}[data-ui=carousel] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=carousel][data-orientation=vertical] [data-part=previous]>[data-ui=icon]{rotate:-90deg}[data-ui=carousel][data-orientation=vertical] [data-part=next]>[data-ui=icon]{rotate:90deg}[data-ui=carousel][data-orientation=vertical] :is([data-part=previous],[data-part=next])>[data-ui=icon]:dir(rtl){scale:none}[data-ui=carousel] [data-part=previous]:hover:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=next]:hover:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=autoplay]:hover:not([data-disabled]):not(:disabled){background:var(--slotted-tone-secondary-subtle-hover, ButtonFace)}[data-ui=carousel] [data-part=previous]:active:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=next]:active:not([data-disabled]):not(:disabled),[data-ui=carousel] [data-part=autoplay]:active:not([data-disabled]):not(:disabled){background:var(--slotted-tone-secondary-subtle-active, ButtonFace);box-shadow:none;scale:.94;transition-duration:var(--slotted-duration-instant)}[data-ui=carousel] [data-part=previous]:focus-visible,[data-ui=carousel] [data-part=next]:focus-visible,[data-ui=carousel] [data-part=autoplay]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=carousel] :is([data-part=previous],[data-part=next])[data-disabled]{border-color:var(--slotted-disabled-border, GrayText);box-shadow:none;color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=carousel]>[data-part=controls]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-4, .5rem);grid-column:1 / -1;justify-content:center;min-inline-size:0}[data-ui=carousel][data-arrows=outside]>[data-part=controls]{grid-column:2}[data-ui=carousel]>[data-part=controls][data-placement=overlay]{align-self:end;background:var(--slotted-surface-raised, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-shadow-sm, none);gap:var(--slotted-space-2, .25rem);grid-area:1 / 1;justify-self:center;margin-block-end:var(--_inset);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-3, .375rem);z-index:1}[data-ui=carousel]>[data-part=controls][data-placement=overlay]>:is([data-part=previous],[data-part=next],[data-part=autoplay]){--_control-size: var(--slotted-control-inner-size-md, 24px);background:transparent;border-color:transparent;box-shadow:none}[data-ui=carousel][data-size=sm]>[data-part=controls][data-placement=overlay]>:is([data-part=previous],[data-part=next],[data-part=autoplay]){--_control-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=carousel][data-size=lg]>[data-part=controls][data-placement=overlay]>:is([data-part=previous],[data-part=next],[data-part=autoplay]){--_control-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=carousel][data-arrows=outside]>[data-part=controls][data-placement=overlay]{grid-area:1 / 2}[data-ui=carousel]>[data-part=controls]>[data-part=indicators][data-variant=line]{flex:1 1 auto}[data-ui=carousel] [data-part=indicators]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:0}[data-ui=carousel] [data-part=indicator]{appearance:none;background:transparent;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-radius-full, 9999px);color:inherit;cursor:pointer;flex:none;inline-size:calc(var(--_dot) + 2 * var(--_dot-air));margin:0;padding:0;position:relative;transition:inline-size var(--slotted-duration-medium) var(--slotted-easing-standard, ease)}[data-ui=carousel] [data-part=indicator][data-current]{inline-size:calc(var(--_dot-current) + 2 * var(--_dot-air))}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:before,[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:after{block-size:var(--_dot);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(50% - var(--_dot) / 2);inset-inline:var(--_dot-air);position:absolute}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:before{background:var(--slotted-border-strong, transparent);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:hover:not([data-current]):not([data-disabled]):before{background:var(--slotted-text-muted, transparent)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:active:not([data-current]):not([data-disabled]):before{background:var(--slotted-text, transparent);transition-duration:var(--slotted-duration-instant)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:before{background:var(--slotted-text, transparent)}[data-ui=carousel][data-playing] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:before{background:var(--slotted-border-strong, transparent)}[data-ui=carousel][data-playing] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:after{animation:slotted-carousel-countdown var(--slotted-carousel-autoplay-delay, var(--slotted-duration-loop-slow)) linear forwards;background:var(--slotted-text, transparent);inset-inline-end:auto}[data-ui=carousel][data-playing][data-paused] [data-part=indicators]>[data-part=indicator][data-current]:after{animation-play-state:paused}@keyframes slotted-carousel-countdown{0%{inline-size:var(--_dot)}to{inline-size:calc(100% - 2 * var(--_dot-air))}}[data-ui=carousel] [data-part=indicators][data-adaptive]>[data-part=indicator][data-distance=\"2\"]:before{scale:.66}[data-ui=carousel] [data-part=indicators][data-adaptive]>[data-part=indicator][data-distance=far]{inline-size:0;overflow:hidden}[data-ui=carousel] [data-part=indicators][data-variant=line]{gap:var(--slotted-space-2, .25rem)}[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator],[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator][data-current]{flex:1 1 0;inline-size:auto;min-inline-size:var(--slotted-target-min, 24px)}[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator]:before,[data-ui=carousel] [data-part=indicators][data-variant=line]>[data-part=indicator]:after{block-size:var(--_line);border-radius:var(--slotted-radius-full, 9999px);inset-block-start:calc(50% - var(--_line) / 2);inset-inline:0}[data-ui=carousel][data-playing] [data-part=indicators][data-variant=line]>[data-part=indicator][data-current]:after{animation-name:slotted-carousel-countdown-line}@keyframes slotted-carousel-countdown-line{0%{inline-size:0}to{inline-size:100%}}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]{gap:var(--slotted-space-4, .5rem);justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;padding:calc(var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px));scrollbar-width:none}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator],[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]{block-size:var(--_thumbnail);border-radius:var(--slotted-radius-md, 6px);inline-size:var(--_thumbnail);overflow:hidden;transition:none}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]>*{block-size:100%;display:block;inline-size:100%;object-fit:cover;opacity:.6;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:hover:not([data-current]):not([data-disabled])>*{opacity:.85}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]>*{opacity:1}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:after{border-radius:inherit;box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);content:\"\";inset:0;pointer-events:none;position:absolute;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, ease)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:hover:not([data-current]):not([data-disabled]):after{box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-strong, transparent)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator]:active:not([data-current]):not([data-disabled]):after{box-shadow:inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-border-strong, transparent);transition-duration:var(--slotted-duration-instant)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]:after{box-shadow:inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-text, transparent)}[data-ui=carousel] [data-part=indicator]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator]:focus-visible{outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=carousel] [data-part=counter]{color:var(--slotted-text-muted, GrayText);font-family:var(--slotted-font-family-sans, sans-serif);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);direction:ltr;unicode-bidi:isolate;white-space:nowrap}@media(forced-colors:active){[data-ui=carousel] [data-part=indicator]:before,[data-ui=carousel] [data-part=indicator]:after{forced-color-adjust:none}[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:before,[data-ui=carousel] [data-part=indicators]:not([data-variant=thumbnails])>[data-part=indicator][data-current]:after{background:var(--slotted-tone-accent-solid, transparent)}[data-ui=carousel] [data-part=indicators][data-variant=thumbnails]>[data-part=indicator][data-current]:after{box-shadow:inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-tone-accent-solid, transparent)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], defaultPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPage", required: false }] }], playing: [{ type: i0.Input, args: [{ isSignal: true, alias: "playing", required: false }] }], defaultPlaying: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPlaying", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], slidesPerMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerMove", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageRequest: [{ type: i0.Output, args: ["pageRequest"] }], playingChange: [{ type: i0.Output, args: ["playingChange"] }], playingRequest: [{ type: i0.Output, args: ["playingRequest"] }] } });
+
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports the
+ * click count. It is the rule every activating family in this library writes.
+ */
+function activationReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/** The `aria-label` the consumer wrote, read before the host binding writes the family's. */
+function consumerLabel() {
+    return inject(new HostAttributeToken('aria-label'), { optional: true });
+}
+/**
+ * The scroller, and the one element the family moves. It takes focus of its
+ * own: the arrows of its axis, `PageUp`, `PageDown`, `Home` and `End` move a
+ * page, and a held key moves without animating.
+ */
+class SlCarouselViewport {
+    carousel = inject(SlCarousel);
+    label = consumerLabel();
+    element = inject(ElementRef).nativeElement;
+    constructor() {
+        this.carousel.attachViewport(this.element);
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented || event.target !== this.element)
+            return;
+        const direction = getComputedStyle(this.element).direction === 'rtl' ? 'rtl' : 'ltr';
+        const intent = carouselKeyIntent(event.key, this.carousel.resolvedOrientation(), direction);
+        if (intent === null)
+            return;
+        const target = intentPage(intent, this.carousel.shown(), this.carousel.pageCount(), this.carousel.resolvedLoop());
+        if (target === -1)
+            return;
+        event.preventDefault();
+        this.carousel.go(target, 'keyboard', event, { instant: event.repeat });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselViewport, isStandalone: true, selector: "[slCarouselViewport]", host: { attributes: { "data-part": "viewport", "role": "group", "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "id": "carousel.viewportId", "attr.aria-label": "label ?? carousel.t('viewport')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCarouselViewport]',
+                    standalone: true,
+                    host: {
+                        'data-part': 'viewport',
+                        role: 'group',
+                        tabindex: '0',
+                        '[id]': 'carousel.viewportId',
+                        '[attr.aria-label]': "label ?? carousel.t('viewport')",
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * One slide. The engine names it "3 de 8" unless the consumer wrote a name,
+ * marks it in view, and makes it `inert` when it is not.
+ */
+class SlCarouselSlide {
+    carousel = inject(SlCarousel);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselSlide, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselSlide, isStandalone: true, selector: "[slCarouselSlide]", host: { attributes: { "data-part": "slide", "role": "group" }, properties: { "attr.aria-roledescription": "carousel.t('slideRoleDescription')" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselSlide, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCarouselSlide]',
+                    standalone: true,
+                    host: {
+                        'data-part': 'slide',
+                        role: 'group',
+                        '[attr.aria-roledescription]': "carousel.t('slideRoleDescription')",
+                    },
+                }]
+        }] });
+/** The control that shows the previous page; at the first page without a loop it stays, and says so. */
+class SlCarouselPrevious {
+    carousel = inject(SlCarousel);
+    label = consumerLabel();
+    onClick(event) {
+        if (event.defaultPrevented || !this.carousel.canPrevious())
+            return;
+        this.carousel.step(-1, activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselPrevious, isStandalone: true, selector: "button[slCarouselPrevious]", host: { attributes: { "data-part": "previous", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-controls": "carousel.viewportId", "attr.aria-label": "label ?? carousel.t('previous')", "attr.aria-disabled": "carousel.canPrevious() ? null : 'true'", "attr.data-disabled": "carousel.canPrevious() ? null : ''" } }, ngImport: i0, template: `<ng-content
+    ><span slIcon [directional]="carousel.resolvedOrientation() === 'horizontal'"
+      ><svg slGlyph name="chevron-right"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselPrevious, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slCarouselPrevious]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon [directional]="carousel.resolvedOrientation() === 'horizontal'"
+      ><svg slGlyph name="chevron-right"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'previous',
+                        type: 'button',
+                        '[attr.aria-controls]': 'carousel.viewportId',
+                        '[attr.aria-label]': "label ?? carousel.t('previous')",
+                        '[attr.aria-disabled]': "carousel.canPrevious() ? null : 'true'",
+                        '[attr.data-disabled]': "carousel.canPrevious() ? null : ''",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/** The control that shows the next page. */
+class SlCarouselNext {
+    carousel = inject(SlCarousel);
+    label = consumerLabel();
+    onClick(event) {
+        if (event.defaultPrevented || !this.carousel.canNext())
+            return;
+        this.carousel.step(1, activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselNext, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselNext, isStandalone: true, selector: "button[slCarouselNext]", host: { attributes: { "data-part": "next", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-controls": "carousel.viewportId", "attr.aria-label": "label ?? carousel.t('next')", "attr.aria-disabled": "carousel.canNext() ? null : 'true'", "attr.data-disabled": "carousel.canNext() ? null : ''" } }, ngImport: i0, template: `<ng-content
+    ><span slIcon [directional]="carousel.resolvedOrientation() === 'horizontal'"
+      ><svg slGlyph name="chevron-right"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselNext, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slCarouselNext]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon [directional]="carousel.resolvedOrientation() === 'horizontal'"
+      ><svg slGlyph name="chevron-right"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'next',
+                        type: 'button',
+                        '[attr.aria-controls]': 'carousel.viewportId',
+                        '[attr.aria-label]': "label ?? carousel.t('next')",
+                        '[attr.aria-disabled]': "carousel.canNext() ? null : 'true'",
+                        '[attr.data-disabled]': "carousel.canNext() ? null : ''",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/**
+ * The rotation control, named by the action it performs and carrying no
+ * pressed state, as the APG asks. Hidden in a carousel that does not rotate.
+ */
+class SlCarouselAutoplay {
+    carousel = inject(SlCarousel);
+    label = consumerLabel();
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.carousel.setPlaying(!this.carousel.isPlaying(), activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselAutoplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselAutoplay, isStandalone: true, selector: "button[slCarouselAutoplay]", host: { attributes: { "data-part": "autoplay", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.hidden": "carousel.rotates() ? null : ''", "attr.aria-controls": "carousel.viewportId", "attr.aria-label": "label ?? carousel.t(carousel.isPlaying() ? 'stop' : 'start')" } }, ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="carousel.isPlaying() ? 'pause' : 'play'"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselAutoplay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slCarouselAutoplay]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="carousel.isPlaying() ? 'pause' : 'play'"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'autoplay',
+                        type: 'button',
+                        '[attr.hidden]': "carousel.rotates() ? null : ''",
+                        '[attr.aria-controls]': 'carousel.viewportId',
+                        '[attr.aria-label]': "label ?? carousel.t(carousel.isPlaying() ? 'stop' : 'start')",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/** The bar the controls stand in: under the viewport, or over its foot. */
+class SlCarouselControls {
+    placement = input('below', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselControls, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlCarouselControls, isStandalone: true, selector: "[slCarouselControls]", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "controls" }, properties: { "attr.data-placement": "placement()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselControls, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCarouselControls]',
+                    standalone: true,
+                    host: {
+                        'data-part': 'controls',
+                        '[attr.data-placement]': 'placement()',
+                    },
+                }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
+/** One page in the picker. Its content is the family's mark, or what the consumer puts in it. */
+class SlCarouselIndicator {
+    /** The page this indicator shows. */
+    page = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    carousel = inject(SlCarousel);
+    label = consumerLabel();
+    element = inject(ElementRef).nativeElement;
+    current = computed(() => this.carousel.shown() === this.page(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    distance = computed(() => indicatorDistance(this.page(), this.carousel.shown(), this.carousel.pageCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distance" }] : /* istanbul ignore next */ []));
+    controls = computed(() => {
+        const first = this.carousel.pages().starts[this.page()];
+        return first === undefined ? null : (this.carousel.slideIds()[first] ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /** A thumbnail is named by its picture; a dot or a segment by the page. */
+    resolvedLabel = computed(() => {
+        if (this.label !== null)
+            return this.label;
+        if (this.element.childElementCount > 0)
+            return null;
+        return this.carousel.t('indicator', {
+            page: this.page() + 1,
+            count: this.carousel.pageCount(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.carousel.go(this.page(), activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlCarouselIndicator, isStandalone: true, selector: "button[slCarouselIndicator]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-part": "indicator", "role": "tab", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "current()", "attr.aria-controls": "controls()", "attr.aria-label": "resolvedLabel()", "attr.data-current": "current() ? '' : null", "attr.data-distance": "distance()", "attr.tabindex": "current() ? 0 : -1" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIndicator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slCarouselIndicator]',
+                    standalone: true,
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'indicator',
+                        role: 'tab',
+                        type: 'button',
+                        '[attr.aria-selected]': 'current()',
+                        '[attr.aria-controls]': 'controls()',
+                        '[attr.aria-label]': 'resolvedLabel()',
+                        '[attr.data-current]': "current() ? '' : null",
+                        '[attr.data-distance]': 'distance()',
+                        '[attr.tabindex]': 'current() ? 0 : -1',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }] } });
+/**
+ * The template a slide picker draws each indicator from, with the page as
+ * its implicit context: `<ng-template slCarouselIndicatorTemplate let-page>`.
+ */
+class SlCarouselIndicatorTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIndicatorTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselIndicatorTemplate, isStandalone: true, selector: "ng-template[slCarouselIndicatorTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIndicatorTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slCarouselIndicatorTemplate]', standalone: true }]
+        }] });
+/**
+ * The slide picker, as the APG's tabs: one tab stop, arrows that move and
+ * show and stop at the ends. Without a template the family draws a dot — or a
+ * segment — per page.
+ */
+class SlCarouselIndicators {
+    variant = input('dots', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    carousel = inject(SlCarousel);
+    label = consumerLabel();
+    custom = contentChild(SlCarouselIndicatorTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "custom" }] : /* istanbul ignore next */ []));
+    element = inject(ElementRef).nativeElement;
+    roving = null;
+    pageList = computed(() => Array.from({ length: this.carousel.pageCount() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageList" }] : /* istanbul ignore next */ []));
+    adaptive = computed(() => this.variant() === 'dots' && indicatorDistance(0, 0, this.carousel.pageCount()) !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "adaptive" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.roving = createRovingTabindex(this.element, {
+                itemSelector: '[data-part="indicator"]',
+                loop: false,
+                orientation: () => 'horizontal',
+                onMove: (index) => this.carousel.go(index, 'keyboard'),
+            });
+        });
+        effect(() => {
+            const page = this.carousel.shown();
+            this.pageList();
+            untracked(() => {
+                /* After the indicators of a new page count have rendered. */
+                queueMicrotask(() => {
+                    this.roving?.refresh();
+                    this.roving?.setActive(page);
+                    if (this.variant() !== 'thumbnails')
+                        return;
+                    const item = this.element.querySelectorAll('[data-part="indicator"]')[page];
+                    if (item !== undefined)
+                        revealInStrip(this.element, item);
+                });
+            });
+        });
+        inject(DestroyRef).onDestroy(() => this.roving?.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIndicators, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlCarouselIndicators, isStandalone: true, selector: "[slCarouselIndicators]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "indicators", "role": "tablist" }, properties: { "attr.aria-label": "label ?? carousel.t('indicators')", "attr.data-variant": "variant()", "attr.data-adaptive": "adaptive() ? '' : null" } }, queries: [{ propertyName: "custom", first: true, predicate: SlCarouselIndicatorTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `@for (page of pageList(); track page) {
+    @if (custom(); as custom) {
+      <ng-container *ngTemplateOutlet="custom.template; context: { $implicit: page }" />
+    } @else {
+      <button slCarouselIndicator [page]="page"></button>
+    }
+  }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlCarouselIndicator, selector: "button[slCarouselIndicator]", inputs: ["page"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselIndicators, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slCarouselIndicators]',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, SlCarouselIndicator],
+                    template: `@for (page of pageList(); track page) {
+    @if (custom(); as custom) {
+      <ng-container *ngTemplateOutlet="custom.template; context: { $implicit: page }" />
+    } @else {
+      <button slCarouselIndicator [page]="page"></button>
+    }
+  }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'indicators',
+                        role: 'tablist',
+                        '[attr.aria-label]': "label ?? carousel.t('indicators')",
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-adaptive]': "adaptive() ? '' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], custom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlCarouselIndicatorTemplate), { isSignal: true }] }] } });
+/**
+ * "3 / 8", hidden from assistive technology: the slides' names and the
+ * announcement already say where the reader is.
+ */
+class SlCarouselCounter {
+    carousel = inject(SlCarousel);
+    number = computed(() => new Intl.NumberFormat(this.carousel.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "number" }] : /* istanbul ignore next */ []));
+    text = computed(() => {
+        const count = this.carousel.pageCount();
+        const shown = count === 0 ? 0 : this.carousel.shown() + 1;
+        const number = this.number();
+        return `${number.format(shown)} / ${number.format(count)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselCounter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlCarouselCounter, isStandalone: true, selector: "[slCarouselCounter]", host: { attributes: { "data-part": "counter", "aria-hidden": "true" } }, ngImport: i0, template: '{{ text() }}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCarouselCounter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slCarouselCounter]',
+                    standalone: true,
+                    template: '{{ text() }}',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'counter',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CAROUSEL_DEFAULTS, SlCarousel, SlCarouselAutoplay, SlCarouselControls, SlCarouselCounter, SlCarouselIdFactory, SlCarouselIndicator, SlCarouselIndicatorTemplate, SlCarouselIndicators, SlCarouselNext, SlCarouselPrevious, SlCarouselSlide, SlCarouselViewport, injectCarouselDefaults, provideCarouselDefaults };
+//# sourceMappingURL=slotted-angular-carousel.mjs.map