@educarehq/solaris-components 0.6.0 → 0.6.2

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, numberAttribute, afterNextRender, Injector, ViewChild, output, forwardRef, Host } from '@angular/core';
+import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, contentChild, model, numberAttribute, output, afterNextRender, Injector, ViewChild, forwardRef, Host } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -2823,41 +2823,110 @@ function buildSpokes(count, minOpacity = 0.12) {
     return res;
 }
 
-class SolarisImageSliderComponent {
-    viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
-    timer = null;
+class SolarisCarouselOverlayDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarouselOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCarouselOverlayDirective, isStandalone: true, selector: "ng-template[solaris-carousel-overlay]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarouselOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-carousel-overlay]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisCarouselSlideDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarouselSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCarouselSlideDirective, isStandalone: true, selector: "ng-template[solaris-carousel-slide]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarouselSlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-carousel-slide]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisCarousel {
     destroyRef = inject(DestroyRef);
+    timer = null;
+    projectedSlide = contentChild(SolarisCarouselSlideDirective, ...(ngDevMode ? [{ debugName: "projectedSlide" }] : []));
+    projectedOverlay = contentChild(SolarisCarouselOverlayDirective, ...(ngDevMode ? [{ debugName: "projectedOverlay" }] : []));
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     radius = input('lg', ...(ngDevMode ? [{ debugName: "radius" }] : []));
-    autoplay = input(true, { ...(ngDevMode ? { debugName: "autoplay" } : {}), transform: booleanAttribute });
-    showDots = input(true, { ...(ngDevMode ? { debugName: "showDots" } : {}), transform: booleanAttribute });
-    intervalMs = input(4500, { ...(ngDevMode ? { debugName: "intervalMs" } : {}), transform: numberAttribute });
-    showArrows = input(true, { ...(ngDevMode ? { debugName: "showArrows" } : {}), transform: booleanAttribute });
     aspect = input('16/9', ...(ngDevMode ? [{ debugName: "aspect" }] : []));
+    appearance = input('plain', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    controlsPosition = input('inside', ...(ngDevMode ? [{ debugName: "controlsPosition" }] : []));
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : {}), transform: booleanAttribute });
+    autoplay = input(false, { ...(ngDevMode ? { debugName: "autoplay" } : {}), transform: booleanAttribute });
+    intervalMs = input(4500, { ...(ngDevMode ? { debugName: "intervalMs" } : {}), transform: numberAttribute });
+    transitionMs = input(520, { ...(ngDevMode ? { debugName: "transitionMs" } : {}), transform: numberAttribute });
     pauseOnHover = input(true, { ...(ngDevMode ? { debugName: "pauseOnHover" } : {}), transform: booleanAttribute });
+    pauseOnFocus = input(true, { ...(ngDevMode ? { debugName: "pauseOnFocus" } : {}), transform: booleanAttribute });
+    resetAutoplayOnInteraction = input(true, { ...(ngDevMode ? { debugName: "resetAutoplayOnInteraction" } : {}), transform: booleanAttribute });
+    showDots = input(true, { ...(ngDevMode ? { debugName: "showDots" } : {}), transform: booleanAttribute });
+    showArrows = input(true, { ...(ngDevMode ? { debugName: "showArrows" } : {}), transform: booleanAttribute });
+    keyboard = input(true, { ...(ngDevMode ? { debugName: "keyboard" } : {}), transform: booleanAttribute });
+    ariaLabel = input('Carousel', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : []));
+    previousLabel = input('Previous slide', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    previousLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "previousLabelKey" }] : []));
+    nextLabel = input('Next slide', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    nextLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "nextLabelKey" }] : []));
+    navigationLabel = input('Slide navigation', ...(ngDevMode ? [{ debugName: "navigationLabel" }] : []));
+    navigationLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "navigationLabelKey" }] : []));
+    goToSlideLabel = input('Go to slide', ...(ngDevMode ? [{ debugName: "goToSlideLabel" }] : []));
+    goToSlideLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "goToSlideLabelKey" }] : []));
+    openLabel = input('Open', ...(ngDevMode ? [{ debugName: "openLabel" }] : []));
+    openLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "openLabelKey" }] : []));
+    textResolver = input(null, ...(ngDevMode ? [{ debugName: "textResolver" }] : []));
+    slideTpl = input(undefined, ...(ngDevMode ? [{ debugName: "slideTpl" }] : []));
     overlayTpl = input(undefined, ...(ngDevMode ? [{ debugName: "overlayTpl" }] : []));
