@educarehq/solaris-components 0.4.4 → 0.4.7

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,9 +1,9 @@
 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, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, input, viewChild, numberAttribute, afterNextRender, ViewChild, output, forwardRef, Host, Injector } 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, ViewChild, Injector, output, 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';
-import { fromEvent, merge } from 'rxjs';
+import { fromEvent, Subject, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { RouterLink } from '@angular/router';
@@ -11,7 +11,7 @@ import * as i1 from '@angular/common';
 import { NgClass, NgTemplateOutlet, CommonModule, NgStyle, isPlatformBrowser, DOCUMENT, NgOptimizedImage } from '@angular/common';
 import { SolarisTranslationPipe, SOLARIS_TRANSLATION, SOLARIS_TRANSLATION_CONFIGURATION } from '@educarehq/solaris-services';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, NgForm, FormGroupDirective, NgControl, NG_VALIDATORS } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { getCountries, getCountryCallingCode, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import intlTelInput from 'intl-tel-input';
 
@@ -978,10 +978,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
-function clamp$1(v, min, max) {
+function clamp$2(v, min, max) {
     return Math.max(min, Math.min(max, v));
 }
-function initialXY(anchor, panel, placement, offset) {
+function initialXY$1(anchor, panel, placement, offset) {
     const axMid = anchor.left + anchor.width / 2;
     const ayMid = anchor.top + anchor.height / 2;
     switch (placement) {
@@ -1022,10 +1022,10 @@ function computePopoverPosition(anchorRect, panelRect, configuration) {
         const bottom = y + panelRect.height;
         return left >= pad && top >= pad && right <= vw - pad && bottom <= vh - pad;
     };
-    let pos = initialXY(anchorRect, panelRect, applied, configuration.offset);
+    let pos = initialXY$1(anchorRect, panelRect, applied, configuration.offset);
     if (configuration.autoFlip && !fits(pos.x, pos.y)) {
         const flipped = flipPlacement(applied);
-        const flippedPos = initialXY(anchorRect, panelRect, flipped, configuration.offset);
+        const flippedPos = initialXY$1(anchorRect, panelRect, flipped, configuration.offset);
         if (fits(flippedPos.x, flippedPos.y)) {
             applied = flipped;
             pos = flippedPos;
@@ -1033,8 +1033,8 @@ function computePopoverPosition(anchorRect, panelRect, configuration) {
     }
     if (configuration.autoShift) {
         const pad = configuration.viewportPadding;
-        pos.x = clamp$1(pos.x, pad, vw - pad - panelRect.width);
-        pos.y = clamp$1(pos.y, pad, vh - pad - panelRect.height);
+        pos.x = clamp$2(pos.x, pad, vw - pad - panelRect.width);
+        pos.y = clamp$2(pos.y, pad, vh - pad - panelRect.height);
     }
     return { x: pos.x, y: pos.y, appliedPlacement: applied };
 }
@@ -1509,7 +1509,340 @@ function coerceBoolean$2(v) {
     return v === '' || v === true || v === 'true' || v === 1 || v === '1';
 }
 
-const PRESET_COLORS$2 = new Set([
+function clamp$1(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function oppositePosition(position) {
+    switch (position) {
+        case 'top': return 'bottom';
+        case 'bottom': return 'top';
+        case 'left': return 'right';
+        case 'right': return 'left';
+    }
+}
+function initialXY(anchor, panel, position, offset) {
+    const anchorCenterX = anchor.left + anchor.width / 2;
+    const anchorCenterY = anchor.top + anchor.height / 2;
+    switch (position) {
+        case 'top':
+            return {
+                x: anchorCenterX - panel.width / 2,
+                y: anchor.top - panel.height - offset,
+            };
+        case 'bottom':
+            return {
+                x: anchorCenterX - panel.width / 2,
+                y: anchor.bottom + offset,
+            };
+        case 'right':
+            return {
+                x: anchor.right + offset,
+                y: anchorCenterY - panel.height / 2,
+            };
+        case 'left':
+            return {
+                x: anchor.left - panel.width - offset,
+                y: anchorCenterY - panel.height / 2,
+            };
+    }
+}
+function computeFloatingPosition(anchorRect, panelRect, configuration) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const padding = configuration.viewportPadding;
+    let appliedPosition = configuration.position;
+    let position = initialXY(anchorRect, panelRect, appliedPosition, configuration.offset);
+    const fits = (x, y) => {
+        const left = x;
+        const top = y;
+        const right = x + panelRect.width;
+        const bottom = y + panelRect.height;
+        return (left >= padding &&
+            top >= padding &&
+            right <= viewportWidth - padding &&
+            bottom <= viewportHeight - padding);
+    };
+    if (configuration.autoFlip && !fits(position.x, position.y)) {
+        const flipped = oppositePosition(appliedPosition);
+        const flippedPosition = initialXY(anchorRect, panelRect, flipped, configuration.offset);
+        if (fits(flippedPosition.x, flippedPosition.y)) {
+            appliedPosition = flipped;
+            position = flippedPosition;
+        }
+    }
+    if (configuration.autoShift) {
+        position.x = clamp$1(position.x, padding, viewportWidth - padding - panelRect.width);
+        position.y = clamp$1(position.y, padding, viewportHeight - padding - panelRect.height);
+    }
+    return {
+        x: position.x,
+        y: position.y,
+        appliedPosition,
+    };
+}
+function repositionTooltipOverlay(anchor, overlayRef, options, setAppliedPosition) {
+    const anchorRect = anchor.nativeElement.getBoundingClientRect();
+    const panelRect = overlayRef.hostElement.getBoundingClientRect();
+    const result = computeFloatingPosition(anchorRect, panelRect, options);
+    overlayRef.setTransform(result.x, result.y);
+    setAppliedPosition(result.appliedPosition);
+}
+
+class SolarisFloatingOverlayService {
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    create(component, options = {}) {
+        const id = this.createId(options.idPrefix ?? 'solaris-floating');
+        const host = document.createElement('div');
+        host.id = id;
+        host.style.position = 'fixed';
+        host.style.top = '0';
+        host.style.left = '0';
+        host.style.display = 'block';
+        host.style.width = 'max-content';
+        host.style.maxWidth = 'max-content';
+        host.style.zIndex = options.zIndex ?? 'var(--solaris-z-tooltip, 1200)';
+        host.style.pointerEvents = options.pointerEvents ?? 'none';
+        host.style.transform = 'translate3d(0, 0, 0)';
+        if (options.panelClass?.trim()) {
+            host.className = options.panelClass.trim();
+        }
+        document.body.appendChild(host);
+        const componentRef = createComponent(component, {
+            environmentInjector: this.injector,
+            hostElement: host,
+        });
+        this.appRef.attachView(componentRef.hostView);
+        componentRef.changeDetectorRef.detectChanges();
+        return {
+            id,
+            hostElement: host,
+            componentRef,
+            setTransform(x, y) {
+                host.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+            },
+            destroy: () => {
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                host.remove();
+            },
+        };
+    }
+    reposition(context) {
+        const anchorRect = context.anchor.getBoundingClientRect();
+        const panelRect = context.overlayRef.hostElement.getBoundingClientRect();
+        const result = computeFloatingPosition(anchorRect, panelRect, context.options);
+        context.overlayRef.setTransform(result.x, result.y);
+        context.setAppliedPosition(result.appliedPosition);
+    }
+    clearFloatingTimers(showTimer, hideTimer, raf) {
+        globalThis.clearTimeout(showTimer);
+        globalThis.clearTimeout(hideTimer);
+        if (raf) {
+            cancelAnimationFrame(raf);
+        }
+    }
+    destroyOverlay(overlayRef) {
+        overlayRef?.destroy();
+    }
+    createId(prefix) {
+        const random = typeof crypto !== 'undefined' && 'randomUUID' in crypto
+            ? crypto.randomUUID()
+            : `${Date.now()}-${Math.round(Math.random() * 1_000_000)}`;
+        return `${prefix}-${random}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFloatingOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFloatingOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFloatingOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SolarisRichTooltipPanel {
+    template = input(null, ...(ngDevMode ? [{ debugName: "template" }] : []));
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    variant = input('inverse', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRichTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisRichTooltipPanel, isStandalone: true, selector: "solaris-rich-tooltip-panel", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"solaris-rich-tooltip\" [attr.data-position]=\"position()\" [attr.data-variant]=\"variant()\"\r\n  [attr.data-size]=\"size()\" role=\"tooltip\">\r\n  <div class=\"solaris-rich-tooltip__content\">\r\n    @if (template()) {\r\n      <ng-container [ngTemplateOutlet]=\"template()\"></ng-container>\r\n    }\r\n  </div>\r\n\r\n  <span class=\"solaris-rich-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n</div>\r\n", styles: [":host{display:block;inline-size:max-content;max-inline-size:max-content}.solaris-rich-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-padding-y: 1rem;--solaris-tooltip-max-width: 32rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface-2);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);text-align:start;isolation:isolate;position:relative;pointer-events:auto;font-size:var(--solaris-fs-13);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);line-height:var(--solaris-lh-normal);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);animation:solaris-rich-tooltip-in .12s ease;border:1px solid var(--solaris-tooltip-border);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x)}.solaris-rich-tooltip[data-size=sm]{--solaris-tooltip-max-width: 24rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: .85rem;--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-rich-tooltip[data-size=md]{--solaris-tooltip-max-width: 32rem}.solaris-rich-tooltip[data-size=lg]{--solaris-tooltip-max-width: 42rem;--solaris-tooltip-padding-y: 1.2rem;--solaris-tooltip-padding-x: 1.2rem;--solaris-tooltip-radius: var(--solaris-radius-lg)}.solaris-rich-tooltip[data-variant=default]{--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-rich-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix(in srgb, var(--solaris-color-text) 92%, black);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-tooltip-bg) 82%, white)}.solaris-rich-tooltip[data-variant=primary]{--solaris-tooltip-fg: white;--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-primary) 75%, white)}.solaris-rich-tooltip__content{z-index:1;position:relative;min-inline-size:0}.solaris-rich-tooltip__arrow{z-index:0;position:absolute;transform:rotate(45deg);background:var(--solaris-tooltip-bg);block-size:var(--solaris-tooltip-arrow-size);inline-size:var(--solaris-tooltip-arrow-size);border:1px solid var(--solaris-tooltip-border)}.solaris-rich-tooltip[data-position=top] .solaris-rich-tooltip__arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=bottom] .solaris-rich-tooltip__arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=right] .solaris-rich-tooltip__arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=left] .solaris-rich-tooltip__arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-rich-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRichTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-rich-tooltip-panel', standalone: true, imports: [
+                        NgTemplateOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-rich-tooltip\" [attr.data-position]=\"position()\" [attr.data-variant]=\"variant()\"\r\n  [attr.data-size]=\"size()\" role=\"tooltip\">\r\n  <div class=\"solaris-rich-tooltip__content\">\r\n    @if (template()) {\r\n      <ng-container [ngTemplateOutlet]=\"template()\"></ng-container>\r\n    }\r\n  </div>\r\n\r\n  <span class=\"solaris-rich-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n</div>\r\n", styles: [":host{display:block;inline-size:max-content;max-inline-size:max-content}.solaris-rich-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-padding-y: 1rem;--solaris-tooltip-max-width: 32rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface-2);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);text-align:start;isolation:isolate;position:relative;pointer-events:auto;font-size:var(--solaris-fs-13);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);line-height:var(--solaris-lh-normal);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);animation:solaris-rich-tooltip-in .12s ease;border:1px solid var(--solaris-tooltip-border);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x)}.solaris-rich-tooltip[data-size=sm]{--solaris-tooltip-max-width: 24rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: .85rem;--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-rich-tooltip[data-size=md]{--solaris-tooltip-max-width: 32rem}.solaris-rich-tooltip[data-size=lg]{--solaris-tooltip-max-width: 42rem;--solaris-tooltip-padding-y: 1.2rem;--solaris-tooltip-padding-x: 1.2rem;--solaris-tooltip-radius: var(--solaris-radius-lg)}.solaris-rich-tooltip[data-variant=default]{--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-rich-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix(in srgb, var(--solaris-color-text) 92%, black);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-tooltip-bg) 82%, white)}.solaris-rich-tooltip[data-variant=primary]{--solaris-tooltip-fg: white;--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-primary) 75%, white)}.solaris-rich-tooltip__content{z-index:1;position:relative;min-inline-size:0}.solaris-rich-tooltip__arrow{z-index:0;position:absolute;transform:rotate(45deg);background:var(--solaris-tooltip-bg);block-size:var(--solaris-tooltip-arrow-size);inline-size:var(--solaris-tooltip-arrow-size);border:1px solid var(--solaris-tooltip-border)}.solaris-rich-tooltip[data-position=top] .solaris-rich-tooltip__arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=bottom] .solaris-rich-tooltip__arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=right] .solaris-rich-tooltip__arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=left] .solaris-rich-tooltip__arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-rich-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"] }]
+        }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class SolarisRichTooltipDirective {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    floatingOverlay = inject(SolarisFloatingOverlayService);
+    template = input(null, { ...(ngDevMode ? { debugName: "template" } : {}), alias: 'solaris-rich-tooltip' });
+    tooltipPosition = input('top', { ...(ngDevMode ? { debugName: "tooltipPosition" } : {}), alias: 'tooltip-position' });
+    tooltipVariant = input('inverse', { ...(ngDevMode ? { debugName: "tooltipVariant" } : {}), alias: 'tooltip-variant' });
+    tooltipSize = input('md', { ...(ngDevMode ? { debugName: "tooltipSize" } : {}), alias: 'tooltip-size' });
+    tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : {}), alias: 'tooltip-disabled' });
+    tooltipShowDelay = input(300, { ...(ngDevMode ? { debugName: "tooltipShowDelay" } : {}), alias: 'tooltip-show-delay' });
+    tooltipHideDelay = input(120, { ...(ngDevMode ? { debugName: "tooltipHideDelay" } : {}), alias: 'tooltip-hide-delay' });
+    tooltipOffset = input(8, { ...(ngDevMode ? { debugName: "tooltipOffset" } : {}), alias: 'tooltip-offset' });
+    tooltipAutoFlip = input(true, { ...(ngDevMode ? { debugName: "tooltipAutoFlip" } : {}), alias: 'tooltip-auto-flip' });
+    tooltipAutoShift = input(true, { ...(ngDevMode ? { debugName: "tooltipAutoShift" } : {}), alias: 'tooltip-auto-shift' });
+    tooltipViewportPadding = input(8, { ...(ngDevMode ? { debugName: "tooltipViewportPadding" } : {}), alias: 'tooltip-viewport-padding' });
+    overlayRef;
+    showTimer = 0;
+    hideTimer = 0;
+    raf = 0;
+    isTriggerHovered = false;
+    isPanelHovered = false;
+    hasFocusInside = false;
+    cleanups = [];
+    constructor() {
+        const host = this.elementRef.nativeElement;
+        this.cleanups.push(this.renderer.listen(host, 'mouseenter', () => {
+            this.isTriggerHovered = true;
+            this.scheduleShow();
+        }), this.renderer.listen(host, 'mouseleave', () => {
+            this.isTriggerHovered = false;
+            this.scheduleHideIfSafe();
+        }), this.renderer.listen(host, 'focusin', () => {
+            this.hasFocusInside = true;
+            this.scheduleShow();
+        }), this.renderer.listen(host, 'focusout', () => {
+            this.hasFocusInside = false;
+            this.scheduleHideIfSafe();
+        }), this.renderer.listen(host, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        }), this.renderer.listen(globalThis, 'resize', () => this.scheduleReposition()), this.renderer.listen(globalThis, 'scroll', () => this.scheduleReposition()), this.renderer.listen(document, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        }));
+        effect(() => {
+            if (!this.overlayRef)
+                return;
+            this.applyPanelInputs();
+            this.scheduleReposition();
+        });
+    }
+    scheduleShow() {
+        if (this.tooltipDisabled())
+            return;
+        if (!this.template())
+            return;
+        globalThis.clearTimeout(this.hideTimer);
+        globalThis.clearTimeout(this.showTimer);
+        this.showTimer = globalThis.setTimeout(() => {
+            this.show();
+        }, this.tooltipShowDelay());
+    }
+    scheduleHideIfSafe() {
+        globalThis.clearTimeout(this.showTimer);
+        globalThis.clearTimeout(this.hideTimer);
+        this.hideTimer = globalThis.setTimeout(() => {
+            if (!this.isTriggerHovered && !this.isPanelHovered && !this.hasFocusInside) {
+                this.hide();
+            }
+        }, this.tooltipHideDelay());
+    }
+    show() {
+        if (this.overlayRef || this.tooltipDisabled())
+            return;
+        if (!this.template())
+            return;
+        this.overlayRef = this.floatingOverlay.create(SolarisRichTooltipPanel, {
+            idPrefix: 'solaris-rich-tooltip',
+            zIndex: 'var(--solaris-z-tooltip, 1200)',
+            pointerEvents: 'auto',
+        });
+        this.applyPanelInputs();
+        this.bindPanelInteractions();
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-describedby', this.overlayRef.id);
+        requestAnimationFrame(() => this.reposition());
+    }
+    bindPanelInteractions() {
+        if (!this.overlayRef)
+            return;
+        const panel = this.overlayRef.hostElement;
+        this.cleanups.push(this.renderer.listen(panel, 'mouseenter', () => {
+            this.isPanelHovered = true;
+            globalThis.clearTimeout(this.hideTimer);
+        }), this.renderer.listen(panel, 'mouseleave', () => {
+            this.isPanelHovered = false;
+            this.scheduleHideIfSafe();
+        }), this.renderer.listen(panel, 'focusin', () => {
+            this.hasFocusInside = true;
+            globalThis.clearTimeout(this.hideTimer);
+        }), this.renderer.listen(panel, 'focusout', () => {
+            this.hasFocusInside = false;
+            this.scheduleHideIfSafe();
+        }));
+    }
+    hide() {
+        this.floatingOverlay.clearFloatingTimers(this.showTimer, this.hideTimer, this.raf);
+        this.raf = 0;
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');
+        this.floatingOverlay.destroyOverlay(this.overlayRef);
+        this.overlayRef = undefined;
+        this.isPanelHovered = false;
+        this.hasFocusInside = false;
+    }
+    applyPanelInputs() {
+        if (!this.overlayRef)
+            return;
+        const panel = this.overlayRef.componentRef;
+        panel.setInput('template', this.template());
+        panel.setInput('position', this.tooltipPosition());
+        panel.setInput('variant', this.tooltipVariant());
+        panel.setInput('size', this.tooltipSize());
+        panel.changeDetectorRef.detectChanges();
+    }
+    scheduleReposition() {
+        if (!this.overlayRef)
+            return;
+        if (this.raf)
+            return;
+        this.raf = requestAnimationFrame(() => {
+            this.raf = 0;
+            this.reposition();
+        });
+    }
+    reposition() {
+        if (!this.overlayRef)
+            return;
+        repositionTooltipOverlay(this.elementRef, this.overlayRef, {
+            position: this.tooltipPosition(),
+            offset: this.tooltipOffset(),
+            viewportPadding: this.tooltipViewportPadding(),
+            autoFlip: this.tooltipAutoFlip(),
+            autoShift: this.tooltipAutoShift(),
+        }, (position) => {
+            this.overlayRef?.componentRef.setInput('position', position);
+            this.overlayRef?.componentRef.changeDetectorRef.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.hide();
+        for (const cleanup of this.cleanups) {
+            cleanup();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRichTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: SolarisRichTooltipDirective, isStandalone: true, selector: "[solaris-rich-tooltip]", inputs: { template: { classPropertyName: "template", publicName: "solaris-rich-tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltip-position", isSignal: true, isRequired: false, transformFunction: null }, tooltipVariant: { classPropertyName: "tooltipVariant", publicName: "tooltip-variant", isSignal: true, isRequired: false, transformFunction: null }, tooltipSize: { classPropertyName: "tooltipSize", publicName: "tooltip-size", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltip-disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipShowDelay: { classPropertyName: "tooltipShowDelay", publicName: "tooltip-show-delay", isSignal: true, isRequired: false, transformFunction: null }, tooltipHideDelay: { classPropertyName: "tooltipHideDelay", publicName: "tooltip-hide-delay", isSignal: true, isRequired: false, transformFunction: null }, tooltipOffset: { classPropertyName: "tooltipOffset", publicName: "tooltip-offset", isSignal: true, isRequired: false, transformFunction: null }, tooltipAutoFlip: { classPropertyName: "tooltipAutoFlip", publicName: "tooltip-auto-flip", isSignal: true, isRequired: false, transformFunction: null }, tooltipAutoShift: { classPropertyName: "tooltipAutoShift", publicName: "tooltip-auto-shift", isSignal: true, isRequired: false, transformFunction: null }, tooltipViewportPadding: { classPropertyName: "tooltipViewportPadding", publicName: "tooltip-viewport-padding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRichTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-rich-tooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "solaris-rich-tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-position", required: false }] }], tooltipVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-variant", required: false }] }], tooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-size", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-disabled", required: false }] }], tooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-show-delay", required: false }] }], tooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-hide-delay", required: false }] }], tooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-offset", required: false }] }], tooltipAutoFlip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-auto-flip", required: false }] }], tooltipAutoShift: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-auto-shift", required: false }] }], tooltipViewportPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-viewport-padding", required: false }] }] } });
+
+const PRESET_COLORS$4 = new Set([
     'primary',
     'surface',
     'success',
@@ -1518,7 +1851,7 @@ const PRESET_COLORS$2 = new Set([
     'info',
     'gradient',
 ]);
-function resolveRadius$1(v) {
+function resolveRadius$2(v) {
     const s = String(v).trim();
     switch (s) {
         case 'none':
@@ -1535,7 +1868,7 @@ function resolveRadius$1(v) {
             return s;
     }
 }
-class ButtonDirective {
+class SolarisButtonDirective {
     elementRef = inject((ElementRef));
     _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
     _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
@@ -1561,7 +1894,7 @@ class ButtonDirective {
         if (v == null || String(v).trim() === '')
             return;
         const value = String(v).trim();
-        if (PRESET_COLORS$2.has(value)) {
+        if (PRESET_COLORS$4.has(value)) {
             this._color.set(value);
             this._customColor.set(null);
         }
@@ -1635,7 +1968,7 @@ class ButtonDirective {
         return this._badgeOverlay() ? 'true' : null;
     }
     get buttonRadius() {
-        return this._radius() ? resolveRadius$1(this._radius()) : null;
+        return this._radius() ? resolveRadius$2(this._radius()) : null;
     }
     onClick(ev) {
         if (!this.isAnchor())
@@ -1645,10 +1978,10 @@ class ButtonDirective {
             ev.stopImmediatePropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: ButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", variant: "variant", color: "color", textColor: "textColor", radius: "radius", loading: ["loading", "loading", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], badgeOverlay: ["badgeOverlay", "badgeOverlay", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.solaris-button": "this.attr", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.ariaBusy", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.disabled": "this.nativeDisabled", "attr.data-variant": "this.dataVariant", "attr.aria-disabled": "this.ariaDisabled", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth", "style.--sb-custom": "this.customColorValue", "attr.data-custom-ink": "this.dataCustomInk", "style.--sb-custom-ink": "this.customInkValue", "attr.data-badge-overlay": "this.dataBadgeOverlay", "style.--solaris-button-radius": "this.buttonRadius" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: SolarisButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", variant: "variant", color: "color", textColor: "textColor", radius: "radius", loading: ["loading", "loading", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], badgeOverlay: ["badgeOverlay", "badgeOverlay", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.solaris-button": "this.attr", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.ariaBusy", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.disabled": "this.nativeDisabled", "attr.data-variant": "this.dataVariant", "attr.aria-disabled": "this.ariaDisabled", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth", "style.--sb-custom": "this.customColorValue", "attr.data-custom-ink": "this.dataCustomInk", "style.--sb-custom-ink": "this.customInkValue", "attr.data-badge-overlay": "this.dataBadgeOverlay", "style.--solaris-button-radius": "this.buttonRadius" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[solaris-button], a[solaris-button]',
@@ -2192,11 +2525,11 @@ class SolarisNotificationItemComponent {
         return action.label ?? '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n  [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n  [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n    <div class=\"sn__leading\">\r\n    <span class=\"sn__icon\" aria-hidden=\"true\">\r\n      <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n    </span>\r\n\r\n      <div class=\"sn__heading\">\r\n        <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n        @if (!item().expanded && item().description) {\r\n          <p class=\"sn__description sn__description--clamped\">\r\n            {{ item().description }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sn__controls\">\r\n      @if (item().expandable && item().description) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n          [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n          <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n\r\n      @if (item().closeable) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (item().expanded && item().description) {\r\n    <div class=\"sn__body\">\r\n      <p class=\"sn__body-text\">{{ item().description }}</p>\r\n      @if (item().actions.length) {\r\n        <div class=\"sn__actions\">\r\n          @for (action of item().actions; track action.id) {\r\n            <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n              [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n              (click)=\"runAction(action)\">\r\n              {{ resolveActionLabel(action) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (mode() === 'toast' && item().duration !== null) {\r\n    <div class=\"sn__footer\">\r\n      @if (!paused()) {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.autoClose(secondsLeft()) }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.stopTimer() }}\r\n          </button>.\r\n        </p>\r\n      } @else {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.paused() }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.resumeTimer() }}\r\n          </button>.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sn__progress\" aria-hidden=\"true\">\r\n      <span [style.width.%]=\"progress()\"></span>\r\n    </div>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n  [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n  [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n    <div class=\"sn__leading\">\r\n    <span class=\"sn__icon\" aria-hidden=\"true\">\r\n      <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n    </span>\r\n\r\n      <div class=\"sn__heading\">\r\n        <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n        @if (!item().expanded && item().description) {\r\n          <p class=\"sn__description sn__description--clamped\">\r\n            {{ item().description }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sn__controls\">\r\n      @if (item().expandable && item().description) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n          [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n          <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n\r\n      @if (item().closeable) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (item().expanded && item().description) {\r\n    <div class=\"sn__body\">\r\n      <p class=\"sn__body-text\">{{ item().description }}</p>\r\n      @if (item().actions.length) {\r\n        <div class=\"sn__actions\">\r\n          @for (action of item().actions; track action.id) {\r\n            <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n              [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n              (click)=\"runAction(action)\">\r\n              {{ resolveActionLabel(action) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (mode() === 'toast' && item().duration !== null) {\r\n    <div class=\"sn__footer\">\r\n      @if (!paused()) {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.autoClose(secondsLeft()) }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.stopTimer() }}\r\n          </button>.\r\n        </p>\r\n      } @else {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.paused() }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.resumeTimer() }}\r\n          </button>.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sn__progress\" aria-hidden=\"true\">\r\n      <span [style.width.%]=\"progress()\"></span>\r\n    </div>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n  [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n  [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n    <div class=\"sn__leading\">\r\n    <span class=\"sn__icon\" aria-hidden=\"true\">\r\n      <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n    </span>\r\n\r\n      <div class=\"sn__heading\">\r\n        <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n        @if (!item().expanded && item().description) {\r\n          <p class=\"sn__description sn__description--clamped\">\r\n            {{ item().description }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sn__controls\">\r\n      @if (item().expandable && item().description) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n          [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n          <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n\r\n      @if (item().closeable) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (item().expanded && item().description) {\r\n    <div class=\"sn__body\">\r\n      <p class=\"sn__body-text\">{{ item().description }}</p>\r\n      @if (item().actions.length) {\r\n        <div class=\"sn__actions\">\r\n          @for (action of item().actions; track action.id) {\r\n            <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n              [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n              (click)=\"runAction(action)\">\r\n              {{ resolveActionLabel(action) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (mode() === 'toast' && item().duration !== null) {\r\n    <div class=\"sn__footer\">\r\n      @if (!paused()) {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.autoClose(secondsLeft()) }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.stopTimer() }}\r\n          </button>.\r\n        </p>\r\n      } @else {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.paused() }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.resumeTimer() }}\r\n          </button>.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sn__progress\" aria-hidden=\"true\">\r\n      <span [style.width.%]=\"progress()\"></span>\r\n    </div>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
+            args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n  [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n  [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n    <div class=\"sn__leading\">\r\n    <span class=\"sn__icon\" aria-hidden=\"true\">\r\n      <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n    </span>\r\n\r\n      <div class=\"sn__heading\">\r\n        <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n        @if (!item().expanded && item().description) {\r\n          <p class=\"sn__description sn__description--clamped\">\r\n            {{ item().description }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sn__controls\">\r\n      @if (item().expandable && item().description) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n          [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n          <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n\r\n      @if (item().closeable) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (item().expanded && item().description) {\r\n    <div class=\"sn__body\">\r\n      <p class=\"sn__body-text\">{{ item().description }}</p>\r\n      @if (item().actions.length) {\r\n        <div class=\"sn__actions\">\r\n          @for (action of item().actions; track action.id) {\r\n            <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n              [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n              (click)=\"runAction(action)\">\r\n              {{ resolveActionLabel(action) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (mode() === 'toast' && item().duration !== null) {\r\n    <div class=\"sn__footer\">\r\n      @if (!paused()) {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.autoClose(secondsLeft()) }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.stopTimer() }}\r\n          </button>.\r\n        </p>\r\n      } @else {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.paused() }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.resumeTimer() }}\r\n          </button>.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sn__progress\" aria-hidden=\"true\">\r\n      <span [style.width.%]=\"progress()\"></span>\r\n    </div>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 class SolarisNotificationCenterComponent {
@@ -2208,11 +2541,11 @@ class SolarisNotificationCenterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\r\n  <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n  <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n    <header class=\"snc__header\">\r\n      <div>\r\n        <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n      </div>\r\n\r\n      <div class=\"snc__controls\">\r\n        <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n          (click)=\"notificationService.clearHistory()\">\r\n          {{ intl.clearHistory() }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"snc__list\">\r\n      @for (item of notificationService.centerItems(); track item.id) {\r\n        <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n      } @empty {\r\n        <div class=\"snc__empty\">\r\n          {{ intl.emptyCenter() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\r\n  <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n  <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n    <header class=\"snc__header\">\r\n      <div>\r\n        <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n      </div>\r\n\r\n      <div class=\"snc__controls\">\r\n        <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n          (click)=\"notificationService.clearHistory()\">\r\n          {{ intl.clearHistory() }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"snc__list\">\r\n      @for (item of notificationService.centerItems(); track item.id) {\r\n        <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n      } @empty {\r\n        <div class=\"snc__empty\">\r\n          {{ intl.emptyCenter() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationCenterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-notification-center', standalone: true, imports: [ButtonDirective, SolarisNotificationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notificationService.centerOpen()) {\r\n  <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n  <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n    <header class=\"snc__header\">\r\n      <div>\r\n        <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n      </div>\r\n\r\n      <div class=\"snc__controls\">\r\n        <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n          (click)=\"notificationService.clearHistory()\">\r\n          {{ intl.clearHistory() }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"snc__list\">\r\n      @for (item of notificationService.centerItems(); track item.id) {\r\n        <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n      } @empty {\r\n        <div class=\"snc__empty\">\r\n          {{ intl.emptyCenter() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"] }]
+            args: [{ selector: 'solaris-notification-center', standalone: true, imports: [SolarisButtonDirective, SolarisNotificationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notificationService.centerOpen()) {\r\n  <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n  <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n    <header class=\"snc__header\">\r\n      <div>\r\n        <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n      </div>\r\n\r\n      <div class=\"snc__controls\">\r\n        <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n          (click)=\"notificationService.clearHistory()\">\r\n          {{ intl.clearHistory() }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"snc__list\">\r\n      @for (item of notificationService.centerItems(); track item.id) {\r\n        <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n      } @empty {\r\n        <div class=\"snc__empty\">\r\n          {{ intl.emptyCenter() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"] }]
         }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2233,7 +2566,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'solaris-notification-host', standalone: true, imports: [SolarisNotificationItemComponent, SolarisNotificationCenterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (position of positions; track position) {\r\n  <section class=\"snh__stack\" [attr.data-position]=\"position\">\r\n    @for (item of visibleByPosition(position); track item.id) {\r\n      <solaris-notification-item [item]=\"item\" mode=\"toast\"/>\r\n    }\r\n  </section>\r\n}\r\n\r\n@if (withCenter()) { <solaris-notification-center/> }\r\n", styles: [":host{inset:0;position:fixed;pointer-events:none;z-index:var(--solaris-z-toast)}.snh__stack{display:flex;position:fixed;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);max-width:calc(100vw - var(--solaris-space-4) * 2)}.snh__stack[data-position=top-right]{top:0;right:0;align-items:flex-end}.snh__stack[data-position=top-left]{top:0;left:0;align-items:flex-start}.snh__stack[data-position=top-center]{top:0;left:50%;align-items:center;transform:translate(-50%)}.snh__stack[data-position=bottom-right]{right:0;bottom:0;align-items:flex-end}.snh__stack[data-position=bottom-left]{left:0;bottom:0;align-items:flex-start}.snh__stack[data-position=bottom-center]{left:50%;bottom:0;align-items:center;transform:translate(-50%)}\n"] }]
         }], propDecorators: { withCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCenter", required: false }] }] } });
 
-const PRESET_COLORS$1 = ['primary', 'success', 'warning', 'error', 'surface'];
+class SolarisTooltipPanel {
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    variant = input('inverse', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisTooltipPanel, isStandalone: true, selector: "solaris-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"solaris-tooltip\" [attr.data-position]=\"position()\" [attr.data-variant]=\"variant()\"\r\n  [attr.data-size]=\"size()\" role=\"tooltip\">\r\n  @if (prefixIcon()) {\r\n    <span class=\"solaris-tooltip__prefix\" aria-hidden=\"true\">\r\n      <i [class]=\"prefixIcon()\"></i>\r\n    </span>\r\n  }\r\n\r\n  <span class=\"solaris-tooltip__content\">\r\n    {{ text() }}\r\n  </span>\r\n\r\n  <span class=\"solaris-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n</div>\r\n", styles: [":host{display:block;isolation:isolate;pointer-events:none;inline-size:max-content;max-inline-size:max-content}.solaris-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-max-width: 28rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-gap: var(--solaris-space-2);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-font-size: var(--solaris-fs-12);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);position:relative;display:inline-flex;align-items:center;gap:var(--solaris-tooltip-gap);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);border:1px solid var(--solaris-tooltip-border);font-weight:500;text-align:start;white-space:normal;line-height:var(--solaris-lh-normal);font-size:var(--solaris-tooltip-font-size);pointer-events:none;animation:solaris-tooltip-in .12s ease}.solaris-tooltip[data-size=sm]{--solaris-tooltip-max-width: 22rem;--solaris-tooltip-padding-y: .55rem;--solaris-tooltip-padding-x: .8rem;--solaris-tooltip-font-size: var(--solaris-fs-11);--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-tooltip[data-size=md]{--solaris-tooltip-max-width: 28rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-font-size: var(--solaris-fs-12)}.solaris-tooltip[data-variant=default]{--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix(in srgb, var(--solaris-color-text) 92%, black);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-tooltip-bg) 82%, white)}.solaris-tooltip[data-variant=primary]{--solaris-tooltip-fg: white;--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-primary) 75%, white)}.solaris-tooltip__prefix{opacity:.9;flex:0 0 auto;block-size:1.6rem;inline-size:1.6rem;place-items:center;color:currentColor;display:inline-grid}.solaris-tooltip__prefix i{display:block;line-height:1;font-size:var(--solaris-fs-16)}.solaris-tooltip__content{min-inline-size:0;overflow-wrap:anywhere}.solaris-tooltip__arrow{position:absolute;inline-size:var(--solaris-tooltip-arrow-size);block-size:var(--solaris-tooltip-arrow-size);background:var(--solaris-tooltip-bg);border:1px solid var(--solaris-tooltip-border);transform:rotate(45deg);z-index:0}.solaris-tooltip__content,.solaris-tooltip__prefix{position:relative;z-index:1}.solaris-tooltip[data-position=top] .solaris-tooltip__arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=bottom] .solaris-tooltip__arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=right] .solaris-tooltip__arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=left] .solaris-tooltip__arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-tooltip-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-tooltip\" [attr.data-position]=\"position()\" [attr.data-variant]=\"variant()\"\r\n  [attr.data-size]=\"size()\" role=\"tooltip\">\r\n  @if (prefixIcon()) {\r\n    <span class=\"solaris-tooltip__prefix\" aria-hidden=\"true\">\r\n      <i [class]=\"prefixIcon()\"></i>\r\n    </span>\r\n  }\r\n\r\n  <span class=\"solaris-tooltip__content\">\r\n    {{ text() }}\r\n  </span>\r\n\r\n  <span class=\"solaris-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n</div>\r\n", styles: [":host{display:block;isolation:isolate;pointer-events:none;inline-size:max-content;max-inline-size:max-content}.solaris-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-max-width: 28rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-gap: var(--solaris-space-2);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-font-size: var(--solaris-fs-12);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);position:relative;display:inline-flex;align-items:center;gap:var(--solaris-tooltip-gap);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);border:1px solid var(--solaris-tooltip-border);font-weight:500;text-align:start;white-space:normal;line-height:var(--solaris-lh-normal);font-size:var(--solaris-tooltip-font-size);pointer-events:none;animation:solaris-tooltip-in .12s ease}.solaris-tooltip[data-size=sm]{--solaris-tooltip-max-width: 22rem;--solaris-tooltip-padding-y: .55rem;--solaris-tooltip-padding-x: .8rem;--solaris-tooltip-font-size: var(--solaris-fs-11);--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-tooltip[data-size=md]{--solaris-tooltip-max-width: 28rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-font-size: var(--solaris-fs-12)}.solaris-tooltip[data-variant=default]{--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix(in srgb, var(--solaris-color-text) 92%, black);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-tooltip-bg) 82%, white)}.solaris-tooltip[data-variant=primary]{--solaris-tooltip-fg: white;--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-primary) 75%, white)}.solaris-tooltip__prefix{opacity:.9;flex:0 0 auto;block-size:1.6rem;inline-size:1.6rem;place-items:center;color:currentColor;display:inline-grid}.solaris-tooltip__prefix i{display:block;line-height:1;font-size:var(--solaris-fs-16)}.solaris-tooltip__content{min-inline-size:0;overflow-wrap:anywhere}.solaris-tooltip__arrow{position:absolute;inline-size:var(--solaris-tooltip-arrow-size);block-size:var(--solaris-tooltip-arrow-size);background:var(--solaris-tooltip-bg);border:1px solid var(--solaris-tooltip-border);transform:rotate(45deg);z-index:0}.solaris-tooltip__content,.solaris-tooltip__prefix{position:relative;z-index:1}.solaris-tooltip[data-position=top] .solaris-tooltip__arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=bottom] .solaris-tooltip__arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=right] .solaris-tooltip__arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=left] .solaris-tooltip__arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class SolarisTooltipDirective {
+    elementRef = inject(ElementRef);
+    floatingOverlay = inject(SolarisFloatingOverlayService);
+    renderer = inject(Renderer2);
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : {}), alias: 'solaris-tooltip' });
+    tooltipPosition = input('top', { ...(ngDevMode ? { debugName: "tooltipPosition" } : {}), alias: 'tooltip-position' });
+    tooltipVariant = input('inverse', { ...(ngDevMode ? { debugName: "tooltipVariant" } : {}), alias: 'tooltip-variant' });
+    tooltipSize = input('md', { ...(ngDevMode ? { debugName: "tooltipSize" } : {}), alias: 'tooltip-size' });
+    tooltipPrefixIcon = input('', { ...(ngDevMode ? { debugName: "tooltipPrefixIcon" } : {}), alias: 'tooltip-prefix-icon' });
+    tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : {}), alias: 'tooltip-disabled' });
+    tooltipShowDelay = input(300, { ...(ngDevMode ? { debugName: "tooltipShowDelay" } : {}), alias: 'tooltip-show-delay' });
+    tooltipHideDelay = input(80, { ...(ngDevMode ? { debugName: "tooltipHideDelay" } : {}), alias: 'tooltip-hide-delay' });
+    tooltipOffset = input(8, { ...(ngDevMode ? { debugName: "tooltipOffset" } : {}), alias: 'tooltip-offset' });
+    tooltipAutoFlip = input(true, { ...(ngDevMode ? { debugName: "tooltipAutoFlip" } : {}), alias: 'tooltip-auto-flip' });
+    tooltipAutoShift = input(true, { ...(ngDevMode ? { debugName: "tooltipAutoShift" } : {}), alias: 'tooltip-auto-shift' });
+    tooltipViewportPadding = input(8, { ...(ngDevMode ? { debugName: "tooltipViewportPadding" } : {}), alias: 'tooltip-viewport-padding' });
+    tooltipKey = input('', { ...(ngDevMode ? { debugName: "tooltipKey" } : {}), alias: 'tooltip-key' });
+    tooltipParams = input(undefined, { ...(ngDevMode ? { debugName: "tooltipParams" } : {}), alias: 'tooltip-params' });
+    overlayRef;
+    showTimer = 0;
+    hideTimer = 0;
+    raf = 0;
+    cleanups = [];
+    resolvedText = computed(() => {
+        const key = this.tooltipKey().trim();
+        if (key) {
+            return key;
+        }
+        return this.text().trim();
+    }, ...(ngDevMode ? [{ debugName: "resolvedText" }] : []));
+    constructor() {
+        const host = this.elementRef.nativeElement;
+        this.cleanups.push(this.renderer.listen(host, 'mouseenter', () => this.scheduleShow()), this.renderer.listen(host, 'mouseleave', () => this.scheduleHide()), this.renderer.listen(host, 'focusin', () => this.scheduleShow()), this.renderer.listen(host, 'focusout', () => this.scheduleHide()), this.renderer.listen(host, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        }), this.renderer.listen(globalThis, 'resize', () => this.scheduleReposition()), this.renderer.listen(globalThis, 'scroll', () => this.scheduleReposition()));
+        effect(() => {
+            if (!this.overlayRef)
+                return;
+            this.applyPanelInputs();
+            this.scheduleReposition();
+        });
+    }
+    scheduleShow() {
+        if (this.tooltipDisabled())
+            return;
+        if (!this.resolvedText())
+            return;
+        globalThis.clearTimeout(this.hideTimer);
+        globalThis.clearTimeout(this.showTimer);
+        this.showTimer = globalThis.setTimeout(() => {
+            this.show();
+        }, this.tooltipShowDelay());
+    }
+    scheduleHide() {
+        globalThis.clearTimeout(this.showTimer);
+        globalThis.clearTimeout(this.hideTimer);
+        this.hideTimer = globalThis.setTimeout(() => {
+            this.hide();
+        }, this.tooltipHideDelay());
+    }
+    show() {
+        if (this.overlayRef || this.tooltipDisabled())
+            return;
+        if (!this.resolvedText())
+            return;
+        this.overlayRef = this.floatingOverlay.create(SolarisTooltipPanel, {
+            idPrefix: 'solaris-tooltip',
+            zIndex: 'var(--solaris-z-tooltip, 1200)',
+            pointerEvents: 'none',
+        });
+        this.applyPanelInputs();
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-describedby', this.overlayRef.id);
+        requestAnimationFrame(() => this.reposition());
+    }
+    hide() {
+        this.floatingOverlay.clearFloatingTimers(this.showTimer, this.hideTimer, this.raf);
+        this.raf = 0;
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');
+        this.floatingOverlay.destroyOverlay(this.overlayRef);
+        this.overlayRef = undefined;
+    }
+    applyPanelInputs() {
+        if (!this.overlayRef)
+            return;
+        const panel = this.overlayRef.componentRef;
+        panel.setInput('text', this.resolvedText());
+        panel.setInput('position', this.tooltipPosition());
+        panel.setInput('variant', this.tooltipVariant());
+        panel.setInput('size', this.tooltipSize());
+        panel.setInput('prefixIcon', this.tooltipPrefixIcon());
+        panel.changeDetectorRef.detectChanges();
+    }
+    scheduleReposition() {
+        if (!this.overlayRef)
+            return;
+        if (this.raf)
+            return;
+        this.raf = requestAnimationFrame(() => {
+            this.raf = 0;
+            this.reposition();
+        });
+    }
+    reposition() {
+        if (!this.overlayRef)
+            return;
+        this.floatingOverlay.reposition({
+            anchor: this.elementRef.nativeElement,
+            overlayRef: this.overlayRef,
+            options: {
+                position: this.tooltipPosition(),
+                offset: this.tooltipOffset(),
+                viewportPadding: this.tooltipViewportPadding(),
+                autoFlip: this.tooltipAutoFlip(),
+                autoShift: this.tooltipAutoShift(),
+            },
+            setAppliedPosition: (position) => {
+                this.overlayRef?.componentRef.setInput('position', position);
+                this.overlayRef?.componentRef.changeDetectorRef.detectChanges();
+            },
+        });
+    }
+    ngOnDestroy() {
+        this.hide();
+        for (const cleanup of this.cleanups) {
+            cleanup();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: SolarisTooltipDirective, isStandalone: true, selector: "[solaris-tooltip]", inputs: { text: { classPropertyName: "text", publicName: "solaris-tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltip-position", isSignal: true, isRequired: false, transformFunction: null }, tooltipVariant: { classPropertyName: "tooltipVariant", publicName: "tooltip-variant", isSignal: true, isRequired: false, transformFunction: null }, tooltipSize: { classPropertyName: "tooltipSize", publicName: "tooltip-size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPrefixIcon: { classPropertyName: "tooltipPrefixIcon", publicName: "tooltip-prefix-icon", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltip-disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipShowDelay: { classPropertyName: "tooltipShowDelay", publicName: "tooltip-show-delay", isSignal: true, isRequired: false, transformFunction: null }, tooltipHideDelay: { classPropertyName: "tooltipHideDelay", publicName: "tooltip-hide-delay", isSignal: true, isRequired: false, transformFunction: null }, tooltipOffset: { classPropertyName: "tooltipOffset", publicName: "tooltip-offset", isSignal: true, isRequired: false, transformFunction: null }, tooltipAutoFlip: { classPropertyName: "tooltipAutoFlip", publicName: "tooltip-auto-flip", isSignal: true, isRequired: false, transformFunction: null }, tooltipAutoShift: { classPropertyName: "tooltipAutoShift", publicName: "tooltip-auto-shift", isSignal: true, isRequired: false, transformFunction: null }, tooltipViewportPadding: { classPropertyName: "tooltipViewportPadding", publicName: "tooltip-viewport-padding", isSignal: true, isRequired: false, transformFunction: null }, tooltipKey: { classPropertyName: "tooltipKey", publicName: "tooltip-key", isSignal: true, isRequired: false, transformFunction: null }, tooltipParams: { classPropertyName: "tooltipParams", publicName: "tooltip-params", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-tooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "solaris-tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-position", required: false }] }], tooltipVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-variant", required: false }] }], tooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-size", required: false }] }], tooltipPrefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-prefix-icon", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-disabled", required: false }] }], tooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-show-delay", required: false }] }], tooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-hide-delay", required: false }] }], tooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-offset", required: false }] }], tooltipAutoFlip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-auto-flip", required: false }] }], tooltipAutoShift: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-auto-shift", required: false }] }], tooltipViewportPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-viewport-padding", required: false }] }], tooltipKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-key", required: false }] }], tooltipParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-params", required: false }] }] } });
+
+const PRESET_COLORS$3 = ['primary', 'success', 'warning', 'error', 'surface'];
 class SolarisLoading {
     marker = '';
     label;
@@ -2311,7 +2798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: [{ transform: coerceBoolean$1 }]
             }] } });
 function isPresetColor(v) {
-    return PRESET_COLORS$1.includes(v);
+    return PRESET_COLORS$3.includes(v);
 }
 function coerceBoolean$1(v) {
     return v === '' || v === true || v === 'true' || v === 1 || v === '1';
@@ -2552,6 +3039,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['attr.aria-orientation']
             }] } });
 
+class SolarisDialogContainer {
+    contentHost;
+    title;
+    titleKey;
+    titleParams;
+    description;
+    descriptionKey;
+    descriptionParams;
+    size = 'md';
+    showCloseButton = true;
+    actions = [];
+    ariaLabel;
+    ariaLabelledBy;
+    ariaDescribedBy;
+    closeClick = new EventEmitter();
+    actionClick = new EventEmitter();
+    titleId = `solaris-dialog-title-${Math.round(Math.random() * 1_000_000)}`;
+    descriptionId = `solaris-dialog-description-${Math.round(Math.random() * 1_000_000)}`;
+    get hasHeader() {
+        return !!this.title || !!this.titleKey || !!this.description || !!this.descriptionKey || this.showCloseButton;
+    }
+    get hasDescription() {
+        return !!this.description || !!this.descriptionKey;
+    }
+    get hasActions() {
+        return this.actions.length > 0;
+    }
+    get resolvedAriaLabelledBy() {
+        if (this.ariaLabelledBy)
+            return this.ariaLabelledBy;
+        if (this.title || this.titleKey)
+            return this.titleId;
+        return null;
+    }
+    get resolvedAriaDescribedBy() {
+        if (this.ariaDescribedBy)
+            return this.ariaDescribedBy;
+        if (this.description || this.descriptionKey)
+            return this.descriptionId;
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogContainer, isStandalone: true, selector: "solaris-dialog-container", inputs: { title: "title", titleKey: "titleKey", titleParams: "titleParams", description: "description", descriptionKey: "descriptionKey", descriptionParams: "descriptionParams", size: "size", showCloseButton: "showCloseButton", actions: "actions", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n  [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n  @if (hasHeader) {\r\n    <header class=\"solaris-dialog__header\">\r\n      <div class=\"solaris-dialog__heading\">\r\n        @if (title || titleKey) {\r\n          <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n            @if (titleKey) {\r\n              {{ titleKey }}\r\n            } @else {\r\n              {{ title }}\r\n            }\r\n          </h2>\r\n        }\r\n\r\n        @if (hasDescription) {\r\n          <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n            @if (descriptionKey) {\r\n              {{ descriptionKey }}\r\n            } @else {\r\n              {{ description }}\r\n            }\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (showCloseButton) {\r\n        <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-dialog__body\">\r\n    <ng-template #contentHost></ng-template>\r\n  </div>\r\n\r\n  @if (hasActions) {\r\n    <footer class=\"solaris-dialog__footer\">\r\n      @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n        <button type=\"button\" class=\"solaris-dialog__action\" [attr.data-variant]=\"action.variant ?? 'secondary'\"\r\n          [disabled]=\"action.disabled\" (click)=\"actionClick.emit(action)\">\r\n          @if (action.labelKey) {\r\n            {{ action.labelKey }}\r\n          } @else {\r\n            {{ action.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </footer>\r\n  }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{min-inline-size:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--solaris-space-4);align-items:start;padding:var(--solaris-dialog-padding);border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{min-inline-size:0;display:grid;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;color:var(--solaris-color-text);font-size:var(--solaris-fs-18);font-weight:750;line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal)}.solaris-dialog__close{inline-size:3.2rem;block-size:3.2rem;padding:0;border:0;border-radius:var(--solaris-radius-full);background:transparent;color:var(--solaris-color-text-muted);display:inline-grid;place-items:center;cursor:pointer;outline:none;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{min-block-size:0;overflow:auto;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-4) var(--solaris-dialog-padding);border-block-start:1px solid var(--solaris-dialog-border);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__action{min-inline-size:8.8rem;min-block-size:3.6rem;padding-inline:var(--solaris-space-4);border-radius:var(--solaris-radius-sm);border:1px solid transparent;font:inherit;font-size:var(--solaris-fs-13);font-weight:650;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease,opacity .12s ease}.solaris-dialog__action:disabled{cursor:not-allowed;opacity:.55}.solaris-dialog__action[data-variant=primary]{background:var(--solaris-color-primary);color:#fff}.solaris-dialog__action[data-variant=secondary]{background:var(--solaris-color-surface-2);color:var(--solaris-color-text);border-color:var(--solaris-color-border)}.solaris-dialog__action[data-variant=ghost]{background:transparent;color:var(--solaris-color-text-muted)}.solaris-dialog__action[data-variant=danger]{background:color-mix(in srgb,var(--solaris-color-error) 16%,var(--solaris-color-surface));color:var(--solaris-color-error);border-color:color-mix(in srgb,var(--solaris-color-error) 38%,var(--solaris-color-border))}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-dialog-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n  [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n  @if (hasHeader) {\r\n    <header class=\"solaris-dialog__header\">\r\n      <div class=\"solaris-dialog__heading\">\r\n        @if (title || titleKey) {\r\n          <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n            @if (titleKey) {\r\n              {{ titleKey }}\r\n            } @else {\r\n              {{ title }}\r\n            }\r\n          </h2>\r\n        }\r\n\r\n        @if (hasDescription) {\r\n          <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n            @if (descriptionKey) {\r\n              {{ descriptionKey }}\r\n            } @else {\r\n              {{ description }}\r\n            }\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (showCloseButton) {\r\n        <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-dialog__body\">\r\n    <ng-template #contentHost></ng-template>\r\n  </div>\r\n\r\n  @if (hasActions) {\r\n    <footer class=\"solaris-dialog__footer\">\r\n      @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n        <button type=\"button\" class=\"solaris-dialog__action\" [attr.data-variant]=\"action.variant ?? 'secondary'\"\r\n          [disabled]=\"action.disabled\" (click)=\"actionClick.emit(action)\">\r\n          @if (action.labelKey) {\r\n            {{ action.labelKey }}\r\n          } @else {\r\n            {{ action.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </footer>\r\n  }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{min-inline-size:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--solaris-space-4);align-items:start;padding:var(--solaris-dialog-padding);border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{min-inline-size:0;display:grid;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;color:var(--solaris-color-text);font-size:var(--solaris-fs-18);font-weight:750;line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal)}.solaris-dialog__close{inline-size:3.2rem;block-size:3.2rem;padding:0;border:0;border-radius:var(--solaris-radius-full);background:transparent;color:var(--solaris-color-text-muted);display:inline-grid;place-items:center;cursor:pointer;outline:none;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{min-block-size:0;overflow:auto;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-4) var(--solaris-dialog-padding);border-block-start:1px solid var(--solaris-dialog-border);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__action{min-inline-size:8.8rem;min-block-size:3.6rem;padding-inline:var(--solaris-space-4);border-radius:var(--solaris-radius-sm);border:1px solid transparent;font:inherit;font-size:var(--solaris-fs-13);font-weight:650;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease,opacity .12s ease}.solaris-dialog__action:disabled{cursor:not-allowed;opacity:.55}.solaris-dialog__action[data-variant=primary]{background:var(--solaris-color-primary);color:#fff}.solaris-dialog__action[data-variant=secondary]{background:var(--solaris-color-surface-2);color:var(--solaris-color-text);border-color:var(--solaris-color-border)}.solaris-dialog__action[data-variant=ghost]{background:transparent;color:var(--solaris-color-text-muted)}.solaris-dialog__action[data-variant=danger]{background:color-mix(in srgb,var(--solaris-color-error) 16%,var(--solaris-color-surface));color:var(--solaris-color-error);border-color:color-mix(in srgb,var(--solaris-color-error) 38%,var(--solaris-color-border))}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+        }], propDecorators: { contentHost: [{
+                type: ViewChild,
+                args: ['contentHost', { read: ViewContainerRef, static: true }]
+            }], title: [{
+                type: Input
+            }], titleKey: [{
+                type: Input
+            }], titleParams: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], descriptionKey: [{
+                type: Input
+            }], descriptionParams: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], closeClick: [{
+                type: Output
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+const SOLARIS_DIALOG_DATA = new InjectionToken('SOLARIS_DIALOG_DATA');
+
+class SolarisDialogRef {
+    closedSubject = new Subject();
+    closeFn;
+    afterClosed() {
+        return this.closedSubject.asObservable();
+    }
+    close(result) {
+        this.closeFn?.(result);
+    }
+    _attachCloseFn(fn) {
+        this.closeFn = fn;
+    }
+    _finishClose(result) {
+        this.closedSubject.next(result);
+        this.closedSubject.complete();
+    }
+}
+
+class SolarisDialogService {
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    open(component, configuration = {}) {
+        const dialogRef = new SolarisDialogRef();
+        const backdrop = document.createElement('div');
+        backdrop.className = 'solaris-dialog-backdrop';
+        const host = document.createElement('div');
+        const positionClass = `position-${configuration.position ?? 'center'}`;
+        host.className = [
+            'solaris-dialog-host',
+            positionClass,
+            configuration.panelClass ?? '',
+        ].filter(Boolean).join(' ');
+        document.body.appendChild(backdrop);
+        document.body.appendChild(host);
+        const dialogInjector = Injector.create({
+            providers: [
+                { provide: SOLARIS_DIALOG_DATA, useValue: configuration.data },
+                { provide: SolarisDialogRef, useValue: dialogRef },
+            ],
+            parent: this.environmentInjector,
+        });
+        const containerRef = createComponent((SolarisDialogContainer), {
+            environmentInjector: this.environmentInjector,
+            hostElement: host,
+        });
+        containerRef.setInput('title', configuration.title);
+        containerRef.setInput('titleKey', configuration.titleKey);
+        containerRef.setInput('titleParams', configuration.titleParams);
+        containerRef.setInput('description', configuration.description);
+        containerRef.setInput('descriptionKey', configuration.descriptionKey);
+        containerRef.setInput('descriptionParams', configuration.descriptionParams);
+        containerRef.setInput('size', configuration.size ?? 'md');
+        containerRef.setInput('showCloseButton', configuration.showCloseButton ?? !configuration.disableClose);
+        containerRef.setInput('actions', configuration.actions ?? []);
+        containerRef.setInput('ariaLabel', configuration.ariaLabel);
+        containerRef.setInput('ariaLabelledBy', configuration.ariaLabelledBy);
+        containerRef.setInput('ariaDescribedBy', configuration.ariaDescribedBy);
+        this.appRef.attachView(containerRef.hostView);
+        containerRef.changeDetectorRef.detectChanges();
+        const contentRef = createComponent(component, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: dialogInjector,
+        });
+        containerRef.instance.contentHost.insert(contentRef.hostView);
+        contentRef.changeDetectorRef.detectChanges();
+        const close = (result) => {
+            this.appRef.detachView(contentRef.hostView);
+            contentRef.destroy();
+            this.appRef.detachView(containerRef.hostView);
+            containerRef.destroy();
+            backdrop.remove();
+            host.remove();
+            document.removeEventListener('keydown', onKeyDown, true);
+            backdrop.removeEventListener('pointerdown', onBackdropClick, true);
+            dialogRef._finishClose(result);
+        };
+        dialogRef._attachCloseFn(close);
+        const closeOnBackdropClick = configuration.closeOnBackdropClick ?? !configuration.disableClose;
+        const closeOnEscape = configuration.closeOnEscape ?? !configuration.disableClose;
+        const onBackdropClick = () => {
+            if (closeOnBackdropClick) {
+                dialogRef.close();
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape' && closeOnEscape) {
+                dialogRef.close();
+            }
+        };
+        backdrop.addEventListener('pointerdown', onBackdropClick, true);
+        document.addEventListener('keydown', onKeyDown, true);
+        containerRef.instance.closeClick.subscribe(() => {
+            if (!configuration.disableClose) {
+                dialogRef.close();
+            }
+        });
+        containerRef.instance.actionClick.subscribe((action) => {
+            if (action.disabled)
+                return;
+            if (action.closesDialog ?? true) {
+                dialogRef.close(action.value);
+            }
+        });
+        return dialogRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class SolarisDrawerHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDrawerHeaderDirective, isStandalone: true, selector: "[solaris-drawer-header]", ngImport: i0 });
@@ -2943,13 +3627,13 @@ class SolarisFilterPanel {
         this.setOpen(!this.isOpen());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisFilterPanel, isStandalone: true, selector: "solaris-filter-panel", inputs: { count: "count", labelKey: "labelKey", titleKey: "titleKey", disabled: "disabled", drawerSide: "drawerSide", radius: "radius", drawerWidth: "drawerWidth", label: "label", title: "title", open: "open" }, outputs: { apply: "apply", clearAll: "clearAll", openChange: "openChange" }, host: { classAttribute: "solaris-filter-panel-host" }, queries: [{ propertyName: "footerSlot", first: true, predicate: SolarisFilterPanelFooterDirective, descendants: true }, { propertyName: "chipsSlot", first: true, predicate: SolarisFilterPanelChipsDirective, descendants: true }], ngImport: i0, template: "<button type=\"button\" class=\"solaris-filter-panel__trigger\" [disabled]=\"disabled\" (click)=\"toggle()\"\r\n  [attr.data-radius]=\"radius\">\r\n  <i class=\"ph ph-sliders-horizontal\"></i>\r\n\r\n  @if (labelKey) { {{ labelKey | translate }} } @else { {{ label | translate }} }\r\n\r\n  @if (count > 0) {\r\n    <span class=\"solaris-filter-panel__count\">{{ count }}</span>\r\n  }\r\n</button>\r\n\r\n<solaris-drawer [open]=\"isOpen()\" (openChange)=\"setOpen($event)\" [side]=\"drawerSide\" [width]=\"drawerWidth\"\r\n  [backdrop]=\"true\" [closeOnEscape]=\"true\" [closeOnOutsideClick]=\"true\" [lockScroll]=\"true\"\r\n  [restoreFocus]=\"true\" [trapFocus]=\"true\" panelClass=\"solaris-filter-panel__drawer\">\r\n  <div solaris-drawer-header class=\"solaris-filter-panel__header\">\r\n    <div class=\"solaris-filter-panel__title\">\r\n      @if (titleKey) { {{ titleKey | translate }} } @else { {{ title | translate }} }\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"solaris-filter-panel__close\" (click)=\"setOpen(false)\">\r\n      <i class=\"ph ph-x\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  @if (hasChips()) {\r\n    <div class=\"solaris-filter-panel__chips\">\r\n      <ng-content select=\"[solarisFilterPanelChips]\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-filter-panel__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <footer solaris-drawer-footer class=\"solaris-filter-panel__footer\">\r\n    <ng-content select=\"[solarisFilterPanelFooter]\"></ng-content>\r\n\r\n    @if (!hasCustomFooter) {\r\n      <div class=\"solaris-filter-panel__footer-default\">\r\n        <button solaris-button color=\"surface\" variant=\"outline\" type=\"button\" (click)=\"clearAll.emit()\">\r\n          {{ 'ui.solaris.common.clearAll' | translate }}\r\n        </button>\r\n\r\n        <button solaris-button type=\"button\" (click)=\"apply.emit()\">\r\n          {{ 'ui.solaris.common.apply' | translate }}\r\n        </button>\r\n      </div>\r\n    }\r\n  </footer>\r\n</solaris-drawer>\r\n", styles: [".solaris-filter-panel__trigger{--solaris-filter-panel-radius: var(--solaris-radius-sm);cursor:pointer;align-items:center;display:inline-flex;padding:.55rem .9rem;gap:var(--solaris-space-2);color:var(--solaris-color-text);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);height:var(--solaris-filter-bar-height, 3.8rem);border-radius:var(--solaris-filter-panel-radius)}.solaris-filter-panel__trigger[data-radius=sm]{--solaris-filter-panel-radius: var(--solaris-radius-sm)}.solaris-filter-panel__trigger[data-radius=md]{--solaris-filter-panel-radius: var(--solaris-radius-md)}.solaris-filter-panel__trigger[data-radius=full]{--solaris-filter-panel-radius: var(--solaris-radius-full)}.solaris-filter-panel__trigger:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-panel__count{padding:.1rem .5rem;font-size:var(--solaris-fs-12);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}:host ::ng-deep .solaris-filter-panel__drawer{width:min(30rem,92vw)}.solaris-filter-panel__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4)}.solaris-filter-panel__title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-filter-panel__close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-filter-panel__close:hover{background:var(--solaris-color-surface-2)}.solaris-filter-panel__chips{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);border-bottom:1px solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-filter-panel__content{min-height:0;overflow:auto;display:grid;align-content:flex-start;gap:var(--solaris-space-8);padding:var(--solaris-space-4)}.solaris-filter-panel__footer-default{display:grid;gap:var(--solaris-space-3);grid-template-columns:1fr 1fr}.solaris-filter-panel__footer-default button{font-weight:400;font-size:var(--solaris-fs-14)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "directive", type: SolarisDrawerHeaderDirective, selector: "[solaris-drawer-header]" }, { kind: "directive", type: SolarisDrawerFooterDirective, selector: "[solaris-drawer-footer]" }, { kind: "component", type: SolarisDrawer, selector: "solaris-drawer", inputs: ["title", "titleKey", "panelClass", "backdrop", "showClose", "trapFocus", "backdropClass", "showHeader", "lockScroll", "restoreFocus", "closeOnEscape", "width", "side", "height", "closeOnOutsideClick", "open"], outputs: ["openChange"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisFilterPanel, isStandalone: true, selector: "solaris-filter-panel", inputs: { count: "count", labelKey: "labelKey", titleKey: "titleKey", disabled: "disabled", drawerSide: "drawerSide", radius: "radius", drawerWidth: "drawerWidth", label: "label", title: "title", open: "open" }, outputs: { apply: "apply", clearAll: "clearAll", openChange: "openChange" }, host: { classAttribute: "solaris-filter-panel-host" }, queries: [{ propertyName: "footerSlot", first: true, predicate: SolarisFilterPanelFooterDirective, descendants: true }, { propertyName: "chipsSlot", first: true, predicate: SolarisFilterPanelChipsDirective, descendants: true }], ngImport: i0, template: "<button type=\"button\" class=\"solaris-filter-panel__trigger\" [disabled]=\"disabled\" (click)=\"toggle()\"\r\n  [attr.data-radius]=\"radius\">\r\n  <i class=\"ph ph-sliders-horizontal\"></i>\r\n\r\n  @if (labelKey) { {{ labelKey | translate }} } @else { {{ label | translate }} }\r\n\r\n  @if (count > 0) {\r\n    <span class=\"solaris-filter-panel__count\">{{ count }}</span>\r\n  }\r\n</button>\r\n\r\n<solaris-drawer [open]=\"isOpen()\" (openChange)=\"setOpen($event)\" [side]=\"drawerSide\" [width]=\"drawerWidth\"\r\n  [backdrop]=\"true\" [closeOnEscape]=\"true\" [closeOnOutsideClick]=\"true\" [lockScroll]=\"true\"\r\n  [restoreFocus]=\"true\" [trapFocus]=\"true\" panelClass=\"solaris-filter-panel__drawer\">\r\n  <div solaris-drawer-header class=\"solaris-filter-panel__header\">\r\n    <div class=\"solaris-filter-panel__title\">\r\n      @if (titleKey) { {{ titleKey | translate }} } @else { {{ title | translate }} }\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"solaris-filter-panel__close\" (click)=\"setOpen(false)\">\r\n      <i class=\"ph ph-x\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  @if (hasChips()) {\r\n    <div class=\"solaris-filter-panel__chips\">\r\n      <ng-content select=\"[solarisFilterPanelChips]\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"solaris-filter-panel__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <footer solaris-drawer-footer class=\"solaris-filter-panel__footer\">\r\n    <ng-content select=\"[solarisFilterPanelFooter]\"></ng-content>\r\n\r\n    @if (!hasCustomFooter) {\r\n      <div class=\"solaris-filter-panel__footer-default\">\r\n        <button solaris-button color=\"surface\" variant=\"outline\" type=\"button\" (click)=\"clearAll.emit()\">\r\n          {{ 'ui.solaris.common.clearAll' | translate }}\r\n        </button>\r\n\r\n        <button solaris-button type=\"button\" (click)=\"apply.emit()\">\r\n          {{ 'ui.solaris.common.apply' | translate }}\r\n        </button>\r\n      </div>\r\n    }\r\n  </footer>\r\n</solaris-drawer>\r\n", styles: [".solaris-filter-panel__trigger{--solaris-filter-panel-radius: var(--solaris-radius-sm);cursor:pointer;align-items:center;display:inline-flex;padding:.55rem .9rem;gap:var(--solaris-space-2);color:var(--solaris-color-text);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);height:var(--solaris-filter-bar-height, 3.8rem);border-radius:var(--solaris-filter-panel-radius)}.solaris-filter-panel__trigger[data-radius=sm]{--solaris-filter-panel-radius: var(--solaris-radius-sm)}.solaris-filter-panel__trigger[data-radius=md]{--solaris-filter-panel-radius: var(--solaris-radius-md)}.solaris-filter-panel__trigger[data-radius=full]{--solaris-filter-panel-radius: var(--solaris-radius-full)}.solaris-filter-panel__trigger:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-panel__count{padding:.1rem .5rem;font-size:var(--solaris-fs-12);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}:host ::ng-deep .solaris-filter-panel__drawer{width:min(30rem,92vw)}.solaris-filter-panel__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4)}.solaris-filter-panel__title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-filter-panel__close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-filter-panel__close:hover{background:var(--solaris-color-surface-2)}.solaris-filter-panel__chips{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);border-bottom:1px solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-filter-panel__content{min-height:0;overflow:auto;display:grid;align-content:flex-start;gap:var(--solaris-space-8);padding:var(--solaris-space-4)}.solaris-filter-panel__footer-default{display:grid;gap:var(--solaris-space-3);grid-template-columns:1fr 1fr}.solaris-filter-panel__footer-default button{font-weight:400;font-size:var(--solaris-fs-14)}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "directive", type: SolarisDrawerHeaderDirective, selector: "[solaris-drawer-header]" }, { kind: "directive", type: SolarisDrawerFooterDirective, selector: "[solaris-drawer-footer]" }, { kind: "component", type: SolarisDrawer, selector: "solaris-drawer", inputs: ["title", "titleKey", "panelClass", "backdrop", "showClose", "trapFocus", "backdropClass", "showHeader", "lockScroll", "restoreFocus", "closeOnEscape", "width", "side", "height", "closeOnOutsideClick", "open"], outputs: ["openChange"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanel, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-filter-panel', standalone: true, imports: [
                         SolarisTranslationPipe,
-                        ButtonDirective,
+                        SolarisButtonDirective,
                         SolarisDrawerHeaderDirective,
                         SolarisDrawerFooterDirective,
                         SolarisDrawer
@@ -3173,7 +3857,7 @@ function uniqueId(prefix) {
     return inject(SolarisIdGenerator).next(prefix);
 }
 
-const PRESET_COLORS = new Set(['primary', 'success', 'warning', 'error', 'info']);
+const PRESET_COLORS$2 = new Set(['primary', 'success', 'warning', 'error', 'info']);
 class SolarisCheckbox {
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3198,7 +3882,7 @@ class SolarisCheckbox {
         const raw = String(this.color() ?? '').trim();
         if (!raw || raw === 'custom')
             return 'custom';
-        return PRESET_COLORS.has(raw) ? raw : 'custom';
+        return PRESET_COLORS$2.has(raw) ? raw : 'custom';
     }, ...(ngDevMode ? [{ debugName: "colorKey" }] : []));
     autoId = uniqueId('solaris-checkbox');
     id = computed(() => this.inputId() ?? this.autoId, ...(ngDevMode ? [{ debugName: "id" }] : []));
@@ -3271,7 +3955,7 @@ function resolveColor(v, fallback) {
     const s = v == null ? '' : String(v).trim();
     if (!s || s === 'custom')
         return fallback;
-    if (PRESET_COLORS.has(s))
+    if (PRESET_COLORS$2.has(s))
         return `var(--solaris-color-${s})`;
     return s;
 }
@@ -4005,7 +4689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: [SolarisPageHeaderDescriptionDirective]
             }] } });
 
-function resolveRadius(v) {
+function resolveRadius$1(v) {
     const s = String(v).trim();
     switch (s) {
         case 'none':
@@ -4029,7 +4713,7 @@ class ButtonGroupDirective {
     }
     attr = '';
     get groupRadius() {
-        return this._radius ? resolveRadius(this._radius) : null;
+        return this._radius ? resolveRadius$1(this._radius) : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: ButtonGroupDirective, isStandalone: true, selector: "[solaris-button-group]", inputs: { radius: "radius" }, host: { properties: { "attr.solaris-button-group": "this.attr", "style.--solaris-button-group-radius": "this.groupRadius" } }, ngImport: i0 });
@@ -4050,40 +4734,1697 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['style.--solaris-button-group-radius']
             }] } });
 
-function sanitizePhoneInput(v) {
-    let s = (v ?? '').replace(/[^\d+\-\s().]/g, '');
-    s = s.replace(/\+/g, (_m, offset) => (offset === 0 ? '+' : ''));
-    return s;
-}
-function insertAtCursor(input, text) {
-    const start = input.selectionStart ?? input.value.length;
-    const end = input.selectionEnd ?? input.value.length;
-    input.value = input.value.slice(0, start) + text + input.value.slice(end);
-    const pos = start + text.length;
-    input.setSelectionRange(pos, pos);
-}
-function enforceMaxDigitsInPlace(input, maxDigits) {
-    if (!maxDigits)
-        return;
-    const v = input.value ?? '';
-    const sanitized = sanitizePhoneInput(v);
-    const digits = (sanitized.match(/\d/g) ?? []).length;
-    if (digits <= maxDigits) {
-        if (sanitized !== v)
-            input.value = sanitized;
-        return;
-    }
-    let digitCount = 0;
-    let out = '';
-    for (const ch of sanitized) {
-        if (/\d/.test(ch)) {
-            if (digitCount >= maxDigits)
-                break;
-            digitCount++;
-        }
-        out += ch;
-    }
-    input.value = out;
+const SOLARIS_RADIO_GROUP = new InjectionToken('SOLARIS_RADIO_GROUP');
+
+const PRESET_COLORS$1 = new Set([
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info'
+]);
+class SolarisRadio {
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    inputId = input(null, { ...(ngDevMode ? { debugName: "inputId" } : {}), alias: 'id' });
+    inputName = input(null, { ...(ngDevMode ? { debugName: "inputName" } : {}), alias: 'name' });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('dot', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    value = input(true, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    checkedInput = input(false, { ...(ngDevMode ? { debugName: "checkedInput" } : {}), alias: 'checked' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+    checkedChange = output();
+    native;
+    group = inject(SOLARIS_RADIO_GROUP, { optional: true });
+    autoId = uniqueId('solaris-radio');
+    autoName = uniqueId('solaris-radio-name');
+    localChecked = signal(false, ...(ngDevMode ? [{ debugName: "localChecked" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    id = computed(() => this.inputId() ?? this.autoId, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = computed(() => this.group?.name() ?? this.inputName() ?? this.autoName, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    disabled = computed(() => {
+        return !!this.group?.disabled() || this.disabledInput() || this.cvaDisabled();
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    checked = computed(() => {
+        if (this.group)
+            return this.group.isSelected(this.value());
+        return this.localChecked();
+    }, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    tabIndex = computed(() => {
+        if (this.group)
+            return this.group.tabIndexFor(this);
+        return this.disabled() ? -1 : 0;
+    }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    customAccent = computed(() => {
+        if (this.colorKey() !== 'custom')
+            return null;
+        const raw = String(this.color() ?? '').trim();
+        return !raw || raw === 'custom' ? null : raw;
+    }, ...(ngDevMode ? [{ debugName: "customAccent" }] : []));
+    colorKey = computed(() => {
+        const raw = String(this.color() ?? '').trim();
+        if (!raw || raw === 'custom')
+            return 'custom';
+        return PRESET_COLORS$1.has(raw) ? raw : 'custom';
+    }, ...(ngDevMode ? [{ debugName: "colorKey" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            if (this.group)
+                return;
+            this.localChecked.set(this.checkedInput());
+        });
+    }
+    onNativeChange() {
+        if (this.disabled())
+            return;
+        if (this.group) {
+            const wasChecked = this.checked();
+            this.group.select(this);
+            if (!wasChecked)
+                this.checkedChange.emit(true);
+            return;
+        }
+        if (this.localChecked()) {
+            this.onTouched();
+            return;
+        }
+        this.localChecked.set(true);
+        this.onChange(true);
+        this.checkedChange.emit(true);
+        this.onTouched();
+    }
+    onNativeKeydown(event) {
+        if (this.disabled())
+            return;
+        if (this.group) {
+            this.group.handleKeydown(event, this);
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.onNativeChange();
+        }
+    }
+    onBlur() {
+        if (this.group) {
+            this.group.notifyTouched();
+            return;
+        }
+        this.onTouched();
+    }
+    focus() {
+        this.native?.nativeElement.focus();
+    }
+    writeValue(value) {
+        if (this.group)
+            return;
+        this.localChecked.set(!!value);
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: SolarisRadio, isStandalone: true, selector: "solaris-radio", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputName: { classPropertyName: "inputName", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-color": "colorKey()", "attr.data-variant": "variant()", "attr.data-appearance": "appearance()", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-checked": "checked() ? \"true\" : null", "style.--solaris-radio-custom": "customAccent()" }, classAttribute: "solaris-radio-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisRadio),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-radio\">\r\n  <input #native class=\"solaris-radio__native\" type=\"radio\" [attr.id]=\"id()\" [attr.name]=\"name()\" [checked]=\"checked()\"\r\n         [disabled]=\"disabled()\" [attr.aria-label]=\"ariaLabel() ?? null\" [attr.tabindex]=\"tabIndex()\"\r\n         (change)=\"onNativeChange()\" (keydown)=\"onNativeKeydown($event)\" (blur)=\"onBlur()\"/>\r\n\r\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\r\n    <span class=\"solaris-radio__inner\" aria-hidden=\"true\"></span>\r\n  </span>\r\n\r\n  <span class=\"solaris-radio__content\">\r\n    <ng-content/>\r\n  </span>\r\n</label>\r\n", styles: [":host{--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-full);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast, #fff);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_dot: .7rem;--_size: 1.8rem;--_icon-dot: .5rem}:host([data-size=md]){--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem}:host([data-size=lg]){--_size: 2.4rem;--_dot: .95rem;--_icon-dot: .65rem}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio__control{flex:0 0 auto;width:var(--_size);height:var(--_size);display:grid;place-items:center;box-sizing:border-box;background:transparent;border-radius:var(--_radius);border:.1rem solid var(--solaris-radio-border)}.solaris-radio__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio__inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity .15s ease,transform .15s ease,background-color .15s ease}.solaris-radio:hover .solaris-radio__control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio__native:focus-visible+.solaris-radio__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio__native:active+.solaris-radio__control{transform:scale(.98)}.solaris-radio__native:checked+.solaris-radio__control{border-color:var(--solaris-radio-accent)}.solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio__control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio__inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisRadio),
+                            multi: true,
+                        },
+                    ], host: {
+                        class: 'solaris-radio-host',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-color]': 'colorKey()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-checked]': 'checked() ? "true" : null',
+                        '[style.--solaris-radio-custom]': 'customAccent()',
+                    }, template: "<label class=\"solaris-radio\">\r\n  <input #native class=\"solaris-radio__native\" type=\"radio\" [attr.id]=\"id()\" [attr.name]=\"name()\" [checked]=\"checked()\"\r\n         [disabled]=\"disabled()\" [attr.aria-label]=\"ariaLabel() ?? null\" [attr.tabindex]=\"tabIndex()\"\r\n         (change)=\"onNativeChange()\" (keydown)=\"onNativeKeydown($event)\" (blur)=\"onBlur()\"/>\r\n\r\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\r\n    <span class=\"solaris-radio__inner\" aria-hidden=\"true\"></span>\r\n  </span>\r\n\r\n  <span class=\"solaris-radio__content\">\r\n    <ng-content/>\r\n  </span>\r\n</label>\r\n", styles: [":host{--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-full);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast, #fff);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_dot: .7rem;--_size: 1.8rem;--_icon-dot: .5rem}:host([data-size=md]){--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem}:host([data-size=lg]){--_size: 2.4rem;--_dot: .95rem;--_icon-dot: .65rem}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio__control{flex:0 0 auto;width:var(--_size);height:var(--_size);display:grid;place-items:center;box-sizing:border-box;background:transparent;border-radius:var(--_radius);border:.1rem solid var(--solaris-radio-border)}.solaris-radio__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio__inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity .15s ease,transform .15s ease,background-color .15s ease}.solaris-radio:hover .solaris-radio__control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio__native:focus-visible+.solaris-radio__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio__native:active+.solaris-radio__control{transform:scale(.98)}.solaris-radio__native:checked+.solaris-radio__control{border-color:var(--solaris-radio-accent)}.solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio__control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio__inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], native: [{
+                type: ViewChild,
+                args: ['native', { static: true }]
+            }] } });
+
+class SolarisRadioGroup {
+    gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+    nameInput = input(null, { ...(ngDevMode ? { debugName: "nameInput" } : {}), alias: 'name' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    valueChange = output();
+    radiosQuery;
+    destroyRef = inject(DestroyRef);
+    autoName = uniqueId('solaris-radio-group');
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    radiosVersion = signal(0, ...(ngDevMode ? [{ debugName: "radiosVersion" }] : []));
+    name = computed(() => this.nameInput() ?? this.autoName, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    disabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    resolvedGap = computed(() => {
+        const value = String(this.gap() ?? 'md').trim();
+        switch (value) {
+            case 'sm':
+                return 'var(--solaris-space-2)';
+            case 'md':
+                return 'var(--solaris-space-3)';
+            case 'lg':
+                return 'var(--solaris-space-4)';
+            default:
+                return value;
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolvedGap" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterContentInit() {
+        this.bumpRadiosVersion();
+        this.radiosQuery?.changes
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.bumpRadiosVersion());
+    }
+    isSelected(value) {
+        return this.compareWith()(this.internalValue(), value);
+    }
+    select(radio) {
+        if (this.disabled() || radio.disabled())
+            return;
+        const nextValue = radio.value();
+        if (!this.isSelected(nextValue)) {
+            this.internalValue.set(nextValue);
+            this.onChange(nextValue);
+            this.valueChange.emit(nextValue);
+        }
+        this.onTouched();
+        this.bumpRadiosVersion();
+    }
+    tabIndexFor(radio) {
+        this.radiosVersion();
+        if (this.disabled() || radio.disabled())
+            return -1;
+        const enabled = this.enabledRadios();
+        if (!enabled.length)
+            return -1;
+        const selected = enabled.find(item => this.isSelected(item.value()));
+        const target = selected ?? enabled[0];
+        return target === radio ? 0 : -1;
+    }
+    handleKeydown(event, current) {
+        if (this.disabled())
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(current, +1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(current, -1);
+                break;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.select(current);
+                break;
+            default:
+                break;
+        }
+    }
+    notifyTouched() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.internalValue.set(value);
+        this.bumpRadiosVersion();
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+        this.bumpRadiosVersion();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    move(current, direction) {
+        const enabled = this.enabledRadios();
+        if (!enabled.length)
+            return;
+        const currentIndex = enabled.indexOf(current);
+        const startIndex = Math.max(currentIndex, 0);
+        const nextIndex = (startIndex + direction + enabled.length) % enabled.length;
+        const next = enabled[nextIndex];
+        this.select(next);
+        next.focus();
+    }
+    enabledRadios() {
+        this.radiosVersion();
+        return (this.radiosQuery?.toArray() ?? []).filter(radio => !radio.disabled());
+    }
+    bumpRadiosVersion() {
+        this.radiosVersion.update(value => value + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: SolarisRadioGroup, isStandalone: true, selector: "solaris-radio-group", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.data-orientation": "orientation()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-orientation": "orientation()", "style.--solaris-radio-group-gap": "resolvedGap()" }, classAttribute: "solaris-radio-group-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisRadioGroup),
+                multi: true,
+            },
+            {
+                provide: SOLARIS_RADIO_GROUP,
+                useExisting: forwardRef(() => SolarisRadioGroup),
+            },
+        ], queries: [{ propertyName: "radiosQuery", predicate: i0.forwardRef(() => SolarisRadio), descendants: true }], ngImport: i0, template: "<ng-content/>\r\n", styles: [":host.solaris-radio-group-host{display:inline-flex;flex-direction:column;gap:var(--solaris-radio-group-gap, var(--solaris-space-3))}:host.solaris-radio-group-host[data-orientation=horizontal]{flex-wrap:wrap;flex-direction:row;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-radio-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisRadioGroup),
+                            multi: true,
+                        },
+                        {
+                            provide: SOLARIS_RADIO_GROUP,
+                            useExisting: forwardRef(() => SolarisRadioGroup),
+                        },
+                    ], host: {
+                        class: 'solaris-radio-group-host',
+                        role: 'radiogroup',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-label]': 'ariaLabel() ?? null',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[style.--solaris-radio-group-gap]': 'resolvedGap()',
+                    }, template: "<ng-content/>\r\n", styles: [":host.solaris-radio-group-host{display:inline-flex;flex-direction:column;gap:var(--solaris-radio-group-gap, var(--solaris-space-3))}:host.solaris-radio-group-host[data-orientation=horizontal]{flex-wrap:wrap;flex-direction:row;align-items:flex-start}\n"] }]
+        }], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], radiosQuery: [{
+                type: ContentChildren,
+                args: [forwardRef(() => SolarisRadio), { descendants: true }]
+            }] } });
+
+const SOLARIS_CARD_GROUP = new InjectionToken('SOLARIS_CARD_GROUP');
+
+class SolarisCard {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    radius = input(null, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
+    resolvedRadius = computed(() => resolveRadius(this.radius()), ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\r\n  <div class=\"solaris-card__media\">\r\n    <ng-content select=\"[solaris-card-media]\"></ng-content>\r\n  </div>\r\n\r\n  <div class=\"solaris-card__content\">\r\n    <div class=\"solaris-card__header\">\r\n      <div class=\"solaris-card__header-main\">\r\n        <div class=\"solaris-card__eyebrow\">\r\n          <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"solaris-card__title\">\r\n          <ng-content select=\"[solaris-card-title]\"></ng-content>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"solaris-card__badge\">\r\n        <ng-content select=\"[solaris-card-badge]\"></ng-content>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"solaris-card__description\">\r\n      <ng-content select=\"[solaris-card-description]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"solaris-card__meta\">\r\n      <ng-content select=\"[solaris-card-meta]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"solaris-card__footer\">\r\n      <div class=\"solaris-card__footer-main\">\r\n        <ng-content select=\"[solaris-card-footer]\"></ng-content>\r\n      </div>\r\n\r\n      <div class=\"solaris-card__actions\">\r\n        <ng-content select=\"[solaris-card-actions]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</article>\r\n", styles: [":host{display:block;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, white);--solaris-card-border: var(--solaris-color-border);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-color-primary) 18%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: var(--solaris-card-padding-x);--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}.solaris-card{min-width:0;width:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:var(--solaris-card-gap);color:var(--solaris-color-text);background:var(--solaris-card-bg);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);border:1px solid var(--solaris-card-border);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);box-shadow:var(--solaris-card-shadow-hover);border-color:var(--solaris-card-border-hover)}:host([data-disabled=true]) .solaris-card{box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-width:0;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{color:var(--solaris-card-eyebrow-color);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);font-size:var(--solaris-fs-12);text-transform:uppercase}.solaris-card__title{min-width:0;color:var(--solaris-card-title-color);line-height:var(--solaris-lh-tight);font-size:var(--solaris-fs-16);font-weight:700}.solaris-card__description{color:var(--solaris-card-description-color);line-height:var(--solaris-lh-normal);font-size:var(--solaris-fs-14)}.solaris-card__meta{color:var(--solaris-card-meta-color);line-height:var(--solaris-lh-normal);font-size:var(--solaris-fs-14);font-weight:600}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-width:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;gap:var(--solaris-space-2);align-items:center;justify-content:flex-end}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));width:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;width:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-top:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-card-host',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-interactive]': 'interactive() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[style.--solaris-card-radius]': 'resolvedRadius()',
+                    }, template: "<article class=\"solaris-card\">\r\n  <div class=\"solaris-card__media\">\r\n    <ng-content select=\"[solaris-card-media]\"></ng-content>\r\n  </div>\r\n\r\n  <div class=\"solaris-card__content\">\r\n    <div class=\"solaris-card__header\">\r\n      <div class=\"solaris-card__header-main\">\r\n        <div class=\"solaris-card__eyebrow\">\r\n          <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"solaris-card__title\">\r\n          <ng-content select=\"[solaris-card-title]\"></ng-content>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"solaris-card__badge\">\r\n        <ng-content select=\"[solaris-card-badge]\"></ng-content>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"solaris-card__description\">\r\n      <ng-content select=\"[solaris-card-description]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"solaris-card__meta\">\r\n      <ng-content select=\"[solaris-card-meta]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"solaris-card__footer\">\r\n      <div class=\"solaris-card__footer-main\">\r\n        <ng-content select=\"[solaris-card-footer]\"></ng-content>\r\n      </div>\r\n\r\n      <div class=\"solaris-card__actions\">\r\n        <ng-content select=\"[solaris-card-actions]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</article>\r\n", styles: [":host{display:block;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, white);--solaris-card-border: var(--solaris-color-border);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-color-primary) 18%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: var(--solaris-card-padding-x);--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}.solaris-card{min-width:0;width:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:var(--solaris-card-gap);color:var(--solaris-color-text);background:var(--solaris-card-bg);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);border:1px solid var(--solaris-card-border);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);box-shadow:var(--solaris-card-shadow-hover);border-color:var(--solaris-card-border-hover)}:host([data-disabled=true]) .solaris-card{box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-width:0;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{color:var(--solaris-card-eyebrow-color);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);font-size:var(--solaris-fs-12);text-transform:uppercase}.solaris-card__title{min-width:0;color:var(--solaris-card-title-color);line-height:var(--solaris-lh-tight);font-size:var(--solaris-fs-16);font-weight:700}.solaris-card__description{color:var(--solaris-card-description-color);line-height:var(--solaris-lh-normal);font-size:var(--solaris-fs-14)}.solaris-card__meta{color:var(--solaris-card-meta-color);line-height:var(--solaris-lh-normal);font-size:var(--solaris-fs-14);font-weight:600}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-width:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;gap:var(--solaris-space-2);align-items:center;justify-content:flex-end}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));width:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;width:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-top:var(--solaris-space-1)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+function resolveRadius(v) {
+    const value = v == null || String(v).trim() === '' ? null : String(v).trim();
+    if (!value)
+        return null;
+    switch (value) {
+        case 'none':
+            return '0';
+        case 'sm':
+            return 'var(--solaris-radius-sm)';
+        case 'md':
+            return 'var(--solaris-radius-md, var(--solaris-radius-sm))';
+        case 'lg':
+            return 'var(--solaris-radius-lg, var(--solaris-radius-md, var(--solaris-radius-sm)))';
+        case 'full':
+            return 'var(--solaris-radius-full)';
+        default:
+            return value;
+    }
+}
+
+const PRESET_COLORS = new Set([
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info',
+]);
+class SolarisSelectionCard {
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    radius = input(null, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    selectionIndicator = input('auto', ...(ngDevMode ? [{ debugName: "selectionIndicator" }] : []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
+    selectedInput = input(false, { ...(ngDevMode ? { debugName: "selectedInput" } : {}), alias: 'selected', transform: booleanAttribute });
+    selectedChange = output();
+    cardClick = output();
+    elementRef = inject((ElementRef));
+    group = inject(SOLARIS_CARD_GROUP, { optional: true });
+    localSelected = signal(false, ...(ngDevMode ? [{ debugName: "localSelected" }] : []));
+    disabled = computed(() => {
+        return !!this.group?.disabled() || this.disabledInput();
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    selected = computed(() => {
+        if (this.group)
+            return this.group.isSelected(this.value());
+        return this.localSelected();
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    resolvedMode = computed(() => {
+        if (this.group)
+            return this.group.selectionMode();
+        return inferStandaloneMode(this.selectionIndicator());
+    }, ...(ngDevMode ? [{ debugName: "resolvedMode" }] : []));
+    onHostBlur() {
+        this.group?.notifyTouched();
+    }
+    resolvedIndicator = computed(() => {
+        const requested = this.selectionIndicator();
+        if (requested !== 'auto')
+            return requested;
+        switch (this.resolvedMode()) {
+            case 'single':
+                return 'radio';
+            case 'multiple':
+                return 'checkbox';
+            case 'none':
+            default:
+                return 'none';
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolvedIndicator" }] : []));
+    tabIndex = computed(() => {
+        if (this.disabled())
+            return -1;
+        if (this.group)
+            return this.group.tabIndexFor(this);
+        return 0;
+    }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    role = computed(() => {
+        switch (this.resolvedMode()) {
+            case 'single':
+                return 'radio';
+            case 'multiple':
+                return 'checkbox';
+            case 'none':
+            default:
+                return 'button';
+        }
+    }, ...(ngDevMode ? [{ debugName: "role" }] : []));
+    ariaChecked = computed(() => {
+        if (this.resolvedMode() === 'none')
+            return null;
+        return this.selected() ? 'true' : 'false';
+    }, ...(ngDevMode ? [{ debugName: "ariaChecked" }] : []));
+    customAccent = computed(() => {
+        if (this.colorKey() !== 'custom')
+            return null;
+        const raw = String(this.color() ?? '').trim();
+        return !raw || raw === 'custom' ? null : raw;
+    }, ...(ngDevMode ? [{ debugName: "customAccent" }] : []));
+    colorKey = computed(() => {
+        const raw = String(this.color() ?? '').trim();
+        if (!raw || raw === 'custom')
+            return 'custom';
+        return PRESET_COLORS.has(raw) ? raw : 'custom';
+    }, ...(ngDevMode ? [{ debugName: "colorKey" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.group)
+                return;
+            this.localSelected.set(this.selectedInput());
+        });
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    onHostClick(event) {
+        if (this.isActionZone(event.target))
+            return;
+        this.cardClick.emit(event);
+        if (this.disabled())
+            return;
+        const previous = this.selected();
+        if (this.group) {
+            this.group.activate(this);
+            if (previous !== this.selected())
+                this.selectedChange.emit(this.selected());
+            return;
+        }
+        const next = this.activateStandalone();
+        if (next !== previous)
+            this.selectedChange.emit(next);
+    }
+    onHostKeydown(event) {
+        if (this.disabled())
+            return;
+        if (this.group) {
+            this.group.handleKeydown(event, this);
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            const previous = this.selected();
+            const next = this.activateStandalone();
+            if (next !== previous)
+                this.selectedChange.emit(next);
+        }
+    }
+    activateStandalone() {
+        switch (this.resolvedMode()) {
+            case 'single':
+                if (!this.localSelected())
+                    this.localSelected.set(true);
+                return this.localSelected();
+            case 'multiple':
+                this.localSelected.update(value => !value);
+                return this.localSelected();
+            case 'none':
+            default:
+                return this.localSelected();
+        }
+    }
+    isActionZone(target) {
+        return target instanceof HTMLElement && !!target.closest('[data-card-actions="true"]');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelectionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\r\n  @if (resolvedIndicator() !== 'none') {\r\n    <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\r\n      <span class=\"solaris-selection-card__indicator-control\">\r\n        @switch (resolvedIndicator()) {\r\n          @case ('radio') {\r\n            <span class=\"solaris-selection-card__indicator-dot\"></span>\r\n          }\r\n          @case ('checkbox') {\r\n            <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\r\n          }\r\n          @case ('icon') {\r\n            <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\r\n          }\r\n        }\r\n      </span>\r\n    </span>\r\n  }\r\n\r\n  <solaris-card\r\n    class=\"solaris-selection-card__card\"\r\n    [orientation]=\"orientation()\"\r\n    [size]=\"size()\"\r\n    [radius]=\"radius()\"\r\n    [interactive]=\"!disabled()\"\r\n    [disabled]=\"disabled()\">\r\n\r\n    <div ngProjectAs=\"[solaris-card-media]\">\r\n      <ng-content select=\"[solaris-card-media]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-eyebrow]\">\r\n      <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-title]\">\r\n      <ng-content select=\"[solaris-card-title]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-description]\">\r\n      <ng-content select=\"[solaris-card-description]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-meta]\">\r\n      <ng-content select=\"[solaris-card-meta]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-badge]\">\r\n      <ng-content select=\"[solaris-card-badge]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-footer]\">\r\n      <ng-content select=\"[solaris-card-footer]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-actions]\">\r\n      <ng-content select=\"[solaris-card-actions]\"></ng-content>\r\n    </div>\r\n\r\n  </solaris-card>\r\n</div>\r\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-bg: var(--solaris-color-surface);--ssc-bg-hover: color-mix(in srgb, var(--ssc-bg) 94%, white);--ssc-bg-selected: color-mix(in srgb, var(--ssc-accent) 8%, var(--solaris-color-surface));--ssc-border: var(--solaris-color-border);--ssc-border-hover: color-mix(in srgb, var(--ssc-accent) 20%, var(--ssc-border));--ssc-border-selected: color-mix(in srgb, var(--ssc-accent) 72%, var(--ssc-border));--ssc-border-invalid: var(--solaris-color-error);--ssc-shadow: var(--solaris-shadow-xs);--ssc-shadow-hover: var(--solaris-shadow-sm);--ssc-shadow-selected: var(--solaris-shadow-sm);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-check-size: 1rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-icon-dot-size: .55rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-pad-top: var(--ssc-pad-y);--ssc-pad-right: calc(var(--ssc-pad-x) + var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-pad-bottom: var(--ssc-pad-y);--ssc-pad-left: var(--ssc-pad-x);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-check-size: .9rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-icon-dot-size: .5rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-check-size: 1rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-icon-dot-size: .55rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-check-size: 1.2rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-icon-dot-size: .65rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6);--ssc-min-height: 14rem}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-invalid=true]){--ssc-border: var(--ssc-border-invalid);--ssc-border-hover: var(--ssc-border-invalid);--ssc-border-selected: var(--ssc-border-invalid)}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-bg: var(--ssc-bg);--solaris-card-bg-hover: var(--ssc-bg-hover);--solaris-card-border: var(--ssc-border);--solaris-card-border-hover: var(--ssc-border-hover);--solaris-card-shadow: var(--ssc-shadow);--solaris-card-shadow-hover: var(--ssc-shadow-hover);--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y);--solaris-card-padding-top: var(--ssc-pad-top);--solaris-card-padding-right: var(--ssc-pad-right);--solaris-card-padding-bottom: var(--ssc-pad-bottom);--solaris-card-padding-left: var(--ssc-pad-left);min-height:inherit}:host([data-selected=true]) .solaris-selection-card__card{--solaris-card-bg: var(--ssc-bg-selected);--solaris-card-border: var(--ssc-border-selected);--solaris-card-border-hover: var(--ssc-border-selected);--solaris-card-shadow: var(--ssc-shadow-selected);--solaris-card-shadow-hover: var(--ssc-shadow-selected)}:host([data-appearance=soft][data-selected=true]) .solaris-selection-card__card{--solaris-card-bg: color-mix(in srgb, var(--ssc-accent) 12%, var(--solaris-color-surface))}:host([data-disabled=true]) .solaris-selection-card__card{--solaris-card-shadow: none;--solaris-card-shadow-hover: none}.solaris-selection-card__indicator{position:absolute;top:var(--ssc-indicator-top);right:var(--ssc-indicator-end);z-index:1;pointer-events:none}.solaris-selection-card__indicator-control{width:var(--ssc-indicator-size);height:var(--ssc-indicator-size);display:grid;place-items:center;box-sizing:border-box;color:transparent;background:transparent;border:.1rem solid var(--ssc-border);transition:border-color .15s ease,background-color .15s ease,color .15s ease,opacity .15s ease,transform .12s ease}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot,.solaris-selection-card__indicator-check{opacity:0;transform:scale(.45);transition:opacity .15s ease,transform .15s ease,color .15s ease,background-color .15s ease}.solaris-selection-card__indicator-dot{width:var(--ssc-indicator-dot-size);height:var(--ssc-indicator-dot-size);border-radius:var(--solaris-radius-full);background:var(--ssc-accent)}.solaris-selection-card__indicator-icon-dot{width:var(--ssc-indicator-icon-dot-size);height:var(--ssc-indicator-icon-dot-size);border-radius:var(--solaris-radius-full);background:var(--solaris-color-primary-contrast, #fff)}.solaris-selection-card__indicator-check{line-height:1;font-size:var(--ssc-indicator-check-size)}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--solaris-color-primary-contrast, #fff);border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem}:host([data-orientation=compact]) .solaris-selection-card__card{--ssc-pad-right: calc(var(--ssc-pad-x) + var(--ssc-indicator-size) + var(--solaris-space-2))}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "disabled", "interactive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelectionCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-selection-card', standalone: true, imports: [SolarisCard], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-selection-card-host',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-selected]': 'selected() ? "true" : null',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-invalid]': 'invalid() ? "true" : null',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-color]': 'colorKey()',
+                        '[attr.data-indicator]': 'resolvedIndicator()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-checked]': 'ariaChecked()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[style.--solaris-selection-card-custom]': 'customAccent()',
+                        '(click)': 'onHostClick($event)',
+                        '(keydown)': 'onHostKeydown($event)',
+                        '(blur)': 'onHostBlur()',
+                    }, template: "<div class=\"solaris-selection-card\">\r\n  @if (resolvedIndicator() !== 'none') {\r\n    <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\r\n      <span class=\"solaris-selection-card__indicator-control\">\r\n        @switch (resolvedIndicator()) {\r\n          @case ('radio') {\r\n            <span class=\"solaris-selection-card__indicator-dot\"></span>\r\n          }\r\n          @case ('checkbox') {\r\n            <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\r\n          }\r\n          @case ('icon') {\r\n            <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\r\n          }\r\n        }\r\n      </span>\r\n    </span>\r\n  }\r\n\r\n  <solaris-card\r\n    class=\"solaris-selection-card__card\"\r\n    [orientation]=\"orientation()\"\r\n    [size]=\"size()\"\r\n    [radius]=\"radius()\"\r\n    [interactive]=\"!disabled()\"\r\n    [disabled]=\"disabled()\">\r\n\r\n    <div ngProjectAs=\"[solaris-card-media]\">\r\n      <ng-content select=\"[solaris-card-media]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-eyebrow]\">\r\n      <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-title]\">\r\n      <ng-content select=\"[solaris-card-title]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-description]\">\r\n      <ng-content select=\"[solaris-card-description]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-meta]\">\r\n      <ng-content select=\"[solaris-card-meta]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-badge]\">\r\n      <ng-content select=\"[solaris-card-badge]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-footer]\">\r\n      <ng-content select=\"[solaris-card-footer]\"></ng-content>\r\n    </div>\r\n\r\n    <div ngProjectAs=\"[solaris-card-actions]\">\r\n      <ng-content select=\"[solaris-card-actions]\"></ng-content>\r\n    </div>\r\n\r\n  </solaris-card>\r\n</div>\r\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-bg: var(--solaris-color-surface);--ssc-bg-hover: color-mix(in srgb, var(--ssc-bg) 94%, white);--ssc-bg-selected: color-mix(in srgb, var(--ssc-accent) 8%, var(--solaris-color-surface));--ssc-border: var(--solaris-color-border);--ssc-border-hover: color-mix(in srgb, var(--ssc-accent) 20%, var(--ssc-border));--ssc-border-selected: color-mix(in srgb, var(--ssc-accent) 72%, var(--ssc-border));--ssc-border-invalid: var(--solaris-color-error);--ssc-shadow: var(--solaris-shadow-xs);--ssc-shadow-hover: var(--solaris-shadow-sm);--ssc-shadow-selected: var(--solaris-shadow-sm);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-check-size: 1rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-icon-dot-size: .55rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-pad-top: var(--ssc-pad-y);--ssc-pad-right: calc(var(--ssc-pad-x) + var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-pad-bottom: var(--ssc-pad-y);--ssc-pad-left: var(--ssc-pad-x);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-check-size: .9rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-icon-dot-size: .5rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-check-size: 1rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-icon-dot-size: .55rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-check-size: 1.2rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-icon-dot-size: .65rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6);--ssc-min-height: 14rem}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-invalid=true]){--ssc-border: var(--ssc-border-invalid);--ssc-border-hover: var(--ssc-border-invalid);--ssc-border-selected: var(--ssc-border-invalid)}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-bg: var(--ssc-bg);--solaris-card-bg-hover: var(--ssc-bg-hover);--solaris-card-border: var(--ssc-border);--solaris-card-border-hover: var(--ssc-border-hover);--solaris-card-shadow: var(--ssc-shadow);--solaris-card-shadow-hover: var(--ssc-shadow-hover);--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y);--solaris-card-padding-top: var(--ssc-pad-top);--solaris-card-padding-right: var(--ssc-pad-right);--solaris-card-padding-bottom: var(--ssc-pad-bottom);--solaris-card-padding-left: var(--ssc-pad-left);min-height:inherit}:host([data-selected=true]) .solaris-selection-card__card{--solaris-card-bg: var(--ssc-bg-selected);--solaris-card-border: var(--ssc-border-selected);--solaris-card-border-hover: var(--ssc-border-selected);--solaris-card-shadow: var(--ssc-shadow-selected);--solaris-card-shadow-hover: var(--ssc-shadow-selected)}:host([data-appearance=soft][data-selected=true]) .solaris-selection-card__card{--solaris-card-bg: color-mix(in srgb, var(--ssc-accent) 12%, var(--solaris-color-surface))}:host([data-disabled=true]) .solaris-selection-card__card{--solaris-card-shadow: none;--solaris-card-shadow-hover: none}.solaris-selection-card__indicator{position:absolute;top:var(--ssc-indicator-top);right:var(--ssc-indicator-end);z-index:1;pointer-events:none}.solaris-selection-card__indicator-control{width:var(--ssc-indicator-size);height:var(--ssc-indicator-size);display:grid;place-items:center;box-sizing:border-box;color:transparent;background:transparent;border:.1rem solid var(--ssc-border);transition:border-color .15s ease,background-color .15s ease,color .15s ease,opacity .15s ease,transform .12s ease}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot,.solaris-selection-card__indicator-check{opacity:0;transform:scale(.45);transition:opacity .15s ease,transform .15s ease,color .15s ease,background-color .15s ease}.solaris-selection-card__indicator-dot{width:var(--ssc-indicator-dot-size);height:var(--ssc-indicator-dot-size);border-radius:var(--solaris-radius-full);background:var(--ssc-accent)}.solaris-selection-card__indicator-icon-dot{width:var(--ssc-indicator-icon-dot-size);height:var(--ssc-indicator-icon-dot-size);border-radius:var(--solaris-radius-full);background:var(--solaris-color-primary-contrast, #fff)}.solaris-selection-card__indicator-check{line-height:1;font-size:var(--ssc-indicator-check-size)}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--solaris-color-primary-contrast, #fff);border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem}:host([data-orientation=compact]) .solaris-selection-card__card{--ssc-pad-right: calc(var(--ssc-pad-x) + var(--ssc-indicator-size) + var(--solaris-space-2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+function inferStandaloneMode(indicator) {
+    switch (indicator) {
+        case 'radio':
+            return 'single';
+        case 'checkbox':
+        case 'icon':
+        case 'auto':
+        default:
+            return 'multiple';
+    }
+}
+
+class FieldErrorComponent {
+    text;
+    textKey;
+    textParams;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FieldErrorComponent, isStandalone: true, selector: "solaris-field-error", inputs: { text: "text", textKey: "textKey", textParams: "textParams" }, ngImport: i0, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n  <span class=\"solaris-field-error__text\">\r\n    @if (textKey) { {{ textKey | translate:textParams }} }\r\n    @else { {{ text }} }\r\n  </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n  <span class=\"solaris-field-error__text\">\r\n    @if (textKey) { {{ textKey | translate:textParams }} }\r\n    @else { {{ text }} }\r\n  </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], textKey: [{
+                type: Input
+            }], textParams: [{
+                type: Input
+            }] } });
+
+class SolarisCardGroup {
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    submitted = input(false, { ...(ngDevMode ? { debugName: "submitted" } : {}), transform: booleanAttribute });
+    selectOnFocus = input(false, { ...(ngDevMode ? { debugName: "selectOnFocus" } : {}), transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), transform: booleanAttribute });
+    gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    invalid = input(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    minSelected = input(null, ...(ngDevMode ? [{ debugName: "minSelected" }] : []));
+    maxSelected = input(null, ...(ngDevMode ? [{ debugName: "maxSelected" }] : []));
+    layout = input('stack', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+    showErrors = input('dirtyOrTouched', ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
+    selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    requiredErrorKey = input('solaris.cardGroup.errors.required', ...(ngDevMode ? [{ debugName: "requiredErrorKey" }] : []));
+    minSelectedErrorKey = input('solaris.cardGroup.errors.minSelected', ...(ngDevMode ? [{ debugName: "minSelectedErrorKey" }] : []));
+    maxSelectedErrorKey = input('solaris.cardGroup.errors.maxSelected', ...(ngDevMode ? [{ debugName: "maxSelectedErrorKey" }] : []));
+    valueChange = output();
+    selectionRejected = output();
+    cardsQuery;
+    destroyRef = inject(DestroyRef);
+    controlTick = signal(0, ...(ngDevMode ? [{ debugName: "controlTick" }] : []));
+    dirtyState = signal(false, ...(ngDevMode ? [{ debugName: "dirtyState" }] : []));
+    cardsVersion = signal(0, ...(ngDevMode ? [{ debugName: "cardsVersion" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    touchedState = signal(false, ...(ngDevMode ? [{ debugName: "touchedState" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    onTouched = () => { };
+    onChange = () => { };
+    onValidatorChange = () => { };
+    constructor() {
+        effect(() => {
+            this.selectionMode();
+            this.required();
+            this.minSelected();
+            this.maxSelected();
+            this.compareWith();
+            this.internalValue();
+            this.onValidatorChange();
+        });
+    }
+    ngAfterContentInit() {
+        this.bumpCardsVersion();
+        this.cardsQuery?.changes
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.bumpCardsVersion());
+    }
+    resolvedGap = computed(() => {
+        const value = String(this.gap() ?? 'md').trim();
+        switch (value) {
+            case 'sm':
+                return 'var(--solaris-space-3)';
+            case 'md':
+                return 'var(--solaris-space-4)';
+            case 'lg':
+                return 'var(--solaris-space-5)';
+            default:
+                return value;
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolvedGap" }] : []));
+    disabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    groupRole = computed(() => {
+        switch (this.selectionMode()) {
+            case 'single':
+                return 'radiogroup';
+            case 'multiple':
+            case 'none':
+            default:
+                return 'group';
+        }
+    }, ...(ngDevMode ? [{ debugName: "groupRole" }] : []));
+    selectionCount = computed(() => {
+        const value = this.internalValue();
+        if (Array.isArray(value))
+            return value.length;
+        if (value == null)
+            return 0;
+        return 1;
+    }, ...(ngDevMode ? [{ debugName: "selectionCount" }] : []));
+    validationError = computed(() => {
+        if (this.disabled() || this.selectionMode() === 'none')
+            return null;
+        const count = this.selectionCount();
+        if (this.required() && count === 0)
+            return 'required';
+        if (this.selectionMode() === 'multiple') {
+            const min = this.minSelected();
+            const max = this.maxSelected();
+            if (min != null && count < min)
+                return 'minSelected';
+            if (max != null && count > max)
+                return 'maxSelected';
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "validationError" }] : []));
+    invalidComputed = computed(() => {
+        const explicitInvalid = this.invalid();
+        if (explicitInvalid !== null)
+            return explicitInvalid;
+        const localInvalid = this.validationError() !== null;
+        if (this.showErrors() === 'always')
+            return localInvalid;
+        if (this.showErrors() === 'submitted')
+            return localInvalid && this.submitted();
+        return localInvalid && (this.touchedState() || this.dirtyState());
+    }, ...(ngDevMode ? [{ debugName: "invalidComputed" }] : []));
+    errorKeyComputed = computed(() => {
+        switch (this.validationError()) {
+            case 'required':
+                return this.requiredErrorKey();
+            case 'minSelected':
+                return this.minSelectedErrorKey();
+            case 'maxSelected':
+                return this.maxSelectedErrorKey();
+            default:
+                return undefined;
+        }
+    }, ...(ngDevMode ? [{ debugName: "errorKeyComputed" }] : []));
+    errorParamsComputed = computed(() => {
+        switch (this.validationError()) {
+            case 'minSelected':
+                return { min: this.minSelected() ?? undefined };
+            case 'maxSelected':
+                return { max: this.maxSelected() ?? undefined };
+            default:
+                return undefined;
+        }
+    }, ...(ngDevMode ? [{ debugName: "errorParamsComputed" }] : []));
+    isSelected(value) {
+        const currentValue = this.internalValue();
+        switch (this.selectionMode()) {
+            case 'single':
+                return !Array.isArray(currentValue) &&
+                    currentValue !== null &&
+                    this.compareWith()(currentValue, value);
+            case 'multiple': {
+                const list = Array.isArray(currentValue) ? currentValue : [];
+                return list.some(item => this.compareWith()(item, value));
+            }
+            case 'none':
+            default:
+                return false;
+        }
+    }
+    activate(card) {
+        if (this.disabled() || card.disabled())
+            return;
+        this.notifyTouched();
+        if (this.readonly()) {
+            this.selectionRejected.emit({ reason: 'readonly', value: card.value() });
+            return;
+        }
+        switch (this.selectionMode()) {
+            case 'single': {
+                const nextValue = card.value();
+                const currentValue = this.internalValue();
+                if (Array.isArray(currentValue) || currentValue === null
+                    || !this.compareWith()(currentValue, nextValue)) {
+                    this.internalValue.set(nextValue);
+                    this.emitModelChange(nextValue);
+                }
+                break;
+            }
+            case 'multiple': {
+                const currentValue = this.internalValue();
+                const current = Array.isArray(currentValue) ? [...currentValue] : [];
+                const cardValue = card.value();
+                const index = current.findIndex(item => this.compareWith()(item, cardValue));
+                if (index >= 0) {
+                    current.splice(index, 1);
+                    this.internalValue.set(current);
+                    this.emitModelChange(current);
+                    break;
+                }
+                const max = this.maxSelected();
+                if (max != null && current.length >= max) {
+                    this.selectionRejected.emit({ reason: 'maxSelected', value: cardValue });
+                    return;
+                }
+                current.push(cardValue);
+                this.internalValue.set(current);
+                this.emitModelChange(current);
+                break;
+            }
+            case 'none':
+            default:
+                break;
+        }
+        this.bumpCardsVersion();
+        this.bumpControlTick();
+    }
+    tabIndexFor(card) {
+        this.cardsVersion();
+        if (this.disabled() || card.disabled())
+            return -1;
+        if (this.selectionMode() === 'none')
+            return 0;
+        const enabled = this.enabledCards();
+        if (!enabled.length)
+            return -1;
+        const selected = enabled.find(item => this.isSelected(item.value()));
+        const target = selected ?? enabled[0];
+        return target === card ? 0 : -1;
+    }
+    handleKeydown(event, current) {
+        if (this.disabled())
+            return;
+        if (this.selectionMode() === 'none')
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(current, +1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(current, -1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusLast();
+                break;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.activate(current);
+                break;
+        }
+    }
+    notifyTouched() {
+        if (!this.touchedState()) {
+            this.touchedState.set(true);
+        }
+        this.onTouched();
+        this.bumpControlTick();
+    }
+    writeValue(value) {
+        this.internalValue.set(this.normalizeIncomingValue(value, this.selectionMode()));
+        this.bumpCardsVersion();
+        this.bumpControlTick();
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+        this.bumpCardsVersion();
+        this.bumpControlTick();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    validate(_) {
+        switch (this.validationError()) {
+            case 'required':
+                return { required: true };
+            case 'minSelected':
+                return {
+                    minSelected: {
+                        min: this.minSelected(),
+                        actual: this.selectionCount(),
+                    },
+                };
+            case 'maxSelected':
+                return {
+                    maxSelected: {
+                        max: this.maxSelected(),
+                        actual: this.selectionCount(),
+                    },
+                };
+            default:
+                return null;
+        }
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    move(current, direction) {
+        const enabled = this.enabledCards();
+        if (!enabled.length)
+            return;
+        const currentIndex = enabled.indexOf(current);
+        const startIndex = Math.max(currentIndex, 0);
+        const nextIndex = (startIndex + direction + enabled.length) % enabled.length;
+        const next = enabled[nextIndex];
+        if (this.selectionMode() === 'single' && this.selectOnFocus()) {
+            this.activate(next);
+        }
+        next.focus();
+    }
+    focusFirst() {
+        const first = this.enabledCards()[0];
+        if (!first)
+            return;
+        if (this.selectionMode() === 'single' && this.selectOnFocus()) {
+            this.activate(first);
+        }
+        first.focus();
+    }
+    focusLast() {
+        const enabled = this.enabledCards();
+        const last = enabled.at(-1);
+        if (!last)
+            return;
+        if (this.selectionMode() === 'single' && this.selectOnFocus()) {
+            this.activate(last);
+        }
+        last.focus();
+    }
+    enabledCards() {
+        this.cardsVersion();
+        return (this.cardsQuery?.toArray() ?? []).filter(card => !card.disabled());
+    }
+    emitModelChange(value) {
+        this.onChange(value);
+        this.valueChange.emit(value);
+        this.onValidatorChange();
+    }
+    normalizeIncomingValue(value, mode) {
+        switch (mode) {
+            case 'single':
+                return Array.isArray(value) ? (value[0] ?? null) : value;
+            case 'multiple':
+                if (value == null)
+                    return [];
+                return Array.isArray(value) ? value : [value];
+            case 'none':
+            default:
+                return null;
+        }
+    }
+    bumpCardsVersion() {
+        this.cardsVersion.update(value => value + 1);
+    }
+    bumpControlTick() {
+        this.controlTick.update(value => value + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCardGroup, isStandalone: true, selector: "solaris-card-group", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabledInput", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minSelected: { classPropertyName: "minSelected", publicName: "minSelected", isSignal: true, isRequired: false, transformFunction: null }, maxSelected: { classPropertyName: "maxSelected", publicName: "maxSelected", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, requiredErrorKey: { classPropertyName: "requiredErrorKey", publicName: "requiredErrorKey", isSignal: true, isRequired: false, transformFunction: null }, minSelectedErrorKey: { classPropertyName: "minSelectedErrorKey", publicName: "minSelectedErrorKey", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedErrorKey: { classPropertyName: "maxSelectedErrorKey", publicName: "maxSelectedErrorKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionRejected: "selectionRejected" }, host: { properties: { "attr.data-layout": "layout()", "attr.data-orientation": "orientation()", "attr.data-selection-mode": "selectionMode()", "attr.data-invalid": "invalidComputed() ? \"true\" : null", "attr.data-readonly": "readonly() ? \"true\" : null", "attr.role": "groupRole()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalidComputed() ? \"true\" : null", "style.--solaris-card-group-gap": "resolvedGap()" }, classAttribute: "solaris-card-group-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisCardGroup),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SolarisCardGroup),
+                multi: true,
+            },
+            {
+                provide: SOLARIS_CARD_GROUP,
+                useExisting: forwardRef(() => SolarisCardGroup),
+            },
+        ], queries: [{ propertyName: "cardsQuery", predicate: i0.forwardRef(() => SolarisSelectionCard), descendants: true }], ngImport: i0, template: "<div class=\"solaris-card-group__control\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n@if (errorKeyComputed()) {\r\n  <solaris-field-error [textKey]=\"errorKeyComputed()\" [textParams]=\"errorParamsComputed()\"></solaris-field-error>\r\n} @else {\r\n  <ng-content select=\"[card-group-message]\"></ng-content>\r\n}\r\n", styles: [":host.solaris-card-group-host{display:flex;min-width:0;gap:var(--solaris-card-group-gap, var(--solaris-space-4))}:host.solaris-card-group-host[data-layout=stack]{flex-direction:column}:host.solaris-card-group-host[data-layout=stack][data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;align-items:stretch}:host.solaris-card-group-host[data-layout=stack][data-orientation=compact]{flex-direction:column}:host.solaris-card-group-host[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}:host.solaris-card-group-host[data-layout=grid][data-orientation=compact]{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}:host.solaris-card-group-host[data-layout=grid][data-orientation=horizontal]{grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr))}\n"], dependencies: [{ kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-card-group', standalone: true, imports: [
+                        FieldErrorComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisCardGroup),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SolarisCardGroup),
+                            multi: true,
+                        },
+                        {
+                            provide: SOLARIS_CARD_GROUP,
+                            useExisting: forwardRef(() => SolarisCardGroup),
+                        },
+                    ], host: {
+                        class: 'solaris-card-group-host',
+                        '[attr.data-layout]': 'layout()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-selection-mode]': 'selectionMode()',
+                        '[attr.data-invalid]': 'invalidComputed() ? "true" : null',
+                        '[attr.data-readonly]': 'readonly() ? "true" : null',
+                        '[attr.role]': 'groupRole()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalidComputed() ? "true" : null',
+                        '[style.--solaris-card-group-gap]': 'resolvedGap()',
+                    }, template: "<div class=\"solaris-card-group__control\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n@if (errorKeyComputed()) {\r\n  <solaris-field-error [textKey]=\"errorKeyComputed()\" [textParams]=\"errorParamsComputed()\"></solaris-field-error>\r\n} @else {\r\n  <ng-content select=\"[card-group-message]\"></ng-content>\r\n}\r\n", styles: [":host.solaris-card-group-host{display:flex;min-width:0;gap:var(--solaris-card-group-gap, var(--solaris-space-4))}:host.solaris-card-group-host[data-layout=stack]{flex-direction:column}:host.solaris-card-group-host[data-layout=stack][data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;align-items:stretch}:host.solaris-card-group-host[data-layout=stack][data-orientation=compact]{flex-direction:column}:host.solaris-card-group-host[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}:host.solaris-card-group-host[data-layout=grid][data-orientation=compact]{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}:host.solaris-card-group-host[data-layout=grid][data-orientation=horizontal]{grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInput", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelected", required: false }] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], minSelectedErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelectedErrorKey", required: false }] }], maxSelectedErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedErrorKey", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], cardsQuery: [{
+                type: ContentChildren,
+                args: [forwardRef(() => SolarisSelectionCard), { descendants: true }]
+            }] } });
+
+class SolarisCardMediaDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardMediaDirective, isStandalone: true, selector: "[solaris-card-media]", host: { classAttribute: "solaris-card-slot solaris-card-slot--media" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-media]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--media' },
+                }]
+        }] });
+class SolarisCardEyebrowDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardEyebrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardEyebrowDirective, isStandalone: true, selector: "[solaris-card-eyebrow]", host: { classAttribute: "solaris-card-slot solaris-card-slot--eyebrow" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardEyebrowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-eyebrow]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--eyebrow' },
+                }]
+        }] });
+class SolarisCardTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardTitleDirective, isStandalone: true, selector: "[solaris-card-title]", host: { classAttribute: "solaris-card-slot solaris-card-slot--title" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-title]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--title' },
+                }]
+        }] });
+class SolarisCardDescriptionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardDescriptionDirective, isStandalone: true, selector: "[solaris-card-description]", host: { classAttribute: "solaris-card-slot solaris-card-slot--description" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-description]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--description' },
+                }]
+        }] });
+class SolarisCardMetaDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMetaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardMetaDirective, isStandalone: true, selector: "[solaris-card-meta]", host: { classAttribute: "solaris-card-slot solaris-card-slot--meta" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMetaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-meta]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--meta' },
+                }]
+        }] });
+class SolarisCardBadgeDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardBadgeDirective, isStandalone: true, selector: "[solaris-card-badge]", host: { classAttribute: "solaris-card-slot solaris-card-slot--badge" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-badge]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--badge' },
+                }]
+        }] });
+class SolarisCardActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardActionsDirective, isStandalone: true, selector: "[solaris-card-actions]", host: { attributes: { "data-card-actions": "true" }, classAttribute: "solaris-card-slot solaris-card-slot--actions" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-actions]',
+                    standalone: true,
+                    host: {
+                        class: 'solaris-card-slot solaris-card-slot--actions',
+                        'data-card-actions': 'true',
+                    },
+                }]
+        }] });
+class SolarisCardFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardFooterDirective, isStandalone: true, selector: "[solaris-card-footer]", host: { classAttribute: "solaris-card-slot solaris-card-slot--footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-footer]',
+                    standalone: true,
+                    host: { class: 'solaris-card-slot solaris-card-slot--footer' },
+                }]
+        }] });
+const SOLARIS_CARD_SLOT_DIRECTIVES = [
+    SolarisCardMediaDirective,
+    SolarisCardEyebrowDirective,
+    SolarisCardTitleDirective,
+    SolarisCardDescriptionDirective,
+    SolarisCardMetaDirective,
+    SolarisCardBadgeDirective,
+    SolarisCardActionsDirective,
+    SolarisCardFooterDirective,
+];
+
+class SolarisAvatarOverlayDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisAvatarOverlayDirective, isStandalone: true, selector: "[solaris-avatar-overlay]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-avatar-overlay]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisAvatarPresence {
+    translation = inject(SOLARIS_TRANSLATION, { optional: true });
+    translationConfiguration = inject(SOLARIS_TRANSLATION_CONFIGURATION, { optional: true });
+    destroyRef = inject(DestroyRef);
+    presence = input('offline', ...(ngDevMode ? [{ debugName: "presence" }] : []));
+    timezone = input(null, ...(ngDevMode ? [{ debugName: "timezone" }] : []));
+    lastSeenAt = input(null, ...(ngDevMode ? [{ debugName: "lastSeenAt" }] : []));
+    quietHours = input(false, ...(ngDevMode ? [{ debugName: "quietHours" }] : []));
+    workHoursStart = input(9, ...(ngDevMode ? [{ debugName: "workHoursStart" }] : []));
+    workHoursEnd = input(18, ...(ngDevMode ? [{ debugName: "workHoursEnd" }] : []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaHidden = input(false, { ...(ngDevMode ? { debugName: "ariaHidden" } : {}), alias: 'aria-hidden', transform: booleanAttribute });
+    hostClass = 'solaris-avatar-presence-host';
+    nowTick = signal(Date.now(), ...(ngDevMode ? [{ debugName: "nowTick" }] : []));
+    fallbackLanguage = this.translationConfiguration?.defaultLanguage ?? 'en-US';
+    activeLanguage = this.translation
+        ? toSignal(this.translation.languageChanges(), {
+            initialValue: this.translation.language(),
+        })
+        : signal(this.fallbackLanguage);
+    browserTimezone = typeof Intl === 'undefined'
+        ? null
+        : Intl.DateTimeFormat().resolvedOptions().timeZone || null;
+    constructor() {
+        if (globalThis.window !== undefined) {
+            const intervalId = globalThis.setInterval(() => {
+                this.nowTick.set(Date.now());
+            }, 60_000);
+            this.destroyRef.onDestroy(() => {
+                globalThis.clearInterval(intervalId);
+            });
+        }
+    }
+    normalizedTimezone = computed(() => this.normalize(this.timezone()), ...(ngDevMode ? [{ debugName: "normalizedTimezone" }] : []));
+    normalizedAriaLabel = computed(() => this.normalize(this.ariaLabel()), ...(ngDevMode ? [{ debugName: "normalizedAriaLabel" }] : []));
+    parsedLastSeenAt = computed(() => this.parseDate(this.lastSeenAt()), ...(ngDevMode ? [{ debugName: "parsedLastSeenAt" }] : []));
+    effectiveTimezone = computed(() => {
+        return this.normalizedTimezone() || this.browserTimezone || null;
+    }, ...(ngDevMode ? [{ debugName: "effectiveTimezone" }] : []));
+    intlLocale = computed(() => {
+        const lang = this.activeLanguage() || this.fallbackLanguage || 'en-US';
+        return lang.replace('_', '-');
+    }, ...(ngDevMode ? [{ debugName: "intlLocale" }] : []));
+    translationPrefix = computed(() => {
+        const uiScope = this.translationConfiguration?.uiScope ?? 'ui';
+        return `${uiScope}.solaris.avatar.presence`;
+    }, ...(ngDevMode ? [{ debugName: "translationPrefix" }] : []));
+    normalizedWorkHours = computed(() => {
+        const start = this.coerceHour(this.workHoursStart(), 9, 0, 23);
+        const end = this.coerceHour(this.workHoursEnd(), 18, 1, 24);
+        if (end <= start) {
+            return { start: 9, end: 18 };
+        }
+        return { start, end };
+    }, ...(ngDevMode ? [{ debugName: "normalizedWorkHours" }] : []));
+    currentTimeContext = computed(() => {
+        this.nowTick();
+        this.activeLanguage();
+        const timezone = this.effectiveTimezone();
+        if (!timezone || typeof Intl === 'undefined') {
+            return null;
+        }
+        try {
+            const formatter = new Intl.DateTimeFormat('en-US', {
+                hour: 'numeric',
+                weekday: 'short',
+                hourCycle: 'h23',
+                timeZone: timezone,
+            });
+            const parts = formatter.formatToParts(new Date(this.nowTick()));
+            const hour = Number(parts.find((part) => part.type === 'hour')?.value ?? Number.NaN);
+            const weekday = parts.find((part) => part.type === 'weekday')?.value ?? '';
+            if (Number.isNaN(hour)) {
+                return null;
+            }
+            const weekdayIndex = this.resolveWeekdayIndex(weekday);
+            return {
+                hour,
+                timezone,
+                isWeekend: weekdayIndex === 0 || weekdayIndex === 6,
+            };
+        }
+        catch {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "currentTimeContext" }] : []));
+    isQuietHoursAuto = computed(() => {
+        const context = this.currentTimeContext();
+        if (!context) {
+            return false;
+        }
+        if (context.isWeekend) {
+            return true;
+        }
+        const { start, end } = this.normalizedWorkHours();
+        return context.hour < start || context.hour >= end;
+    }, ...(ngDevMode ? [{ debugName: "isQuietHoursAuto" }] : []));
+    showQuietHoursAccent = computed(() => {
+        const mode = this.quietHours();
+        if (mode === true)
+            return true;
+        if (mode === false)
+            return false;
+        return this.isQuietHoursAuto();
+    }, ...(ngDevMode ? [{ debugName: "showQuietHoursAccent" }] : []));
+    showDndSlash = computed(() => this.presence() === 'dnd', ...(ngDevMode ? [{ debugName: "showDndSlash" }] : []));
+    stateClasses = computed(() => ([
+        `state-${this.presence()}`,
+        this.showQuietHoursAccent() ? 'has-quiet-hours' : '',
+    ]), ...(ngDevMode ? [{ debugName: "stateClasses" }] : []));
+    titleText = computed(() => {
+        if (this.ariaHidden())
+            return null;
+        this.activeLanguage();
+        return this.buildSemanticText();
+    }, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
+    resolvedAriaLabel = computed(() => {
+        if (this.ariaHidden())
+            return null;
+        this.activeLanguage();
+        return this.normalizedAriaLabel() || this.buildSemanticText();
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    buildSemanticText() {
+        const parts = [this.translate(`states.${this.presence()}`)];
+        if (this.presence() === 'offline') {
+            const lastSeen = this.getLastSeenLabel(this.parsedLastSeenAt());
+            if (lastSeen) {
+                parts.push(lastSeen);
+            }
+        }
+        if (this.showQuietHoursAccent()) {
+            parts.push(this.translate('quietHours'));
+        }
+        return parts.join(' • ');
+    }
+    getLastSeenLabel(value) {
+        if (!value || Number.isNaN(value.getTime())) {
+            return null;
+        }
+        const now = new Date(this.nowTick());
+        const diffMs = Math.max(0, now.getTime() - value.getTime());
+        const minuteMs = 60_000;
+        const hourMs = 60 * minuteMs;
+        if (diffMs < minuteMs) {
+            return this.translate('lastSeen.now');
+        }
+        if (diffMs < hourMs) {
+            return this.translate('lastSeen.minutesAgo', {
+                minutes: Math.floor(diffMs / minuteMs),
+            });
+        }
+        if (diffMs < 6 * hourMs) {
+            return this.translate('lastSeen.hoursAgo', {
+                hours: Math.floor(diffMs / hourMs),
+            });
+        }
+        const timeLabel = this.formatDate(value, {
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+        if (this.isSameCalendarDay(value, now)) {
+            return this.translate('lastSeen.todayAt', {
+                time: timeLabel,
+            });
+        }
+        const yesterday = new Date(now);
+        yesterday.setDate(now.getDate() - 1);
+        if (this.isSameCalendarDay(value, yesterday)) {
+            return this.translate('lastSeen.yesterdayAt', {
+                time: timeLabel,
+            });
+        }
+        return this.translate('lastSeen.onDate', {
+            date: this.formatDate(value, {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            }),
+        });
+    }
+    formatDate(value, options) {
+        try {
+            return new Intl.DateTimeFormat(this.intlLocale(), options).format(value);
+        }
+        catch {
+            return value.toLocaleString();
+        }
+    }
+    translate(key, params) {
+        const fullKey = `${this.translationPrefix()}.${key}`;
+        if (this.translation) {
+            const translated = this.translation.translate(fullKey, params);
+            if (translated && translated !== fullKey) {
+                return translated;
+            }
+        }
+        return this.fallbackTranslate(key, params);
+    }
+    fallbackTranslate(key, params) {
+        const isPt = this.intlLocale().toLowerCase().startsWith('pt');
+        const dict = isPt
+            ? {
+                'states.online': 'Online',
+                'states.offline': 'Offline',
+                'states.away': 'Ausente',
+                'states.busy': 'Ocupado',
+                'states.dnd': 'Não perturbe',
+                'quietHours': 'Fora do expediente local',
+                'lastSeen.now': 'Visto agora',
+                'lastSeen.minutesAgo': `Visto há ${params?.['minutes'] ?? 0} min`,
+                'lastSeen.hoursAgo': `Visto há ${params?.['hours'] ?? 0} h`,
+                'lastSeen.todayAt': `Visto hoje às ${params?.['time'] ?? ''}`,
+                'lastSeen.yesterdayAt': `Visto ontem às ${params?.['time'] ?? ''}`,
+                'lastSeen.onDate': `Visto em ${params?.['date'] ?? ''}`,
+            }
+            : {
+                'states.online': 'Online',
+                'states.offline': 'Offline',
+                'states.away': 'Away',
+                'states.busy': 'Busy',
+                'states.dnd': 'Do not disturb',
+                'quietHours': 'Outside local working hours',
+                'lastSeen.now': 'Seen just now',
+                'lastSeen.minutesAgo': `Seen ${params?.['minutes'] ?? 0} min ago`,
+                'lastSeen.hoursAgo': `Seen ${params?.['hours'] ?? 0} h ago`,
+                'lastSeen.todayAt': `Seen today at ${params?.['time'] ?? ''}`,
+                'lastSeen.yesterdayAt': `Seen yesterday at ${params?.['time'] ?? ''}`,
+                'lastSeen.onDate': `Seen on ${params?.['date'] ?? ''}`,
+            };
+        return dict[key] ?? key;
+    }
+    isSameCalendarDay(a, b) {
+        return a.getFullYear() === b.getFullYear()
+            && a.getMonth() === b.getMonth()
+            && a.getDate() === b.getDate();
+    }
+    resolveWeekdayIndex(weekday) {
+        switch (weekday.toLowerCase()) {
+            case 'sun': return 0;
+            case 'mon': return 1;
+            case 'tue': return 2;
+            case 'wed': return 3;
+            case 'thu': return 4;
+            case 'fri': return 5;
+            case 'sat': return 6;
+            default: return -1;
+        }
+    }
+    coerceHour(value, fallback, min, max) {
+        const numeric = Number(value);
+        if (Number.isNaN(numeric)) {
+            return fallback;
+        }
+        return Math.min(Math.max(Math.floor(numeric), min), max);
+    }
+    parseDate(value) {
+        if (value == null || value === '') {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }
+    normalize(value) {
+        return String(value ?? '').trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarPresence, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisAvatarPresence, isStandalone: true, selector: "solaris-avatar-presence", inputs: { presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, lastSeenAt: { classPropertyName: "lastSeenAt", publicName: "lastSeenAt", isSignal: true, isRequired: false, transformFunction: null }, quietHours: { classPropertyName: "quietHours", publicName: "quietHours", isSignal: true, isRequired: false, transformFunction: null }, workHoursStart: { classPropertyName: "workHoursStart", publicName: "workHoursStart", isSignal: true, isRequired: false, transformFunction: null }, workHoursEnd: { classPropertyName: "workHoursEnd", publicName: "workHoursEnd", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-avatar-presence\" [attr.title]=\"titleText()\"\r\n  [attr.aria-label]=\"resolvedAriaLabel()\" [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\r\n  [ngClass]=\"[...stateClasses(), shape() === 'square' ? 'shape-square' : 'shape-circle']\">\r\n  <span class=\"solaris-avatar-presence__dot\" aria-hidden=\"true\">\r\n    @if (showDndSlash()) {\r\n      <span class=\"solaris-avatar-presence__slash\"></span>\r\n    }\r\n  </span>\r\n\r\n  @if (showQuietHoursAccent()) {\r\n    <span class=\"solaris-avatar-presence__quiet\" aria-hidden=\"true\">z</span>\r\n  }\r\n</span>\r\n", styles: [".solaris-avatar-presence-host{display:inline-flex}.solaris-avatar-presence{--solaris-avatar-presence-fg: #e5e7ebff;--solaris-avatar-presence-dot-size: 1.8rem;--solaris-avatar-presence-quiet-size: .9rem;--solaris-avatar-presence-slash-width: .2rem;--solaris-avatar-presence-bg: var(--solaris-color-text-muted);--solaris-avatar-presence-ring: .15rem solid var(--solaris-color-surface-2);flex-shrink:0;line-height:1;-webkit-user-select:none;user-select:none;position:relative;display:inline-block;block-size:var(--solaris-avatar-presence-dot-size);inline-size:var(--solaris-avatar-presence-dot-size)}.solaris-avatar-presence__dot{inset:0;block-size:100%;inline-size:100%;min-block-size:0;min-inline-size:0;position:absolute;align-items:center;display:inline-flex;justify-content:center;box-shadow:var(--solaris-shadow-xs);color:var(--solaris-avatar-presence-fg);border-radius:var(--solaris-radius-full);border:var(--solaris-avatar-presence-ring);background:var(--solaris-avatar-presence-bg)}.solaris-avatar-presence.shape-square{--solaris-avatar-presence-dot-size: 1.6rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence__dot{border-radius:.5rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence__quiet{inset-block-end:-.25rem;inset-inline-end:-.05rem}.solaris-avatar-presence__slash{display:block;inline-size:70%;max-inline-size:100%;background:currentColor;border-radius:var(--solaris-radius-full);block-size:var(--solaris-avatar-presence-slash-width)}.solaris-avatar-presence__quiet{border:0;z-index:2;line-height:1;font-weight:900;box-shadow:none;position:absolute;font-size:1.125rem;align-items:center;display:inline-flex;justify-content:center;background:transparent;letter-spacing:-.1em;paint-order:stroke fill;text-transform:lowercase;inset-block-end:-.15rem;inset-inline-end:.15rem;-webkit-text-stroke:2px var(--solaris-color-surface);filter:drop-shadow(0 0 .08rem var(--solaris-color-surface)) drop-shadow(0 0 .08rem var(--solaris-color-surface));color:color-mix(in srgb,var(--solaris-color-text-muted) 92%,transparent)}.solaris-avatar-presence.state-online{--solaris-avatar-presence-bg: var(--solaris-color-success)}.solaris-avatar-presence.state-away{--solaris-avatar-presence-fg: var(--solaris-color-text);--solaris-avatar-presence-bg: var(--solaris-color-warning)}.solaris-avatar-presence.state-busy{--solaris-avatar-presence-bg: var(--solaris-color-error)}.solaris-avatar-presence.state-dnd{--solaris-avatar-presence-bg: color-mix(in srgb, var(--solaris-color-error) 75%, black);--solaris-avatar-presence-fg: color-mix(in srgb, #e5e7ebff 75%, transparent)}.solaris-avatar-presence.state-offline{--solaris-avatar-presence-bg: color-mix(in srgb, var(--solaris-color-text-muted) 60%, black)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarPresence, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-avatar-presence', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-avatar-presence\" [attr.title]=\"titleText()\"\r\n  [attr.aria-label]=\"resolvedAriaLabel()\" [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\r\n  [ngClass]=\"[...stateClasses(), shape() === 'square' ? 'shape-square' : 'shape-circle']\">\r\n  <span class=\"solaris-avatar-presence__dot\" aria-hidden=\"true\">\r\n    @if (showDndSlash()) {\r\n      <span class=\"solaris-avatar-presence__slash\"></span>\r\n    }\r\n  </span>\r\n\r\n  @if (showQuietHoursAccent()) {\r\n    <span class=\"solaris-avatar-presence__quiet\" aria-hidden=\"true\">z</span>\r\n  }\r\n</span>\r\n", styles: [".solaris-avatar-presence-host{display:inline-flex}.solaris-avatar-presence{--solaris-avatar-presence-fg: #e5e7ebff;--solaris-avatar-presence-dot-size: 1.8rem;--solaris-avatar-presence-quiet-size: .9rem;--solaris-avatar-presence-slash-width: .2rem;--solaris-avatar-presence-bg: var(--solaris-color-text-muted);--solaris-avatar-presence-ring: .15rem solid var(--solaris-color-surface-2);flex-shrink:0;line-height:1;-webkit-user-select:none;user-select:none;position:relative;display:inline-block;block-size:var(--solaris-avatar-presence-dot-size);inline-size:var(--solaris-avatar-presence-dot-size)}.solaris-avatar-presence__dot{inset:0;block-size:100%;inline-size:100%;min-block-size:0;min-inline-size:0;position:absolute;align-items:center;display:inline-flex;justify-content:center;box-shadow:var(--solaris-shadow-xs);color:var(--solaris-avatar-presence-fg);border-radius:var(--solaris-radius-full);border:var(--solaris-avatar-presence-ring);background:var(--solaris-avatar-presence-bg)}.solaris-avatar-presence.shape-square{--solaris-avatar-presence-dot-size: 1.6rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence__dot{border-radius:.5rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence__quiet{inset-block-end:-.25rem;inset-inline-end:-.05rem}.solaris-avatar-presence__slash{display:block;inline-size:70%;max-inline-size:100%;background:currentColor;border-radius:var(--solaris-radius-full);block-size:var(--solaris-avatar-presence-slash-width)}.solaris-avatar-presence__quiet{border:0;z-index:2;line-height:1;font-weight:900;box-shadow:none;position:absolute;font-size:1.125rem;align-items:center;display:inline-flex;justify-content:center;background:transparent;letter-spacing:-.1em;paint-order:stroke fill;text-transform:lowercase;inset-block-end:-.15rem;inset-inline-end:.15rem;-webkit-text-stroke:2px var(--solaris-color-surface);filter:drop-shadow(0 0 .08rem var(--solaris-color-surface)) drop-shadow(0 0 .08rem var(--solaris-color-surface));color:color-mix(in srgb,var(--solaris-color-text-muted) 92%,transparent)}.solaris-avatar-presence.state-online{--solaris-avatar-presence-bg: var(--solaris-color-success)}.solaris-avatar-presence.state-away{--solaris-avatar-presence-fg: var(--solaris-color-text);--solaris-avatar-presence-bg: var(--solaris-color-warning)}.solaris-avatar-presence.state-busy{--solaris-avatar-presence-bg: var(--solaris-color-error)}.solaris-avatar-presence.state-dnd{--solaris-avatar-presence-bg: color-mix(in srgb, var(--solaris-color-error) 75%, black);--solaris-avatar-presence-fg: color-mix(in srgb, #e5e7ebff 75%, transparent)}.solaris-avatar-presence.state-offline{--solaris-avatar-presence-bg: color-mix(in srgb, var(--solaris-color-text-muted) 60%, black)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { presence: [{ type: i0.Input, args: [{ isSignal: true, alias: "presence", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], lastSeenAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastSeenAt", required: false }] }], quietHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "quietHours", required: false }] }], workHoursStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursStart", required: false }] }], workHoursEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursEnd", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SolarisAvatar {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    variant = input('auto', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    alt = input(null, ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    initials = input(null, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    color = input('surface', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
+    buttonType = input('button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
+    asButton = input(false, { ...(ngDevMode ? { debugName: "asButton" } : {}), transform: booleanAttribute });
+    radius = input(null, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    objectFit = input('cover', ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaHidden = input(false, { ...(ngDevMode ? { debugName: "ariaHidden" } : {}), alias: 'aria-hidden', transform: booleanAttribute });
+    hostClass = 'solaris-avatar-host';
+    imageFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageFailed" }] : []));
+    presetColors = new Set([
+        'primary',
+        'surface',
+        'success',
+        'warning',
+        'error',
+        'info',
+    ]);
+    constructor() {
+        effect(() => {
+            this.src();
+            this.imageFailed.set(false);
+        });
+    }
+    normalizedSrc = computed(() => this.normalize(this.src()), ...(ngDevMode ? [{ debugName: "normalizedSrc" }] : []));
+    normalizedAlt = computed(() => this.normalize(this.alt()), ...(ngDevMode ? [{ debugName: "normalizedAlt" }] : []));
+    normalizedName = computed(() => this.normalize(this.name()), ...(ngDevMode ? [{ debugName: "normalizedName" }] : []));
+    normalizedInitials = computed(() => this.normalize(this.initials()), ...(ngDevMode ? [{ debugName: "normalizedInitials" }] : []));
+    normalizedAriaLabel = computed(() => this.normalize(this.ariaLabel()), ...(ngDevMode ? [{ debugName: "normalizedAriaLabel" }] : []));
+    resolvedInitials = computed(() => {
+        const explicit = this.normalizedInitials();
+        if (explicit)
+            return explicit.slice(0, 2).toUpperCase();
+        const name = this.normalizedName();
+        if (!name)
+            return '';
+        const parts = name.split(/\s+/).map(part => part.trim()).filter(Boolean);
+        if (!parts.length)
+            return '';
+        if (parts.length === 1)
+            return parts[0].slice(0, 1).toUpperCase();
+        const first = parts[0]?.slice(0, 1) ?? '';
+        const last = parts.at(-1)?.slice(0, 1) ?? '';
+        return `${first}${last}`.toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : []));
+    showImage = computed(() => {
+        if (this.loading())
+            return false;
+        const variant = this.variant();
+        if (variant === 'letter' || variant === 'default')
+            return false;
+        return !!this.normalizedSrc() && !this.imageFailed();
+    }, ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+    showLetter = computed(() => {
+        if (this.loading())
+            return false;
+        const variant = this.variant();
+        const initials = this.resolvedInitials();
+        if (!initials)
+            return false;
+        if (variant === 'letter')
+            return true;
+        if (variant === 'default')
+            return false;
+        return !this.showImage();
+    }, ...(ngDevMode ? [{ debugName: "showLetter" }] : []));
+    showDefault = computed(() => {
+        if (this.loading())
+            return false;
+        return !this.showImage() && !this.showLetter();
+    }, ...(ngDevMode ? [{ debugName: "showDefault" }] : []));
+    isCustomColor = computed(() => !this.presetColors.has(this.color()), ...(ngDevMode ? [{ debugName: "isCustomColor" }] : []));
+    colorClass = computed(() => {
+        return this.isCustomColor() ? 'color-custom' : `color-${this.color()}`;
+    }, ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
+    customColorValue = computed(() => {
+        return this.isCustomColor() ? String(this.color()) : null;
+    }, ...(ngDevMode ? [{ debugName: "customColorValue" }] : []));
+    resolvedRadius = computed(() => {
+        const radius = this.normalize(this.radius());
+        if (!radius) {
+            return this.shape() === 'circle'
+                ? 'var(--solaris-avatar-radius-circle)'
+                : 'var(--solaris-avatar-radius-square)';
+        }
+        switch (radius) {
+            case 'none': return 'var(--solaris-radius-none)';
+            case 'sm': return 'var(--solaris-radius-sm)';
+            case 'md': return 'var(--solaris-radius-md)';
+            case 'lg': return 'var(--solaris-radius-lg)';
+            case 'full': return 'var(--solaris-radius-full)';
+            default: return radius;
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : []));
+    rootClasses = computed(() => ([
+        `size-${this.size()}`,
+        `shape-${this.shape()}`,
+        this.colorClass(),
+        this.interactive() ? 'is-interactive' : '',
+        this.disabled() ? 'is-disabled' : '',
+        this.loading() ? 'is-loading' : '',
+        this.asButton() ? 'is-button' : '',
+    ]), ...(ngDevMode ? [{ debugName: "rootClasses" }] : []));
+    accessibleLabel = computed(() => {
+        if (this.ariaHidden())
+            return null;
+        return this.normalizedAriaLabel()
+            || this.normalizedAlt()
+            || this.normalizedName()
+            || this.resolvedInitials()
+            || 'Avatar';
+    }, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : []));
+    rootRole = computed(() => {
+        if (this.ariaHidden() || this.asButton())
+            return null;
+        return 'img';
+    }, ...(ngDevMode ? [{ debugName: "rootRole" }] : []));
+    onImageLoad() {
+        this.imageFailed.set(false);
+    }
+    onImageError() {
+        this.imageFailed.set(true);
+    }
+    normalize(value) {
+        return String(value ?? '').trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisAvatar, isStandalone: true, selector: "solaris-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (asButton()) {\r\n  <button class=\"solaris-avatar\" [ngClass]=\"rootClasses()\" [type]=\"buttonType()\" [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"accessibleLabel()\" [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\r\n    [style.--solaris-avatar-radius]=\"resolvedRadius()\" [style.--solaris-avatar-image-fit]=\"objectFit()\"\r\n    [style.--solaris-avatar-custom-bg]=\"customColorValue()\">\r\n    <span class=\"solaris-avatar__body\">\r\n      @if (loading()) {\r\n        <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\r\n      } @else if (showImage()) {\r\n        <img class=\"solaris-avatar__image\" [src]=\"normalizedSrc()\" alt=\"\" aria-hidden=\"true\"\r\n          decoding=\"async\" (load)=\"onImageLoad()\" (error)=\"onImageError()\">\r\n      } @else if (showLetter()) {\r\n        <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\r\n          {{ resolvedInitials() }}\r\n        </span>\r\n      } @else if (showDefault()) {\r\n        <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\r\n          <svg class=\"solaris-avatar__placeholder-svg\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"\r\n               xmlns=\"http://www.w3.org/2000/svg\">\r\n            <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\r\n            <path class=\"solaris-avatar__placeholder-body\" d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"></path>\r\n          </svg>\r\n        </span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </button>\r\n} @else {\r\n  <span class=\"solaris-avatar\" [ngClass]=\"rootClasses()\" [attr.role]=\"rootRole()\" [attr.aria-label]=\"accessibleLabel()\"\r\n    [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\" [style.--solaris-avatar-radius]=\"resolvedRadius()\"\r\n    [style.--solaris-avatar-image-fit]=\"objectFit()\" [style.--solaris-avatar-custom-bg]=\"customColorValue()\">\r\n    <span class=\"solaris-avatar__body\">\r\n      @if (loading()) {\r\n        <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\r\n      } @else if (showImage()) {\r\n        <img class=\"solaris-avatar__image\" [src]=\"normalizedSrc()\" alt=\"\" aria-hidden=\"true\"\r\n             decoding=\"async\" (load)=\"onImageLoad()\" (error)=\"onImageError()\">\r\n      } @else if (showLetter()) {\r\n        <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\r\n      } @else if (showDefault()) {\r\n        <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\r\n          <svg class=\"solaris-avatar__placeholder-svg\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"\r\n               xmlns=\"http://www.w3.org/2000/svg\">\r\n            <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\r\n            <path class=\"solaris-avatar__placeholder-body\" d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"></path>\r\n          </svg>\r\n        </span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </span>\r\n}\r\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow .15s ease,transform .15s ease,opacity .15s ease}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,white 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-avatar-shimmer 1.2s linear infinite}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, white);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, white);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, white);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, black);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}@keyframes solaris-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-avatar', standalone: true, imports: [
+                        NgClass
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (asButton()) {\r\n  <button class=\"solaris-avatar\" [ngClass]=\"rootClasses()\" [type]=\"buttonType()\" [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"accessibleLabel()\" [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\r\n    [style.--solaris-avatar-radius]=\"resolvedRadius()\" [style.--solaris-avatar-image-fit]=\"objectFit()\"\r\n    [style.--solaris-avatar-custom-bg]=\"customColorValue()\">\r\n    <span class=\"solaris-avatar__body\">\r\n      @if (loading()) {\r\n        <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\r\n      } @else if (showImage()) {\r\n        <img class=\"solaris-avatar__image\" [src]=\"normalizedSrc()\" alt=\"\" aria-hidden=\"true\"\r\n          decoding=\"async\" (load)=\"onImageLoad()\" (error)=\"onImageError()\">\r\n      } @else if (showLetter()) {\r\n        <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\r\n          {{ resolvedInitials() }}\r\n        </span>\r\n      } @else if (showDefault()) {\r\n        <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\r\n          <svg class=\"solaris-avatar__placeholder-svg\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"\r\n               xmlns=\"http://www.w3.org/2000/svg\">\r\n            <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\r\n            <path class=\"solaris-avatar__placeholder-body\" d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"></path>\r\n          </svg>\r\n        </span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </button>\r\n} @else {\r\n  <span class=\"solaris-avatar\" [ngClass]=\"rootClasses()\" [attr.role]=\"rootRole()\" [attr.aria-label]=\"accessibleLabel()\"\r\n    [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\" [style.--solaris-avatar-radius]=\"resolvedRadius()\"\r\n    [style.--solaris-avatar-image-fit]=\"objectFit()\" [style.--solaris-avatar-custom-bg]=\"customColorValue()\">\r\n    <span class=\"solaris-avatar__body\">\r\n      @if (loading()) {\r\n        <span class=\"solaris-avatar__skeleton\" aria-hidden=\"true\"></span>\r\n      } @else if (showImage()) {\r\n        <img class=\"solaris-avatar__image\" [src]=\"normalizedSrc()\" alt=\"\" aria-hidden=\"true\"\r\n             decoding=\"async\" (load)=\"onImageLoad()\" (error)=\"onImageError()\">\r\n      } @else if (showLetter()) {\r\n        <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\r\n      } @else if (showDefault()) {\r\n        <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\r\n          <svg class=\"solaris-avatar__placeholder-svg\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"\r\n               xmlns=\"http://www.w3.org/2000/svg\">\r\n            <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\r\n            <path class=\"solaris-avatar__placeholder-body\" d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"></path>\r\n          </svg>\r\n        </span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </span>\r\n}\r\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow .15s ease,transform .15s ease,opacity .15s ease}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,white 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-avatar-shimmer 1.2s linear infinite}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, white);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, white);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, white);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, black);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, white);--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}@keyframes solaris-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], asButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "asButton", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SolarisPresenceAvatar {
+    translationService = inject(SOLARIS_TRANSLATION);
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    variant = input('auto', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    alt = input(null, ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    initials = input(null, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    color = input('surface', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
+    buttonType = input('button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
+    asButton = input(false, { ...(ngDevMode ? { debugName: "asButton" } : {}), transform: booleanAttribute });
+    radius = input(null, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    objectFit = input('cover', ...(ngDevMode ? [{ debugName: "objectFit" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaHidden = input(false, { ...(ngDevMode ? { debugName: "ariaHidden" } : {}), alias: 'aria-hidden', transform: booleanAttribute });
+    presence = input('offline', ...(ngDevMode ? [{ debugName: "presence" }] : []));
+    presenceAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "presenceAriaLabel" }] : []));
+    timezone = input(null, ...(ngDevMode ? [{ debugName: "timezone" }] : []));
+    lastSeenAt = input(null, ...(ngDevMode ? [{ debugName: "lastSeenAt" }] : []));
+    quietHours = input('auto', ...(ngDevMode ? [{ debugName: "quietHours" }] : []));
+    workHoursStart = input(9, ...(ngDevMode ? [{ debugName: "workHoursStart" }] : []));
+    workHoursEnd = input(18, ...(ngDevMode ? [{ debugName: "workHoursEnd" }] : []));
+    presenceTooltipKey = computed(() => {
+        return this.translationService.translate(`ui.solaris.avatar.presence.states.${this.presence()}`);
+    }, ...(ngDevMode ? [{ debugName: "presenceTooltipKey" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPresenceAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: SolarisPresenceAvatar, isStandalone: true, selector: "solaris-presence-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, presenceAriaLabel: { classPropertyName: "presenceAriaLabel", publicName: "presenceAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, lastSeenAt: { classPropertyName: "lastSeenAt", publicName: "lastSeenAt", isSignal: true, isRequired: false, transformFunction: null }, quietHours: { classPropertyName: "quietHours", publicName: "quietHours", isSignal: true, isRequired: false, transformFunction: null }, workHoursStart: { classPropertyName: "workHoursStart", publicName: "workHoursStart", isSignal: true, isRequired: false, transformFunction: null }, workHoursEnd: { classPropertyName: "workHoursEnd", publicName: "workHoursEnd", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<solaris-avatar [src]=\"src()\" [alt]=\"alt()\" [name]=\"name()\" [initials]=\"initials()\" [size]=\"size()\" [shape]=\"shape()\"\r\n  [variant]=\"variant()\" [color]=\"color()\" [loading]=\"loading()\" [disabled]=\"disabled()\" [interactive]=\"interactive()\"\r\n  [buttonType]=\"buttonType()\" [asButton]=\"asButton()\" [radius]=\"radius()\" [objectFit]=\"objectFit()\"\r\n  [aria-label]=\"ariaLabel()\" [aria-hidden]=\"ariaHidden()\" solaris-tooltip [tooltip-key]=\"presenceTooltipKey()\"\r\n  tooltip-variant=\"default\" tooltip-size=\"sm\" tooltip-prefix-icon=\"ph ph-info\">\r\n\r\n  <span solaris-avatar-overlay class=\"solaris-presence-avatar__overlay\" aria-hidden=\"true\">\r\n    <solaris-avatar-presence [presence]=\"presence()\" [timezone]=\"timezone()\" [lastSeenAt]=\"lastSeenAt()\"\r\n      [quietHours]=\"quietHours()\" [workHoursStart]=\"workHoursStart()\" [workHoursEnd]=\"workHoursEnd()\"\r\n      [aria-label]=\"presenceAriaLabel()\" [aria-hidden]=\"ariaHidden()\" [shape]=\"shape()\">\r\n    </solaris-avatar-presence>\r\n  </span>\r\n</solaris-avatar>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-presence-avatar__overlay{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host(.shape-square) .solaris-presence-avatar__overlay{transform:translate(18%,18%)}\n"], dependencies: [{ kind: "component", type: SolarisAvatar, selector: "solaris-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden"] }, { kind: "component", type: SolarisAvatarPresence, selector: "solaris-avatar-presence", inputs: ["presence", "timezone", "lastSeenAt", "quietHours", "workHoursStart", "workHoursEnd", "shape", "aria-label", "aria-hidden"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip]", inputs: ["solaris-tooltip", "tooltip-position", "tooltip-variant", "tooltip-size", "tooltip-prefix-icon", "tooltip-disabled", "tooltip-show-delay", "tooltip-hide-delay", "tooltip-offset", "tooltip-auto-flip", "tooltip-auto-shift", "tooltip-viewport-padding", "tooltip-key", "tooltip-params"] }, { kind: "directive", type: SolarisAvatarOverlayDirective, selector: "[solaris-avatar-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPresenceAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-presence-avatar', standalone: true, imports: [
+                        SolarisAvatar,
+                        SolarisAvatarPresence,
+                        SolarisTooltipDirective,
+                        SolarisAvatarOverlayDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-avatar [src]=\"src()\" [alt]=\"alt()\" [name]=\"name()\" [initials]=\"initials()\" [size]=\"size()\" [shape]=\"shape()\"\r\n  [variant]=\"variant()\" [color]=\"color()\" [loading]=\"loading()\" [disabled]=\"disabled()\" [interactive]=\"interactive()\"\r\n  [buttonType]=\"buttonType()\" [asButton]=\"asButton()\" [radius]=\"radius()\" [objectFit]=\"objectFit()\"\r\n  [aria-label]=\"ariaLabel()\" [aria-hidden]=\"ariaHidden()\" solaris-tooltip [tooltip-key]=\"presenceTooltipKey()\"\r\n  tooltip-variant=\"default\" tooltip-size=\"sm\" tooltip-prefix-icon=\"ph ph-info\">\r\n\r\n  <span solaris-avatar-overlay class=\"solaris-presence-avatar__overlay\" aria-hidden=\"true\">\r\n    <solaris-avatar-presence [presence]=\"presence()\" [timezone]=\"timezone()\" [lastSeenAt]=\"lastSeenAt()\"\r\n      [quietHours]=\"quietHours()\" [workHoursStart]=\"workHoursStart()\" [workHoursEnd]=\"workHoursEnd()\"\r\n      [aria-label]=\"presenceAriaLabel()\" [aria-hidden]=\"ariaHidden()\" [shape]=\"shape()\">\r\n    </solaris-avatar-presence>\r\n  </span>\r\n</solaris-avatar>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-presence-avatar__overlay{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host(.shape-square) .solaris-presence-avatar__overlay{transform:translate(18%,18%)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], asButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "asButton", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], presence: [{ type: i0.Input, args: [{ isSignal: true, alias: "presence", required: false }] }], presenceAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenceAriaLabel", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], lastSeenAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastSeenAt", required: false }] }], quietHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "quietHours", required: false }] }], workHoursStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursStart", required: false }] }], workHoursEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursEnd", required: false }] }] } });
+
+class SolarisAvatarStack {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    max = input(4, { ...(ngDevMode ? { debugName: "max" } : {}), transform: numberAttribute });
+    showPresence = input(false, { ...(ngDevMode ? { debugName: "showPresence" } : {}), transform: booleanAttribute });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    overlap = input('md', ...(ngDevMode ? [{ debugName: "overlap" }] : []));
+    visibleItems = computed(() => {
+        const max = Math.max(1, this.max());
+        return this.items().slice(0, max);
+    }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    hiddenCount = computed(() => {
+        return Math.max(0, this.items().length - this.visibleItems().length);
+    }, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : []));
+    hasHiddenItems = computed(() => this.hiddenCount() > 0, ...(ngDevMode ? [{ debugName: "hasHiddenItems" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisAvatarStack, isStandalone: true, selector: "solaris-avatar-stack", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showPresence: { classPropertyName: "showPresence", publicName: "showPresence", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"solaris-avatar-stack\" [attr.data-size]=\"size()\"\r\n  [attr.data-shape]=\"shape()\" [attr.data-overlap]=\"overlap()\">\r\n  @for (item of visibleItems(); track item.name ?? item.src ?? $index) {\r\n    <span class=\"solaris-avatar-stack__item\">\r\n      @if (showPresence()) {\r\n        <solaris-presence-avatar [size]=\"size()\" [shape]=\"shape()\" [src]=\"item.src ?? null\" [alt]=\"item.alt ?? null\"\r\n          [name]=\"item.name ?? null\" [initials]=\"item.initials ?? null\" [presence]=\"item.presence ?? 'offline'\"\r\n          [timezone]=\"item.timezone ?? null\" [lastSeenAt]=\"item.lastSeenAt ?? null\" [quietHours]=\"item.quietHours ?? false\"/>\r\n      } @else {\r\n        <solaris-avatar [size]=\"size()\" [shape]=\"shape()\" [src]=\"item.src ?? null\" [alt]=\"item.alt ?? null\"\r\n          [name]=\"item.name ?? null\" [initials]=\"item.initials ?? null\"/>\r\n      }\r\n    </span>\r\n  }\r\n\r\n  @if (hasHiddenItems()) {\r\n    <span class=\"solaris-avatar-stack__item solaris-avatar-stack__more\">\r\n      +{{ hiddenCount() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-stack{--solaris-avatar-stack-overlap: -.8rem;--solaris-avatar-stack-more-size: 4rem;--solaris-avatar-stack-more-bg: var(--solaris-color-surface-2);--solaris-avatar-stack-more-fg: var(--solaris-color-text);--solaris-avatar-stack-ring: .2rem solid var(--solaris-color-surface);isolation:isolate;align-items:center;display:inline-flex}.solaris-avatar-stack[data-overlap=sm]{--solaris-avatar-stack-overlap: -.4rem}.solaris-avatar-stack[data-overlap=md]{--solaris-avatar-stack-overlap: -.8rem}.solaris-avatar-stack[data-overlap=lg]{--solaris-avatar-stack-overlap: -1.2rem}.solaris-avatar-stack__item{flex:0 0 auto;position:relative;display:inline-flex;border-radius:var(--solaris-radius-full)}.solaris-avatar-stack__item+.solaris-avatar-stack__item{margin-inline-start:var(--solaris-avatar-stack-overlap)}.solaris-avatar-stack__item:nth-child(1){z-index:5}.solaris-avatar-stack__item:nth-child(2){z-index:4}.solaris-avatar-stack__item:nth-child(3){z-index:3}.solaris-avatar-stack__item:nth-child(4){z-index:2}.solaris-avatar-stack__item:nth-child(5){z-index:1}.solaris-avatar-stack__item solaris-presence-avatar{border-radius:inherit;filter:drop-shadow(0 0 0 var(--solaris-color-surface))}.solaris-avatar-stack__more{z-index:10;line-height:1;font-weight:400;place-items:center;display:inline-grid;font-size:var(--solaris-fs-14);box-shadow:var(--solaris-shadow-xs);border:var(--solaris-avatar-stack-ring);border-radius:var(--solaris-radius-full);color:var(--solaris-avatar-stack-more-fg);background:var(--solaris-avatar-stack-more-bg);block-size:var(--solaris-avatar-stack-more-size);inline-size:var(--solaris-avatar-stack-more-size)}.solaris-avatar-stack[data-size=xs]{--solaris-avatar-stack-more-size: 2.4rem;--solaris-avatar-stack-ring: .15rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-size=sm]{--solaris-avatar-stack-more-size: 3.2rem}.solaris-avatar-stack[data-size=md]{--solaris-avatar-stack-more-size: 4rem}.solaris-avatar-stack[data-size=lg]{--solaris-avatar-stack-more-size: 4.8rem}.solaris-avatar-stack[data-size=xl]{--solaris-avatar-stack-more-size: 6.4rem;--solaris-avatar-stack-ring: .25rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack__item,.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack__more{border-radius:var(--solaris-radius-md)}.solaris-avatar-stack__item.solaris-avatar-stack__more{z-index:20}\n"], dependencies: [{ kind: "component", type: SolarisPresenceAvatar, selector: "solaris-presence-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden", "presence", "presenceAriaLabel", "timezone", "lastSeenAt", "quietHours", "workHoursStart", "workHoursEnd"] }, { kind: "component", type: SolarisAvatar, selector: "solaris-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarStack, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-avatar-stack', standalone: true, imports: [
+                        SolarisPresenceAvatar,
+                        SolarisAvatar
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-avatar-stack\" [attr.data-size]=\"size()\"\r\n  [attr.data-shape]=\"shape()\" [attr.data-overlap]=\"overlap()\">\r\n  @for (item of visibleItems(); track item.name ?? item.src ?? $index) {\r\n    <span class=\"solaris-avatar-stack__item\">\r\n      @if (showPresence()) {\r\n        <solaris-presence-avatar [size]=\"size()\" [shape]=\"shape()\" [src]=\"item.src ?? null\" [alt]=\"item.alt ?? null\"\r\n          [name]=\"item.name ?? null\" [initials]=\"item.initials ?? null\" [presence]=\"item.presence ?? 'offline'\"\r\n          [timezone]=\"item.timezone ?? null\" [lastSeenAt]=\"item.lastSeenAt ?? null\" [quietHours]=\"item.quietHours ?? false\"/>\r\n      } @else {\r\n        <solaris-avatar [size]=\"size()\" [shape]=\"shape()\" [src]=\"item.src ?? null\" [alt]=\"item.alt ?? null\"\r\n          [name]=\"item.name ?? null\" [initials]=\"item.initials ?? null\"/>\r\n      }\r\n    </span>\r\n  }\r\n\r\n  @if (hasHiddenItems()) {\r\n    <span class=\"solaris-avatar-stack__item solaris-avatar-stack__more\">\r\n      +{{ hiddenCount() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-stack{--solaris-avatar-stack-overlap: -.8rem;--solaris-avatar-stack-more-size: 4rem;--solaris-avatar-stack-more-bg: var(--solaris-color-surface-2);--solaris-avatar-stack-more-fg: var(--solaris-color-text);--solaris-avatar-stack-ring: .2rem solid var(--solaris-color-surface);isolation:isolate;align-items:center;display:inline-flex}.solaris-avatar-stack[data-overlap=sm]{--solaris-avatar-stack-overlap: -.4rem}.solaris-avatar-stack[data-overlap=md]{--solaris-avatar-stack-overlap: -.8rem}.solaris-avatar-stack[data-overlap=lg]{--solaris-avatar-stack-overlap: -1.2rem}.solaris-avatar-stack__item{flex:0 0 auto;position:relative;display:inline-flex;border-radius:var(--solaris-radius-full)}.solaris-avatar-stack__item+.solaris-avatar-stack__item{margin-inline-start:var(--solaris-avatar-stack-overlap)}.solaris-avatar-stack__item:nth-child(1){z-index:5}.solaris-avatar-stack__item:nth-child(2){z-index:4}.solaris-avatar-stack__item:nth-child(3){z-index:3}.solaris-avatar-stack__item:nth-child(4){z-index:2}.solaris-avatar-stack__item:nth-child(5){z-index:1}.solaris-avatar-stack__item solaris-presence-avatar{border-radius:inherit;filter:drop-shadow(0 0 0 var(--solaris-color-surface))}.solaris-avatar-stack__more{z-index:10;line-height:1;font-weight:400;place-items:center;display:inline-grid;font-size:var(--solaris-fs-14);box-shadow:var(--solaris-shadow-xs);border:var(--solaris-avatar-stack-ring);border-radius:var(--solaris-radius-full);color:var(--solaris-avatar-stack-more-fg);background:var(--solaris-avatar-stack-more-bg);block-size:var(--solaris-avatar-stack-more-size);inline-size:var(--solaris-avatar-stack-more-size)}.solaris-avatar-stack[data-size=xs]{--solaris-avatar-stack-more-size: 2.4rem;--solaris-avatar-stack-ring: .15rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-size=sm]{--solaris-avatar-stack-more-size: 3.2rem}.solaris-avatar-stack[data-size=md]{--solaris-avatar-stack-more-size: 4rem}.solaris-avatar-stack[data-size=lg]{--solaris-avatar-stack-more-size: 4.8rem}.solaris-avatar-stack[data-size=xl]{--solaris-avatar-stack-more-size: 6.4rem;--solaris-avatar-stack-ring: .25rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack__item,.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack__more{border-radius:var(--solaris-radius-md)}.solaris-avatar-stack__item.solaris-avatar-stack__more{z-index:20}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showPresence: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresence", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }] } });
+
+class SolarisAvatarDropdown {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    overlap = input('md', ...(ngDevMode ? [{ debugName: "overlap" }] : []));
+    maxVisible = input(4, { ...(ngDevMode ? { debugName: "maxVisible" } : {}), transform: numberAttribute });
+    placement = input('bottom-end', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : {}), transform: booleanAttribute });
+    panelLabel = input('Avatar dropdown', ...(ngDevMode ? [{ debugName: "panelLabel" }] : []));
+    itemSelect = new EventEmitter();
+    openChange = new EventEmitter();
+    onItemClick(item, index, popover) {
+        if (item.disabled)
+            return;
+        this.itemSelect.emit({ item, index });
+        if (this.closeOnSelect()) {
+            popover.setOpen(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisAvatarDropdown, isStandalone: true, selector: "solaris-avatar-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<solaris-popover #popover [placement]=\"placement()\" [offset]=\"8\" [autoFlip]=\"true\" [autoShift]=\"true\"\r\n  [closeOnEscape]=\"true\" [closeOnOutsideClick]=\"true\" panelClass=\"solaris-avatar-dropdown-popover\"\r\n  (openChange)=\"openChange.emit($event)\">\r\n  <button type=\"button\" solaris-popover-trigger class=\"solaris-avatar-dropdown__trigger\" [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"panelLabel()\" [attr.aria-expanded]=\"popover.isOpen() ? 'true' : 'false'\"\r\n    (click)=\"popover.toggle()\">\r\n    <solaris-avatar-stack [items]=\"items()\" [max]=\"maxVisible()\" [size]=\"size()\" [shape]=\"shape()\" [overlap]=\"overlap()\"\r\n      [showPresence]=\"false\"/>\r\n  </button>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-avatar-dropdown__panel\" role=\"listbox\" [attr.aria-label]=\"panelLabel()\">\r\n      @for (item of items(); track item.id ?? item.name ?? item.src ?? $index) {\r\n        <button type=\"button\" class=\"solaris-avatar-dropdown__item\" [disabled]=\"item.disabled\"\r\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n          (click)=\"onItemClick(item, $index, popover)\">\r\n          <solaris-avatar size=\"sm\" [shape]=\"shape()\" [src]=\"item.src ?? null\" [alt]=\"item.alt ?? null\"\r\n            [name]=\"item.name ?? null\" [initials]=\"item.initials ?? null\"/>\r\n\r\n          <span class=\"solaris-avatar-dropdown__item-body\">\r\n            <span class=\"solaris-avatar-dropdown__item-title\">\r\n              {{ item.name || item.initials || 'User' }}\r\n            </span>\r\n          </span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-dropdown__trigger{border:0;margin:0;padding:0;outline:none;font:inherit;color:inherit;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-full)}.solaris-avatar-dropdown__trigger:disabled{opacity:.56;cursor:not-allowed}.solaris-avatar-dropdown__trigger:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 26%,transparent)}.solaris-avatar-dropdown__panel{display:grid;overflow:auto;min-inline-size:22rem;max-inline-size:30rem;gap:var(--solaris-space-1);padding:var(--solaris-space-2);max-block-size:min(32rem,100vh - 4rem)}.solaris-avatar-dropdown__item{border:0;width:100%;min-width:0;font:inherit;display:grid;outline:none;cursor:pointer;text-align:start;align-items:center;background:transparent;gap:var(--solaris-space-3);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);grid-template-columns:auto minmax(0,1fr);transition:background-color .12s ease,color .12s ease,opacity .12s ease}.solaris-avatar-dropdown__item:hover,.solaris-avatar-dropdown__item:focus-visible{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-avatar-dropdown__item:disabled{opacity:.52;cursor:not-allowed}.solaris-avatar-dropdown__item-body{gap:.2rem;display:grid;min-inline-size:0}.solaris-avatar-dropdown__item-title{overflow:hidden;font-weight:650;min-inline-size:0;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-avatar-dropdown__item-description{min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "component", type: SolarisAvatarStack, selector: "solaris-avatar-stack", inputs: ["items", "max", "showPresence", "size", "shape", "overlap"] }, { kind: "component", type: SolarisAvatar, selector: "solaris-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisAvatarDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-avatar-dropdown', standalone: true, imports: [
+                        SolarisPopover,
+                        SolarisPopoverTriggerDirective,
+                        SolarisPopoverPanelDirective,
+                        SolarisAvatarStack,
+                        SolarisAvatar
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover #popover [placement]=\"placement()\" [offset]=\"8\" [autoFlip]=\"true\" [autoShift]=\"true\"\r\n  [closeOnEscape]=\"true\" [closeOnOutsideClick]=\"true\" panelClass=\"solaris-avatar-dropdown-popover\"\r\n  (openChange)=\"openChange.emit($event)\">\r\n  <button type=\"button\" solaris-popover-trigger class=\"solaris-avatar-dropdown__trigger\" [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"panelLabel()\" [attr.aria-expanded]=\"popover.isOpen() ? 'true' : 'false'\"\r\n    (click)=\"popover.toggle()\">\r\n    <solaris-avatar-stack [items]=\"items()\" [max]=\"maxVisible()\" [size]=\"size()\" [shape]=\"shape()\" [overlap]=\"overlap()\"\r\n      [showPresence]=\"false\"/>\r\n  </button>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-avatar-dropdown__panel\" role=\"listbox\" [attr.aria-label]=\"panelLabel()\">\r\n      @for (item of items(); track item.id ?? item.name ?? item.src ?? $index) {\r\n        <button type=\"button\" class=\"solaris-avatar-dropdown__item\" [disabled]=\"item.disabled\"\r\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n          (click)=\"onItemClick(item, $index, popover)\">\r\n          <solaris-avatar size=\"sm\" [shape]=\"shape()\" [src]=\"item.src ?? null\" [alt]=\"item.alt ?? null\"\r\n            [name]=\"item.name ?? null\" [initials]=\"item.initials ?? null\"/>\r\n\r\n          <span class=\"solaris-avatar-dropdown__item-body\">\r\n            <span class=\"solaris-avatar-dropdown__item-title\">\r\n              {{ item.name || item.initials || 'User' }}\r\n            </span>\r\n          </span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-dropdown__trigger{border:0;margin:0;padding:0;outline:none;font:inherit;color:inherit;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-full)}.solaris-avatar-dropdown__trigger:disabled{opacity:.56;cursor:not-allowed}.solaris-avatar-dropdown__trigger:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 26%,transparent)}.solaris-avatar-dropdown__panel{display:grid;overflow:auto;min-inline-size:22rem;max-inline-size:30rem;gap:var(--solaris-space-1);padding:var(--solaris-space-2);max-block-size:min(32rem,100vh - 4rem)}.solaris-avatar-dropdown__item{border:0;width:100%;min-width:0;font:inherit;display:grid;outline:none;cursor:pointer;text-align:start;align-items:center;background:transparent;gap:var(--solaris-space-3);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);grid-template-columns:auto minmax(0,1fr);transition:background-color .12s ease,color .12s ease,opacity .12s ease}.solaris-avatar-dropdown__item:hover,.solaris-avatar-dropdown__item:focus-visible{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-avatar-dropdown__item:disabled{opacity:.52;cursor:not-allowed}.solaris-avatar-dropdown__item-body{gap:.2rem;display:grid;min-inline-size:0}.solaris-avatar-dropdown__item-title{overflow:hidden;font-weight:650;min-inline-size:0;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-avatar-dropdown__item-description{min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], itemSelect: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }] } });
+
+class SolarisCardMediaOverlayDirective {
+    attr = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMediaOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardMediaOverlayDirective, isStandalone: true, selector: "[solaris-card-media-overlay]", host: { properties: { "attr.solaris-card-media-overlay": "this.attr" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMediaOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-card-media-overlay]',
+                    standalone: true,
+                }]
+        }], propDecorators: { attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-card-media-overlay']
+            }] } });
+
+class SolarisCardMedia {
+    variant = input('image', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    alt = input(null, ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    ratio = input('16:9', ...(ngDevMode ? [{ debugName: "ratio" }] : []));
+    fit = input('cover', ...(ngDevMode ? [{ debugName: "fit" }] : []));
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    radius = input('inherit', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    normalizedSrc = computed(() => this.normalize(this.src()), ...(ngDevMode ? [{ debugName: "normalizedSrc" }] : []));
+    normalizedAlt = computed(() => this.normalize(this.alt()), ...(ngDevMode ? [{ debugName: "normalizedAlt" }] : []));
+    showImage = computed(() => {
+        return !this.loading()
+            && this.variant() === 'image'
+            && !!this.normalizedSrc();
+    }, ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+    normalize(value) {
+        return String(value ?? '').trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"solaris-card-media\" [class.is-loading]=\"loading()\" [class.is-disabled]=\"disabled()\" [attr.data-variant]=\"variant()\"\r\n  [attr.data-ratio]=\"ratio()\" [attr.data-align]=\"align()\" [attr.data-radius]=\"radius()\" [style.--solaris-card-media-fit]=\"fit()\">\r\n  <div class=\"solaris-card-media__surface\">\r\n    @if (loading()) {\r\n      <span class=\"solaris-card-media__skeleton\" aria-hidden=\"true\"></span>\r\n    } @else if (showImage()) {\r\n      <img class=\"solaris-card-media__image\" [src]=\"normalizedSrc()\" [alt]=\"normalizedAlt()\" decoding=\"async\">\r\n    } @else {\r\n      <div class=\"solaris-card-media__content\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"solaris-card-media__overlay\">\r\n      <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-card-media{--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent );--solaris-card-media-radius: inherit;--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-min-height: 6rem;position:relative;display:block;min-inline-size:0}.solaris-card-media__surface{position:relative;overflow:hidden;display:grid;place-items:center;min-inline-size:0;min-block-size:var(--solaris-card-media-min-height);background:var(--solaris-card-media-bg);border:1px solid var(--solaris-card-media-border);border-radius:var(--solaris-card-media-radius);box-shadow:var(--solaris-card-media-shadow)}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-radius=none]{--solaris-card-media-radius: 0}.solaris-card-media[data-radius=sm]{--solaris-card-media-radius: var(--solaris-radius-sm)}.solaris-card-media[data-radius=md]{--solaris-card-media-radius: var(--solaris-radius-md)}.solaris-card-media[data-radius=lg]{--solaris-card-media-radius: var(--solaris-radius-lg)}.solaris-card-media[data-radius=inherit]{--solaris-card-media-radius: inherit}.solaris-card-media__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-card-media-fit)}.solaris-card-media__content{inline-size:100%;block-size:100%;min-inline-size:0;display:flex;padding:var(--solaris-space-4)}.solaris-card-media[data-align=start] .solaris-card-media__content{align-items:flex-start;justify-content:flex-start}.solaris-card-media[data-align=center] .solaris-card-media__content{align-items:center;justify-content:center}.solaris-card-media[data-align=end] .solaris-card-media__content{align-items:flex-end;justify-content:flex-end}.solaris-card-media__overlay{position:absolute;inset-block-start:var(--solaris-space-3);inset-inline-end:var(--solaris-space-3);z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-card-media__overlay:empty{display:none}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;display:block;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,white 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-card-media-shimmer 1.2s linear infinite}.solaris-card-media.is-disabled{opacity:.58}.solaris-card-media.is-disabled .solaris-card-media__surface{filter:grayscale(.08)}@keyframes solaris-card-media-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMedia, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-card-media', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-card-media\" [class.is-loading]=\"loading()\" [class.is-disabled]=\"disabled()\" [attr.data-variant]=\"variant()\"\r\n  [attr.data-ratio]=\"ratio()\" [attr.data-align]=\"align()\" [attr.data-radius]=\"radius()\" [style.--solaris-card-media-fit]=\"fit()\">\r\n  <div class=\"solaris-card-media__surface\">\r\n    @if (loading()) {\r\n      <span class=\"solaris-card-media__skeleton\" aria-hidden=\"true\"></span>\r\n    } @else if (showImage()) {\r\n      <img class=\"solaris-card-media__image\" [src]=\"normalizedSrc()\" [alt]=\"normalizedAlt()\" decoding=\"async\">\r\n    } @else {\r\n      <div class=\"solaris-card-media__content\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"solaris-card-media__overlay\">\r\n      <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-card-media{--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent );--solaris-card-media-radius: inherit;--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-min-height: 6rem;position:relative;display:block;min-inline-size:0}.solaris-card-media__surface{position:relative;overflow:hidden;display:grid;place-items:center;min-inline-size:0;min-block-size:var(--solaris-card-media-min-height);background:var(--solaris-card-media-bg);border:1px solid var(--solaris-card-media-border);border-radius:var(--solaris-card-media-radius);box-shadow:var(--solaris-card-media-shadow)}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-radius=none]{--solaris-card-media-radius: 0}.solaris-card-media[data-radius=sm]{--solaris-card-media-radius: var(--solaris-radius-sm)}.solaris-card-media[data-radius=md]{--solaris-card-media-radius: var(--solaris-radius-md)}.solaris-card-media[data-radius=lg]{--solaris-card-media-radius: var(--solaris-radius-lg)}.solaris-card-media[data-radius=inherit]{--solaris-card-media-radius: inherit}.solaris-card-media__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-card-media-fit)}.solaris-card-media__content{inline-size:100%;block-size:100%;min-inline-size:0;display:flex;padding:var(--solaris-space-4)}.solaris-card-media[data-align=start] .solaris-card-media__content{align-items:flex-start;justify-content:flex-start}.solaris-card-media[data-align=center] .solaris-card-media__content{align-items:center;justify-content:center}.solaris-card-media[data-align=end] .solaris-card-media__content{align-items:flex-end;justify-content:flex-end}.solaris-card-media__overlay{position:absolute;inset-block-start:var(--solaris-space-3);inset-inline-end:var(--solaris-space-3);z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-card-media__overlay:empty{display:none}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;display:block;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,white 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-card-media-shimmer 1.2s linear infinite}.solaris-card-media.is-disabled{opacity:.58}.solaris-card-media.is-disabled .solaris-card-media__surface{filter:grayscale(.08)}@keyframes solaris-card-media-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+function sanitizePhoneInput(v) {
+    let s = (v ?? '').replace(/[^\d+\-\s().]/g, '');
+    s = s.replace(/\+/g, (_m, offset) => (offset === 0 ? '+' : ''));
+    return s;
+}
+function insertAtCursor(input, text) {
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    input.value = input.value.slice(0, start) + text + input.value.slice(end);
+    const pos = start + text.length;
+    input.setSelectionRange(pos, pos);
+}
+function enforceMaxDigitsInPlace(input, maxDigits) {
+    if (!maxDigits)
+        return;
+    const v = input.value ?? '';
+    const sanitized = sanitizePhoneInput(v);
+    const digits = (sanitized.match(/\d/g) ?? []).length;
+    if (digits <= maxDigits) {
+        if (sanitized !== v)
+            input.value = sanitized;
+        return;
+    }
+    let digitCount = 0;
+    let out = '';
+    for (const ch of sanitized) {
+        if (/\d/.test(ch)) {
+            if (digitCount >= maxDigits)
+                break;
+            digitCount++;
+        }
+        out += ch;
+    }
+    input.value = out;
 }
 function shouldBlockBeforeInput(ev, cfg) {
     return !!ev.data && !cfg.allowedChars.test(ev.data);
@@ -4883,24 +7224,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
-class FieldErrorComponent {
-    text;
-    textKey;
-    textParams;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FieldErrorComponent, isStandalone: true, selector: "solaris-field-error", inputs: { text: "text", textKey: "textKey", textParams: "textParams" }, ngImport: i0, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n  <span class=\"solaris-field-error__text\">\r\n    @if (textKey) { {{ textKey | translate:textParams }} }\r\n    @else { {{ text }} }\r\n  </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n  <span class=\"solaris-field-error__text\">\r\n    @if (textKey) { {{ textKey | translate:textParams }} }\r\n    @else { {{ text }} }\r\n  </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"] }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], textKey: [{
-                type: Input
-            }], textParams: [{
-                type: Input
-            }] } });
-
 class FormField {
     field = inject(SolarisFormFieldController);
     prefix;
@@ -4910,8 +7233,8 @@ class FormField {
     hintKey = '';
     labelKey = '';
     radius = 'sm';
-    appearance = 'filled';
     showErrors = 'dirtyOrTouched';
+    appearance = 'filled';
     _tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : []));
     customErrorKey = input('', ...(ngDevMode ? [{ debugName: "customErrorKey" }] : []));
     invalid = input(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
@@ -5004,7 +7327,7 @@ class FormField {
         return !!c?.disabled;
     }, ...(ngDevMode ? [{ debugName: "disabledComputed" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             SolarisFormFieldController,
             { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
         ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\"\r\n     [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed() || disabledComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          @if (disabledComputed()) {\r\n            <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-lock-simple\"></i>\r\n            </span>\r\n          } @else {\r\n            <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n            @if (showPasswordToggle()) {\r\n              <solaris-password-toggle></solaris-password-toggle>\r\n            }\r\n\r\n            @if (invalidComputed()) {\r\n              <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n                <i class=\"ph ph-warning-circle\"></i>\r\n              </span>\r\n            }\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}.solaris-form-field[data-disabled=true] .solaris-form-field__frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__frame *,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__prefix,.solaris-form-field[data-disabled=true] .solaris-form-field__suffix,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field[data-disabled=true] .solaris-form-field__frame,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot>*,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot :is(input,textarea,select,button){cursor:not-allowed!important}.solaris-form-field__status--disabled i{line-height:1;font-size:var(--solaris-fs-18)}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -5031,10 +7354,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], radius: [{
                 type: Input
-            }], appearance: [{
-                type: Input
             }], showErrors: [{
                 type: Input
+            }], appearance: [{
+                type: Input
             }], customErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorKey", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], customErrorParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorParams", required: false }] }] } });
 
 class SolarisSelect {
@@ -5770,5 +8093,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonDirective, ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, computePopoverPosition, provideSolarisNotifications, uniqueId };
+export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_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, 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 };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map