-    paused = signal(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
-    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    slideComponent = input(undefined, ...(ngDevMode ? [{ debugName: "slideComponent" }] : []));
+    overlayComponent = input(undefined, ...(ngDevMode ? [{ debugName: "overlayComponent" }] : []));
+    slideChange = output();
     viewReady = signal(false, ...(ngDevMode ? [{ debugName: "viewReady" }] : []));
+    paused = signal(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
     count = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
-    canRun = computed(() => this.autoplay() && this.count() > 1, ...(ngDevMode ? [{ debugName: "canRun" }] : []));
+    hasMultiple = computed(() => this.count() > 1, ...(ngDevMode ? [{ debugName: "hasMultiple" }] : []));
+    isFirst = computed(() => this.activeIndex() === 0, ...(ngDevMode ? [{ debugName: "isFirst" }] : []));
+    isLast = computed(() => this.activeIndex() === this.count() - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : []));
+    canGoPrev = computed(() => this.loop() || !this.isFirst(), ...(ngDevMode ? [{ debugName: "canGoPrev" }] : []));
+    canGoNext = computed(() => this.loop() || !this.isLast(), ...(ngDevMode ? [{ debugName: "canGoNext" }] : []));
+    isPlaying = computed(() => {
+        return this.autoplay() && this.hasMultiple() && !this.paused();
+    }, ...(ngDevMode ? [{ debugName: "isPlaying" }] : []));
+    canRunAutoplay = computed(() => {
+        return this.viewReady() && this.autoplay() && this.hasMultiple() && !this.paused();
+    }, ...(ngDevMode ? [{ debugName: "canRunAutoplay" }] : []));
+    resolvedSlideTpl = computed(() => {
+        return this.slideTpl() ?? this.projectedSlide()?.templateRef;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSlideTpl" }] : []));
+    resolvedOverlayTpl = computed(() => {
+        return this.overlayTpl() ?? this.projectedOverlay()?.templateRef;
+    }, ...(ngDevMode ? [{ debugName: "resolvedOverlayTpl" }] : []));
     get dataAspect() {
         return this.aspect();
     }
     get dataRadius() {
         return this.radius();
     }
+    get dataAppearance() {
+        return this.appearance();
+    }
+    get dataControlsPosition() {
+        return this.controlsPosition();
+    }
     constructor() {
         afterNextRender(() => this.viewReady.set(true));
         effect((onCleanup) => {
-            const ready = this.viewReady();
-            const run = this.canRun();
-            const paused = this.paused();
-            const ms = this.intervalMs();
-            const len = this.count();
             this.stopTimer();
-            if (!ready || !run || paused || len <= 1)
+            if (!this.canRunAutoplay())
                 return;
+            const ms = this.intervalMs();
             if (!Number.isFinite(ms) || ms <= 0)
                 return;
             this.startTimer(ms);
@@ -2867,67 +2936,184 @@ class SolarisImageSliderComponent {
             const len = this.count();
             const idx = this.activeIndex();
             if (!len) {
-                this.activeIndex.set(0);
+                if (idx !== 0)
+                    this.activeIndex.set(0);
                 return;
             }
-            if (idx > len - 1)
+            if (idx > len - 1) {
+                this.activeIndex.set(len - 1);
+            }
+            if (idx < 0) {
                 this.activeIndex.set(0);
+            }
         });
         this.destroyRef.onDestroy(() => this.stopTimer());
     }
-    goTo = (idx) => {
-        const len = this.count();
-        if (!len)
+    goTo = (index, source = 'api') => {
+        const length = this.count();
+        if (!length)
+            return;
+        const previousIndex = this.activeIndex();
+        const nextIndex = this.normalizeIndex(index, length);
+        if (nextIndex === previousIndex)
+            return;
+        this.activeIndex.set(nextIndex);
+        this.slideChange.emit({
+            index: nextIndex,
+            previousIndex,
+            item: this.items()[nextIndex],
+            source,
+        });
+        if (source !== 'autoplay' && this.resetAutoplayOnInteraction()) {
+            this.restartAutoplay();
+        }
+    };
+    normalizeIndex(index, length) {
+        if (this.loop()) {
+            return ((index % length) + length) % length;
+        }
+        return Math.max(0, Math.min(index, length - 1));
+    }
+    next = (source = 'api') => {
+        if (!this.canGoNext())
             return;
-        const next = ((idx % len) + len) % len;
-        this.activeIndex.set(next);
-        this.bumpAutoplay();
+        this.goTo(this.activeIndex() + 1, source);
     };
-    next = () => {
-        this.goTo(this.activeIndex() + 1);
+    prev = (source = 'api') => {
+        if (!this.canGoPrev())
+            return;
+        this.goTo(this.activeIndex() - 1, source);
+    };
+    pause = () => {
+        this.paused.set(true);
     };
-    prev = () => {
-        this.goTo(this.activeIndex() - 1);
+    resume = () => {
+        this.paused.set(false);
     };
     onMouseEnter() {
         if (!this.pauseOnHover())
             return;
-        this.paused.set(true);
+        this.pause();
     }
     onMouseLeave() {
         if (!this.pauseOnHover())
             return;
-        this.paused.set(false);
+        this.resume();
     }
     onFocusIn() {
-        this.paused.set(true);
+        if (!this.pauseOnFocus())
+            return;
+        this.pause();
     }
     onFocusOut() {
-        if (!this.pauseOnHover())
+        if (!this.pauseOnFocus())
             return;
-        this.paused.set(false);
+        this.resume();
     }
-    overlayCtx(i) {
-        const item = this.items()[i];
+    carouselContext(index) {
+        const item = this.items()[index];
         return {
             $implicit: item,
-            index: i,
-            active: i === this.activeIndex(),
+            item,
+            index,
+            active: index === this.activeIndex(),
+            first: index === 0,
+            last: index === this.count() - 1,
+            count: this.count(),
+            isPlaying: this.isPlaying(),
             goTo: this.goTo,
             next: this.next,
             prev: this.prev,
+            pause: this.pause,
+            resume: this.resume,
+        };
+    }
+    slideComponentInputs(index) {
+        const context = this.carouselContext(index);
+        const itemInputs = context.item.slideInputs ?? {};
+        return {
+            item: context.item,
+            index: context.index,
+            active: context.active,
+            first: context.first,
+            last: context.last,
+            count: context.count,
+            isPlaying: context.isPlaying,
+            goTo: context.goTo,
+            next: context.next,
+            prev: context.prev,
+            pause: context.pause,
+            resume: context.resume,
+            ...itemInputs,
         };
     }
+    overlayComponentInputs(index) {
+        const context = this.carouselContext(index);
+        const itemInputs = context.item.overlayInputs ?? {};
+        return {
+            item: context.item,
+            index: context.index,
+            active: context.active,
+            first: context.first,
+            last: context.last,
+            count: context.count,
+            isPlaying: context.isPlaying,
+            goTo: context.goTo,
+            next: context.next,
+            prev: context.prev,
+            pause: context.pause,
+            resume: context.resume,
+            ...itemInputs,
+        };
+    }
+    text(text, key) {
+        const directValue = text?.trim();
+        if (directValue)
+            return directValue;
+        const resolver = this.textResolver();
+        if (key && resolver)
+            return resolver(key);
+        return '';
+    }
+    itemAlt(item) {
+        return this.text(item.alt, item.altKey);
+    }
+    itemAriaLabel(item) {
+        return (this.text(item.ariaLabel, item.ariaLabelKey) ||
+            this.text(item.alt, item.altKey) ||
+            this.text(this.openLabel(), this.openLabelKey()) ||
+            null);
+    }
+    rootAriaLabel() {
+        return this.text(this.ariaLabel(), this.ariaLabelKey()) || 'Carousel';
+    }
+    previousAriaLabel() {
+        return this.text(this.previousLabel(), this.previousLabelKey()) || 'Previous slide';
+    }
+    nextAriaLabel() {
+        return this.text(this.nextLabel(), this.nextLabelKey()) || 'Next slide';
+    }
+    navigationAriaLabel() {
+        return this.text(this.navigationLabel(), this.navigationLabelKey()) || 'Slide navigation';
+    }
+    dotAriaLabel(index) {
+        const label = this.text(this.goToSlideLabel(), this.goToSlideLabelKey()) || 'Go to slide';
+        return `${label} ${index + 1}`;
+    }
+    trackByItem(index, item) {
+        return item.id ?? index;
+    }
     startTimer(ms) {
-        this.timer = setInterval(() => this.next(), ms);
+        this.timer = setInterval(() => this.next('autoplay'), ms);
     }
     stopTimer() {
-        if (this.timer)
+        if (this.timer) {
             clearInterval(this.timer);
+        }
         this.timer = null;
     }
-    bumpAutoplay() {
-        if (!this.canRun() || this.paused())
+    restartAutoplay() {
+        if (!this.autoplay() || this.paused() || !this.hasMultiple())
             return;
         this.stopTimer();
         const ms = this.intervalMs();
@@ -2936,39 +3122,48 @@ class SolarisImageSliderComponent {
         this.startTimer(ms);
     }
     onKeyDown(ev) {
-        if (this.count() <= 1)
+        if (!this.keyboard() || !this.hasMultiple())
             return;
         switch (ev.key) {
             case 'ArrowLeft':
                 ev.preventDefault();
-                this.prev();
+                this.prev('keyboard');
                 break;
             case 'ArrowRight':
                 ev.preventDefault();
-                this.next();
+                this.next('keyboard');
                 break;
             case 'Home':
                 ev.preventDefault();
-                this.goTo(0);
+                this.goTo(0, 'keyboard');
                 break;
             case 'End':
                 ev.preventDefault();
-                this.goTo(this.count() - 1);
+                this.goTo(this.count() - 1, 'keyboard');
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisImageSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisImageSliderComponent, isStandalone: true, selector: "solaris-image-slider", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, overlayTpl: { classPropertyName: "overlayTpl", publicName: "overlayTpl", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-aspect": "this.dataAspect", "attr.data-radius": "this.dataRadius" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-slider\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"'Image slider'\"\r\n     (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n  <div #viewport class=\"solaris-slider__viewport\">\r\n    <div class=\"solaris-slider__track\"\r\n         [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n      @for (it of items(); track $index) {\r\n        <div class=\"solaris-slider__slide\"\r\n             [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n          @if (it.href) {\r\n            <a class=\"solaris-slider__media\" [href]=\"it.href\" [attr.target]=\"it.target ?? null\"\r\n               [attr.aria-label]=\"it.ariaLabel ?? it.alt ?? 'Open'\">\r\n              <img class=\"solaris-slider__img\" [src]=\"it.src\" [attr.alt]=\"it.alt ?? ''\" />\r\n            </a>\r\n          } @else {\r\n            <div class=\"solaris-slider__media\">\r\n              <img class=\"solaris-slider__img\" [src]=\"it.src\" [attr.alt]=\"it.alt ?? ''\" />\r\n            </div>\r\n          }\r\n\r\n          @if (overlayTpl(); as tpl) {\r\n            <div class=\"solaris-slider__overlay\">\r\n              <ng-container *ngTemplateOutlet=\"tpl; context: overlayCtx($index)\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showArrows() && count() > 1) {\r\n    <button type=\"button\" class=\"solaris-slider__arrow is-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\r\n      <i class=\"ph ph-caret-left\"></i>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"solaris-slider__arrow is-next\" (click)=\"next()\" aria-label=\"Next slide\">\r\n      <i class=\"ph ph-caret-right\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showDots() && count() > 1) {\r\n    <div class=\"solaris-slider__dots\" role=\"tablist\" aria-label=\"Slide navigation\">\r\n      @for (it of items(); track $index) {\r\n        <button type=\"button\" class=\"solaris-slider__dot\" [class.is-active]=\"$index === activeIndex()\"\r\n                (click)=\"goTo($index)\" [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\r\n                [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\">\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}.solaris-slider{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface)}:host([data-radius=sm]) .solaris-slider{border-radius:var(--solaris-radius-sm)}:host([data-radius=md]) .solaris-slider{border-radius:var(--solaris-radius-md)}:host([data-radius=lg]) .solaris-slider{border-radius:var(--solaris-radius-lg)}.solaris-slider__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-slider__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-slider__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-slider__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-slider__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-slider__viewport{aspect-ratio:auto}.solaris-slider__track{height:100%;display:flex;will-change:transform;transition:transform .52s cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-slider__track{transition:none!important}}.solaris-slider__slide{height:100%;flex:0 0 100%;position:relative}.solaris-slider__media{display:block;width:100%;height:100%;position:relative}.solaris-slider__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-slider__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-space-5)}.solaris-slider__overlay :is(a,button,input,textarea,select){pointer-events:auto}.solaris-slider__arrow{top:50%;color:#fff;display:grid;width:4.2rem;opacity:.85;height:4.2rem;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:color-mix(in srgb,#000 28%,transparent);transition:opacity .16s ease,transform .16s ease,filter .16s ease;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent)}.solaris-slider__arrow:hover{opacity:1;filter:brightness(1.08)}.solaris-slider__arrow.is-prev{left:var(--solaris-space-3)}.solaris-slider__arrow.is-next{right:var(--solaris-space-3)}.solaris-slider__arrow i.ph{font-size:2rem;line-height:1}.solaris-slider__dots{left:50%;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:color-mix(in srgb,#000 22%,transparent)}.solaris-slider__dot{border:0;opacity:.35;width:.8rem;height:.8rem;cursor:pointer;background:#fff;border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-slider__dot.is-active{width:2.6rem;opacity:1}.solaris-slider:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCarousel, isStandalone: true, selector: "solaris-carousel", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, resetAutoplayOnInteraction: { classPropertyName: "resetAutoplayOnInteraction", publicName: "resetAutoplayOnInteraction", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabelKey: { classPropertyName: "previousLabelKey", publicName: "previousLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, navigationLabel: { classPropertyName: "navigationLabel", publicName: "navigationLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationLabelKey: { classPropertyName: "navigationLabelKey", publicName: "navigationLabelKey", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabel: { classPropertyName: "goToSlideLabel", publicName: "goToSlideLabel", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabelKey: { classPropertyName: "goToSlideLabelKey", publicName: "goToSlideLabelKey", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, openLabelKey: { classPropertyName: "openLabelKey", publicName: "openLabelKey", isSignal: true, isRequired: false, transformFunction: null }, textResolver: { classPropertyName: "textResolver", publicName: "textResolver", isSignal: true, isRequired: false, transformFunction: null }, slideTpl: { classPropertyName: "slideTpl", publicName: "slideTpl", isSignal: true, isRequired: false, transformFunction: null }, overlayTpl: { classPropertyName: "overlayTpl", publicName: "overlayTpl", isSignal: true, isRequired: false, transformFunction: null }, slideComponent: { classPropertyName: "slideComponent", publicName: "slideComponent", isSignal: true, isRequired: false, transformFunction: null }, overlayComponent: { classPropertyName: "overlayComponent", publicName: "overlayComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-aspect": "this.dataAspect", "attr.data-radius": "this.dataRadius", "attr.data-appearance": "this.dataAppearance", "attr.data-controls-position": "this.dataControlsPosition" } }, queries: [{ propertyName: "projectedSlide", first: true, predicate: SolarisCarouselSlideDirective, descendants: true, isSignal: true }, { propertyName: "projectedOverlay", first: true, predicate: SolarisCarouselOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-carousel\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"rootAriaLabel()\"\r\n  [attr.tabindex]=\"keyboard() ? '0' : null\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n  (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n  <div class=\"solaris-carousel__viewport\">\r\n    <div class=\"solaris-carousel__track\" [style.transition-duration.ms]=\"transitionMs()\"\r\n      [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n      @for (item of items(); track trackByItem($index, item)) {\r\n        <div class=\"solaris-carousel__slide\" role=\"group\" aria-roledescription=\"slide\" [attr.aria-label]=\"($index + 1) + ' / ' + count()\"\r\n          [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n          @if (resolvedSlideTpl(); as tpl) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n            </ng-container>\r\n          } @else if (item.slideComponent; as component) {\r\n            <ng-container\r\n              *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n            </ng-container>\r\n          } @else if (slideComponent(); as component) {\r\n            <ng-container\r\n              *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n            </ng-container>\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\r\n            </ng-container>\r\n          }\r\n\r\n          @if (resolvedOverlayTpl(); as tpl) {\r\n            <div class=\"solaris-carousel__overlay\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n              </ng-container>\r\n            </div>\r\n          } @else if (item.overlayComponent; as component) {\r\n            <div class=\"solaris-carousel__overlay\">\r\n              <ng-container\r\n                *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n              </ng-container>\r\n            </div>\r\n          } @else if (overlayComponent(); as component) {\r\n            <div class=\"solaris-carousel__overlay\">\r\n              <ng-container\r\n                *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n              </ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showArrows() && hasMultiple()) {\r\n    <button type=\"button\" class=\"solaris-carousel__arrow is-prev\" [disabled]=\"!canGoPrev()\" [attr.aria-label]=\"previousAriaLabel()\"\r\n      (click)=\"prev('arrow')\">\r\n      <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"solaris-carousel__arrow is-next\" [disabled]=\"!canGoNext()\" [attr.aria-label]=\"nextAriaLabel()\"\r\n      (click)=\"next('arrow')\">\r\n      <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showDots() && hasMultiple()) {\r\n    <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\r\n      @for (item of items(); track trackByItem($index, item)) {\r\n        <button type=\"button\" class=\"solaris-carousel__dot\" role=\"tab\" [class.is-active]=\"$index === activeIndex()\"\r\n          [attr.aria-label]=\"dotAriaLabel($index)\" [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\r\n          [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\" (click)=\"goTo($index, 'dot')\">\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #defaultImageSlide let-item>\r\n  @if (item.src) {\r\n    @if (item.href) {\r\n      <a class=\"solaris-carousel__media\" [href]=\"item.href\" [attr.target]=\"item.target ?? null\" [attr.aria-label]=\"itemAriaLabel(item)\">\r\n        <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n          [attr.alt]=\"itemAlt(item)\"/>\r\n      </a>\r\n    } @else {\r\n      <div class=\"solaris-carousel__media\">\r\n        <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n          [attr.alt]=\"itemAlt(item)\"/>\r\n      </div>\r\n    }\r\n  } @else {\r\n    <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: color-mix(in srgb, #000 28%, transparent);--solaris-carousel-arrow-color: #fff;--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: #fff;--solaris-carousel-dot-bg-wrapper: color-mix(in srgb, #000 22%, transparent)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md, 0 1.2rem 3rem rgba(0, 0, 0, .12))}:host([data-appearance=hero]) .solaris-carousel{background:#000}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,#000),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity .16s ease,transform .16s ease,filter .16s ease}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisImageSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarousel, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-image-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"solaris-slider\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"'Image slider'\"\r\n     (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n  <div #viewport class=\"solaris-slider__viewport\">\r\n    <div class=\"solaris-slider__track\"\r\n         [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n      @for (it of items(); track $index) {\r\n        <div class=\"solaris-slider__slide\"\r\n             [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n          @if (it.href) {\r\n            <a class=\"solaris-slider__media\" [href]=\"it.href\" [attr.target]=\"it.target ?? null\"\r\n               [attr.aria-label]=\"it.ariaLabel ?? it.alt ?? 'Open'\">\r\n              <img class=\"solaris-slider__img\" [src]=\"it.src\" [attr.alt]=\"it.alt ?? ''\" />\r\n            </a>\r\n          } @else {\r\n            <div class=\"solaris-slider__media\">\r\n              <img class=\"solaris-slider__img\" [src]=\"it.src\" [attr.alt]=\"it.alt ?? ''\" />\r\n            </div>\r\n          }\r\n\r\n          @if (overlayTpl(); as tpl) {\r\n            <div class=\"solaris-slider__overlay\">\r\n              <ng-container *ngTemplateOutlet=\"tpl; context: overlayCtx($index)\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showArrows() && count() > 1) {\r\n    <button type=\"button\" class=\"solaris-slider__arrow is-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\r\n      <i class=\"ph ph-caret-left\"></i>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"solaris-slider__arrow is-next\" (click)=\"next()\" aria-label=\"Next slide\">\r\n      <i class=\"ph ph-caret-right\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showDots() && count() > 1) {\r\n    <div class=\"solaris-slider__dots\" role=\"tablist\" aria-label=\"Slide navigation\">\r\n      @for (it of items(); track $index) {\r\n        <button type=\"button\" class=\"solaris-slider__dot\" [class.is-active]=\"$index === activeIndex()\"\r\n                (click)=\"goTo($index)\" [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\r\n                [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\">\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-width:0}.solaris-slider{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface)}:host([data-radius=sm]) .solaris-slider{border-radius:var(--solaris-radius-sm)}:host([data-radius=md]) .solaris-slider{border-radius:var(--solaris-radius-md)}:host([data-radius=lg]) .solaris-slider{border-radius:var(--solaris-radius-lg)}.solaris-slider__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-slider__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-slider__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-slider__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-slider__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-slider__viewport{aspect-ratio:auto}.solaris-slider__track{height:100%;display:flex;will-change:transform;transition:transform .52s cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-slider__track{transition:none!important}}.solaris-slider__slide{height:100%;flex:0 0 100%;position:relative}.solaris-slider__media{display:block;width:100%;height:100%;position:relative}.solaris-slider__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-slider__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-space-5)}.solaris-slider__overlay :is(a,button,input,textarea,select){pointer-events:auto}.solaris-slider__arrow{top:50%;color:#fff;display:grid;width:4.2rem;opacity:.85;height:4.2rem;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:color-mix(in srgb,#000 28%,transparent);transition:opacity .16s ease,transform .16s ease,filter .16s ease;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent)}.solaris-slider__arrow:hover{opacity:1;filter:brightness(1.08)}.solaris-slider__arrow.is-prev{left:var(--solaris-space-3)}.solaris-slider__arrow.is-next{right:var(--solaris-space-3)}.solaris-slider__arrow i.ph{font-size:2rem;line-height:1}.solaris-slider__dots{left:50%;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:color-mix(in srgb,#000 22%,transparent)}.solaris-slider__dot{border:0;opacity:.35;width:.8rem;height:.8rem;cursor:pointer;background:#fff;border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-slider__dot.is-active{width:2.6rem;opacity:1}.solaris-slider:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], overlayTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTpl", required: false }] }], dataAspect: [{
+            args: [{ selector: 'solaris-carousel', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        NgComponentOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-carousel\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"rootAriaLabel()\"\r\n  [attr.tabindex]=\"keyboard() ? '0' : null\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n  (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n  <div class=\"solaris-carousel__viewport\">\r\n    <div class=\"solaris-carousel__track\" [style.transition-duration.ms]=\"transitionMs()\"\r\n      [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n      @for (item of items(); track trackByItem($index, item)) {\r\n        <div class=\"solaris-carousel__slide\" role=\"group\" aria-roledescription=\"slide\" [attr.aria-label]=\"($index + 1) + ' / ' + count()\"\r\n          [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n          @if (resolvedSlideTpl(); as tpl) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n            </ng-container>\r\n          } @else if (item.slideComponent; as component) {\r\n            <ng-container\r\n              *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n            </ng-container>\r\n          } @else if (slideComponent(); as component) {\r\n            <ng-container\r\n              *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n            </ng-container>\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\r\n            </ng-container>\r\n          }\r\n\r\n          @if (resolvedOverlayTpl(); as tpl) {\r\n            <div class=\"solaris-carousel__overlay\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n              </ng-container>\r\n            </div>\r\n          } @else if (item.overlayComponent; as component) {\r\n            <div class=\"solaris-carousel__overlay\">\r\n              <ng-container\r\n                *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n              </ng-container>\r\n            </div>\r\n          } @else if (overlayComponent(); as component) {\r\n            <div class=\"solaris-carousel__overlay\">\r\n              <ng-container\r\n                *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n              </ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (showArrows() && hasMultiple()) {\r\n    <button type=\"button\" class=\"solaris-carousel__arrow is-prev\" [disabled]=\"!canGoPrev()\" [attr.aria-label]=\"previousAriaLabel()\"\r\n      (click)=\"prev('arrow')\">\r\n      <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"solaris-carousel__arrow is-next\" [disabled]=\"!canGoNext()\" [attr.aria-label]=\"nextAriaLabel()\"\r\n      (click)=\"next('arrow')\">\r\n      <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showDots() && hasMultiple()) {\r\n    <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\r\n      @for (item of items(); track trackByItem($index, item)) {\r\n        <button type=\"button\" class=\"solaris-carousel__dot\" role=\"tab\" [class.is-active]=\"$index === activeIndex()\"\r\n          [attr.aria-label]=\"dotAriaLabel($index)\" [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\r\n          [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\" (click)=\"goTo($index, 'dot')\">\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #defaultImageSlide let-item>\r\n  @if (item.src) {\r\n    @if (item.href) {\r\n      <a class=\"solaris-carousel__media\" [href]=\"item.href\" [attr.target]=\"item.target ?? null\" [attr.aria-label]=\"itemAriaLabel(item)\">\r\n        <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n          [attr.alt]=\"itemAlt(item)\"/>\r\n      </a>\r\n    } @else {\r\n      <div class=\"solaris-carousel__media\">\r\n        <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n          [attr.alt]=\"itemAlt(item)\"/>\r\n      </div>\r\n    }\r\n  } @else {\r\n    <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: color-mix(in srgb, #000 28%, transparent);--solaris-carousel-arrow-color: #fff;--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: #fff;--solaris-carousel-dot-bg-wrapper: color-mix(in srgb, #000 22%, transparent)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md, 0 1.2rem 3rem rgba(0, 0, 0, .12))}:host([data-appearance=hero]) .solaris-carousel{background:#000}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,#000),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity .16s ease,transform .16s ease,filter .16s ease}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { projectedSlide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisCarouselSlideDirective), { isSignal: true }] }], projectedOverlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisCarouselOverlayDirective), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], pauseOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnFocus", required: false }] }], resetAutoplayOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetAutoplayOnInteraction", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], previousLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabelKey", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], nextLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabelKey", required: false }] }], navigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationLabel", required: false }] }], navigationLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationLabelKey", required: false }] }], goToSlideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "goToSlideLabel", required: false }] }], goToSlideLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "goToSlideLabelKey", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], openLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabelKey", required: false }] }], textResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "textResolver", required: false }] }], slideTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideTpl", required: false }] }], overlayTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTpl", required: false }] }], slideComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideComponent", required: false }] }], overlayComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayComponent", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], dataAspect: [{
                 type: HostBinding,
                 args: ['attr.data-aspect']
             }], dataRadius: [{
                 type: HostBinding,
                 args: ['attr.data-radius']
+            }], dataAppearance: [{
+                type: HostBinding,
+                args: ['attr.data-appearance']
+            }], dataControlsPosition: [{
+                type: HostBinding,
+                args: ['attr.data-controls-position']
             }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -8586,5 +8781,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDialogStepsContainer, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, provideSolarisNotifications, repositionTooltipOverlay, uniqueId };
+export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCarousel, SolarisCarouselOverlayDirective, SolarisCarouselSlideDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDialogStepsContainer, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, provideSolarisNotifications, repositionTooltipOverlay, uniqueId };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map